HTML中引入CSS的方法

最新推荐文章于 2024-06-25 16:31:50 发布

前端的小小对象

最新推荐文章于 2024-06-25 16:31:50 发布

阅读量546

点赞数

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

本文链接：https://blog.csdn.net/a736755244/article/details/103610223

版权

18 篇文章 0 订阅

订阅专栏

一般有 4 种方式可以在 HTML 中引入 CSS：内联方式，嵌入方式，链接方式，导入方式

下面我们介绍每种方式的使用和优缺点比较

一、内联方式：直接在 HTML 标签中的 style 属性中添加 CSS

<div style="background: red"></div>

优点：

直观的看出每个元素的样式

缺点：

它只能改变当前标签的样式，引入的CSS代码会导致HTML代码变得冗长，使网页难以维护

①如果想要多个 <div> 拥有相同的样式，需要重复地为每个 <div> 添加相同的样式

②如果想要修改一种样式，需要修改所有元素上的style代码

二、嵌入方式：在 HTML 头部中的 <style> 标签下书写 CSS 代码

<head>
    <style>
        .content {
            background: red;
        }
    </style>
</head>

优点：

CSS代码几种到HTML中，对我们写网页的模板时比较有利；查看模板代码的人可以一目了然地查看网页结构

缺点：

书写的CSS 只对当前的网页有效

因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，会导致代码冗余，也不利于维护

三、链接方式：使用 HTML 头部的 <head> 标签引入外部的 CSS 文件

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是最常见的也是最推荐的引入 CSS 的方式。

优点：

①所有的CSS代码只存在于单独的CSS文件中，所以具有良好的可维护性

②所有的CSS代码只存在于CSS文件中，CSS文件会在第一次加载时引入，以后切换页面时只需加载HTML文件即可

四、导入方式：使用 CSS 规则引入外部 CSS 文件

<style>
    @import url(style.css);
</style>

可以在css文件中引入其他的样式文件

<!--可以在style.css中引入其他的样式表-->
@import url("style2.css");

.test{
	color:red;
}

五、链接方式（link）与导入方式（import）的比较

相同点：都是引入外部的 CSS 文件的方式

不同点：

Link

@import

综上：我们应尽量使用 <link> 标签导入外部 CSS 文件，避免或者少用使用其他三种方式