CSS基础（三）引入CSS的方式

最新推荐文章于 2024-07-17 22:52:51 发布

今天自洽了吗

最新推荐文章于 2024-07-17 22:52:51 发布

阅读量361

点赞数

分类专栏： CSS 文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/hold_on_qlc/article/details/128395535

版权

CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

在html文件中引入CSS有三种方式：

内联样式
嵌入样式
外部样式

1、内联样式

也叫行内样式，顾名思义，就是在写html元素的那个行中直接引入CSS样式。

这种引入方式的优先级较高（对同一元素同时使用内联、嵌入和外部样式进行样式设置的时候，会优先选择内联样式设置的样式），正因如此，实际开发的时候很少用内联样式，因为这样代码可维护性要好很多。

<h1 style="color:red">hello world</h1>

2、嵌入样式

在head标签中通过style标签引入CSS，再通过各种选择器来设置元素（标签）的样式。

    <style>
        h1{
            color: blue;
        }
    </style>

3、外部样式

在head标签中，通过link标签引入一个外部的.css文件。

<link rel="stylesheet" href="style/12外部引入.css">

示例代码：

<!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>
        h1{
            color: blue;
        }
    </style>
</head>
<body>
    <!-- 内联样式，行内样式，优先级高于嵌入式 -->
    <h1 style="color:red">hello world</h1>
</body>
</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>
    <!-- link标签作用：引入一个外部的css文件 -->
    <link rel="stylesheet" href="style/12外部引入.css">
</head>
<body>
    <h1>hello world</h1>
</body>
</html>

外部css文件中的代码：