外部样式表与内部样式表解疑

最新推荐文章于 2024-04-14 18:56:26 发布

L_TTTTTTT

最新推荐文章于 2024-04-14 18:56:26 发布

阅读量622

点赞数

文章标签： html

本文链接：https://blog.csdn.net/L_TTTTTTT/article/details/126771840

版权

外部样式表

每个页面使用标签链接到样式表。标签在（文档的）头部。
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。
文件不能包含任何的 html 标签。
样式表应该以 .css 扩展名进行保存。

还可以将样式编写到外部CSS文件中，然后通过link标签将外部的css文件引入到当前页面中

这样外部文件中的css样式将会应用到当前页面中。

将CSS样式统一编写到外部的样式表中，有以下特点:

完全使结构和表现分离，这样使样式表可以在不同页面中使用;

最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器缓存加快用户访问的速度以提高了用户体验,所以在开发中我们最推荐使用的方式就是外部的CSS文件。

举个例子:

假如浏览器打开了5个页面，而且这5个页面同时都需要访问2M的CSS文件中的样式。

如果每个网页都将样式表定义到自己的网页中那么这2M的CSS文件均是相互独立的，每个人都不会相互影响,当用户访问这5个网站时会重复下载5次2M相同的CSS样式代码，这样既占用了多余的带宽也让用户感觉不到网页很快，因此，我们可以将这公共的2M的CSS文件抽取出来，当第一个页面访问了2M的CSS中的样式时会自动下载到本地缓存一段时间，当第二个，第三个，...第五个页面访问时你会发现很快，因为大家都公共用了这2M的CSS文件，无形中节省了8M的带宽呢，而且还增加的用户的体验。

例子：

外部 CSS

外部样式表用于定义许多 HTML 页面的样式。

要使用外部样式表，请在每个 HTML 页面的 <head> 部分中添加指向该样式表的链接：

实例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

</body>
</html>

外部样式表可以在任何文本编辑器中编写。文件不能包含任何 HTML 代码，并且必须以.css扩展名保存。

结果应该是 "styles.css" 文件：

"styles.css":

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

内部 CSS

内部 CSS用于定义单个 HTML 页面的样式。

内部 CSS是在 HTML 页面的<head>部分中<style>元素中定义的。

下面的示例将所有<h1>元素（在该页上）的文本颜色设置为 blue，将所有<p>元素的文本颜色设置为 red。此外，页面将以 powderblue 背景色显示：

实例

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>这是一个段落。</p>

</body>
</html>