CSS（二）

1，Emmet语法

作用：提高HTML/CSS的编写速度

1,快速生成HTML结构语法

1,生成标签，直接输入标签名tab键即可 ，比如div，然后tab键，就可以生成 <div> </div>
2,如果想要生成多个相同标签，加上*就可以，比如div*3就可以快速生成三个div
3，如果有父子级关系的标签，就可以用>比如ul>li就可以。
4，如果有兄弟关系的标签，用+就可以，比如div+p
5，如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了。
6，如果生成的div类名是有顺序的，可以用自增符号$

2，快速生成CSS样式语法

3，快速格式化代码

右键格式化文档，可以格式化代码格式。

2，CSS复合选择器

复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器。

2.1 后代选择器（重要）

语法：
元素1 元素2 {样式说明}

上诉语法表示选择元素1里面的所有元素2。

2.2 子选择器（重要）

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

语法：
元素1>元素2｛样式说明｝

上述语法表示选择元素1里面的所有直接后代（子元素）元素2。

2.3 并集选择器（重要）

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

语法：
元素1，元素2{样式说明}

上述语法表示选择元素1和元素2。

2.4 伪类选择器

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

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

链接伪类选择器注意事项：
1，因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

链接伪类选择器实际工作开发中的写法：

/* a是标签选择器  所有的链接*/
a {
    color: gray;
}
/* :hover是链接伪类选择器 鼠标经过*/
a: hover {
    color:red;  /*鼠标经过的时候，由原来的灰色变成了红色*/
｝

2.5 :focus 伪类选择器

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

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

input:focus {
    background-color:yellow;
}

3，CSS的元素显示模式

3.1，块元素

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

块级元素特点：
① 独占一行
② 高度，宽度，外边距以及内边距都可以控制
③ 宽度默认是容器（父级宽度）的100%
④ 是一个容器及盒子，里面可以放行内或者块级元素

注意：
① 文字类的元素内不能使用块级元素
② <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
③ 同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

3.2，行内元素

常见行内元素有<a>， <strong>，<b>，<em>，<i>，<del>，<s>，<ins>，<u>，<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
① 相邻行内元素在一行上，一行可以显示多个。
② 高，宽直接设置是无效的
③ 默认宽度就是它本身内容的宽度
④ 行内元素只能容纳文本或其它行内元素

注意：
① 链接里面不能再放链接
② 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

3.3，行内块元素

在行内元素中有几个特殊的标签——<img/>，<input/>，<td>，他们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高，外边距以及内边距都可以控制（块级元素特点
）。

• 转换为块元素：display:block;
  
• 转换为行内元素：display:inline;

4，CSS的背景

背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定。

4.1，背景颜色，背景图片，背景平铺

/*背景颜色，背景图片，背景平铺*/
background-color: 颜色值；
background-image: none | url(url)
background-repeat: repeat | no-repeat | repeat-x | repeat-y

4.2，背景图片位置

background-position:x  y;

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

1，参数是方位名词

• 如果两个值都是方位名词，则两个值前后顺序无关
• 如果只指定一个方位名词，则第二个值默认是居中对齐

2，参数是精确名词

• 如果参数值是精确坐标，那么第一个坐标是x坐标，第二个坐标是y坐标。
• 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

3，参数是混合单位

• 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

4.3，背景图像固定（背景附着）

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

background-attchment : scroll | fixed

scroll：背景图像是随着对象内容滚动
fixed：背景图像固定

4.4，背景复合写法

background: transparent url(image.jpg) repeat-y fixed top;

4.5，背景色半透明

CSS3提供背景半透明的效果

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

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

5，CSS的三大特性

CSS有三个非常重要的特性：层叠性，继承性，优先级。

5.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：

• 样式冲突，遵循的原则是就近原则，哪一个样式离结构近，就执行哪一个样式。
• 样式不冲突，不会层叠。

5.2 继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。

• 恰当地使用继承可以简化代码，降低CSS样式的复杂性。
• 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

5.3 优先级

当一个元素指定多个选择器，就会有优先级的产生。

• 选择器相同，则执行层叠性。
• 选择器不同，则根据选择器权重执行。
  选择器权重如下表所示。