---
dir:
    order: 1
---

# 引入CSS

## 样式

### 外部样式

在link标记中rel和href属性是必须的，type属性和media属性可省略

```html
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
```

### 多个样式

```html
<link rel="stylesheet" href="sheet1.css" />
<link rel="stylesheet" href="sheet2.css" />
```

### 候选样式 

> [!warning] 
> 部分浏览器不支持候选样式(IE和firefox支持)

如果需要在浏览器中进行候选样式表，需要在后面加上`title`

```html
<link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="sheet2"/>
```

### 内部样式

使用`style`元素，其中`style`可以写多个

```html
<style>
    h1 {
        color: maroon;
    }

    body {
        background: yellow;
    }
</style>
```

使用`@import`指令

> [!caution]
>
> `@import`必须出现在`style`元素中，且要放在其他CSS规则之前，否则将根本不起作用。

```css
<style>
    @import url(index.css);

    h3 {
        color: red
    }
</style>
```

多个`@import`指令

```css
<style>
    @import url(index.css);
    @import url(style.css);

    h3 {
        color: red
    }
</style>
```

### 行内样式

> [!warning]
>
> 行间样式若存在多个style属性，**只能识别第一个**

```html
<body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: red;">
</body>   
```

