CSS （2）

1、Emmet语法

1.1快速生成HTML结构语法

1 生成标签 直接输入标签名 按tab键即可 比如 div 然后 tab键，就可以生成<div></div>

2 如果想要生成多个相同标签 加上*就可以了比如 div*3 就可以快速生成3个div

3 如果有父子级关系的标签，可以用> 比如ul > li 就可以了

4 如果有兄弟关系的标签， 用 + 就可以了 比如 div+p

5 如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键即可

6 如果生成的div类名是有顺序的，可以用自增符号$

7 如果想要在生成的标签内部写内容可以用{}表示

1.2快速生成CSS样式

CSS基本采取简写形式即可。

2 CSS的复合选择器

2.1 后代选择器

元素1 元素2 { 样式声明}

ol li {
    color: pink;
}

选择元素1里面所有元素2（后代元素）

2.2 子选择器

子元素选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

 元素1 >元素2 { 样式声明}

div > p {
    color: pink;
}
/* 选择 div 里面所有进一级p标签元素*/

2.3 并集选择器

 并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明

 元素1 ,元素2 { 样式声明}

div, p {
    color: pink;
}
/* 选择 div 里面所有进一级p标签元素*/

2.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大特点使用冒号（:）表示，比如：hover、

2.5 链接伪类选择器

a:link /* 选择 所有未被访问的链接*/
a:visited /* 选择 所有已被访问的链接*/
a:hover /* 选择 鼠标指针位于其上的链接*/
a:active /* 选择 活动链接（鼠标按下未弹起的链接）*/

注意事项

1. 为确保生效，请按照LVHA的循顺序声明:link -: visited -: hover: active。
2.  因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

2.6 :focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也要针对表单元素来说

input:focus {
    background-color: yellow;
}

3 CSS的元素显示模式

HTML元素一般分为块元素和行内元素两种类型

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块元素的特点：

1. 独占1行
2. 高度、宽度、外边距以及内边距都可以控制
3. 宽度默认是容器的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素
5. 文字类的元素内不能使用块级元素
6. <p>标签用于存放文字，<p>里面不能放块级元素
7. <h1>~<h6>文字类块级标签，里面也不能放其他块级元素

常见的块元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。

行内元素的特点：

1. 相邻行内元素在一行上，一行可以显示多个
2. 高度、宽度直接设置无效
3. 宽度默认就是它本身内容的宽度
4. 行内元素只能容纳文本或者其他行内元素。

行内块元素：<img/>、<input />、<td>，它们同时具有块元素和行内元素。

行内块元素的特点：

1. 相邻行内元素在一行上，它们之间有空白缝隙，一行可以显示多个
2. 宽度默认就是它本身内容的宽度
3. 高度、宽度、外边距以及内边距都可以控制

4 元素显示模式转换

一个模式的元素需要另一种模式的特性

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

5 单行文字垂直居中

让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

6 CSS的背景

6.1 背景颜色

background-color属性定义元素的背景颜色

background-color:颜色值;

 6.2 背景图片

background-image:属性描述元素的背景图像

background-image: none|url(url)

 6.3 背景平铺

如果需要在HTML页面上对背景图像进行平铺,可以使用background-repeat属性。

background-repeat: repeat| no-repeat | repeat-x | repeat-y

 6.4 背景图片位置

利用 background-position 属性可以改变图片在背景中的位置

background-position: x y;

参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位

参数值	说明
length	百分数|由浮点数和单位标识符组成的长度值
position	top|center|bottom  left|center|right方位名词

参数是精确单位 

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标

如果指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

参数是混合单位

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标

 6.5 背景图片固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment后期可以直走视差滚动效果

background-attachment: scroll | fixed

参数	作用
scroll	背景图像随对象内容滚动
fixed	背景图像固定

 6.6 背景复合写法

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

 6.7 背景颜色半透明

background: rgba(0,0,0,0.3);

最后一个参数是alpha透明度，取值范围在0~1之间

我们习惯把0.3的0省略掉,写成background: rgba(0,0,0,.3);