CSS(2）

一.emment语法

1.快速生成HTML结构

2.emment快速生成CSS样式语法（打单词首字母）

二.复合选择器

1.后代选择器：可以选择父元素里的子元素

2.子选择器（只能选择作为某元素的最近一级子元素）

3.并集选择器（可以选择多组标签，同时为他们定义相同的样式

4.链接伪类选择器
（1）a:link（选择所有未被访问的链接）
（2）a:visited（选择已被访问过的链接）
（3）a:hover（选择鼠标放上去的链接）
（4）a:active（鼠标按下未弹起的链接）

注意：link，visited，hover，active按顺序写
5.focus伪类选择器（用于选取鼠标点击哪个表格，设计表格样式）
用input：focus

三.CSS的元素显示模式

1.块元素

特点：（1）独占一行
	 （2）高度，宽度，外边距以及内边距都可以控制
	 （3）宽度默认和父级一样大
	 （4）里面可以放行内或者块级元素
注意：文字内标签不可以放块级元素（eg：<p>标签里不能放块级元素，尤其不能放<div>，<h1>-<h6>也不能放块元素

2.行内元素

特点：（1）一行可以放多个
	 （2）高宽直接设置是无效的
	 （3）默认高度就是其本身高度
	 （4）行内元素只能容纳文本和其他行内元素
注意：链接标签里不能再放链接标签

3.行内块元素

例子：<img> <input> <strong>
特点：（1）一行有多个（每个之间有空白缝隙）
	（2）默认宽度就是它本身的宽度
	（3）宽度，高度，外边距以及内边距都可以直接设置

4.元素显示模式转换

1.转换为块元素（display:block）
2.转换为行内元素（display:inline）
3.转换为行内块元素（display:inline-block）

单行文字垂直居中(行高等于高度 line-height=height)

四.CSS的背景

背景颜色

    background-color：transparent（透明，默认） 		

背景图片

1.优点：便于控制位置
2. 控制图片位置选择器（background-position：x y）
（1）参数是方位名词（x y是无序的）
		eg：background-position：left center；＝background position center left；
（2）参数是精确单位（x y有顺序）
		eg：background-position：20px 50px；
（3）参数是混合单位（x y是有序的）
		eg：background-position：20px top；
注意：当一个参数定了，另一个参数没写时，默认为垂直居中
3.背景图片选择器：background-image：none(默认)/url(图片地址）
4.图片平铺
background-repeat:repeat(默认)/no-repeat/repeat-x(横着重复)/repeat-y(竖着重复)
注意：页面元素既可以添加背景颜色也可以添加背景图片(背景图片会压住背景颜色)
5.背景图像固定（图片是否会随着其他页面而滚动）
background-attachment：scroll（滚动，默认）/fixed（固定）
6.背景属性复合写法
background：black url（ ）no-repeat ficed center top
7.背景色半透明
background-rgba（0，0，0，0.2）最后一个数字就是控制透明度的，是0全透明，是1不透明，介于0-1之间

五.CSS的三大特性

1.层叠性：相同选择器相同的样式

样式冲突，实行就近原则，哪个近，用哪个
样式不冲突，不层叠

最后哈哈哈哈哈是12像素文字，蓝色，font-size不被层叠，color层叠选最近的

2.继承性（子标签会继承父标签的某些样式）

p标签的样式会继承父标签div，红色居中，12px像素

行高的继承：

3.优先级

选择器相同，则执行层叠性
选择器不同，则根据权重执行

.ys p权重大于p

注意：a标签比较特殊它是浏览器默认样式（蓝色下划线），如果想改变样式需要对a标签作为选择器设置样式

4.权重叠加（复合选择器会有权重叠加问题，权重叠加但不进位）

颜色这一属性相同了，.ys权重大所以color用.ys选择器里的，text-decoration属性没有相同，所以直接用a选择器里的