理解CSS

这是我参与「第四届青训营」笔记创作活动的第2天

一、CSS简介

1、什么是CSS

CSS：Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

2、为什么使用CSS

实现内容与样式的分离，便于团队开发

样式复用，便于网站的后期维护

页面的精确控制，让页面更精美

3、CSS作用

页面外观美化

布局和定位

二、基本用法

1、CSS语法

 <style>
         选择器{
             属性名：属性值;
             属性名：属性值;
         }
     </style>
 </head>

选择器：要修饰的对象（东西）属性名：修饰对象的哪一个属性（样式）属性值：样式的取值示例:

2、CSS应用方式

也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式

2.1 内部样式

也称为内嵌样式，在页面头部通过style标签定义

对当前页面中所有符合样式选择器的标签都起作用

2.2 行内样式

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

2.3 外部样式

使用单独的 .CSS 文件定义，然后在页面中使用 link标签或 @import指令引入

使用 link标签链接外部样式文件

 <link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

提示：type属性可以省略

@import 指令导入外部样式文件

 <style>
     @import "CSS样式文件路径";
     @import url(CSS样式文件路径);
 </style>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
         /* 1.内部样式 */
         p{
             color:blue;
         }
     </style>
     <!-- link链接外部样式文件 -->
     <!-- <link rel="stylesheet" type="text/css" href="style/hello.css"> -->
     <!-- 3.import导入外部样式文件 -->
     <style>
         /* @import "style/hello.css" */
         @import url(style/hello.css);
     </style>
 </head>
 <body>
     <p>welcome to CSS!</p>
     <p>欢迎来到CSS课堂!</p>
     <hr>
     <h2 style="color:red;">WEB前段工程师</h2>
     <h2>JAVA开发工程师</h2>
     <hr>
     <div>嘿嘿</div>
     <div>哈哈</div>
 </body>
 </html>

三、选择器

1、基础选择器

1.1 标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称

以标签名作为样式应用的依据

1.2 类选择器

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

注意事项：

调用时不能添加 . 号同时调用多个类选择器时，以空格分隔类选择器名称不能以数字开头

1.3 ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

以标签的id属性作为样式应用的依据，一对一的关系

2、复杂选择器

2.1 复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用

必须同时满足两个条件才能应用样式

2.2组合选择器

也称为集体声明

将多个具有相同样式的选择器放在一起声明，使用逗号隔开

2.3 嵌套选择器

在某个选择器内部再设置选择器，通过空格隔开

只有满足层次关系最里层的选择器所对应的标签才会应用样式

注意：使用空格时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
         /* 1.标签选择器和类选择器合起来使用----复合选择器 */
         h1.aaa{
             color:red;
         }
         /* 1.标签选择器和ID选择器合起来使用----复合选择器 */
         p#bbb{
             color:blue;
         }
         /* 2.组合选择器 */
         h1,p,div,span,.ccc{
             font-size:30px;
         }
         div{
             background:violet;
         }
         .ccc{
             font-weight:bold;
         }
         /* 3.嵌套选择器 */
         /* div p{
             color:green;
             text-decoration:underline;
         } */
         div>p{
             color:green;
             text-decoration:underline;
         }
         div h3.ddd{
             color:red;
         }
     </style>
 </head>
 <body>
     <!-- 需求：只想修饰class属性为aaa的h1标签 -->
     <h1 class="aaa">welcome</h1>
     <h4 class="aaa">css</h4>
     <h1>hello</h1>
     <hr>
     <!-- 我要修饰ID属性为bbb的p标签 -->
     <p id="bbb">world</p >
     <p>html</p>
     <h1 id="bbb">主讲：叽叽</h1>
     <hr>
     <!-- 给h1、p、div、span标签中的内容设置字号为30px -->
     <h1>hello</h1>
     <p>CSS</p>
     <div>WEB开发</div>
     <span class="ccc">JAVA开发</span>
     <hr>
     <!-- 需求：修饰div内部的p标签 -->
     <div>
         <p>div内部的p标签</p>
         <h3>div内部的h3标签</h3>
     </div>
     <hr>
     <div>
         <h3>
             <p>div内部的h3内部的p标签</p>
         </h3>
     </div>
     <hr>
     <!-- 需求：修饰div内部的class为ddd的标签 -->
     <div>
         <p>div内部的p</p>
         <h3 class="ddd">div内部的h3</h3>
         <p class="ddd">PPPP</p>
     </div>
     <h3 class="ddd">h3h3h3</h3>
 </body>
 </html>

2.4 伪类选择器

根据不同的状态显示不同的样式，一般多用于标签

四种状态：

:link 未访问的链接 :visited 已访问的链接 :hover 鼠标悬浮到连接上，即移动在连接上 :active 选定的链接，被激活注：默认超链接为：蓝色、下划线

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>伪类选择器</title>
     <style>
         /*a:link{
             font-size: 12px;
             color:black;
             text-decoration: none;
         }
         a:visited{
             font-size: 15px;
             color:;
         }
         a:hover{
             font-size: 20px;
             color:blue;
         }
         a:active{
             font-size: 40px;
             color:green;
         }*/
         a:link,a:visited{
             color:#666666;
             font-size: 13px;
             text-decoration: none;
         }
         a:hover,a:active{
             color:#ff7300;
             text-decoration: underline;
         }
         /*普通的标签也可以使用伪类选择器*/
         p:hover{
             color:red;
         }
         p:active{
             color:blue;
         }
     </style>
 </head>
 <body>
     <a href="复杂选择器.html">复杂选择器.html</a>
     <p>CSS从入门到精通！</p>
 </body>
 </html>

示例：

（自己试试，可以变色）

2.5 伪元素选择器

:first-letter 为第一个字符的样式
:first-line 为第一行添加样式
:before 在元素内容的最前面添加的内容，需要配合content属性使用
:after 在元素内容的最后面添加的内容，需要配合content属性使用

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
         p:first-letter{
             color:red;
             font-size:30px;
         }
         p:first-line{
             background:pink;
         }
         p:before{
             content:"嘿嘿";
         }
         p:after{
             content:"哈哈";
         }
     </style>
 </head>
 <body>
     <p>hello world!</p>
     <hr>
     <p>
         hello world! <br>
         welcome to css!
     </p>
 </body>
 </html>

四、盒子模型

1.简介

盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：

width 宽度
height 高度
border 边框
padding 内边距
margin 外边距

2.盒子模型

2.1 border

表示盒子的边框

分为四个方向：

上top、右right、下bottom、左left
border-top、border-right、border-bottom、border-left 每个边框包含三种样式：
border-top-color、border-top-width、border-top-style
border-right-color、border-right-width、border-right-style
border-bottom-color、border-bottom-width、border-bottom-style
border-left-color、border-left-width、border-left-style 样式style的取值：

solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线

简写，三种方式：

按方向简写：

border-top、border-right、border-bottom、border-left

书写顺序：

border-顺序：width style color

按样式简写：

border-color、border-width、border-style

书写顺序：

border-样式：top right bottom left

必须按顺时针方向书写，同时可以缩写：

border-width:2px;--------->四个边框的宽度均为2px
border-width:1px 2px;
border-width:1px 2px 4px;

规则：如果省略，则认为上下一样，左右一样
终级简写：

如果四个边框样式完全相同，border:width style color;

2.2 padding

表示盒子的内边距，即内容与边框之间的距离

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）

注意：如果上下冲突，则以上为准，如果左右冲突，则以左为准

2.3 margin

表示盒子的外边距，即盒子与盒子之间的距离