CSS学习笔记——CSS进阶

“本部分记录了CSS进阶的内容”

目录

1.选择器

（1）后代

（2）子代

（3）并集

（4）交集

（5）hover伪类

2.背景

（1）背景色

（2）背景图

（3）背景平铺

（4）背景位置

（5）background

（6）背景图和img的区别

3.显示模式

（1）块级元素

（2）行内元素

（3）行内块

（4）转换

（5）嵌套规范

4.特性 

（1）继承性 

（2）层叠性

5.补充

---

1.选择器

（1）后代

后代包括儿子、孙子、重孙子......        但CSS选择器中最好不要超过三级。

使用空格选择父元素中的其他元素，两个选择器中间用空格隔开，结构如下：

<!-- 这是.html -->
<div>
    <p><a href="#">a是div的后代孙子</a>
        p是div的后代儿子</p>
</div>

/*这是.css*/
div p {
    color : red;
}

<p>是<div>的后代儿子，<a>是<div>的后代孙子。

---

（2）子代

使用大于号">"选择父元素中的子元素，也就是之选儿子这一代的元素，结构如下：

<!-- 这是.html -->
<div>
    <a href="#">这是div的大儿子</a>
    <p>这是div的二儿子
        <a href="#">这是div的孙子</a>
    </p>
</div>

/*这是.css */
div>a {
    color : red;
}

 只选中了<div>的儿子<a>，没有选中它的孙子<a>。

---

（3）并集

使用逗号","选择多个元素，同时设置它们的样式，并且它的每个选择器也可是复合型式（就像上边的后代、自带选择器），结构如下：

<!-- 这是.html -->
<p>这是一个p</p>
<a href="#">这是一个a</a>

/*这是.css*/
p,a {
    color : red;
}

 这就可以同时设置<p>和<a>的样式。

---

（4）交集

直接上例子：

<!-- 这是.html -->
<p>这是一个p</p>
<p class="box">这是一个p的box</p>
<a href="#" class="box">这是一个a的box</a>

/*这是.css*/
p.box {
    color : red;
}

 选中了既是<p>元素又有class属性的p.box。

---

（5）hover伪类

当鼠标悬停在该元素上时，元素改变其状态，结构如下：

<!-- 这是.html -->
<p>伪类选择器</p>

/*这是.css*/
p:hover {
    color:red;
}

 当鼠标悬停在“伪类选择器”上时，它的颜色就会变为红色。

---

2.背景

（1）背景色

属性名：background-color

属性值：关键字、rgb、rgba、十六进制......

注意：默认不设置是透明的。

示例：

/*这是.css*/
div {
    background-color:red;
}

---

（2）背景图

属性名：background-image

属性值：url("图片的路径")

注意：url中可以省略引号；背景图默认是水平竖直平铺的；背景图仅仅给盒子装饰，而不能撑开盒子。

示例：

/*这是.css*/
div {
    background-image:url("./firefox.png");
}

---

（3）背景平铺

属性名：background-repeat

属性值	效果
repeat	默认水平竖直平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着竖直方向（y轴）平铺

 示例：

/*这是.css*/
div {
    background-image:url("./firefox.png");
    background-repeat：no-repeat;
}

---

（4）背景位置

结构：background-position:水平方向位置 竖直方向位置

属性名：background-position

属性值	方位名词	水平方向	left
			center
			right
		竖直方向	top
			center
			bottom
	数字+px（坐标）	坐标系	原点(0,0)（盒子的左上角）
			x轴（水平向右）
			y轴（水平向左）

注意：方位名词和坐标值可以混用，第一个代表水平，第二个代表垂直。 

示例：

<!-- 这是.css -->
div.one {
    background-position:center center;
}
div.two {
    background-position:50px 50px;
}

---

（5）background

与font相同，background也可以复合写，其中的内容也可以省略，并且当有特殊需要单独写时，要写在复合写的下边；

结构：background:color image repeat position;

与font不同的是，background的复合写不需要注意顺序。

---

（6）背景图和img的区别

img：直接写img标签即可，不需要设置宽高，默认原尺寸；

background：需要设置div的宽高，因为图片只起到装饰作用，不能将div撑开。

一般来说，重要的图片使用img，不那么重要的使用background。

---

3.显示模式

（1）块级元素

代表元素：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......

特点：

1. 独占一行（一行只能显示一个）；
2. 宽度默认时父元素的宽度，高度默认由内容撑开；
3. 可以设置宽高。

---

（2）行内元素

代表标签：a、spar、b、u、i、s、strong、ins、em、del......

特点：

1. 一行可以显示多个；
2. 宽度和高度默认由内容撑开；
3. 不可以设置宽高。

---

（3）行内块

代表标签：input、textarea、button、select......

特点：

1. 一行可以显示多个；
2. 可以设置宽高。

---

（4）转换

改变元素默认的显示特点，让元素复合布局要求；

属性	效果	使用频率
display:block	转换成块级元素	较多
display:inline-block	转换成行内块元素	较多
display:inline	转换成行内元素	较少

示例：将块级元素修改为行内块

/*这是.css*/
div {
    display:inline-block;
}

如此就可以在一行内使用多个div。 

---

（5）嵌套规范

1. 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等；          but：<p>元素中不要嵌套<div>、<p>、<h>等块级元素
2. <a>元素内部可以嵌套任何元素。                                                                                              but：<a>元素中不可以嵌套<a>元素

---

4.特性 

（1）继承性 

特性：子元素默认继承父元素的样式

常见的可以继承的属性(文字控制属性都可以继承)

1. color
2. font的四个属性
3. text-indent、text-align
4. line-height
5. ......

注意：可以通过调试工具判断是否可以继承；当元素有默认属性时，继承性仍然生效，但是优先显示默认属性。

---

（2）层叠性

特性：

1. 给同一个元素设置不同的样式→此时样式会层层叠加→会共同作用在元素上；
2. 给同一个元素设置相同的样式→此时样式会层层覆盖→写在最后的样式会作用在元素上。

注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。

---

5.补充

特性.优先级

 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式。

优先级公式：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

注意：

1. !important写在属性值的后面，分号的前面
2. !important不能提升继承的优先级，继承的优先级永远最低
3. 实际开发不建议使用!important

对于复合选择器，需要通过权重叠加计算来判断最终哪个选择器优先级最高；

在复合选择器中：

        （0，0，0，0）→（行内样式个数，id选择器个数，类选择器个数，标签选择器个数）

从左到右挨个比较大小，优先选择大的。