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 三种模式总结区别

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);

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

3.3 背景平铺（repeat）

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

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

3.4 背景位置(position) 重点

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

• 案例 -> 14-CSS背景位置.html

• 案例 -> 15-案例演示.html

3.5 背景固定与滚动

background-attachment : 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 背景总结

3.8 综合案例

• 案例 -> 19-导航栏综合案例.html