1. 简介
# 1. 简介
# 1.1 名字
CSS Cascading Style Sheets
CSS 参考 - CSS（层叠样式表） | MDN (mozilla.org) (opens new window)
CSS样式表 或 级联样式表
# 1.2 作用
设置HTML页面中的文本内容（字体、大小、对齐方式）、图片外观（宽高、边框样式、边距）以及版面布局和外观显示样式
# 1.3 价值
让HTML专注做结构呈现，样式交给CSS
结构、样式相分离
# 1.4 语法规范
CSS中的注释以
/*开头，以*/结尾
属性(property): 值(value);
选择器 + { 声明( 属性(property): 值(value); )...}
<head>
<style>
p {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
# 2. 引入方式：三种
- 行内样式表（行内式）
<span style="font-size: 32px; margin: 21px 0;">行内式</span>
- 内部样式表（嵌入式）
<style>
span {
font-size: 32px;
margin: 21px 0;
}
</style>
- 外部样式表（链接式）
- 新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中
- 在HTML页面中，使用
<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
使用
@import可以在样式表中引入别的样式表 比如：@import 'styles2.css';
# 2.2 总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 结构样式混写 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 完全实现结构与样式相分离 | 需要引入 | 最多 | 控制多个页面 |
# 3. 三大特性
# 3.1 层叠性
- 相同的选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
- 不冲突就不重叠
# 3.2 继承性
子元素可以继承父元素的样式(text-, font-, line-这些元素开头的可以继承，以及color属性)
# 3.2.1 行高的继承
body {
font:12px/1.5 'Microsoft YaHei' ;
}
# 3.3 选择器优先级
同一个元素指定多个选择器，就会有优先级的产生
- 选择器相同：层叠性
- 选择器不同：根据选择器权重执行
- 复合选择器：权重叠加（不进位）
| 选择器 | 权重 |
|---|---|
继承 或 * | 0,0,0,0 |
| 元素（标签）选择器 | 0,0,0,1 |
| 类选择器/伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
行内样式 style="" | 1,0,0,0 |
!important | 无穷大 |
# 4. 书写顺序
# 4.1 布局定位属性
display/position/float/clear/visibility/overflow
# 4.2 自身属性
width/height/margin/padding/background
# 4.3 文本属性
color/font/text-decoration/text-align/vertical-align/white-space/break-word
# 4.4 其他属性（CSS3）
content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...