- A+
1. Emmet 语法
Emmet 语法的前身时Zen coding，它使用缩写来提高html/css的编写速度。
1.1 快速生成HTML结构语法
1. 输入标签按tab键，如 输入div，然后按tab，生成<div></div>
2. 生成多个相同标签，加上 * 即可，如 div*3，生成3个div标签
3. 父子级关系的标签，可以用 > ，如 ul>li
4. 兄弟关系的标签，可以用 + ，如 div+p
5. 生成带有类名或id的，直接写 .demo 或 #demo 按tab即可
6. 想生成的div类名有顺序，可以用自增符号 $ ，如 .demo$5
7. 在生成标签内部写内容，用 {}，如 div{内容}
1.2 快速生成CSS样式语法
1. 输入 w200 按tab，生成 width: 200px;
2. 输入 lh26 按tab，生成 line-height: 26px;
……
1. CSS的复合选择器
1.1 什么是复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
1. 复合选择器更准确、高效的选择目标元素。
2. 复合选择器由多个基础选择器组合而成。
3. 常用复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等。
1.2 后代选择器
后代选择器(包含选择器) 可以选择父元素里面的子元素。ol外层标签在前，li内层标签在后，中间空格隔开。
ol li { color: red; }1.3 子选择器
子元素选择器(子选择器) 只能选择作为某元素的最近一级子元素。元素1>元素2 {样式}
<style> div>a { color: red; } </style> <div> <a href="#">我是div儿子</a> <p> <a href="#">我是div孙子</a><!--不能选中--> </p> </div>1.4 并集选择器
并集选择器可以选择多组标签，同时为它们定义相同样式。多个元素用逗号隔开。
div, p { color: red; }1.5 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个。
最大特点是用冒号 : 表示，如 :hover、:first-child。
伪类选择器很多，如 链接伪类、结构伪类等
1.6 链接伪类选择器
| a:link | 选择所有未被访问的链接 |
| a:visited | 选择所有已被访问的链接 |
| a:hover | 选择鼠标位于其上的链接 |
| a:active | 选择活动链接(鼠标按下未松开时) |
<style>/*顺序不要乱*/ a:link {/*没有访问过的链接*/ color: red; } a:visited {/*访问过的链接*/ color: orange; } a:hover {/*鼠标经过链接*/ color:green; } a:active {/*鼠标按下时*/ color: blueviolet; } </style> <a href="#">链接伪类选择器</a>1.7 :focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。主要针对表单元素。
<style> input:focus { background-color: pink; color: red; } </style> <input type="text"> <input type="text">
2. CSS的元素显示模式
2.1 什么是元素显示模式
元素显示模式就是元素以什么方式进行显示。HTML元素一般分为块元素和行内元素两种类型。div占一行是块元素，一行可以多个span是行内元素。
2.2 块元素
常见的块元素有<h1> <p> <div> <ul> <ol> <li>等。典型块元素<div>
特点：独占一行；宽、高、内外边距 可控制；宽度默认100%；类似盒子，里面可以放行内/块级元素。
注意：文字类元素内不能使用块级元素，如<p>,<h1>~<h6>等
2.3 行内元素（内联元素）
常见的行内元素(内联元素)有<a> <strong> <b> <em> <i> <del> <span>等，典型行内元素<span>
特点：一行可显示多个；宽、高直接设置是无效的；宽度取决于内容；只能容纳文本或其他行内元素。
注意：链接不能再放链接；特殊情况<a>可以放块级元素，最好给<a>转换为块级模式。
2.4 行内块元素
<img /> <input /> <td> 它们具有块元素和行内元素的特点。
特点：一行可显示多个，但有空白空隙；宽度取决于内容；高，行高，内外边距可控制。
2.5 元素显示模式转换
特殊情况下，需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性，比如增加<a>的触发范围。
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display:inline-block;
<style> a { width: 100px; height: 50px; display: block; } </style> <a href="#">手机 电话卡</a>
练习案例：小米侧边栏
点击查看代码
<style> a { display: block; width: 230px; height: 42px; background-color: #55585a; color: #fff; font-size: 14px; text-decoration: none; text-indent: 2em; line-height: 42px;/*文字垂直 行高(line-height)等于盒子高度(height)*/ } a:hover { background-color: #ff6700; } </style> <a href="#">手机 电话卡</a> <a href="#">手机 电话卡</a> <a href="#">手机 电话卡</a>
3.CSS背景
3.1 背景颜色
background-color:transprent / color;
transparent：背景色透明
color：指定颜色
