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 链接伪类选择器
链接伪类选择器注意事项：
- 须按照 LVHA 的顺序声明 :link- :visited- :hover- :active。
- 记忆法：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>** 标签是**最典型的块元素**
块级元素特点：
- 独占一行
- 高度、宽度、外边距 及 内边距 可调。
- 宽度默认为容器（父级宽度）的100%
- 是一个容器，里面可以放行内元素或块级元素
注意：
-
文字类的元素内不能使用块级元素
-
<p>标签主要用于放文字，不能放块级元素，特别是<div>
* 同理，<h1>~<h6>等都是文字类块级标签，不能放其他块级元素
2.2 行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、
<ing>、<u>、<span>等，其中 **<span>** 标签是 **最典型的
行内元素** ，也称为 内联元素
行内元素特点：
- 相邻行内元素在一行上，一行可以显示多个
- 无法设置高、宽
- 默认宽度是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意：
* 链接里面不能再放链接
* 特殊情况链接 <a> 里面可以放块级元素，但给 <a> 转换一下
块级模式最安全
2.3 行内块元素
行内元素——<img />、<input />、<td>，它们**同时具有块级元素和
行内元素的特点**
行内块元素的特点：
- （行内元素特点） 和相邻行内元素（行内块）在一行上，但他们之间有空隙，一行可以显示多个
- （行内元素特点） 默认宽度是本身内容宽度
- （块级元素特点） 高度，行高、外边距 及 内边距 可调
2.4 元素显示模式总结
2.5 元素显示模式转换
一个模式的元素需要另外一种模式的特性
比如 想要增加链接 <a> 的触发范围
- 转换为块元素：display: block;
- 转换为行内元素：display: inline;
- 转换为行内块：display: inline-block;
2.6 小工具snipaste的使用
常用快捷方式：
- F1可以截图。同时测量大小，设置箭头，书写文字等
- F3在桌面置顶显示
- 点击图片，alt 可以取色 （按shift可以切换取色模式）
- 按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 方位名词 |
- 参数是方位名词
- 两个值都是方位词，则两个值前后顺序无关，如left top 和 top left 效果一致
- 如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐
- 参数是精确单位
- 参数是精确坐标，第一个为 x 坐标，第二个为 y 坐标
- 如果只指定一个数值，则该数值一定是x坐标，另一个默认垂直居中
- 参数是混合单位
- 第一个值为 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);
- 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响；