一.css是什么
css(cascading style sheet)定义如何显示HTML元素,给HTML设置样式,显得更为美观.
二.css的引入方式
1.行内引入
在标签中添加一个style是属性,属性值就是设置的样式
2.内接引入
在head标签中添加一个style标签,在标签内写要设置的样式
3.外界引入
在head标签中添加link标签,href中指定要导入的css样式文件路径,在css文件中写样式
三.css基础选择器
1.标签选择器
直接写标签名{} eg:div{}
2.id选择器
#id{}
3.class选择器
.class{}
四.高级选择器
1.子类选择器
div>p{},选择的是前一级标签div的子标签p
2.后代选择器
div p{},选择的是div标签中的后代子标签p
3.并集选择器
div,p{},选择多个标签,用逗号隔开
4.交集选择器
div.class{},选择div标签下的class类标签
div#id{},选择div标签下的id标签
5.通用选择器
*{},选择所有的标签
6.属性选择器
[属性名] 带这个属性名的标签
[属性名="匹配的属性值"] 符合匹配属性的标签
[属性名^="匹配的属性值"] 符合以这个属性值开头的标签
[属性名$="匹配的属性值"] 符合以这个属性值结尾的标签
[属性名*="匹配的属性值"] 包含这个属性值的标签
7.伪类选择器
a标签中的四种状态:
未被访问过的链接 a:link{}
访问过的链接 a:visited{}
鼠标悬浮链接 a:hover{}
鼠标点击链接 a:active{}
ul标签中的伪类选择器
选择第一个孩子 ul li:first-child{}
选择最后一个孩子 ul li:last-child{}
选择指定的孩子 ul li:nth-child(n){}
p标签中方的伪类选择器
选择第一个字符 p:first-letter{}
在标签前添加一个内容 p:before{}
在标签后添加一个内瓤 p:after{}
五.选择器的优先级
1.继承性:子标签可以继承父标签的样式
2.层叠性:(选择器权重一样的时候)后添加的样式会覆盖前边的样式
3.权重:!important>内联>id>类>标签