使用CSS的三种方式

前端

CSS

作者

yangjh

发布日期

October 30, 2021

为网页添加 CSS 样式表的方式主要有三种，分别是：外部样式表、内部样式表和内嵌样式表。最好使用外部样式表，因为外部样式表更加符合 Web 标准所主张的内容和表现相分离思想。

外部样式表

外部样式表使用 link 元素将独立的样式表文件与网页连接起来，这样创作人员就可以用一个样式表文件为多个 html 文件指定样式，大大提高工作效率。link 元素必须放在 HTML 文档的 head 元素里面。就像这样：

<head>
<link href="global_v1.5.1.css" rel="stylesheet" type="text/css" media="screen"/>
</head>

这行代码的意思就是以global_v1.5.1.css文件作为 HTML 文档的 CSS 来源，我们将这种 CSS 文档称为外部样式表。

link 元素有这样几个属性：href 用来指定外部样式表存放的地址，rel 描述的是 HTML 文件和它相连的文件之间的关系，如上例中就表示global_v1.5.1.css是网页的样式表。type 属性用来表述外部资源的类型，而 media 属性用来描述样式表适合的媒体类型（完整的媒体类型参见、ref{CSSmedia}）。可以通过指定 media 的值，来为打印机、屏幕阅读器、投影仪、电视机、手机等不同的上网设备分别指定适合的样式表，这也体现了 CSS 的强大之处。

也可以在多种媒体中使用同一个样式表，只需要在 media 属性中以列出多种媒体名称，各个媒体名称之间用“，”隔开。例如：

<link href="global_v1.5.1.css" rel="stylesheet"  type="text/css" media="screen, projection"/>

以上代码的意思是使用global_v1.5.1.css作为文档在计算机屏幕和投影仪上显示时的样式表。

内部样式表

除了使用 link 元素链接外部样式表之外，CSS 还可以使用 style 元素将样式信息同网页结合起来，这种方式的样式表叫做内部样式表。

style 元素可以直接在页面中嵌入 CSS 样式信息，而不用将它们单独作为外部样式表保存，因此并不符合内容和表现分离的 Web 标准。内部样式表在页面不多时比较方便，因为样式信息被存放在网页内部，当页面数量增加后，一旦修改，就要分别修改网页内容，这不但效率低下，而且还存在潜在的不一致风险。

但如果我们就想基于全站的样式针对某个特定页面进行微调，那么使用 style 元素标记内部样式表则是不错的选择。内部样式表也需要在 head 元素中使用，例如：

<head>
<style type="text/css" media="screen">
……
</style>
</head>

内嵌样式表

除了外部样式表和内部样式表之外，CSS 还提供了一种叫做内嵌样式表的机制。内嵌样式表是在具体的需要添加样式的元素中使用 style 属性。使用内嵌样式表的场合并不多见，因为同外部样式表和内部样式表相比，内嵌样式表更加不易修改。内嵌样式表的例子如下：

<div style="font-size:38px">加入微博，记录点滴</div>

回到顶部