前面我们学习了HTML，但是HTML仅仅只是做数据的显示，页面的样式比较简陋，用户体验度不高，所以需要通过CSS来完成对页面的修饰，CSS就是页面的装饰者，给页面化妆，让它更好看。
1 层叠样式表（CSS）
Cascading Style Sheet，简称为css，中文名称层叠样式表或者级联样式表，主要指的是用来装饰HTML页面的一种技术。
css是页面的装饰器，能够将一个简陋难看的页面，装扮的符合大众的审美观。
1.1 css样式的几种写法
在页面开发的时候，一般css有如下几种种写法。
-
在标签的属性style中编写
-
在页面中的style标签中编写
-
在页面外的XX.css文件中编写，使用link标签引入
-
使用@import导入需要的css文件
1.1.1 行内样式
行内样式，又叫做标签样式，主要是写在标签的style属性上，好处是优先级别较高，坏处是只能渲染一个标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>第一个CSS文件</title>
</head>
<body>
<!--通过style属性来设置样式，这个样式是嵌套在标签中,可以称为内嵌样式，
内嵌样式仅仅只是对当前标签有效，内嵌标签中的元素会把在style中的样式替换掉-->
<h2 style="color:#212267;text-decoration:underline;font-size:12px">
这是我的第一个CSS文件
</h2>
</body>
</html>
1.1.2 内嵌样式
内嵌样式，又叫做页面样式，是将 CSS 写在网页源文件的头部，即在 head 间，通过使用 HTML 标签中的 style标签将其包围，其特点是该样式只能在此页使用，解决行内样式多次书写的弊端。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>第一个CSS文件</title>
<style type="text/css">
/*h2表示对页面中的所有的h2的标签都有效*/
h2 {
background: #aa1222;
color: #fff;
}
</style>
</head>
<body>
<h2>
这是另一个h2
</h2>
</body>
</html>
1.1.3 外链接式
链接式通过 HTML 的 link 标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。
首先在页面外部创建一个css文档（xxx.css），后缀名必须是css，在使用link标签引入到需要渲染的页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>第一个CSS文件</title>
<!--此时如果在css02中有相应的h2的设置，并且和style中的有冲突会被覆盖-->
<link rel="stylesheet" href="css02.css" >
</head>
<body>
<h2>
这是另一个h2
</h2>
</body>
</html>
**注意：**对于样式表而言，后定义的会把先定义的样式表覆盖掉。link标签可以放在页面的head中，也可以放在body中，一般建议放在head中，以便于浏览器渲染样式，因为样式在加载完成前需要渲染。
1.1.4 @import
css也提供了一种在css文件中到导入其他css文件的功能 -- @import，这样就可以也可以导入css文件。
<style>
/* @import 是在css中使用url函数导入其他的css文件，是css本身的能力*/
@import url("index.css");
</style>
1.1.5 常见面试题
link和@import的区别
首先，从本质上说，这两种方式都是为了加载css文件，但它们还是存在细微的差别。
1、link属于XHTML标签，而@import完全是css提供的一种方式。link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。
2、加载顺序的差别：当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以浏览@import加载CSS的页面时可能没有样式，网速慢的时候明显可以看到。
3、兼容性的差别：由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。
4、使用dom控制样式时的差别：当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
1.2 css的选择器
CSS在渲染HTML页面是，为了得到HTML中的标签进行样式渲染，为我们提供了大量好用的各种选择器，以便于我们在CSS中拿到HTML的标签进行样式设置。
一般我们会根据使用的频繁率和定义的标准，将css的选择器分为如下几种，方便于我们理解和掌握。
1.2.1 基本选择器
基本选择器是使用概率最高，也是最常被使用的选择器，必须要掌握它。基本选择器包括如下选择器：
-
标签选择器（根据标签名称获取）
-
ID选择器（获取id为xx的标签）
-
类选择器（获取标签中class=xxx的标签）
-
通用选择器（通配符）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /* 不建议使用通配符选择器，建议使用reset.css * { color: red; } */ /* 标签选择器 */ div { color: aqua; } /* id选择器 */ #myprogram { background: yellow; } /* 类选择器题 */ .mylove2 { color: red; } </style> </head> <body> <div id="first" class="mylove" >这个是一个div</div> <p id="myprogram">这个是段落标签</p> <div class="mylove mylove2">这个是一个div</div> <h1>这个是标题</h1> <hr /> <div class="list"> <ul> <li>这是是一个列表1</li> <li>这是是一个列表2</li> <li>这是是一个列表3</li> <li>这是是一个列表4</li> <li>这是是一个列表5</li> <li>这是是一个列表6</li> <li>这是是一个列表7</li> <li>这是是一个列表8</li> <li>这是是一个列表9</li> <li>这是是一个列表10</li> </ul> <li>这是是一个列表8</li> <li>这是是一个列表9</li> <li>这是是一个列表10</li> </div> </body> </html>运行代码结果如下图
注意：标签选择器就是以标签名称为标准选择对应的标签，id则是#id属性来选中标签，注意：一个页面上id必须是唯一的，所以id选择器只能选择一个标签，类选择器是.class属性选择，class属性的值一个页面上允许出现多次，所以class选择器更加灵活，在开发中一般使用最多，通配符选择器不建议使用（*匹配所有标签）。 id相当于身份证号 class相当于姓名
1.2.2 包含选择器
-
子代选择器(获取某个标签的第一级子标签)
-
后代选择器（获取某个标签中的所有的子标签）
-
分组选择符，也叫做逗号选择器（可以同时设定多个标签，使用逗号进行分割）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /* 子代选择器 */ div.list>ul { border: 1px solid red; } /* 后代选择器 */ .list li { border: 1px solid red; } /* 逗号选择器 */ .mylove, #myprogram, h1 { color: #eee; width: 200px; height: 30px; background: skyblue; } </style> </head> <body> <div id="first" class="mylove" >这个是一个div</div> <p id="myprogram">这个是段落标签</p> <div class="mylove mylove2">这个是一个div</div> <h1>这个是标题</h1> <hr /> <div class="list"> <ul> <li>这是是一个列表1</li> <li>这是是一个列表2</li> <li>这是是一个列表3</li> <li>这是是一个列表4</li> <li>这是是一个列表5</li> <li>这是是一个列表6</li> <li>这是是一个列表7</li> <li>这是是一个列表8</li> <li>这是是一个列表9</li> <li>这是是一个列表10</li> </ul> <li>这是是一个列表8</li> <li>这是是一个列表9</li> <li>这是是一个列表10</li> </div> </body> </html>运行结果如图
1.2.3 属性选择器
属性是HTML页面标签重要的部分，所以css也提供专业使用属性来访问标签的选择器。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /* 表示选中的标签中存在某个属性 */ .container[class] { color: red; } div[title] { color: #00FFFF; } /* 确切的等于*/ input[type='text'] { background: red; } /* 属性的值中包含某个值 */ input[type*='e'] { background: red; } /* 以什么开始 */ input[type^='e'] { background: red; } /* 以什么结尾 */ input[type$='rl'] { background: red; } /* +表示下一个标签 */ .msg + p{ border: 1px solid red; } /* 属性名称等于属性值 */ [title="这个是标题"] { color: red; } </style> </head> <body> <div class="container"> 这个是div容器 </div> <div title="这个是标题">这是第二个div</div> <input type="text" name="" id="" value="刘建宏" /> <input type="email" name="" id="" value="liushuaige" /> <input type="url" name="" id="" value="刘欧巴" /> <hr /> <div class="msg">刘建宏是个大帅哥</div> <p id="msg2">这个是段落</p> </body> </html>运行结果如图：
可以看出，属性选择器还是比较好用的。
1.2.3 伪类选择器
同一个标签，根据其不同的种状态，有不同的样式。这就叫做"伪类"。伪类用冒号来表示。比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做"伪类"。
所以早期主要用来渲染a标签的不同状态，现在随着页面的需求，各种标签都开始支持伪类选择器了。
常见的状态主要用如下五种：
:link 超链接点击之前 :visited 链接被访问过之后 :hover “悬停”：鼠标放到标签上的时候 :active “激活”： 鼠标点击标签，但是不松手时 :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）如a标签可以表示不同的状态下的字体颜色
/*让超链接点击之前是红色*/ a:link{ color:red; } /*让超链接点击之后是橙色*/ a:visited{ color:orange; } /*鼠标悬停，放到标签上的时候*/ a:hover{ color:green; } /*鼠标点击链接，但是不松手的时候*/ a:active{ color:black; }注意： ，在css中，这四种状态必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active如果不按照顺序，那么将失效。"爱恨准则"：love hate。必须先爱，后恨。
css陆续提供了大量的伪类选择器供大家使用，如表所示，需要大家掌握其中常用的几个。
选择器 示例 示例说明 :checked input:checked 选择所有选中的表单元素 :disabled input:disabled 选择所有禁用的表单元素 :empty p:empty 选择所有没有子元素的p元素 :enabled input:enabled 选择所有启用的表单元素 :first-of-type p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素 :in-range input:in-range 选择元素指定范围内的值 :invalid input:invalid 选择所有无效的元素 :last-child p:last-child 选择所有p元素的最后一个子元素 :last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素 :not(selector) :not(p) 选择所有p以外的元素 :nth-child(n) p:nth-child(2|2n-1|odd|even) 选择所有 p 元素的父元素的第二个子元素 :nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素 :nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素 :nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素 :only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素 :only-child p:only-child 选择所有仅有一个子元素的p元素 :optional input:optional 选择没有"required"的元素属性 :out-of-range input:out-of-range 选择指定范围以外的值的元素属性 :read-only input:read-only 选择只读属性的元素属性 :read-write input:read-write 选择没有只读属性的元素属性 :required input:required 选择有"required"属性指定的元素属性 :root root 选择文档的根元素 :target #news:target 选择当前活动#news元素(点击URL包含锚的名字) :valid input:valid 选择所有有效值的属性 :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择正在活动链接 :hover a:hover 把鼠标放在链接上的状态 :focus input:focus 选择元素输入后具有焦点 ::first-letter p::first-letter 选择每个p 元素的第一个字母 ::first-line p::first-line 选择每个p元素的第一行 ::first-child p::first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素 ::before p::before 在每个p元素之前插入内容 :after p::after 在每个p元素之后插入内容 ::section p::section 被鼠标选中后的样式 :lang(language) p:lang(it) 为p元素的lang属性选择一个开始值
1.2.4 伪元素选择器
表是css2和css3提供的伪类选择器，在css3中，css还提供了伪元素选择器，也就是这个选择器可以构建一个伪元素，也就是无法提供js等技术访问的的元素，但是确实在页面中存在的，只能使用css渲染的，这样的元素是的css的功能进一步的加强了，这两个元素就是before和after，但是css2已经定义过了这两个选择器，表示之前和之后的选择器，所以就存在这样的写法：
// CSS3将first-line、first-letter、before、after、section专门归类为伪元素
::before 表示css3的伪元素选择器
::after 标签css3的伪元素选择器
::first-letter
::first-line
::section
注意，before和after选择器必须书写content属性。
p::before {
display: inline-block;
content: "s";
width: 10px;
height: 10px;
background: red;
border: 1px solid red;
border-radius: 50%;
}
p::after
{
content:" -- liu";
}
代码运行结果如图：
