如何引入CSS

如何引入CSS

下雨的清晨2024-08-21 8:52

前面的博客中已经讲到了HTML负责整合Internet资源，而CSS负责对页面的美化，那么CSS与HTML又是怎么联系起来的呢？

或者说，某个HTML文件又是怎么对应到相应的CSS的内容的呢？

这里给出了相应的三种方法。

内联样式 (`inline`)

内联样式就是直接在HTML元素的style属性中写CSS代码，通常用于对单个元素进行简单的样式设计。

例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例文档</title>
</head>
<body>
  <h3 style = "color:red;font-size:24px">标题</h3>
  <p style="color: red; font-weight: bold;">这是一个段落</p>
</body>
</html>

内部样式 (`internal`)

内部样式就是将CSS文档写到<head>标签内的<style>内：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例文档</title>
    <style>
        h3{
            color:red;
            font-size:24px
        }

        p{
            color: red; 
            font-weight: bold;
        }
    </style>
</head>
<body>
  <h3>标题</h3>
  <p>这是一个段落</p>
</body>
</html>

外部样式表 (`external`)

外部样式表是将CSS代码写入单独的.css文件中，在HTML文档里通过<link>标签将.css文件引入进去。

使用外部样式表的优点是一是避免了臃肿的HTML文档，二是使得同样的CSS样式文档能够应用给多个HTML文档，从而提高了代码的复用性和可维护性。

示例：

HTML文件：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例文档</title>
    <link rel="stylesheet" href="example.css">
</head>
<body>
  <h3>标题</h3>
  <p>这是一个段落</p>
</body>
</html>

CSS文件：

css 复制代码

        h3{
            color:red;
            font-size:24px
        }

        p{
            color: red; 
            font-weight: bold;
        }

对于<link>标签，这个标签用于引入外部资源，rel属性定义了外部资源与本文档的关系，stylesheet则意为引入的是CSS文件，href属性则定义了外部资源的路径。

引入多个CSS文件

在一个复杂的项目中，可能需要引入多个CSS文件，此时可以使用多个<link>标签引入。

内联样式 (inline)

内部样式 (internal)

外部样式表 (external)

引入多个CSS文件

内联样式 (`inline`)

内部样式 (`internal`)

外部样式表 (`external`)