前端入门知识分享：如何在HTML或CSS文件中引用CSS文件。

2024-07-13 07:18:53

阅读提示：本文仅仅仅适用于刚刚接触HTML和CSS的小白从业者，新人爱好者。自觉身份不符的老鸟们，尽快绕行吧！

什么是CSS？什么是CSS文件。

CSS，全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页上的信息格式化和显示方式的语言。它的主要功能是控制网页的视觉表现，包括字体、颜色、布局等样式结构。通过CSS，开发者可以将文档的内容与其表现形式分离，这样不仅提高了网页的可维护性，还使得样式更加灵活和多样化。

CSS的应用非常广泛，它可以用来控制网页中几乎所有可见元素的样式，包括但不限于文本的字体、大小、颜色，元素的位置、大小、背景色，以及各种交互效果等。CSS属性的具体书写不是本文讨论的内容。如果您还需要了解更多关于css的基础知识，请自行上网学习。

CSS样式可以直接写在HTML文档中，也可以单独存储在样式文件（.css类型的文件）中，这样可以被多个页面共享使用。单独存储的样式表文件，就是我们常说的CSS文件（样式表文件）。

如何在HTML中使用CSS？

在HTML中使用css，有下面四种方法：

行内样式：使用 HTML 标签的 style 属性定义 CSS 样式；
内嵌样式：使用 style 标签在 HTML 文档头部（通常在 head 之间）定义 CSS 样式；
链接式：使用 link 标签引入外部 CSS 样式表文件。
导入式：使用 @import 命令导入外部 CSS 样式表文件。

接下来，我来分别举例说明一下具体方法。

行内样式：

行内样式的写法：

所谓行内样式，就是把样式直接写在HTML的行中。比如：

<p style='color:red;font-size:14px;'>这就是一个典型的行内样式写法。颜色：红，字号大小：14像素。</p>

行内样式的语法：

style="";

在引号中间，书写css代码，在需要书写多个样式时，使用 ' ; ' 分号分隔。 在HTML页面涉及到的大部分情况下：单引号和双引号均可使用，但注意一定要成对使用。

行内样式的特点：

代码短小，应用灵活：当你的页面只需要极少的样式，或者，这个样式不需要再做调整，或可能通过 JS 进行动态调整的时候，采用这样的写入方式。
优先级高：直接写在行内的样式，优先级高于其他方式书写的样式表。
效率低下：因为样式表写在行内，即使使用相同标签的样式，也要重复的写在每行内。这样产生大量的冗余代码，增加了大量的前端工作量，占用了大量服务器资源和流量。
难读与易错：页面中大量的style，降低了页面的结构清晰度，导致页面不容易辨识，不方便修改，增加后期维护成本。
没有实现内容与变现分离，与CSS设计的初衷相悖。

内嵌样式：

内嵌样式的写法：

内嵌样式，与行内样式既有相同也有不同。相同点：都是在HTML页面直接写样式表。区别是：内嵌样式是把本页用到的样式几种写在一个或几个style标签中间。而style标签可以出现在HTML页面的任何地方。但通常，它会出现在 head 标签之间。比如：

<head>
<style>
    .btn-img{  
      background: #eace00;  
    }
    
    .btn-img span{
      display: block;
      transform-style: preserve-3d;
      transition: all .5s;
    }    
</style>
</head>

内嵌样式的语法和作用优先级：

<style>
    .classA{
        ······    
    }
    .classB{
        ······    
    }
    ······
</style>

在内嵌样式的书写过程中，可以为使用相同样式的标签设置统一的class名，然后通过在html的标签内添加class，实现样式表应用。比如：

<p class='classA' > 
<p class='classA classB' >

在class的语法中，可以使用 “”，‘’ 双引号或者单引号引用class类名，当一个标签需要使用多个class类时，在引用内使用空格间隔。注意，当 classB 与 classA 的样式表中存在定义的样式冲突的情况，比如：

.classA{
       color：red;  
    }
.classB{
       color: blue;   
    }

上面这样的写法在下面这样引用时：

<p class='classA classB' >

起作用的是 color：blue 。注意，这里不是因为在样式表文件中 classB写在了classA的后面。但是，当你在同个样式表中书写了两个相同类名的相同属性时：

.classA{ color: blue; } 
.classA{ color：red; }

是书写在后面的 color：blue 起作用。这取决于 css的优先级原则：作用在后面的样式会覆盖前面的样式，换句话说：在渲染过程中后起作用的样式优先。

当然，熟悉CSS同学会说，我们还可以通过!important 改变优先级。注意：在书写样式表时使用 !important 的权重最高（但这并不是W3C推荐的写法）。 !important 不是改变了css样式的优先级，而是脱离了优先级规则，使用一个 !important 规则时，此声明将覆盖任何其他声明。

比如下面的写法，即使 color：red 写在后面，但因为 important的作用，依然是前面的 color：blue 起作用。

.classA{ color: blue !important; } 
.classA{ color：red; }

!important的引入主要是为了处理浏览器兼容性问题。在早期的浏览器版本中，如IE6不识别!important，而IE7及其他浏览器则支持。通过使用!important，开发者可以为特定浏览器提供它认识的样式写法，以达到在所有浏览器中显示一致的效果。这种做法在CSS中被称为hack。

