4_CSS选择器进阶

day04_CSS选择器应用

Objective（本课目标）

掌握复合选择器
掌握后代选择器
掌握并集选择器
掌握标签显示模式和转换
掌握CSS背景

1. CSS复合选择器

1.1 后代选择器（重点）

作用：用来选择元素或元素组的子孙后代
案例 -> 01-后代选择器.html

语法： .class h3{color:red;font-size:16px;}

1.2 子元素选择器

作用：用来选择元素的直接下一级元素
案例 -> 02-子元素选择器.html

.class>h3{color:red;font-size:14px;}

1.3 交集选择器

/* 将P标签属性为bw1的变为绿色 */
p.bw1 {
    color: green;
}

交集选择器由两个选择器构成，选择相交的内容。
案例 -> 03-交集选择器.html

1.4 并集选择器（重点）

作用：表示组合选中。

p,
span,
.red {
color: green;
}

案例 -> 04-并集选择器.html

1.5 链接伪类选择器（重点）

超链接的状态：没有点击成功的时候是蓝色+下划线的状态，点击成功后是紫色+下划线的状态，点击中的时候是橙色的状态。
作用于超链接的伪类选择器的四种状态：
- a:link /* 未访问的链接 */
- a:visited /* 已访问的链接 */
- a:hover /* 鼠标移动到链接上 */
- a:active /* 选定的链接 */
- text-decoration: none; /* 取消超链接的下划线： */

注意
- 尽量按照lvha的顺序编写
案例 -> 05-链接伪类选择器.html

2. 标签显示模式（重点）

2.1 什么是标签显示模式

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。
- 什么是标签的显示模式？：标签以什么方式进行显示，DIV 独占一行，比如SPAN 一行可以放很多个
案例 -> 06-不同标签显示效果不一样.html

2.2 块级元素

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

块级元素的特点
- 独占一行
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是100%

注意：
- P和H标签里面不能放DIV
案例 -> 07-块级显示模式.html

2.3 行内元素

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

行内元素的特点：
- 一行可以显示多个标签
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能包含文本或者其他行内元素
- PS：链接里面不能再放链接
案例 -> 08-行内显示模式.html

2.4 行内块元素

在行内元素中有几个特殊的标签——<img/>、<input/>、<td>，可以对它们设置宽高和对齐属性

行内块元素的特点：
- 相邻行内元素在一行上,之间会有空白间隙，一行可以显示多个。
- 默认宽度就是它本身内容的宽度。
- 宽度，高度，行高、外边距以及内边距等都可以控制。
案例 -> 09-行内块显示模式.html

2.5 三种模式总结区别

元素模式	元素排列	设置样式	默认宽度	包含
块元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

2.6 标签模式转换

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
案例 -> 10-三种显示模式相互转换.html

2.7 综合案例

案例 -> 11-导航栏制作.html

3. CSS 背景(background)

3.1 背景颜色(color)

background-color:颜色值;   
默认的值是transparent（透明的）

3.2 背景图片(image)

background-image : none | url (url) 
background-image : url(images/demo.png);

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

案例 -> 12-CSS背景演示.html

3.3 背景平铺（repeat）

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

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

案例 -> 13-CSS背景平铺.html

3.4 背景位置(position) 重点

background-position : length || length
background-position : position || position

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

案例 -> 14-CSS背景位置.html
案例 -> 15-案例演示.html

3.5 背景固定与滚动

background-attachment : scroll | fixed

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

案例 -> 16-背景固定.html

3.6 背景简写

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

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

案例 -> 17-背景简写.html

3.7 背景透明度设置(CSS3的特性)

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

最后一个参数是alpha 透明度取值范围 0~1之间
我们习惯把0.3 的 0 省略掉这样写 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
因为是CSS3 ，所以低于 ie9 的版本是不支持的。
案例 -> 18-背景透明度设置.html

3.8 背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标，切记如果有精确数值单位，则必须按照先X 后Y 的写法
background-attachment	背景固定还是滚动	scroll/fixed
背景简写	更简单	背景颜色背景图片地址背景平铺背景滚动背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值