如何添加 CSS

❮ 上一篇 下一篇 ❯

当浏览器读取样式表时，它将根据样式表中的信息来格式化 HTML 文档。

插入 CSS 的三种方法

插入样式表有三种方法：

外部 CSS

内部 CSS

内联 CSS

外部 CSS

使用外部样式表，您只需更改一个文件即可改变整个网站的外观！

每个 HTML 页面都必须在 head 部分的 元素中包含对外部样式表文件的引用。

示例

外部样式在 HTML 页面的 部分的 元素中定义。

This is a heading

这是一个段落。

自己动手试一试 »

外部样式表可以用任何文本编辑器编写，并必须以 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标签。

“mystyle.css” 文件外观如下：

"mystyle.css"

body { background-color: lightblue;}h1 { color: navy; margin-left: 20px;}

注意：不要在属性值 (20) 和单位 (px) 之间添加空格。错误 (有空格): margin-left: 20 px;正确 (无空格): margin-left: 20px;

内部 CSS

如果只有一个 HTML 页面具有独特的样式，可以使用内部样式表。

内部样式在 head 部分的

This is a heading

这是一个段落。

自己动手试一试 »

内联 CSS

可以使用内联样式为单个元素应用唯一的样式。

要使用内联样式，请将 style 属性添加到相关元素。style 属性可以包含任何 CSS 属性。

示例

内联样式在相关元素的 "style" 属性中定义。

这是一个标题

这是一个段落。

自己动手试一试 »

提示：内联样式会失去样式表的许多优点（将内容与表示混合在一起）。请谨慎使用此方法。

多个样式表

如果同一选择器（元素）在不同的样式表中定义了某些属性，将使用最后读取的样式表中的值。

假设一个外部样式表对

元素有以下样式：

h1 { color: navy;

}

然后，假设一个内部样式表也对

元素有以下样式：

h1 { color: orange; }

示例

如果内部样式定义在外部样式表的链接之后，则

元素将显示为“orange”。

自己动手试一试 »

示例

然而，如果内部样式定义在外部样式表的链接之前，则

元素将显示为“navy”：

自己动手试一试 »

层叠顺序

当一个 HTML 元素有多个样式指定时，将使用哪个样式？

页面上的所有样式将按照以下规则“层叠”到一个新的“虚拟”样式表中，数字 1 的优先级最高：

内联样式（HTML 元素内部）

外部和内部样式表（在 head 部分）

浏览器默认样式

因此，内联样式具有最高优先级，将覆盖外部、内部样式和浏览器默认样式。

自己动手试一试 »

听说过W3Schools Spaces吗？在这里您可以免费创建自己的网站，或保存代码片段以备后用。

立即免费开始 ❯

* 无需信用卡

通过练习来测试自己

练习

添加具有 URL：“mystyle.css” 的外部样式表。

This is a heading

This is a paragraph

This is a paragraph

提交答案 »

开始练习

视频：如何为 HTML 添加 CSS

❮ 上一篇 下一篇 ❯

★ +1

W3schools 学习路径

跟踪您的进度 - 免费！

登录 注册