-
结构 HTML
-
表现 CSS
-
行为 JS
CSS
CSS
---层叠样式表
---网页实际是一个多层结构，通过css可以分别为网页的每一个层来设置样式
---总之一句话，css用来设置网页中元素的样式
一个样式的列表
层叠？ 样式是分层的结构，一层压一层，俯视
1、行内样式 内联样式（不推荐使用）
<body>
<p style="color: darkred; font-size: 210px;"> 少小离家老大回</p>
</body>
2、样式编写到head中的styple标签中 内部样式表，通过css选择器选中元素，并为其设置各种样式，
可以同时为多个标签设置样式，并且修改时只需要修改一处
内部样式更加方便复用
<style>
p{
color:darksalmon;
font-size: 110px;
}
</style>
3、外部样式表，将css样式编写到一个文件中，然后引入
CSS语法
selectors 选择器
声明块 通过声明块，指定要为元素设置的样式
CSS常用选择器
简单选择器
元素选择器：根据标签名来选中指定元素
?
p{} h1{} div{}
id选择器：根据元素id属性值选中一个元素
?
#box{} #red{}
class 是一个标签属性，它和id类似，不同的是class可以重复，通过class属性来为元素分组
class选择器：根据元素的class来选中一组元素
?
.blue{} .abc{}
通配选择器，选中页面中的所有元素
?
*{}
交集选择器
div.red{
font-size: 30px;
}
?
必须使用元素选择器开头
?
.a.b.c{
font-size: 14px;
}
选择器分组 并集选择器
h1, span{}
子元素选择器
父元素 > 子元素{}
?
div > span{
?
}
后代元素选择器 选中指定元素内的指定后代元素
祖先 后代{}
?
div span{
}
选择下一个兄弟
前一个 + 后一个
p + span {}
选择后边的所有兄弟
p ~ span{}
属性选择器
p[title]{
color: orange;
}
?
[属性名] ： 选择含有指定属性的元素
[属性名=属性值] ：选择含有指定属性和属性值的元素
[属性名^=属性值]: 选择属性值以指定值开始的元素
[属性名$=属性值]: 选择属性值以指定值结尾的元素
[属性名*=属性值]: 通配符
伪类选择器
不存在的类，特殊的类
伪类用来描述一个元素的特殊状态
比如第一个子元素、被点击的元素、鼠标移入的元素...
?
伪类一般情况下都使用：开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 第n个
特殊值：
n 0-+无穷
even / 2n 选择偶数位元素
odd / 2n+1 选择奇数位
?
以上伪类都是根据所有的子元素进行排序
?
:first-of-type
:last-of-type
:nth-of-type
这几个伪类的功能和上述类似，不同点是他们是在同类型中进行排序
?
:not 否定伪类 将符合条件的元素从选择器中去除
超链接的伪类
伪元素
::first-letter 第一个字母
::first-line 第一行
::selection 选中的
?
::before{
content: "abc"
}
::after{
content:"abc"
}
通过befroe after添加的内容无法选中