如何引入CSS

最新推荐文章于 2024-08-20 23:30:49 发布

下雨的清晨

最新推荐文章于 2024-08-20 23:30:49 发布

阅读量215

点赞数 3

分类专栏： # CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/2301_79155654/article/details/141338304

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前面的博客中已经讲到了HTML负责整合Internet资源，而CSS负责对页面的美化，那么CSS与HTML又是怎么联系起来的呢？
或者说，某个HTML文件又是怎么对应到相应的CSS的内容的呢？

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

内联样式 (`inline`)

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

例如：

<!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>内：

<!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文件：

<!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文件：

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

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

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

引入多个CSS文件

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

下雨的清晨

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
如何引入CSS

前面的博客中已经讲到了HTML负责整合Internet资源，而CSS负责对页面的美化，那么CSS与HTML又是怎么联系起来的呢？或者说，某个HTML文件又是怎么对应到相应的CSS的内容的呢？这里给出了相应的三种方法。
复制链接

扫一扫