一个工具：
前端快速开发插件Emmet
Emmet 的前身就是 Zen Coding。 它是一组专门用来提高编写 HTML 和 CSS 代码速度的便利工具。将它整合进文本编辑器，可以提供一些功能和快捷方式，加快开发速度。提供包括 Eclipse、IDEA、UltraEdit、SlickEdit 的插件;
CSS复合选择器
代码语言：txt复制CSS复合选择器是对基础选择器进行组合而成；常用的选择器又：后代选择器、子选择器、并集选择器、伪类选择器；- 后代选择器： 后代选择器也称为包含选择器，可以选择父元素下的所有后代元素；语法如下： > 元素1 元素2 {样式声明}
元素1和元素2可以是任意的基础选择器，元素2只需是元素1的后代既可，不需要是直接子元素；- 子选择器： 子选择器也称子元素选择器，可以选择父元素下的直接子元素，语法如下： > 元素1>元素2 {样式声明}
- 并集选择器 并集选择器可以选择多个标签，指定同样的样式；用于集体声明，各个标签以逗号分隔，语法如下： > 元素1,元素2 { 样式声明 }
一般以逗号分行写（竖着写）- 伪类选择器： 伪类选择器用于给某些选择器添加特殊效果；主要有链接伪类选择器，结构伪类选择器； - 链接伪类选择器： > a:link {color: #333} 未访问的链接
> a:visited {color: red } 已经访问过的链接
> a:hover {} 鼠标经过的链接
> a:active {} 鼠标正在点击的链接
为保证生效，需要按照以上顺序声明；LVHA; 需要给链接单点指定样式，原因是a标签在浏览器有默认的样式；最常用的伪类为hover；- focus伪类选择器：
用于选取获取焦点的表单元素；语法如下：
> input:focus { 样式声明 }CSS元素显示模式
代码语言：txt复制 元素显示模式就是元素（或标签）以什么方式进行显示；HTML元素一般分为块级元素和行内元素两种显示类型；- 块级元素： > 主要有h1-h6 div ol ul li等；
> 自己独占一行
> 高度和宽度，内外边距都可以控制
> 宽度默认为父元素的宽度
> 是一个容器盒子，可以放行内或会计元素
> 文字类的元素不能放置块级元素；如p,h1-h6等- 行内元素： > a strong b em i span等，行内元素也称内联元素
> 相邻行内元素都显示在一行
> 无法直接设置宽度和高度，设置无效
> 默认的宽度是本身内容的宽度
> 行内元素只能放置文本和其他行内元素
> a标签可以放置块级元素；不能放置a标签
- 行内块元素：
> 在行内元素几个特殊的标签 img input td等，同时具有行内元素和块级元素的特点
> 一行的行内元素之间有空隙；
> 宽度默认为内容的宽度 （行内元素特点）
> 高度，宽度，边距可以控制 （块级元素特点）
- 元素显示模式的转换： > 意思是：一个模式的元素可以转换为另外一种显示模式；
> 转换为块级元素 display:block
> 转换为行内元素： display: inline;
> 转换为行内块元素 display: inline-block;
> CSS背景
代码语言：txt复制背景样式可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图片固定；- 背景颜色： backgroud-color 默认是透明色； > 背景颜色半透明效果： background: rgba(0,0,0,0.1)
> 透明属性取值范围：0-1- 背景图片： background-image: 用于logo或者一些小图片和超大图片，可以方便控制图片位置；语法如下： > backgroud-image: none | url
- 背景平铺： background-repeat, 默认值为repeat,图片平铺语法如下： > background-repeat : repeat | no-repeat | repeat-x | repeat-y
- 背景图片位置：background-position > 参数可以是方位名词：left top center bottom right 一般情况下需要两个参数。 当只有一个参数时，另一个值为center；
> 参数时精确单位：background-position: x y 一般情况下是X轴和Y轴，当只有一个参数时，那就是X轴，另一个值为居中Y轴
> 参数时混合参数，第一个参数为X轴，第二值为Y轴- 背景图片固定：background-attachment设置背景图片是否随着页面滚动 > background-attachment: fixed | scroll
> 默认值scoll.随着对象内容的滚动而移动- 背景复合写法：background > 对于顺序没有要求，一般写法为：背景颜色，背景图片 背景平铺，背景图片滚动，背景图片位置
> 各个属性以空格隔开CSS三大特性
代码语言：txt复制CSS三大特性：层叠性，继承性、优先级- 1、层叠性 > 相同选择器设置同一个属性(存在样式冲突)，新属性会层叠或覆盖旧属性；
层叠性遵循就近原则，且只会覆盖相同样式- 2、继承性: > 子标签会继承父标签的某些样式，主要是文字相关的属性样式、text- 、font- 、line-、 color等
> 行高可以写单位，也可以不写，变身字体大小的倍数；- 3、优先级： > 同一元素指定多个样式，根据优先级确定
> 选择器相同，就近原则
> 不同选择器，优先级为 继承或* 》标签元素选择器》类选择器，伪类选择器 》ID选择器 》行内样式 》 !important
> a链接有默认的样式{color:blue}，不会继承body的样式
> 权重叠加：复合选择器包含多种类型选择器，存在权重计算的问题；
> 权重会叠加，但是不是进位; 及多个元素选择器永远小于一个类选择器
> 
