一、样式倒入模式
1 行内样式
在标签中添加一个style属性,属性值写要设置的样式
2 内接样式
添加一个style标签,在标签中写要设置的样式
3 外界样式
添加一个link标签,在href中指定要导入的css样式文件的路径
在css样式文件中写样式
二、基本选择器
1 标签选择器
直接写标签名
2 id选择器
#id
3 class类选择器
.类名
三、高级选择器
1 子类选择器
用 大于号
选择的是前一级标签的子标签
div>p_pid{ }
2 后代选择器
用 空格
选择的是前一级标签的后代标签
.cls p{ }
3 并集选择器
用 逗号
选择所有符合条件的标签
p,div,a{ }
4 交集选择器
开头是标签名 后边跟id或类选择器(注意,没有空格)
div.cls{ } 或者div#id{ }
5 通用选择器
* 选择所有的标签
6 属性选择器
1 [属性名] 带这个属性名的标签
2 [属性名='要匹配的属性值'] 带有属性,属性的名符合匹配要求
3 [属性名^='属性值的开头字符串']
4 [属性名$='属性值的结尾字符串']
5 [属性名*='属性值包含的字符串']
7 伪类选择器
a: LoVe HAte
四种状态: 未被访问的链接 link
访问过的链接 visited
鼠标悬停的样式 hover
鼠标按下时的样式 active
选择第一个孩子:
:first-child=>修改相同元素的第一个。
选择最后一个孩子:
:last-child=>修改相同元素的最后一个。
选择指定的孩子:
nth-child(n)=>修改相同元素中指定的那个。
p:first-letter :选择第一个字符
p:before在标签前边添加一个标签内容=>适用于所有相同元素
p:after在标签后边添加一个标签内容=>适用于所有相同元素
8 继承性
子标签可以继承父标签的样式: color, font-, text- line-
9 层叠性
(选择器权重一样的时候)后边添加的样式会覆盖前边的样式
10 权重
id 权重100
类 权重10
标签 权重 1
!important 权重无限大
都有!important 的时候,比较权重
