02/03-Emmet语法
使用缩写来快速生成HTML结构和CSS样式语法；
（1）在HTML中：
输入标签名再按tab键，直接生成标签；
输入标签名*数字，再按tab键，直接生成多个相同的标签；
输入父标签名>子标签名，再按tab键，直接生成父子两级标签；
输入标签名+另一标签名，再按tab键，直接生成并列的两级标签；
输入 .类名 或者 #id名，生成默认的带有该class名称的div标签；
（如果想要其他标签，输入 标签名. 类名 或者 标签名#id名）
.类名$*数字（自增符号$），生成class名称按顺序排列的多个标签；
输入 标签名{双标签中间的文字}，直接生成中间有内容的标签。
（2）在CSS中：
常用简写
输入连在一起的 属性名单词首字母、属性值 ，再按tab键，直接生成 属性：属性值；
05~13 CSS复合选择器
复合选择器建立在基础选择器的基础上，由基础选择器组合而成的；
分为：后代选择器、子选择器、并集选择器、伪类选择器等。’
（1）后代选择器：又称为包含选择器，可以选择某一父元素里面的一类子元素；（嵌套形式的标签即为父子关系）
元素可以是任意基础选择器，标签、id或类选择器等；
多层嵌套的标签可以通过叠加多个基础选择器来选择；
父元素 子元素 ... { 样式声明 }
（2）子选择器：选择离父元素最近一级的子元素（亲儿子）；
父元素>子元素 { 样式声明 }
（3）并集选择器：同时选择多组标签，将它们设置成相同的样式；
元素1, 元素2,... { 样式声明 }
（4）伪类选择器：特点是用冒号：表示，包括链接伪类选择器、focus伪类选择器等；
- 链接伪类选择器是针对链接标签<a>：
| a:link | 设置所有从未被访问过的链接的样式 |
| a:visited | 设置所有被访问过的链接的样式 |
| a:hover | 设置所有鼠标经过时链接的样式 |
| a:active | 设置所有被点击但未放下的链接的样式 |
定义样式时，要按 :link、:visited、:hover、:active 的顺序来写；
a链接标签在浏览器中有默认样式（蓝色字体带下划线），所以实际开发中要给链接单独设置样式；
实际开发中的写法：
a {
color: #333; /*黑色*/
text-decoration: none;
}
a:hover {
color: #369; /*深蓝色*/
}
- focus伪类选择器
鼠标选中表单元素时，可以设置成一种不同的样式：
input:focus { 样式声明 }
14~19 CSS的元素显示模式
是指元素（标签）以什么方式进行显示，HTML标签一般分为块元素和行内元素。
（1）常见的块元素有<h1>~<h6>、<p>、<div>、<ul>等，
特点有以下几点：
独占一行；
高、宽度、内、外边距都可以控制，默认宽度与父级的宽度相同；
一个容器或盒子里面可以放行内元素或者块元素，但文字类元素（p、h1...）里面不能放块元素。
（2）常见的行内元素有<a>、<strong>、<em>、<del>、<ins>、<span>等，也称为内联元素；
特点有以下几点：
相邻的行内元素显示在一行上；
高、宽直接设置是无效的，默认宽度是本身内容的宽度；
行内元素内部只能放文本或者其他行内元素；
链接元素<a>里不能再放链接，但可以放块元素，最好把<a>转换成块级模式。
（3）行内块元素同时具有块元素和行内元素的特点，如<img />、<input />、<td>；
特点有以下几点：
相邻的行内元素显示在一行上，但它们之间会有空白缝隙；
高、宽度、内、外边距都可以控制，默认宽度是本身内容的宽度。
元素显示模式的转换：
例如要增加链接标签<a>的触发范围，给它设置高度、宽度，就要把<a>转换成块级模式；
做法是在CSS的选择器中，样式声明之后，加入：
display: block;
若要将块元素转换为行内元素，则 display: inline;
若要（span）转换为行内块元素，则 display: inline-block;
22- 单行文字垂直居中
原理：让文字的行高（line-height）等于盒子的高度（height）。
23~34 CSS的背景
（1）定义元素的背景颜色：
background-color: 颜色值 或 transport（默认）;
如果想要背景颜色有透明度，则在background属性中加入参数a(alpha)表示透明度，取值在0~1之间：
background: rgba ( r值, g值, b值, a值 );
（2）背景图片，常见于logo、装饰性小图片或大背景图：
background-image: url(...) 或 none（默认）;
（3）背景图像平铺：
background-repeat: repeat（默认x\y上都平铺）;
no-repeat（不平铺）;
repeat-x（沿x轴平铺）;
repeat-y（沿y轴平铺）;
（4）背景图像位置：
background-position: x y;
x、y坐标可以是精确数值，如百分数、20px，此时：
有严格的坐标顺序x、y；
可以只写一个数值，则这个值一定是x坐标，y坐标则默认为居中。
x、y坐标也可以是方位名词，即 left\center\right（水平x方向）、top\center\buttom（垂直y方向），此时：
两个值的前后顺序不会改变效果；
可以只写一个值，另一个会默认为center。
x、y坐标可以将精确数值与方位名词混合使用（混合单位），此时：
有严格的坐标顺序x、y。
（5）背景图像固定（背景附着）
background-attachment: scroll（背景图像岁对象内容滚动）;
fixed（固定不动）;
背景复合写法：可以将背景属性合并写在一个background属性中；
属性值没有规定的顺序，但是习惯顺序为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图像位置;
（6）背景颜色线性渐变
background: -webkit-linear-gradient (起始方向, 颜色1, 颜色2,... );
linear-gradient 必须加浏览器私有前缀 -webkit；
起始方向可以是 方位名词或者度数，默认是top。
9.5/7
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
