CSS基础三

# CSS基础三

## 复合选择器

由多个基础选择器组合而成，用于准确选择目标标签的选择器。

分类：

- 后代选择器

选择某元素的后代元素

写法：父选择器 子选择器 {CSS属性}，父子选择器空格隔开。

```html
    <style>
        span {
            color: blue;
        }
        div span{
            color: red;
        }
        div {
            text-align: center;
        }
    </style>
```

- 子代选择器

只选择子代元素，最近的子级

写法：父选择器>子选择器 {CSS属性}，父子选择器使用>隔开。

```html
    <style>
        div > span {
            color: red;
        }
    </style>
```

- 并集选择器

选中多组标签设置相同样式。

写法：选择器1,选择器2,选择器3 ... 选择器N {CSS属性}，逗号分隔。

```html
    <style>
        div ,
        p ,
        span {
            color: red;
        }
    </style>
```

- 交集选择器

选中同时满足多个条件的元素。使用基础选择器和类选择器或id选择器连写，没有分隔。

## 伪类选择器

表示元素状态，选中元素某个状态设置样式。

需要按照LVHA的顺序书写。

| 选择器   | 作用                 |
| -------- | -------------------- |
| :link    | 设置访问前属性       |
| :visited | 设置访问后链接属性   |
| :hover   | 鼠标悬停状态属性     |
| :active  | 点击时(激活)状态属性 |

```html
        a:link {
            color:blueviolet;
            text-decoration: none;
        }
        a:visited {
            color: green;
        }
        a:hover {
            color: red;
            text-decoration: underline;
        }
        a:active {
            color: orange;
        }
```

:hover 选择鼠标悬停状态。

```html
    <style>
        a:hover {
            color: red;
            text-decoration: underline;
        }
        a {
            text-decoration: none;
        }
        .box:hover{
            color: blue;
        }
    </style>
```

## CSS三大特性

- 继承性

子级继承父级的文字控制属性(font-size,font-weight...)

子级的样式优先，如果自身标签有属性，则不继承父级属性。

- 层叠性

相同的属性会覆盖，后面的CSS属性覆盖前面的

不同的属性会叠加，不同的CSS属性都会生效。

- 优先级(权重)

不同选择器的权重。

`通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important`

选中标签的范围越大，优先级越低

```html
        * {
            color: blue !important;
        }
/* !important添加在CSS属性中，提高到最高权重 */
```

优先级叠加计算：

(行内样式,id选择器个数,类选择器个数,标签选择器个数)

1. 从左向右比较个数，同一级的优先级高，个数高则向后比较
2. !important权重最高
3. 继承权重最低

## Emmet写法

HTML:

| 说明         | 标签结构                  | Emmet写法   |
| ------------ | ------------------------- | ----------- |
| 类选择器     | `<div class="box"></div>` | 标签名.类名 |
| id选择器     | `<div id="box"></div>`    | 标签名#id名 |
| 同级标签     | `<div></div><p></p>`      | `div+p`     |
| 父子级标签   | `<div><p></p></div>`      | `div>p`     |
| 多个相同标签 |                           | span*3      |
| 有内容的标签 | `<div>测试</div>`         | div{测试}   |

CSS:

使用属性名首字母缩写。

多个属性使用+连接。

## 背景属性

属性：

| 描述             | 属性                  |
| ---------------- | --------------------- |
| 背景颜色         | background-color      |
| 背景图片         | background-image      |
| 背景图片平铺方式 | background-repeat     |
| 背景图片位置     | background-position   |
| 背景图片缩放     | background-size       |
| 背景图片固定     | background-attachment |
| 背景图片复合属性 | background            |

背景图片：

网页中，使用背景图实现装饰性图片效果。

属性名：background-image(bgi)

属性值：url(文件路径)

```html
        /* 默认平铺效果(复制)，背景在最底层 */
		div {
            width: 200px;
            height: 200px;
            background-image: url(./1.png);
        }
```

背景图片平铺方式: 控制背景图片是否平铺

属性名：background-repeat(bgr)

属性值：

| 属性值    | 效果         |
| --------- | ------------ |
| no-repeat | 不平铺       |
| repeat    | 平铺(默认)   |
| repeat-x  | 水平方向平铺 |
| repeat-y  | 垂直方向平铺 |

背景图片位置:

属性名：background-position(bgp)

属性值:

关键字写法:

| 关键字 | 位置 |
| ------ | ---- |
| left   | 左侧 |
| right  | 右侧 |
| center | 居中 |
| top    | 顶部 |
| bottom | 底部 |

坐标法：

数字+px,正负都可。

```html
        div {
            width: 400px;
            height: 400px;
            background-image: url(./1.png);
            background-repeat: no-repeat;
            background-color:pink;
            background-position: left bottom;
            background-position: right top;
            background-position: 200px 200px;
        }
```

背景图片缩放：

属性名：background-size(bgz)

属性值：

关键字

- cover:等比例缩放背景图片以完全覆盖背景，可能背景图片部分看不见
- contain:等比例缩放背景以完全装入背景区域，可能出现背景空白

百分比表示：根据合作尺寸计算图片大小

数字+单位：400px

背景图片固定：不会随着元素滚动

属性名：background-attachment(bga)

属性值：fixed

```html
    <style>
        div {
            background-image: url(./bg.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
```

背景复合属性：

属性名：background

属性值：`背景色 背景图 平铺方式 位置 缩放 固定 (不区分顺序，空格隔开)`

```html
background: red url(./bg.jpg) center fixed no-repeat;
```

## 标签显示方式

- 块级元素

独占一行

宽度默认是父级的100%

添加宽高生效

div标签

- 行内元素

一行多个

宽度由内容决定

宽高无效

span标签

- 行内块元素

默认尺寸和内容宽高相关

宽高生效

一行多个

img标签

转换显示模式

属性名：display

属性值：

| 属性值       | 效果   |
| ------------ | ------ |
| block        | 块级   |
| inline-block | 行内块 |
| inline       | 行内   |

案例：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 楷体;
        }
        nav {
            height: 500px;
            background-image: url(./bk.png);
            background-repeat: no-repeat;
            /* background-size: contain; */
            background-position: left 118px;
            background-color:	#F3F3F4;
            text-align: right;
        }
        h2 {
            line-height: 100px;
            font-size: 36px;
            font-weight: 400;
        }
        p {
            line-height: 40px;
            font-size: 20px;
        }
        div {
            text-align: right;
        }
        a {
            height: 40px;
            width: 125px;
            background-color: #ff6a00;;
            color: white;
            display: inline-block;
            line-height: 40px;
            text-decoration: none;
            text-align: center;
            font-size: 20px;
        }
        a:hover {
            background-color: #ff8c1f;
        }
    </style>
</head>
<body>
    <nav>
        <h2>让创造产生价值！</h2>
        <p>我们希望小游戏平台可以可以提供无限的可能性，让每一个创作者可以将他们的才华和创意传递给客户。</p>
        <div>
            <a href="#">我要报名</a>
        </div>
    </nav>
</body>
</html>
```