1.定义：层叠样式表（Coscading Style Sheets）是一种控制网页样式的语言，实现内容（HTML）与表现分离。
2.css 的三种引入方式：
| 方式 | 实例代码 | 特点 |
|---|---|---|
| 行内式 | <div style="color:red;">文本</div> | 直接写在标签内，难复用 |
| 内部式 | <head><style>p {font-size:16px;}</style></head> | 当前页面复用，代码集中 |
| 外部式 | <link rel="stylesheet" href="styles.css"> | 多页面共享 |
3.选择器：声明块作用的选择器选择的对应元素
兄弟选择器
h1 + p { color:blue; } /* 紧挨h1后的p元素*/
子代选择器
ul > li { border: 1px solid #ccc; } /* 仅ul的直接子li*/
后代选择器
div p { color:red; } /* div中的所有p标签*/
伪类选择器
a:hover { text-derccoration: underline; }/* 鼠标悬停时*/
伪类-超链接 ：link 访问前 : visited 访问后 : hover 悬停 : active 点击时
4.字体修饰属性（Font Styling ）
font-family 指定字体族
font-size 字号大小
font-weight 字体粗细
font-style
font-variant
line-height
color
5.文本修饰属性( text)
text-decoration 文本装饰线
text-align 水平对齐方式
text-transform
text-indent
.....
6.css的特性
-
继承性
-
层叠性：一个标签可以被多个选择器定义属性
.title { color: red; }
h1.title { color: blue; }
- 优先级(权重)（选中标签的范围越大，优先级越低）
div { color: red; }
.special { color: blue; }
!important>行内>id>class>标签>统配
!important 最高 继承的属性 最低
7.css显示模式
- 块级 block div 宽默认为100%
- 行内 inline i, a, span 加宽高不生效
- 行内块 inline-block img 实际大小由内容撑开
| 类型 | 特点 | 实例元素 | 转换示例 |
|---|---|---|---|
| 块元素 | 独占一行，可设宽高 | div h1 | span {display:block;} |
| 行内元素 | 同行排列，不可设宽高 | span a | div {display:inline;} |
| 行内块元素 | 同行且可设宽高 | img input | a {display:inline-block;} |
8.定位 (positon)
- static 默认值 没有定位能力
- relative 相对定位
- 不脱标，占位，显示模式特定不改变
- 相对于自身的原来位置进行定位
- 子元素相对于它定位（我不明白）
- absolute 绝对定位（子绝父相）
- 脱标，不占位，显示模式特定改变：宽高生效
- 找到离它最近的（管着它的） position不为static的属性定位 直到body为止
- fixed 浏览器绝对定位，对于浏览器进行定位
- 脱标，不占位
- 显示模式特定，具备行内块特定
- sticky 粘性定位，介于relative 与 fixed 之间 top 与滚动配合，滚前是relative ，滚后是fixed
