CSS02：引入方式

最新推荐文章于 2023-12-02 10:23:35 发布

MNox

最新推荐文章于 2023-12-02 10:23:35 发布

阅读量57

点赞数

分类专栏：前端三剑客文章标签：前端 css javascript

本文链接：https://blog.csdn.net/m0_62820255/article/details/130294588

版权

前端三剑客专栏收录该内容

19 篇文章 0 订阅

订阅专栏

内联样式（行内样式）

要使用内联样式，需要在相关标签内使用样式（style）属性。style属性可以包含仍何CSS属性

但是缺乏整体性和规划性，不利于维护。

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表。

在单个页面内具有整体性和规划性，利于维护；但多个页面之间容易混乱。

外部样式

当样式需要应用很多页面时，在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面将使用<link>标签链接到样式表，<link>标签在（文档）的头部。

代码展示：

CSS：

p{
    color: green;
    font-size: 50px;
    background-color: antiquewhite;
}

index01：

<!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>
        h3{
            color: blue;
            font-size: 30px;
        }
    </style>

    <!--链接外部样式-->
    <link rel="stylesheet" href="public.css">
    
</head>
<body>
    
    <!--内联样式-->
    <p style="background-color: lightblue; font-size: 15px;">CSS</p>

    <!--内部样式-->
    <h3>标题内容1</h3>
    <h3>标题内容2</h3>
    <h3>标题内容3</h3>
    <h3>标题内容4</h3>

    <!--外部样式-->
    <p>我是index01</p>
    <a href="index02.html">index02</a>
</body>
</html>

index02：

<!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="public.css">
</head>
<body>
    <p>我是index02</p>
</body>
</html>

运行展示：

index01：