1 CSS简介
CSS就是层叠样式表，网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层。总之，CSS用来设置网页中元素的样式。
2 使用CSS来修改元素的样式
2.1 内联样式（行内样式）
在标签内部通过style属性来设置元素的样式
缺点：使用内联样式，样式只能对一个标签生效。如果希望影响多个元素必须在每一个元素都要复制一遍，并且当样式发生变化时，我们必须要一个一个的修改，非常不方便，所以在开发时绝对不要使用内联样式！
<p style="color: red;font-size: 25px;">梦想是灯塔,指引人生前进的方向。</p>
2.2 内部样式表
将样式编写到head中的style标签里，然后通过CSS选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用。
缺点：
内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>梦想是灯塔,指引人生前进的方向。</p>
<p>生活就像海洋，只有意志坚强的人才能到达彼岸。</p>
</body>
</html>
效果如下：
2.3 外部样式表（最佳办法）
可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的文件。
外部样式表需要通过link标签进行引入，意味着只要想使用这些样式都可以对其进行引用，样式就可以在不同的网页之间进行复用。
将样式编写到外部的CSS文件中，可以使用到浏览器的缓冲机制，从而加快网页的加载速度。
首先，新建css文件
然后，在网页中用link标签将网页和CSS文件关联起来
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./CSS外部样式表.css">
</head>
<body>
<p>梦想是灯塔,指引人生前进的方向。</p>
<p>生活就像海洋，只有意志坚强的人才能到达彼岸。</p>
</body>
</html>
3 CSS的基本语法
style标签内部与网页不相关，所以不遵循HTML的语法，应遵循CSS语法！
CSS注释 /* */ 注释中的内容会自动被浏览器所忽略
选择器，通过选择器可以选中页面中的指定元素。比如p的作用就是选中页面中所有的p元素。
声明块，通过声明块来指定要为元素设置的样式。声明块由一个一个的声明组成。声明是一个名值对结构，一个样式对应一个样式值，名和值之间以:连接，以;结尾。
p为选择器。font-size: 20px;为声明块，font-size是名，20px是值。
4 常用选择器
4.1 元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
4.2 id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #abc{}
缺点：不可重复使用
错误示范：
4.3 类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值
优点：可以重复使用
效果如下：
多个一起使用
效果如下：
4.4 通配选择器
作用：选中页面中的所有元素
语法：*{}
效果如下：
4.5 交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
原理：
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
示范：
4.6 并集选择器
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
原理：
例如：p,#box,h1.box1,h2{}
示范：
4.7 关系选择器
父元素：直接包含子元素的元素叫做父元素。
子元素：总结被父元素包含的元素是子元素。
祖先元素：直接或间接包含后代元素叫做祖先元素。一个元素的父元素也是它的祖先元素。
后代元素：直接或间接被祖先元素包含的元素叫做后代元素。子元素也是后代元素。
兄弟元素：拥有相同父元素的元素是兄弟元素。
4.7.1 子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
分析：div有两个子元素p和span，p有一个子元素为span。div的后代有p元素、p元素中的span元素和span元素。
4.7.2 后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代
分析：div元素为祖先元素，span.r为交集选择器，同时为div元素的后代元素。
4.7.3 兄弟选择器
选择下一个兄弟
语法：前一个+下一个
选择下边所有的兄弟
语法：兄 ~ 弟
分析：
必须是与p元素紧挨着的往下的span元素！
分析：
p元素下边所以的span元素都有样式。
4.8 属性选择器
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选中含有指定属性和属性值的元素
[属性名^=属性值] 选中属性值以指定值开头的元素
[属性名$=属性值] 选中属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素
例如：
分析：
有title属性的p元素都有样式。
分析：
有title属性且属性值为abc的p元素才有样式。
分析：
有title属性且属性值以abc开头的p元素才有样式。
分析：
有title属性且属性值以e结尾的p元素才有样式。
分析：
有title属性且属性值含有b的p元素有样式。
5 伪类选择器
伪类，即不存在的类，特殊的类。
伪类用来描述一个元素的特殊状态。比如：第一个子元素、被点击的元素、鼠标移入的元素……
伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
:first-of-type
:first-of-type
:nth-of-type()
这几个伪类的功能和上述的类似，不同点是child是大分类排序，type是小分类排序。
:not()否定伪类，将符合条件的元素从选择器中去除。
例题：要求第一个li元素字体为红色。
能达到题目的要求，但是在第一个元素之上插入li元素，插入元素为第一位，但是没有红色字体，
所以采用伪类选择器。
例题：要求第最后一个li元素字体为红色。
ul>li:last-child{
color: red;
}
例题：要求第三个li元素字体为红色。
ul>li:nth-child(3){
color: red;
}
如果在第一个li元素之上插入其他元素如：
则不符合要求，这是需要使用nth-of-type()小分类进行排序，如下：
ul>li:nth-of-type(3){
color: red;
}
其他小分类排序，
表示选中偶数位的元素
ul>li:nth-of-type(even){
color: red;
}
表示选中奇数位的元素
ul>li:nth-of-type(odd){
color: red;
}
例题：除了第二个li元素不为红色，其他元素都为红色。
6 a标签的伪类
:link 用来表示没有访问过的连接
:visited 用来表示访问过的连接，由于隐私的原因，所以visited伪类只能修改链接的颜色
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击
百度网址访问过，所以是橙色的，baidu12345没有访问过，所以是红色的。
a:hover{
font-size: 50px;
}
鼠标移入网址（不点击网址），字体变成50px。
a:active{
color: yellow;
}
鼠标点击网址，网址变成黄色。
7 伪元素
伪元素，表示页面中一些特殊的并不真实存在的元素（特殊位置）
伪元素使用::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selecttion 表示选中的内容
::before 元素的开始，内容无法被鼠标选中，属于CSS的内容
::after 元素的最后，内容无法被鼠标选中，属于CSS的内容
before和after必须结合content属性来使用
这一段话的首字母字体大小为40px。
这段话的第一行的背景颜色为黄色。
鼠标选中的内容的背景颜色为橙色。
在文字最前面加红色abc，在文件最后面加蓝色123。
8 样式继承
样式的继承，我们为一个元素设置样式的同时也会应用到它的后代元素上。
继承是发生在祖先后代之间的。
继承的设计是为了方便我们的开发，利用继承可以将一些通用的样式统一设置到共同祖先元素上，这样只需设置一次即可让所有的元素都具有该样式。
注意：并不是所有的样式都会被继承，比如：背景相关的，布局相关的这些样式都不会被继承。
div中的span继承p元素样式为蓝色字体，ul中的li继承ul元素样式为红色字体，p中的span元素继承样式为绿色字体。
问题：为什么div中span的背景为橙色？（背景颜色是不会被继承的）
div中span的背景颜色默认为透明的，div的颜色覆盖了透明的颜色，所以span的背景颜色为div的背景颜色。
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
