了解CSS
CSS是什么？
- Cascading Style Sheets
- 页面元素样式
页面元素包括：“字体、颜色、位置、大小、动画效果”
// 选择器 Selector
h1 {
// 选择器 Property
color: white;// 属性值 Value
font-size: 14px;// 14px ==> Declaration
}
在页面中使用CSS
- 通过外链使用
- 通过嵌入使用
- 通过内联使用
一般来说，CSS优先级为：
内联样式 > 嵌入样式 > 外链样式
CSS工作流程
选择器
- id
- 属性
- 标签
- 伪类
一般来说，CSS的优先级为：
id选择器 > 类选择器 = 伪类选择器 = 属性选择器a[ref=“eee”] > 标签选择器 = 伪元素选择器 > 子选择器 = 后代选择器 = 通配符选择器 = 相邻兄弟选择器。
选择器组合
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | Input:focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A > B | 选中B，如果它是A的子元素 | section > p |
| 兄弟选择器 | A ~ B | 选中B，如果它在A后且和A同级 | h2 ~ p |
| 相邻选择器 | A + B | 选中B，如果它紧跟在A后面 | h2 + p |
+选择器匹配紧邻的兄弟元素~选择器匹配随后的所有兄弟元素
font-family使用建议
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
调试CSS
- 右键点击页面，选择[检查]
- 使用快捷键（
Cmd + Opt + I）「Mac」
附录：CSS基本属性
- display：规定元素应该生成的框的类型
- 文本属性：
- vertical-align：垂直文本对齐
- text-decoration：规定添加到文本的装饰
- text-shadow：文本阴影效果
- white-space：空白符的处理
- unicode-bidi：设置文本的方向
- 盒子模型的属性：width、height、margin、border、padding
- 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
- 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
- 生成内容属性：content、counter-reset、counter-increment
- 轮廓样式属性：outline-style、outline-width、outline-color、outline
- 页面样式属性：size、page-break-before、page-break-after
- 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
- 字体系列属性
- font-family：字体系列
- font-weight：字体的粗细
- font-size：字体的大小
- font-style：字体的风格
- 文本系列属性
- text-indent：文本缩进
- text-align：文本水平对齐
- line-height：行高
- word-spacing：单词之间的间距
- letter-spacing：中文或者字母之间的间距
- text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
- color：文本颜色
- 元素可见性
- visibility：控制元素显示隐藏
- 列表布局属性
- list-style：列表风格，包括list-style-type、list-style-image等
- 光标属性
- cursor：光标显示为何种形态
