CSS(二)

1. CSS的复合选择器

1.1 什么是复合选择器

• 对基本选择器进行组合形成的

• 包括：后代选择器、子选择器、并集选择器、伪类选择器等等

1.2 后代选择器（重要）

又称为包含选择器
语法：

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

例如：

ul li {样式声明} /* 选择 ul 里面所有的li标签元素 */

元素1、2用空格隔开

1.3 子选择器（重要）

只能选择作为某元素的最近一级子元素

语法：

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

上述语法表示选择元素1里面的所有直接后代元素2

例如：

div>p {样式声明}  /* 选择 div 里面所有最近以及 p 标签元素 */

元素1、2之间用大于号隔开

1.4 并集选择器（重要）

并集选择器通过**英文逗号（,）**连接

语法：

元素1，元素2 {样式声明}

上述语法表示选择元素1和元素2

例如：

ul,div {样式声明}  /* 选择 ul 和 div 标签元素 */

1.5 伪类选择器

伪类选择器 用于向某些选择器添加某些特殊的效果，或选择第1个，第n个元素

书写的最大特点是用冒号表示，比如 :hover、 :first-child

1.6 链接伪类选择器

链接伪类选择器注意事项：

1. 须按照 LVHA 的顺序声明 :link- :visited- :hover- :active。
2. 记忆法：love hate

链接伪类选择器语法：

/* a 是标签选择器 所有的链接 */
a {
    color: gray;
}
/* :hover 是伪类选择器 鼠标经过 */
a:hover {
    color: red;  /* 鼠标经过的时候，由  灰色  变为  红色  */
}

1.7 :focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般类表单元素才能获取。

input:focus {
    background-color: yellow;
}

1.8 复合选择器总结

2. CSS的元素显示模式

2.1 什么是元素显示模式

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

2.2 块元素

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

块级元素特点：

1. 独占一行
2. 高度、宽度、外边距 及 内边距 可调。
3. 宽度默认为容器（父级宽度）的100%
4. 是一个容器，里面可以放行内元素或块级元素

注意：

• 文字类的元素内不能使用块级元素

• <p>标签主要用于放文字，不能放块级元素，特别是<div>
  

* 同理，<h1>~<h6>等都是文字类块级标签，不能放其他块级元素

2.2 行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、
<ing>、<u>、<span>等，其中  **<span>**  标签是 **最典型的
行内元素** ，也称为 内联元素

行内元素特点：

1. 相邻行内元素在一行上，一行可以显示多个
2. 无法设置高、宽
3. 默认宽度是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

注意：

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

2.3 行内块元素

行内元素——<img />、<input />、<td>，它们**同时具有块级元素和
行内元素的特点**

行内块元素的特点：

1. （行内元素特点） 和相邻行内元素（行内块）在一行上，但他们之间有空隙，一行可以显示多个
2. （行内元素特点） 默认宽度是本身内容宽度
3. （块级元素特点） 高度，行高、外边距 及 内边距 可调

2.4 元素显示模式总结

2.5 元素显示模式转换

一个模式的元素需要另外一种模式的特性

比如 想要增加链接 <a> 的触发范围

• 转换为块元素：display: block;
• 转换为行内元素：display: inline;
• 转换为行内块：display: inline-block;

2.6 小工具snipaste的使用

常用快捷方式：

1. F1可以截图。同时测量大小，设置箭头，书写文字等
2. F3在桌面置顶显示
3. 点击图片，alt 可以取色 （按shift可以切换取色模式）
4. 按esc取消图片显示

2.7 单行文字垂直居中的代码

让文字行高等于盒子高度

3. CSS的背景

给页面元素添加背景样式

3.1 背景颜色

语法：

background-color: 颜色值;

元素背景颜色默认值为 transparent （透明），我们也可以手动指定背景颜色为透明色

background-color: transparent;

3.2 背景图片

使用场景：

实际开发常见于 logo 或者一些装饰性的小图片 或者是超大的背景图片，优点是便于控制位置（精灵图也是一种运用场景）

语法：

background-image : none | url(url)

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

注意：url括号里的路径不要加引号

3.3 背景平铺

语法：

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

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

3.4 背景图片位置

语法：

background-position: x y;

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

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

1. 参数是方位名词

• 两个值都是方位词，则两个值前后顺序无关，如left top 和 top left 效果一致
• 如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐

2. 参数是精确单位

• 参数是精确坐标，第一个为 x 坐标，第二个为 y 坐标
• 如果只指定一个数值，则该数值一定是x坐标，另一个默认垂直居中

3. 参数是混合单位

• 第一个值为 x 坐标，第二个为 y 坐标

3.5 背景图像固定（背景附着）

语法:

background-attachment: scroll | fixed

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

3.6 背景复合写法

实际开发中，一般约定顺序为：

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

语法：

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

3.7 背景色半透明

语法：

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

• 最后一个参数是alpha透明度，取值为0~1
• 习惯省略0.3的 0 ，写为 background: rgba(0,0,0,.3);
• 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响；

3.8 背景总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ivo6mtDw-1641629628889)(D:\前端入门\pink前端基础带资料\基础部分\04-前端基础CSS第二天\笔记图片（自己）\背景总结.png)]

nsparent url(img.jpg) repeat-y fixed top;

### 3.7 背景色半透明

语法：

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

• 最后一个参数是alpha透明度，取值为0~1
• 习惯省略0.3的 0 ，写为 background: rgba(0,0,0,.3);
• 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响；

3.8 背景总结

标签：行内,背景,元素,复合,repeat,background,选择器,CSS
来源： https://blog.csdn.net/qq_56231020/article/details/122381954