一、概念
中文名叫层叠样式表，用来设置网页中元素的样式
网页实际上是一个多层的结构，通过css可以分别为网页的每一个层来设置样式，而我们最终看到的只是最上边一层
二、修改元素样式
1.内联样式（行内样式）
在标签内部通过style属性来设置元素的样式，该样式只对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍，并且，当样式发生变化时，必须要一个一个地修改，非常不方便，所以，开发时，一定不使用内联样式
eg.
<p style="color: red; font-size: 60px;">第一个页面</p>
2.内部样式表
将样式编写到head中的style标签里，然后通过CSS选择器来选择元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可 ，更加方便对样式进行复用
但是，该方法只能对一个网页起作用，它里边的样式不能跨页面进行复用
eg.
<head>
<style>
p{
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<p >第一段</p>
<p>第二段</p>
</body>
3.外部样式表
将css样式编写到一个外部的css文件中，然后在head标签中通过link标签引入外部css文件，只要想使用该样式，都可以引用，使样式在不同页面复用，这是最佳使用方式。此外，将样式编写到css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验
格式：
<link rel="stylesheet" href="css文件路径">
eg.
css文件内容：
p{
color: green;
font-size: 50px;
}
而页面的内容：
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p>第一个段落</p>
<p>第二个段落</p>
</body>
三、基本语法
1.注释
/*
...........
*/
2.选择器
通过选择器可以选择页面中的指定元素，比如p的作用就是选中页面中所有p元素
（1）常用选择器
1）元素选择器
①作用：根据标签名来选中指定元素
②语法：
标签名{}
eg.
效果如下：
2）id选择器
①作用：根据元素的id属性值选中一个元素，但是，id只能唯一
②语法
#id属性值{}
eg.
效果如下：
3）类选择器
①作用：根据元素的class属性值选中一组元素，而一个元素可以有多个class属性值，多个class值之间用空格分隔
②语法：
.class属性值
eg1.
效果如下：
eg2.
<style>
.size{
font-size: 20px;
}
</style>
<body>
<p class="green size">浩荡离愁白日斜</p>
</body>
4）通配选择器
①作用：选中页面的所有元素
②语法：*
eg.
*{
color:blueviolet
}
效果如下：
（2）复合选择器
1）交集选择器
①作用：选中同时符合多个条件的元素
②语法
选择器1选择器2 选择器n{}
若有元素选择器，必须用元素选择器开头
eg1.将class为red的元素设置成红色，并将class为red的div 字体大小设置成30px
效果为：
eg2.
<style>
.a.b.c{
color: aquamarine;
}
</style>
<body>
<p class="red a b c">我是p3</p>
</body>
效果如下：
2)选择器分组（并集选择器）
①作用：同时选择多个选择器对应的元素
②语法：
选择器1选择器2选择器n{}
eg1.
<head>
<style>
h1,span{
color: blue;
}
</style>
</head>
<body>
<h1>我是h1</h1>
<span>我是span</span>
</body>
效果如图：
eg2.
同时选中id为b1,p1的元素、元素h1,span,以及class值为red的div，语法为：
b1,p1,h1,span,div.red{
}
（3）关系选择器
1）元素关系
父元素：直接包含子元素的元素叫父元素
子元素：直接被父元素包含的元素叫子元素
祖先元素：直接或间接包含后代元素的的元素叫祖先元素，一个元素的父元素也是它的祖先元素
后代元素：直接或间接被祖先元素包含的元素叫后代元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫兄弟元素
2）子元素选择器
①作用：选中指定父元素的指定子元素
②语法：
父元素 > 子元素
eg1.将div的子元素span设置成橙色
<style>
div > span{
color: orange;
}
</style>
效果如下：
eg2.将一个div的子元素的字体设置成橙色
只要在指定div标签内加上class属性，再用选择器即可
<div class="box">
div.box > span{
color: orange;
}
效果如下：
eg3.将div 的子代元素--p元素，p元素的子代--span元素的字体颜色改为红色
div > p > span{
color: red;
}
效果如下：
3）后代元素选择器
①作用：选中指定元素内的指定后代元素
②语法:
祖先 后代
eg1.修改div的后代的字体颜色
div span{
color: blueviolet;
}
效果如下：
4）兄弟元素选择器
①作用：选择下一个兄弟
语法：前一个+下一个
下一个元素是指从前一个元素往后看，紧挨着它的兄弟元素（中间不能隔着其他元素）
eg.将p元素的兄弟元素的字体颜色改为绿色
p+span{
color: green;
}
效果为：
②作用：选中下面的所有兄弟元素
语法：兄~弟
eg.将p元素的所有兄弟元素的字体元素改为绿色
p~span{
color: green;
}
效果如下：
（4）属性选择器
1）选中含有指定属性的元素
语法：[属性]{}
eg1.将含有属性title的元素的字体改成绿色
<style>
[title]{
color: aquamarine;
}
</style>
效果如下：
eg2.将有title属性的p元素的字体改成绿色
p[title]{
color: aquamarine;
}
效果如下：
2）选中含有指定属性和属性值的元素
语法：[属性名=属性值]
eg3.
将含有title的属性以title为a的p元素的字体变成绿色
p[title=a]{
color: aquamarine;
}
效果如下：
3）选择属性值以指定值开头的元素
语法：[属性名^=指定值]
eg4.选中title属性值以a开头的p元素，将其字体改为绿色
4）选择属性值以指定值结尾的元素
语法：[属性名$=指定值]
5）选择属性值含有某指定值的元素
语法：[属性名*=指定值]
（5）伪类选择器
1）伪类
①定义：
是不存在的，一个特殊的类，用来描述一个元素的特殊状态
，比如，第一个元素、被鼠标移入的元素、被点击的元素
②特点
一情况下，使用:开头
2）对所有子元素进行排序的伪类的使用
: fist-child 第一个子元素
: last-child 最后一个子元素
: nth-child(m) 第m个子元素（m从0开始）
eg.
ul>li : nth-child(4){
color:pink;
}
当m的值为n时，表示全部子元素
eg.
ul>li:nth-child(n){
color:pink;
}
当m的值为2n或even时，表示全部偶数位的子元素
eg.
ul>li:nth-child(2n){
color:orange;
}
当m的值为2n+1或odd时，表示全部奇数位的子元素
注：以上几个伪类的功能是根据所有元素进行排列
如：若第一、二个子元素为span，即如下所示：
eg1.若执行 ul>li:first-child{
color: red;
}
则不会修改成功，因为第一个子元素不是li，而是span
，但若执行 ul>li:nth-child(4){
color:pink;
}
可以成功，结果如下：
3）对同类型子元素进行排序的伪类的使用
：first-of-type
：last-of-type
: nth-of-type()
4）否定伪类
将符合条件的元素从选择器中去除
：not()
执行：
ul>li:not(:nth-child(3)){
color: red;
}
结果如下：
首先，这条语句选中了所有li元素,但是，去除了整体排序为第三个的li元素，所以只有span元素和序号为3的li元素字体不为红色
若执行：
ul>li:not(:nth-of-type(3)){
color: red;
}
结果为：
这条语句同样选中了所有li元素，但是去除第三个li元素
5）超连接的伪类
①:link
表示没访问过的链接（正常的链接）
②:visited
表示访问过的链接，由于隐私原因，该伪类只能改变链接的颜色
以上两个伪类只能与a标签一起使用
③:hover
用来表示鼠标移入的状态
a:hover{
color:blue;
font-size:50px;
}
表示当鼠标移入超链接时，链接会变成蓝色且大小或变成50px
④:active
表示鼠标点击后的效果
a:active{
color:red;
}
表示鼠标点击超链接时，链接元素会变成红色
3.声明块
通过声明块来指定要为元素设置的样式，声明块由一个个声明构成，
声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以：连接，以；结尾，最后一个声明可以不写；
4.伪元素
（1）定义
表示页面中一些特殊的并不真实存在的元素（特殊的位置）
（2）使用
语法：
::开头
①::first-letter 表示第一个字母
结果如下：
②::first-line 表示第一行
p::first-line{
background-color: yellow;
}
结果如下：
③::selection 表示选中的内容
p::selection{
background-color: green;
}
表示鼠标拖拽选中的内容，背景颜色会变成绿色
效果如下：
④::before
元素开始的地方
⑤::after
元素结束的地方
注意：::before与::after的使用必须与content一起使用
div::before{
content: 'abc';
color: deeppink;
}
div::after{
content: 'def';
color: blueviolet;
}
<div>Hello,How are you?</div>
结果为：
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
