参考自: 黑马程序员
从视频P94开始
1.Emmet语法
1.1 快速生成html结构语法
- 自动补全
- div*5
- 父子级关系：ul>li（ul里包含li）
- 兄弟级关系：div+p
- 自动生成类名：
./#类名（默认div）
标签./#类名（指定标签）
ul>li#two（组合使用） - ./#类名$*5（生成按数字顺序排列的类名）
- 标签{默认要写的内容}
- 都可以组合使用
1.2 快速生成css结构语法
- 首字母缩写：tac（text-align:center）；w100px（width=100px）
2.CSS的复合选择器
2.1 什么是复合选择器
- 基础选择器（标签、id、类、通配符）的组合。
- 更准确、更高效地选择目标元素。
2.2 后代选择器（重要）
- 又称包含选择器，可以选择父元素里面的子元素。
- 格式（中间有空格）：
标签唯一时：
父标签 子标签 {样式声明}
注意：儿子、孙子、重孙子…的元素都会受影响。和子元素选择器区分
父标签 儿子 孙子… {样式声明}
标签不唯一时：（其他选择器同理）
.父标签的类名 儿子 孙子…{样式声明}
2.3 子元素选择器（重要）
- 只能选择某元素最近一级的子元素。
- 格式
父标签>子标签{样式声明}
（也只能是子标签）
2.4 并集选择器（重要）
- 用于集体声明，可以选择多组标签，同时定义为相同的样式。
- 标签1,标签2 {样式声明}
- 任何形式的选择器都可以作为并集选择器的一部分。
- 标签1,标签2,任意选择器 {样式声明}
2.5 伪 类选择器
2.5.1 链接伪类选择器
| 链接状态 | 描述 |
|---|
| a:link | 未访问链接 |
| a:visited | 已访问链接 |
| a:hover | 鼠标移动到链接上时 |
| a:active | 鼠标点击时 |
- 顺序规则：L(link)OV(visited)E and H(hover)A(active)TE
- 后者必须在前者定义后定义才有效。
- a链接在浏览器中有默认的样式，不受父类标签的影响，所以实际工作中要单独指定链接的样式。
2.5.2 :focus伪类选择器
- 用于选取获得焦点（就是光标）的表单元素。
- 主要针对表单元素。
3.CSS的元素显示模式
3.1 什么是元素显示模式
元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>
了解它们的特点可以更好地布局网页。
3.2 块元素
- 自己独占一行，最典型的是div元素。
- 高度，宽度，内外边距都可以控制。
- 宽度默认是父级容器的100%。
- 是一个容器或盒子，可以放块级元素或行内元素。
- 文字类的元素内不能使用块级元素。
<p>，<h1>~<h6> 等文字类块级元素里面不能再嵌套块级元素。
3.3 行内元素/内联元素
- 相邻行内元素在一行上，一行可以显示多个，最典型的是span元素。
- 高、宽直接设置是无效的。
- 默认宽度就是本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
- 注意
链接里面不能再放链接。
碰到父元素边缘会自动换行。
特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。
尽量只设置左右内边距。
3.4 行内块元素
- <img />、<input />、<td>他们同时具有块元素和行内元素的特点。
- 和相邻行内元素（行内块）在一行上，但是他们直接会有空白缝隙，一行可以显示多个（行内元素特点）。
- 默认宽度就是本身内容的宽度（行内元素特点）。
- 高度、行高、内外边距都可以控制。（块元素特点）。
3.5 元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|
| 块级元素 | 一行一个 | 可以设置宽度高度 | 容器的100% | 可以包含任何标签 |
| 行内元素 | 一行多个 | 不可以设置宽度高度 | 内容的宽度 | 容纳文本或其他行内元素，<a>特殊 |
| 行内块元素 | 一行多个 | 可以设置宽度高度 | 内容的宽度 | |
3.6 元素显示模式转换
- 一个模式的元素需要另外一种模式的特性。
- 增加<a>的触发范围：行内元素转换为块元素。
- 转化为块元素
display:block - 转化为行内元素
display:line - 转化为行内块元素
display:line-block
3.7 单行文字垂直居中的原理
- 文字的行高（line-height）=盒子的高度（height）
- 行高=上间隙+文字的高度+下间隙
| 关系 | 结果 |
|---|
| line-height>height | 文字偏下 |
| line-height=height | 文字垂直居中 |
| line-height<height | 文字偏上 |
优先保证上空隙包含在盒子里。
4 CSS背景
4.1 背景颜色
- background-color:transparent(透明的)
4.2 背景图片
- background-img: url()
- 便于控制图片的位置。
4.3 背景平铺
- background-repeat: repeat | non-repeat | repeat-x | repeat-y
- x y可以是数值，百分比也可以是方位名词。
4.4.1 背景位置-方位名词
- 如果指定的两个值都是方位词，则不区分前后，left top和top left效果一样。
- 省略的方位词默认居中对齐。
4.4.2 背景位置-精确单位
- x坐标和y坐标不可以调换位置。
- 优先指定x坐标，剩下的默认居中。
4.4.3 背景位置-混合单位
4.5 背景固定
- background-attachment：scroll | fixed
- 设置背景图像是否固定，或者随页面的其余部分滚动。
4.6 背景属性复合写法
- background:color url() repeat attachment position
4.7 背景颜色半透明
- background:rgba();
a=alpha透明度，取值范围在0~1之间。
5 CSS的三大特性
5.1 层叠性
- 解决样式冲突的问题。
- 给相同选择器设置相同的样式，一个样式会覆盖另一个冲突的样式。
- 样式冲突，就近原则。
- 样式不冲突，不会层叠。
5.2 继承性
- 子标签会继承父标签的某些样式，如文本颜色和字号。
- 恰当地使用继承可以简化代码。
- 主要继承和文字相关的属性。
5.2.1 行高的继承
body {
font :12px/1.5 Microsoft YaHei;
}
- 行高可以有单位也可以没有
- 如果body标签中的子元素没有设置行高，则会继承父元素的行高为1.5
- 此时子元素的行高是：当前子元素文字大小*1.5
- 好处：body中的子元素可以根据自己文字的大小自动调整行高
5.3 优先级
- 给同一个元素指定了多个选择器，就会产生优先级。
- 选择器相同，执行层叠性，就近原则（谁更靠近选择器就执行谁的样式，注意不是谁先写就执行谁）。
| 选择器 | 选择器权重 |
|---|
| 继承 或 * | 0000 |
| 元素选择器 | 0001 |
| （伪）类选择器、属性选择器 | 0010 |
| ID选择器 | 0100 |
| 行内style=“” | 1000 |
| ！important | 无穷大 |
- id选择器>（伪）类选择器>元素选择器
- 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
- 权重叠加不会进位。0001+0001=0002≠0010
23
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
