CSS样式引入

小灰灰 2022-05-27 09:44 318阅读 0赞

我们已经学习了行内、内嵌和外链三种方式来引入我们的 CSS 样式，这里我们再深入探讨下。

## 行内方式 ##

通过给元素添加 style 属性来添加样式，如下：

<div style="color: red;">颜色为红色</div>
    <div style="color: red;">颜色为红色</div>

它有一个很明显的缺点：只能改变当前标签的样式，如果想要多个元素都使用同一种样式，每个元素都要添加一遍，这样不仅导致HTML代码冗长难以阅读，而且后期维护起来也非常艰难。

所以我们一般不会大量使用这种方式添加样式，只有在少量使用 js 改变样式的时候使用。

## 内嵌方式 ##

通过在`<head>`元素中使用`<style>`元素来定义：

<head>
        <style type="text/css"> div { color: red; } </style>
    </head>

该方法有效解决了第一个行内方式的带来的多元素不能重用同一个样式的问题，但是同时又暴露出了另一个问题：没有办法和其他页面共用，只能本页面使用。所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

这种方式我们一般在写简单 demo 的时候或者在移动端追求性能优化时使用。

## 外链方式 ##

通过在`<head>`元素中使用`<link>`元素来引入：

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

这是我们网页最常见的也是最推荐的引入 CSS 的方式，具备良好的可维护性。并且如果多个页面共用一个 CSS 文件的话，一般只在第一次加载时需要下载，以后切换页面时根本不需要加载该文件（浏览器一般有缓存）。

## 导入方式 ##

其实除了上面三种方式之外，还有第四种方法，就是`@import`导入的方式。这种方式呢建议只作为一个了解，千万不要使用。

引入方式如下：

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

可以看到这个这个方式也是引用一个外部CSS文件，那么和上面的外链方式有什么区别呢？

*  范畴不同： `<link>` 属于 HTML 元素，通过其`href`属性来引入外部文件；而 `@import` 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件
 *  兼容性差别： `@import` 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；而`<link>`则没有任何兼容问题；
 *  加载顺序不同：当 HTML 文件被加载时，`<link>`引用的文件会同时被加载，而 `@import`引用的文件则会等页面全部下载完毕再被加载
 *  js 修改支持：`<link>`支持使用JavaScript控制DOM改变CSS样式，`@import`不支持

## 总结 ##

在实际网页中我们应尽量使用 `<link>` 标签导入外部 CSS 文件，避免或者少使用其他三种方式。

发表评论取消回复

表情：

评论列表（有 0 条评论，318人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS样式引入方式

CSS样式引入方式任务描述相关知识样式引入方式内部样式表外部样式表内部样式使

约定不等于承诺〃/ 2022年11月13日 00:48/ 0 赞/ 223 阅读

相关 CSS创建（样式表引入）

一、如何插入样式表 1.外部样式表 2.内部样式表 3.内联样式二、外部样式表详解每个页面使用<link>标签链接到样式表，<link>标签在（文档的）头部。

布满荆棘的人生/ 2022年09月30日 13:46/ 0 赞/ 244 阅读

相关引入CSS样式表和引入HTML文件

引入CSS样式表和引入HTML文件 2006-11-14 08:54:19| 分类： [免费代码][Link 1] | 标签：[博客代码][Link 2]

深藏阁楼爱情的钟/ 2022年06月06日 09:47/ 0 赞/ 258 阅读

相关 css 样式引入的优先级

参考： [https://www.cnblogs.com/shengtianlong/archive/2010/08/11/1797667.html][https_www.cn

- 日理万妓/ 2022年06月04日 08:42/ 0 赞/ 310 阅读

相关 CSS样式引入

我们已经学习了行内、内嵌和外链三种方式来引入我们的 CSS 样式，这里我们再深入探讨下。行内方式通过给元素添加 style 属性来添加样式，如下： <di

小灰灰/ 2022年05月27日 09:44/ 0 赞/ 319 阅读

相关 CSS学习摘要-引入样式

CSS学习摘要-引入样式注：主要是摘录自[MDN 网络开发者][MDN]这个网站的。 CSS 实际上如何工作？当浏览器显示文档时，它必须将文档的内容与其样式信

野性酷女/ 2022年05月22日 21:28/ 0 赞/ 262 阅读

相关引入CSS样式表（书写位置）

引入CSS样式表（书写位置） CSS可以写到那个位置？是不是一定写到html文件里面呢？内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且

青旅半醒/ 2022年03月21日 05:10/ 0 赞/ 294 阅读

相关 css样式的引入方式

　　首选来介绍一下什么是CSS?(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子

比眉伴天荒/ 2021年10月29日 08:50/ 0 赞/ 464 阅读

相关 HTML引入CSS样式三种方法及优先级 CSS样式的写法

HTML引入CSS样式三种方法及优先级：方法 css的样式引用由3种方式。分别为行内样式、内部样式（嵌入式）和外部样式；行内样式： ...

朱雀/ 2021年03月26日 13:53/ 0 赞/ 837 阅读

相关 css样式引入方式的优缺点对比

1、行内样式优点：书写方便，权重高缺点：没有做到结构样式相分离

小灰灰/ 2020年05月18日 06:39/ 0 赞/ 879 阅读