初识CSS，美化HTML

浅浅的花香味﹌ 2024-03-26 10:37 202阅读 0赞

CSS称为：**层叠样式表**（Cascading style sheets）

美化HTML即给页面种的HTML标签设置样式

## CSS语法规则 ##

css要写在head标签的里边，title标签的下面，用style标签框住

在style的书写格式为**选择器+大括号**

选择器：选择你要改变的那个标签的名称，例如<p></p>标签就写成

上面的代码第三行叫做css属性，color是属性名，red是属性值，在语句结束末尾一定要加分号";"

<head>
        <title>Document</title>
        <style>
            /* css注释 */
            /* 在这里写css */
            /* 选择器{css属性} */
            p {
                color: red;
                /* px是像素 */
                font-size: 30px;
                /* 背景色 */
                background-color: blue;
                width: 300px;
                height: 300px;
            }
        </style>
    </head>

![62fbc8f8a5d37b37fd92cecc597c8c3f.png][]

显示效果如上图

## CSS引入方式 ##

*  内嵌式

CSS写在style标签中，style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

*  外联式

CSS写在一个单独的.css文件中

需要通过**link标签**在网页中引入

*  行内式

写在标签的style属性中（可配合js使用）

### 外联式 ###

> **下面我们看看怎样用link标签把css引入html中**

1.先创建一个html文件，用p标签试验一下，这是引入前的样式

![b8043c3746eaec7b5ee87f7ed9695e55.png][]

![3808d1ae0509bf90de7dcad78816ca70.png][]

2.创建一个css文件

我这里命名为“引入”，文件后缀一定要是.css

![923add443b6b8c026710cf4cd5e912ba.png][]

3.然后我们要美化html里的p标签，就返回到我们的html代码中，输入link（一般还是在title底下写）

<!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>
        
        <link rel="stylesheet" href="./引入.css">
    </head>
    <body>
        <p>引入css</p>
    </body>
    </html>

然后看一下此时html显示的效果

![9cff303452e879d4f75518b7d8e7883c.png][]

可以看见.css文件已经被成功引用，改变了p标签的字体

### 行内式 ###

在标签内添加style，以div标签为例，添加颜色和字号

效果图

![785e28915064c7a84437458a4af2b81c.png][]

**行内式有一个局限性，就是只能控制一个标签**

这三种引用方式区分特点和使用场景

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:100px;"> <p style="text-align:center;"><strong>引用方式</strong></p> </td> 
   <td style="vertical-align:top;width:354px;"> <p style="text-align:center;"><strong>书写位置</strong></p> </td> 
   <td style="vertical-align:top;width:127px;"> <p style="text-align:center;"><strong>作用范围</strong></p> </td> 
   <td style="vertical-align:top;width:115px;"> <p style="text-align:center;"><strong>使用场景</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:100px;"> <p style="text-align:center;">内嵌式</p> </td> 
   <td style="vertical-align:top;width:354px;"> <p style="text-align:center;">CSS写在style标签中</p> </td> 
   <td style="vertical-align:top;width:127px;"> <p style="text-align:center;">当前页面</p> </td> 
   <td style="vertical-align:top;width:115px;"> <p style="text-align:center;">小案例</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:100px;"> <p style="text-align:center;">外联式</p> </td> 
   <td style="vertical-align:top;width:354px;"> <p style="text-align:center;">CSS写在单独的css文件中，通过link标签引入</p> </td> 
   <td style="vertical-align:top;width:127px;"> <p style="text-align:center;">多个页面</p> </td> 
   <td style="vertical-align:top;width:115px;"> <p style="text-align:center;">项目中</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:100px;"> <p style="text-align:center;">行内式</p> </td> 
   <td style="vertical-align:top;width:354px;"> <p style="text-align:center;">CSS写在标签的style属性中</p> </td> 
   <td style="vertical-align:top;width:127px;"> <p style="text-align:center;">当前标签</p> </td> 
   <td style="vertical-align:top;width:115px;"> <p style="text-align:center;">配合js使用</p> </td> 
  </tr> 
 </tbody> 
</table>

[62fbc8f8a5d37b37fd92cecc597c8c3f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ae0a8a6e424048b28792b2c5fcb5bee3.png
[b8043c3746eaec7b5ee87f7ed9695e55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0e80fd7871664f01927c2ff9f1a74f4d.png
[3808d1ae0509bf90de7dcad78816ca70.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/120056b16e5f4732a0cfee0e6e8f8c64.png
[923add443b6b8c026710cf4cd5e912ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/01d0f493ab78491dbe8a2a598e61da20.png
[9cff303452e879d4f75518b7d8e7883c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4e876e1899974e67b4f99ff721ebd210.png
[785e28915064c7a84437458a4af2b81c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/86c98ef2a19047d9a8a6c82098b6208b.png