然而，虽然!important在某些情况下非常有用，但它也可能导致CSS代码的混乱和难以维护。因此，建议仅在必要时使用它，并尽量通过其他方式（如调整选择器的特异性或重新组织规则）来避免使用!important。

总的来说，!important是CSS中一个强大的工具，用于确保特定样式的应用，尤其是在需要覆盖其他冲突样式时。但使用时需要谨慎，以避免引入不必要的复杂性和维护问题。

使用 !important 是一个坏习惯，应该尽量避免。

另外一个非常值得新手注意的是，当你的标签需要同时使用一个以上的class类时，下面这样书写是错误的：

<p class='classA' class='classB' >

上面的书写方式，将导致classA失效。正确的打开方式是：

<p class='classA classB' >

内嵌样式的特点：

内容与表现进行了简单的分离。
提高了页面样式的复用性。
没有脱离页面，在需要修改样式表的时候，还是需要在页面上进行修改，使前端工程师与程序工程师同时在页面上工作，提高了出错的几率。

链接式：

链接式引用CSS文件的写法：

链接式通过 HTML 的 link 标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。比如：

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

当你有多个CSS文件时，你可以这写：

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

使用上面的写法，CSS编写可以非常清晰的管理项目的样式表，比如：

reset.css --- 清除浏览器默认样式
style.css --- 全站通用的控件，字体，布局等样式
index.css --- 首页涉及到的样式

需要特别注意的是，页面渲染时，也同样遵循了写在后面的样式覆盖前面样式的规则。所以，要记得把清除浏览器样式放在最前面，不把首页的样式表放在最下面：越局部的，越靠后。

接着以上述书写顺序为例，假设你在style.css 的 H1 标签中，写了如下样式：

/* style.css */ 
h1 { color:red; font-size：1.8rem; }

而你在index.css 中，需要将 h1 的颜色变成绿色，但不调整文字的大小，那么你不需要去 style.css 中去修改 h1 的样式，你只需要在 index.css 中这样写：

/* index.css */ 
h1{ color:green; }

这时候，你的首页的H1 的文字样式就改变成绿色了。而其他页面的H1依然还是红色的。这个例子，体现了样式表拆分管理的优点，也体现了样式表在页面中的优先级规则。

链接式引用CSS文件的特点：

HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离。
提高了网页结构的扩展性和 CSS 样式的可维护性，当你需要修改某个页面的样式时，你只需要将某个样式表从服务器上下载到本地，修改完成后上传即可。
使从事样式表编写的工作者，专注于样式表本身。

导入式：

使用 @import 命令导入外部样式表。

导入式引用样式表的的写法：

@import url(css/daoru.css);
@import url('style/daoru.css');
@import url("daoru.css");

上面的例子展示了位于相同或不同路径下的页面和样式表文件的导入方法。如果两个文件位于同一目录，也可以省略URL路径，直接使用文件名：

@import daoru.css; 
@import 'daoru'; 
@import "daoru.css";

如你所见，这个写法是非常不严谨的。你可以和灵活的将css文件通过上述方式引用到HTML文件中。其实，这是一种在HTML页面中不太常见的引用样式表文件的方法。至于优先级规则，@import 与

受前后顺序的规则限制一模一样。这里就不再做讨论了。

在CSS文件中引用CSS文件：

在CSS文件中引用另一个CSS文件，可以使用CSS的@import规则。这个规则必须在其他CSS规则之前使用，所以通常放在文件的最开始。

例如，假设你有两个CSS文件：base.css和theme.css。你想要在theme.css中引入base.css，可以在theme.css文件的最开始添加以下代码：

@import url('base.css'); 
/* 其他theme.css的样式规则 */

同前面所说的在页面中导入样式表的方法一样，如果两个样式表文件位于同一目录，也可以省略URL路径，直接使用文件名：

@import 'base.css'; 
/* 其他theme.css的样式规则 */

请注意：@import规则可能会导致性能问题，因为它可能增加额外的HTTP请求，从而影响页面加载性能。因此，在包含内容较多的站点上，应谨慎使用或考虑使用其他技术如预处理器（如Sass或Less）来合并CSS文件。

样式表优先级：

基于前面所有陈述总结，样式表的优先规则可以归纳为：

内联样式 > 内部样式和外部样式比较：标签上面使用的style属性优先级最高。
内部样式和外部样式的优先级比较：后读取的样式优先级更高，即：哪个最后定义，就使用哪个样式，也可以理解为后定义的样式，会覆盖前面定义的样式。在渲染过程中，最后起作用的样式优先级最高。
最近祖先样式的优先级：‌如果一个元素嵌套在另一个元素内，‌那么内部元素的直接样式将优先于外部元素的祖先样式。‌例如，‌如果一个类名为son的div的颜色被设置为蓝色，‌而它的祖先div的颜色被设置为红色，‌那么son这个div的颜色将是蓝色2。‌
权重：‌权重是决定CSS规则如何被浏览器解析并最终显示的关键。‌权重越高的样式优先级越高。‌每个选择器都有一个特定的权重值，‌当多个样式被应用到同一个元素上时，‌权重决定了哪种样式将被采用。!important 的权重最高。

说了这么多，相信对于新手来说会有所帮助！别看我文章不收费，但是内容却是实实在在的。所以，看完了的同学，请帮忙点赞+关注+评论！谢谢！

码农公寓