目录
CSS简介
- CSS 指层叠样式表(Cascading Style Sheets)
- 负责网页结构的美化工作
- 根据浏览器的不同,每个浏览器都有默认的CSS样式
CSS语法
由选择器和 声明块组成。
选择器:选择页面中的一个或多个指定元素
声明块:是一个整体用大括号{}包裹;由多个样式组成。
样式:由样式名和值组成;由分号":"进行连接,以分号";" 结尾
声明块的所有样式会应用在选择器所有对应的元素上
p /* CSS选择器*/
{ /* 声明块 start */
color:blue;
font-size: 16px;
} /* 声明块 end */
CSS样式写入方式
1、内联样式
- 直接将CSS代码编写到HTML标签的Style属性中
- 优点:编写方便,CSS代码直观。
- 缺点:结构和表现耦合度高,难维护,不建议使用
2、style标签
- 将样式写到style标签里,
style标签需要写在head标签里面
- 优点:HTML和CSS代码分离,使CSS样式可重复使用,方便后期维护
- 缺点:跨页面不能使用,只能影响当前页面
3、外部CSS文件(推荐使用)
- 将CSS代码编写到外部的CSS文件,用Link标签引入该CSS文件
- 在不同的页面中可复用CSS样式,后期易维护;
- 可充分利用浏览器的缓存机制,提高浏览器加载页面的速度。
HTML元素之间的关系
- 父元素:直接包含子元素的元素
- 子元素:直接被父元素所包含的元素
- 祖先元素:直接或间接包含后代元素的元素;父元素也属于祖先元素
- 后代元素:直接或间接被祖先元素包含的元素;子元素也属于后后代元素
- 兄弟元素:拥有相同父元素的元素
CSS选择器
普通选择器
选择器 | 语法 | 作用 |
---|---|---|
通配选择器 | * | 选择页面中所有元素 |
元素选择器 | tag | 根据标签名选择指定元素 |
ID选择器 | #id | 根据ID属性值找到唯一元素 |
类选择器 | .class | 选择所有具有class属性值的元素 |
复合选择器
选择器 | 语法 | 作用 |
---|---|---|
并级选择器 | 选择器1,选择器2…选择器n | 同时为多个选择器应用同样的样式 |
交集选择器 | 选择器1选择器2…选择器n | 选择同时符合多个选择器的元素 |
后代选择器 | 祖先 后代 | 选择指定元素的指定后代元素 |
子元素选择器 | .父元素 > 子元素 | 选择指定父元素中的直接子元素 |
兄弟选择器1 | 兄弟元素1 + 兄弟元素2 | 紧随其后的一个兄弟元素 |
兄弟选择器2 | 兄弟元素1 ~ 兄弟元素2 | 选择后面所有兄弟元素 |
伪类选择器
用来表示元素的一些特殊状态或者特殊位置
- :frist-child:表示第一个子元素
- :first-of-type:表示同一类型中的第一个子元素
- :last-child:表示最后一个子元素
- :last-of-type:表示同一类型中的最后一个子元素
- :nth-child(n):表示第n个子元素
- odd :表示选择奇数行的子元素
- even:表示选择偶数行的子元素
- :nth-of-type(n):表示同一类型第n个子元素
- :only-child:唯一的一个子元素
- :only-of-type:同一类型中唯一的一个子元素
- :empty:匹配空元素
- :not(选择器):选择不包括选择器的元素
- :hover:鼠标移入的状态
- :active:鼠标正在点击的状态
a元素特有的伪类
:link: 正常的超链接(带有href属性的a标签)
:visited:访问过的a标签,样式只能修改字体的颜色
伪元素选择器
表示一些特殊的元素
- ::before:开始标签与文本内容之间的位置元素
- ::after:结束标签与文本内容之间的位置元素
- ::first-letter:选择内容的第一个单词,中文选择第一个字
- ::first-line:选择内容的第一行
- ::selection:选中的内容
属性选择器
作用:获取包含指定属性名或某个属性值的元素
- 语法1:[属性名]
- 选择所有包含属性名的元素
- 语法2:[属性名=属性值]
- 选择所有等于属性值的元素
- 语法3:[属性名^=属性值]
- 选择所有以该属性值开头的元素
- 语法4:[属性名*=属性值]
- 包含所有该属性名中属性值的元素
样式继承
祖先元素设置的样式,会应用到后代元素上
什么CSS属性可以继承?
比如:color,font-size等属性
什么CSS属性不能继承?
background-背景色,还有CSS布局属性。
选择器权重
当发生同一个元素样式冲突时,选择哪一个选择器的样式由选择器的权重决定
选择器权重值由高到底:
选择器 | 权重值 |
---|---|
内联样式 | 1000 |
id选择器 | 100 |
类和伪类 | 10 |
元素选择器 | 1 |
通配选择器 | 0 |
继承样式 | 没有权重 |
特点:
- 优先选择权重高的选择器的CSS样式
- 当为一个样式添加了 !important 则该样式会获得最高的优先级。
- 对于复合选择器将所有选择器的权重相加;权重计算,不会超过其最大的数量级
- 分组选择器都是独立计算权重
- 两个选择器权重值相同,则后面的样式覆盖前面的样式