CSS学习笔记（二）

一.Emmet语法

使用场景：使用缩写提高html 和css的速度

1.快速生成HTML结构语法
①生成标签，输入标签名按tab键即可
②如果想生成多个相同的标签，标签名*数目然后按tab键
③父子级关系的标签使用>
④兄弟级关系的标签使用+
⑤如果生成带有类名或者id名的使用标签名.类名 或者 标签名#id名 然后tab键
⑥如过生成的div类名有顺序，可以使用自增符号$
⑦想要生成的标签中有内容用{ }

2.快速生成CSS样式：采取简写形式，然后按tab键

二.复合选择器

1.什么是复合选择器：由两个或多个基础选择器通过不同的方式组合而成，包括：后代选择器，子选择器，并集选择器，伪类选择器

2.后代选择器（包含选择器）
可以选择父元素里面的子元素。外层标签写在前面，内层标签写在后面，中间用空格分开
语法：元素1 元素2 {样式声明}，元素1和元素2可以是任意基础选择器

3.子选择器
只能选择作为某元素的最近一级子元素（亲儿子）；
语法：元素1 > 元素2 {样式声明}，元素1是父级，元素2是子级，最终选择元素2，元素2必须是亲儿子

4.并集选择器
可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明；
并集选择器是各选择器通过英文逗号连接而成，任何选择器都可以作为并集选择器的一部分；
语法：元素1,元素2 { 样式声明 }，最后一个选择器不需要逗号；

5.伪类选择器
用于向某些选择器添加特殊的效果
伪类选择器最大的特点是用冒号（:）表示
（1）链接伪类选择器
a:link 选择所有未被访问的链接
a:visted 选择所有已被访问过的链接
a:hover 选择鼠标经过的链接
a:active 选择鼠标正在按下还没有弹起鼠标的链接
注意事项：按照LVHA的顺序写；实际工作中需要给链接单独指定样式
（2）:foucs伪类选择器
用于选取获得焦点的表单元素；
主要针对与表单元素：input:focus { }

三.元素的显示模式

1.什么是元素的显示模式：元素以什么方式显示

2.显示模式的分类：
（1）块元素：
自己独占一行；
高度、宽度和内边距都可以控制；
宽度默认是容器的100%；
是一个容器及盒子，可以放任何行内或者块级元素；
注意：文字类型的标签中不能放块级元素，<p>里面不能放块级元素
（2）行内元素:
相邻行内元素在一行上，一行可以显示多个；
宽和高的设置值是无效的；
默认宽度是它本身内容的宽度；
行内元素只能容纳文本或其他行内元素；
注意：链接里面不能放链接；特殊情况下<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
（3）行内块元素：
同时具有块元素和行内元素的特点
特点：
①一行可以有多个
②默认宽度是内容的宽度
③高度、行高、外边距以及内边距都可以控制

3.元素显示模式的转换
一个模式的元素需要另外一种模式的特性
（1）行内元素转换为块元素display: block;
（2）块元素转换成行内元素：dispaly: inline;
（3）转换为行内块元素：display: inline-block

4.一个小技巧：单行文字垂直居中的代码
解决方案：让文字的行高等于盒子的高度
如果行高小于盒子高度，则偏高，行高大于盒子高度，则偏低

四.CSS的背景

1.背景颜色
语法格式：background-color：transparent | 颜色值;（默认为透明）

2.背景图片
常见于小的logo或超大的背景图片，便于控制位置
语法格式：background-image：none | url(图片路径)

3.背景平铺
语法格式：background-repeat：no-repeat | repeat | repeat-x（沿着x轴平铺） | repeat-y（沿着y轴平铺）（默认平铺）
注意：页面元素既可以添加背景颜色，也可以添加背景图片，只不过背景图片会压住背景颜色

4.背景图片位置
语法格式：background-postion：x y;参数代表的意思是x坐标和y坐标，可以使用方位名词和精确单位
注意：
（1）参数是方位名词
如果指定的两个值都是方位名词，则两个值与顺序无关；
如果只指定了一个方位名词，第二个值值省略，则第二个值默认为水平居中；
（2）参数是精确单位
如果参数是精确单位，则第一个是x坐标，第二个是y坐标
如果只指定一个数值，则指定的是x坐标，另一个默认为垂直居中
（3）参数是混合单位
如果指定的两个值是混合单位和精确单位混合使用，则第一个值是x坐标，第二个值是y坐标

5.背景图像固定（背景附着）
语法格式：background-attachment：scroll（滚动） | fixed(固定)：设置背景图片固定或者随着页面的其余部分滚动

6.背景复合写法
语法格式：background：背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置 （一般顺序，其顺序没有严格规定）

7.背景色半透明
语法格式：background：rgba（0，0，0，0.3）最后一个参数是alpha透明度，取值为0~1
注意：背景半透明是值盒子背景半透明，盒子里面的内容不受影响；