CSS Emmet语法、复合选择器、元素显示模式、背景及三大特性

一、Emmet语法

1.1 快速生成HTML结构语法

①生成标签：写下标签名按Tab键或回车；

②多个标签：标签名*个数按Tab键或回车；

③父子关系：使用 > 如 ul > li 按Tab键或回车；

④兄弟关系：使用 + 如 div + p 按Tab键或回车；

⑤带类名或 id 名：.类名或 #id名按Tab键或回车；

⑥生成的 div类名有顺序：使用 $（自增符号，从1开始） 按Tab键或回车；

⑦在生成的标签内部写内容：使用 { } 按Tab键或回车。

1.2 快速生成CSS样式语法

如 水平居中：tac 按Tab键或回车；

     宽 200：w200 按Tab键或回车。

1.3 快速格式化代码

快捷键：shift + alt + f

二、复合选择器

定义：是由两个或多个基础选择器通过不同的方式组合的。

2.1 后代选择器：选择元素1里面的所有元素2

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

注：1、元素之间需要用空格隔开；

       2、最后选择的是元素2；

       3、选择的元素可以是任意基础选择器。

2.2 子选择器：选择的是亲儿子元素（最近一级）

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

注：1、元素之间需要用 > 隔开；

       2、元素 2 必须是亲儿子。

2.3 并集选择器：选择多组标签，定义相同的样式

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

注：元素之间需要用英文逗号隔开。

2.4 伪类选择器：向某些选择器添加特殊的效果

①链接伪类选择器

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

注：1、确保样式生效，要按照 LVHA 的顺序声明：link,visited,hover, active；

       2、a 链接在浏览器中有默认样式，所以实际开发都需要给链接单独指定样式。

a {
  color: gray;
  text-decoration: none;
}
a:hover {
  color: #369;
  text-decoration: underline;
}

② :focus 伪类选择器

input:focus {
  background-color: yellow;
}

注：一般情况 <input> 类表单元素才能获取。

三、CSS的元素显示模式

3.1 定义：元素以怎样的方式进行显示。

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

3.2 块元素

①常见的块元素有 h1-h6、p、div、ul、ol、li 等。

②特点

（1）独占一行；

（2）高度、宽度、外边距以及内边距都可以控制；

（3）宽度默认是容器的 100%；

（4）是一个容器及盒子，里面可以放行内或块级元素。

注：文字类的标签内不能放块级元素，如<p>内不能放<div>。

3.3 行内元素（内联元素）

①常见的行内元素有 a、strong、b、em、i、del、s、span 等。

②特点

（1）相邻行内元素在一行上，一行可以显示多个；

（2）高、宽直接设置是无效的；

（3）默认宽度就是它本身内容宽度；

（4）行内元素只能容纳文本或其他行内元素。

注：1、链接里面不能再放链接；

       2、特殊情况链接 <a> 里面可以放块级元素。

3.4 行内显示模式转换

①适用情况：一个模式的元素需要另外一个模式的特性，如想要增加 a 链接的触发范围。

②转换为块元素

a {
  display: block;
}

③转换为行内元素

div {
  display: inline;
}

④转换为行内块元素

span {
  display: inline-block;
}

3.5 单行文字垂直居中：让文字的行高等于盒子的高度

line-height=height;

四、css的背景

4.1 作用：背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

4.2 背景颜色

background-color: 颜色值;

注：颜色值默认为 transparent（透明）

4.3 背景图片

①实际开发用于 logo 或者一些装饰性开发的小图片或者是超大的背景图片；

②优点：便于控制位置。

background-image: url(图片名称);

注：默认为 none（无背景）

4.4 背景平铺

background-repeat: repeat(默认 平铺) | no-repeat(不平铺) | repeat-x(沿x轴平铺) | repeat-y(沿y轴平铺);

4.5 背景图片位置

background-position: x y;

①参数 x 和 y 表示 x 坐边和 y 坐标，可以使用方位名词或者精确单位；

②如果两个值都使用方位名词，则两个值前后顺序不影响结果；

③如果只指定了一个方位名词，则第二个值默认居中对齐。

4.6 背景图像固定

background-attachment: scroll(背景图像随着内容滚动) | fixed(背景图像固定);

4.7 背景属性复合写法

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

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

4.8 背景颜色半透明：background: rgba(r,g,b,a)

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

五、CSS的三大特性

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

5.2 层叠性

①作用：主要解决样式冲突的问题。

②原则：

（1）样式冲突：就近原则，哪个样式离结构近，就执行哪个样式；

（2）样式不冲突就不会层叠。

5.3 继承性

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

②恰当使用继承可以简化代码，降低 CSS 的复杂性；

③子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及 color 属性）；

④行高

body {
  font: 12px/1.5 Microsoft Yahei;
}

/*（1）行高可以跟单位也可以不跟
  （2）如果子元素没有设置行高，则会继承父元素的行高为 1.5
  （3）此时子元素的行高是：当前子元素的文字大小*1.5
  （4）body 行高 1.5 这样写法最大优势就是里面的子元素可以根据文字大小自动调整行高 */

5.4 优先级

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

②选择器相同，则执行层叠性；

③选择器不同，则根据选择器权重执行。

注：1、继承的权重为 0，即使加了 important 权重也还是 0；

       2、a 链接，浏览器均默认指定了一个样式：蓝色，下划线，故不会继承父级样式；

       3、权重可以叠加，需要计算权重，但是没有进位。