CSS（cascading style sheet,层叠式样式表）是用来给HTML标签设置样式的语言。
一、传统CSS2.1选择器
(一)标签选择器和id选择器
标签选择器也称元素选择器、类型选择器。它直接使用元素的标签当做选择器，将选择页面上所有该种标签。
(1)标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅。
(2)标签选择器“覆盖面”大，所以通常用于标签的初始化
ul{
list-style:none;/***去掉无须列表的小圆点***/
}
a{
text-decoration: none; /***去掉超链接的下划线***/
}
标签可以有id属性，是这个标签的唯一标识
id名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写。
<p id="p-style">为中华崛起而读书</p>
#p-style {
font-size: 24px;
color: chartreuse;
}
(二)class选择器
class属性表示“类名”
class命名规范和id命名规范相同。使用点.类名选择指定class的标签。
同一个标签可以同时属于多个类，类名用空格隔开。
<p class="warning spec">这是一个警告</p>
.warning{
color: red;
}
.spec{
font-style:italic /*文字倾斜*/
}
原子类：在制作网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类
(三)复合选择器
复合选择器主要有三类
1.后代选择器例如：.box .spec 选择类名为box的标签内部的类名为spec的标签
CSS选择器中，使用空格表示"后代"
"后代"并不一定是"儿子"，还包括"孙子，曾孙"
后代选择器通过很多空格，隔开好几代
.box ul li .spec em{
color: red
}
<div class="box">
<ul>
<li><p class="spec">我是一个段落<em>红色文字</em><p></li>
</ul>
</div>
2.交集选择器例如：li.spec 选择既是li标签，也属于spec类的标签
3.并集选择器例如：ul,ol 选择所有ul和ol标签
并集选择器也叫做分组选择器，逗号表示分组
ul,ol{
list-style:none
}
(四)伪类
伪类是添加到选择器的描述性词语，
指定要选择的元素的特殊状态。
超级链接拥有四个特殊状态
a:link没有被访问的超级链接
a:visited已经被访问的超级链接
a:hover 正鼠标悬停的超级链接
a:active正被激活的超级链接 (按下按键但是还没有松开按键)
a标签的伪类书写，要按照"爱恨准则"的顺序，否则会有伪类不生效
:link->:visited->:hover->:active
a:link {
color: rgb(84, 6, 241)
}
a:visited {
color: rgb(194, 244, 66);
}
a:hover {
background-color: crimson;
}
a:active {
font-size: 24px;
}
<p> <a href="http://www.163.com" target="_blank">网易</a> </p>
<p> <a href="http://www.jd.com"> 京东 </a> </p>
二、CSS3新增选择器
(一)元素关系选择器
1.子选择器div>p:div的子标签p
当使用
>符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系。.box>p{...}
后代选择器不一定限制时子元素.box p{...}
2.相邻兄弟选择器img+p:图片后面紧跟着的段落将被选中
相邻兄弟选择器
+介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。img+span 就是选择"紧跟在后面的一个span"
3.通用兄弟选择器p~span:p元素之后的多有同层级span元素
(二)序号选择器
- :first-child
表示"选择第一个子元素"，比如下面的例子就表示选择.box1盒子中的第一个p
.box1 p:first-child{color:red;}
- :last-child
表示"选择最后一个子元素"，比如后例就表示选择.box1盒子最后一个p.
.box1 p:last-child{color:red;}
3.:nth-child()
:nth-child()可以选择任意序号的子元素
.box2 p:nth-child(3){color:green;}
:nth-child()可以写成an+b的形式，表示从b开始每个a个选一个，注意不能携程b+an。
.box2 p:nth-child(3n+2){color:green}
2n+1等价于odd表示奇数，2n等价于even，表示偶数
4.:nth-of-type()
选择同种标签指定序号的子元素.
.box4 p:nth-of-type(3){color:blue;}
5.：nth-last-child()和:nth-last-of-type() 都是倒数选择
(三)属性选择器
img[alt]:选择有alt属性的img标签
img[alt="太阳"]：选择alt属性是太阳的img标签
img[alt^=''成都"]：选择alt属性以成都开头的 img标签
img[alt$=''夜景"]: 选择alt属性以夜景结尾的img标签
img[alt*="美"]： 选择alt属性中含有美字的img标签
img[alt~="手机摄影"]： 选择alt属性中有空格隔开的手机拍摄字眼的img标签
img[alt|="参赛作品"]： 选择有alt属性以“参赛作品”开头的img标签
用得少。
(四)CSS3新增伪类
empty选择空标签
focus选择当前获得焦点的表单元素
enabled选择当前有效的表单元素
disabled选择当前无效的表单元素
checked选择当前已经勾选的单选按钮或则复选框
root选择根元素，即<html>标签
(五)伪元素
css3新增“伪元素”特性，表示虚拟动态创建的元素。伪元素用双冒号表示。
::before创建一个伪元素，其将成为匹配选中的，必须设置
content属性表示其中的内容。
::after创建一个伪元素，其将成为匹配选中的，必须设置
content属性表示其中的内容。
<body>
<p><a href="">我是超链一</p>
<p><a href="">我是超链二</p>
</body>
<style>
a::before {
content: '@'
}
a::after {
content: '*'
}
</style>
::selectioncss伪元素应用于
::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母
::first-line会选中某元素中（必须是块级元素）第一行的全部文字
三、层叠性和选择器权重计算
层叠性：
层叠性的冲突处理:
复杂选择器可以通过的形式，计算权重
需要将某个选择器的某条属性提升权重，可以再属性后面添加
四、常用文本样式属性
(一）color属性
color属性可设置.可以使用英语单词、十六进制、rgb()、rgba()等表示法
1.通常使用十六进制表示
color:#ff0000;
2.rgba()表示法：最后一个参数表示透明度，介于0-1之间，0表示纯透明，1表示纯实心。color:rgba(255,0,0,.65)
(二)font-size属性
font-size属性用来设置字号，通常使用px、em、rem为单位，例如： font-size:30px
(三)font-weight
font-weight属性设置字体的粗细程度，通常就用normal和bold两个值
font-weight:normal正常粗细，与400等值
font-weight:bold加粗，与700等值
font-weight:normal更细，大多数中文字体不支持
font-weight:normal更粗，大多数中文字体不支持
(三)font-style属性
font-style属性设置字体的倾斜
font-style:normal取消倾斜，可以把天生倾斜的i、em等标签设置为不倾斜
font-style:italic设置为倾斜字体（常用）
font-style:oblique设置为倾斜字体（用常规字体模拟，不常用）
(四)text-decoration属性
text-decoration:none;没有修饰线
text-decoration:underline;下划线
text-decoration:line-through;删除线
text-decoration属性用于设置文本的修饰线外观（下划线、删除线）
五、字体属性详解
(一)font-family属性
font-family用于设置字体.font-family:"微软雅黑"
1.字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的“后备字体”
font-family:serig,"Times New Roman","微软雅黑"；
2.中文字体也可以使用他们的英语名字表示："微软雅黑"="microsoft Yahei","宋体"="Simsun"
3.为保证通用性，字体。为了用户浏览器正常使用我们自定义的字体，需要保证用户加载网页的时候，同时下载字体文件。
4.字体文件根据操作系统和浏览器的不同，有eot、woff2、woff、ttf、svg文件格式。
（二）定义字体
@font-face定义字体
<style>
@font-face{
font-family:"字体名称"；
font-display:swap;
src:url("eot字体文件位置")；
src:url("eot字体文件位置") format("embedded-opentype"),
src:url("woff2字体文件位置") format("woff2"),
src:url("woff字体文件位置") format("woff"),
src:url("ttf字体文件位置") format("truetype"),
src:url("svg字体文件位置") format("svg")
}
</style>
六、段落和行相关属性
(一)text-indent属性
text-indent定义首行文本内容之前的缩进量。缩进两个字符text-indent:2em;
(二)line-height属性
line-height属性定义行高。
行高字面意思是一行文本的高度，行内居中文本的行高上下间隙应该是一致的。 行高测量定义可以是：上一行文本顶部到下一行文本顶部的纵向距离；也可以是上一行文本底部到下一行文本底部的纵向距离。
1.line-height属性的可以是以px为单位的数值
line-height：30px；
2.line-height属性也可以是没有单位的数值，
line-height：1.5；
2.line-height属性也使用百分数
line-height：150%；
(三)单行文本居中
设置，就可以实现当行文本垂直居中
设置,实现文本水平居中。
(四)font合写属性
font属性可以用来作为font-style,font-weight,font-size,line-height,font-family属性的合写
font:20px/1.6 Arial,"微软雅黑"；
七、继承性
文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后台所有标签中生效。
color、font-开头、list-开头、text-开头、line-开头、
因为继承性，所以通常设置等， 即可设置整个网页的默认样式。
网友评论