HTML5+CSS3基础学习笔记（三）
一、Emmet语法
1.快速生成HTML结构语法
1.1.生成标签：直接打标签名+TAB键
1.2.生成n个标签：直接打标签名*n+TAB键
1.3.生成父子关系的：父标签名>子标签名+TAB键
1.4.生成兄弟关系的：标签名+标签名+TAB键
1.5.生成带有类名或id的：标签名.名字+TAB键
1.6.生成n个带有类名或id的：标签名.名字$*n+TAB键
$是自增运算符，只要$*n就是自增
1.7.在标签里直接写内容：标签名{内容}+TAB键
2.快速生成CSS样式语法
2.1.每个单词的首字母连着写就行了，数字直接加在后面
3.格式化代码
二、CSS的复合选择器
建立在基础选择器上，是基础选择器的组合
1.后代选择器
又叫包含选择器，就是标签嵌套
1.1. 元素1 元素2 { 样式声明 }
元素1、元素2**可以是任意的基础选择器
2.子选择器
只能选择最近一级的元素。亲儿子元素
2.1.元素1>元素2 { 样式声明 }
3.并集选择器
用于集体处理，同时选择多组标签，以便定义相同的样式
3.1.元素1，元素2 { 样式声明 }
任何形式的选择器都可以作为并集选择器的一部分
3.2.并集选择器习惯竖着写
4.伪类选择器
向选择器添加特殊效果
4.1.未访问的链接： a:link
4.2.访问过的链接： a:visited
4.3.鼠标正经过的链接： a:hover （重点）
4.4.鼠标正按下还未弹起的链接： a:active
4.5.按照LVHA的顺序写效果，<a>链接需要单独指定样式
4.7.选取表单元素光标： input:focus 伪类选择器
三、CSS的元素显示模式
1.什么是元素显示模式
1.1.元素以什么方式进行显示
例如： <div>自己占一行
一行可以放多个<span>
2.元素显示模式的分类
1.1.块元素<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
特点：
1.独占一行
2.高度、宽度、外边距、内边距都可控制
3.<p><h>中不可放块级标签
1.2.行内元素 <a><strong><del><em><ins><span>
特点
1.一行可以显示多个
2.高、宽，直接设置是无效的
3.只能容纳文本或其他行内元素
4.<a>比较特殊，可以放块级元素
1.3.行内块元素 <img /><input /><td>
特点：
1.有空白缝隙，但是一行可以显示多个
2.默认宽度就是本身内容的宽度（行内的特点）
3.高度、行高、外边距、内边距都可以控制（块级的特点）
3.元素显示模式的转换
一种模式的元素想要另一种模式元素的特性
3.1.转换为块元素：display:block （重点）
转换为行内元素：display:inline
转换为行内块元素：display:inline-block （重点）
3.2.CSS单行文字垂直居中
让文字的行高等于盒子的高度 line-height=height
行高大于盒子的高度，文字就会偏下
行高小于盒子的高度，文字就会偏上
四、CSS的背景
背景非常好用来控制位置，比图片更方便很多
1.背景颜色
1.1.background-color：rad；定义背景的颜色
默认值是trasparant（透明的）
2.背景图片
2.1.background-image：url(); 定义背景图片
非常便于控制位置
默认是background-image：none;
3.背景平铺
3.1.background-repeat：; 对背景图像进行平铺显示，也就是重复展现
repeat 平铺
no-repeat 不平铺
repeat-x 按x轴平铺
repeat-y 按y轴平铺
背景图片图层在背景颜色上方
4.背景图片位置
4.1.background-position：x y;
x,y可以是方位名词，没有顺序之分，只设置一个，则另一个默认居中
x,y可以是精确名词，严格顺序，第一个是X，第二个是Y
4.2.混合单位
第一个值一定是X，第二个值一定要是Y
5.背景图像固定
background-attachment : scroll | fixed 来设置背景在滚动时是否固定
scroll 随内容滚动，fixed背景图像固定
6.背景复合写法
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
没有顺序要求
7.背景颜色半透明
7.1.background: rgba（0，0，0，.3）；
最后一个参数
五、CSS的三大特性
1.层叠性
1.1.样式冲突时，样式离结构进就用哪个样式
不同选择器其中之一的样式不冲突时，不会重叠，只要有就会展现
2.继承性
2.1.给父标签定义样式时，子标签都有父标签的样式
主要是text-，font-，line-这些元素开头的属性，还有color属性
2.2.行高的继承性
body { font:12px/1.5 Microsoft YaHei; }
这里的1.5就是设定的父元素行高，
若子元素没有设置行高，则就是1.5
若子元素里设置了，则行高为元素文字大小的1.5倍
（子元素可以根据自己的文字大小自动调整行高）
3.优先级
3.1.选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
3.2.选择器权重
普通的元素选择器权重挺低的
！important就是加在属性后面的
（a { color ：rad ！important；}）
3.3.优先级
通配符和继承 权重为0
标签选择器 权重为1
类、伪类选择器 权重为10
id选择器 权重为100
行内样式表 权重为1000
不管父元素的权重多大，子元素的权重都为0
所以就算把body设置了颜色，链接还nm是蓝的，没权重没地位
3.4.权重的叠加
也就是说，谁越精确，谁是老大
按照上面的权重值可以直接加来算