CSS复合选择器、显示模型、背景、三大特性

1、emmet语法

1.1 快速生成HTML结构语法

	方法	例子
生成标签	输入标签名按 Tab 键	div + Tab 生成< div>< /div>
生成多个相同标签	标签 ***** 数字	div*3 生成3个div标签
父子级关系标签	用 > 号	ul > li
兄弟关系标签	用 + 号	div + p
生成带有类名或id名	.demo / #two 按 Tab 键	p.demo / ul>li#two
生成div类名有顺序	用自增符号 $	.demo&*5

1.2 快速生成CSS样式

	快捷键
text-align: center;	tac 按Tab
text-indent: 2em;	ti2em + Tab
width: 100px;	w100 + Tab
height: 200px;	h200 +Tab
line-height: 26px;	lh26px + Tab
text-decortion: none;	tdn + Tab

2、CSS的复合选择器

2.1 什么是复合选择器

• 复合选择器可以更准确、更高效的选择目标元素
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
• 常用的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等等

2.2 后代选择器（非常重要）

• 后代选择器又称包含选择器，可以选择父元素里面子元素。
• 外层标签写前面，内层标签写后面，中间用空格隔开

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

元素1 元素2 {}

• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
• 元素1和元素2可以是任意基础选择器

2.3 子选择器（重要）

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

元素1>元素2 {

}

div>p {

}

• 元素1和元素2中间用大于号隔开
• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2必须是亲儿子，其孙子、重孙之类都不归他管，也可以叫他亲儿子选择器

2.4 并集选择器（重要）

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

ul,
div {

}

• 元素1和元素2中间用逗号隔开
• 任何形式的选择器都可以作为并集选择器的一部分
• 并集选择器通常用于集体声明

2.5 链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果

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

• 为确保生效，请按照LVHA的顺序声明：:link、:visited、:hover、:active

• a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

  实际工作开发中最常用写法

a {
	color: gray;
}
a:hover {
	color: red;
}
其他两个就不用写了

2.6 :focus伪类选择器

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

input:focus {
	background-color: yellow;
}

3、CSS元素显示模式

3.1 什么是元素显示模式

元素显示模式就是 元素（标签）以什么方式进行显示，比如< div>自己占一行，一行可以放多个< span>标签

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

3.2 块元素

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

特点

• 自己独占一行
• 高度、宽度、内外边距都可以控制
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面可以放行内或者块级元素

注意

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

3.3 行内元素

常见的行内元素有< a>、< strong>、< b> 、< em>、< i>、< del>、< s>、< ins>、< u>、< span>等。 其中< span>是最典型的行内元素，有的地方也将行内元素称为内联元素

特点

• 一行可以显示多个
• 高、宽直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

注意

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

3.4 行内块元素

在行内元素中有几个特殊的标签——< img/>、< input/>、< td>，他们同时具有块元素和行内元素的特点

特点

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

3.5 元素显示模式转换

一个模式的元素需要另外一种模式的特性，比如想要增加链接< a>的触发范围

	方法
转换为块元素	display:block;
转换为行内元素	display:inline;
转换为行内块	display:inline-block;

4、CSS的背景

4.1 背景颜色

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

一般情况下背景颜色默认值是 transparent (透明)，我们也可以手动指定背景颜色为透明色

4.2 背景图片

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

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

优点是非常便于控制位置

background-image: none/url()

参数值	作用
none	无背景图（默认）
url	使用绝对或相对地址指定背景图像

4.3 背景平铺

使用background-repeat属性

参数值	作用
repeat	平铺
no-repeat	不平铺
repeat-x	沿x轴平铺
repeat-y	沿y轴平铺

4.4 背景图片位置

利用background-position属性

background-position： x y;

参数表示：x坐标、y坐标 。可以使用方位名词或精确单位

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

1. 参数是方位名词
   • 如果指定的两个值都是方位名词，则两个值前后顺序无关
   • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2. 参数是精确单位
   • 第一个参数一定是x坐标，第二个一定是y坐标
   • 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
3. 参数是混合单位
   • 第一个参数一定是x坐标，第二个一定是y坐标

4.5 背景固定

background-attachment属性设置，后期可以制作视差滚动效果

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

4.6 背景颜色半透明

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

• 最后一个参数是alpha透明度，取值范围在0~1之间
• 我们习惯把0.3的0省略掉
• 背景半透明是指盒子背景半透明，盒子里面的内容不受影响

4.7背景复合写法

没有特定的书写顺序，一般习惯约定顺序为

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

5、CSS的三大特性

5.1 层叠行

相同的选择器设置相同的样式，此时该样式就会覆盖前面的样式

div {
	color: red;
}

div {
	color:pink;
}
结果为粉色

原则

• 样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式

5.2 继承性

• 子标签会继承父标签的某些样式，如文本颜色和字号
• 子元素可以继承父元素的样式（text- 、font- 、line- 这些元素开头的可以继承，以及color属性）

行高的继承

body {
	font: 12px/1.5 'Microsoft YaHei';
}

• 行高可以跟单位，也可以不跟单位
• 如果子元素没有设置行高，则会继承继承父元素行高，为子元素文字大小的1.5倍

5.3 优先级

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

选择器	选择器权重
继承 或 *	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style=“ ”	1，0，0，0
！important	无穷大

注意

• 权重是由4组数字组成，但是不会有进位
• 下面的永远大于上面的
• 等级判断从左向右，如果某一位数值相同，则判断下一位
• 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

权重叠加

• 如果是复合选择器，则会有权重叠加，需要计算权重

  ul li {
  	color: red;
  }
  权重：0,0,0,1+0,0,0,1=0,0,0,2
  
  
  li {
  	color: blue;
  }
  权重：0,0,0,1