如何添加 CSS
当浏览器读取样式表时,它将根据样式表中的信息来格式化 HTML 文档。
插入 CSS 的三种方法
插入样式表有三种方法:
- 外部 CSS
- 内部 CSS
- 内联 CSS
外部 CSS
使用外部样式表,您只需更改一个文件即可改变整个网站的外观!
每个 HTML 页面都必须在 head 部分的 <link> 元素中包含对外部样式表文件的引用。
示例
外部样式在 HTML 页面的 <head> 部分的 <link> 元素中定义。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>这是一个段落。</p>
</body>
</html>
自己动手试一试 »
外部样式表可以用任何文本编辑器编写,并必须以 .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 部分的 <style> 元素中定义。
示例
内部样式在 HTML 页面的 <head> 部分的 <style> 元素中定义。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>这是一个段落。</p>
</body>
</html>
自己动手试一试 »
内联 CSS
可以使用内联样式为单个元素应用唯一的样式。
要使用内联样式,请将 style 属性添加到相关元素。style 属性可以包含任何 CSS 属性。
示例
内联样式在相关元素的 "style" 属性中定义。
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">这是一个标题</h1>
<p style="color:red;">这是一个段落。</p>
</body>
</html>
自己动手试一试 »
提示:内联样式会失去样式表的许多优点(将内容与表示混合在一起)。请谨慎使用此方法。
多个样式表
如果同一选择器(元素)在不同的样式表中定义了某些属性,将使用最后读取的样式表中的值。
假设一个外部样式表对 <h1> 元素有以下样式:
h1 {
color: navy;
}
然后,假设一个内部样式表也对 <h1> 元素有以下样式:
h1 {
color: orange;
}
示例
如果内部样式定义在外部样式表的链接之后,则 <h1> 元素将显示为“orange”。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
自己动手试一试 »
示例
然而,如果内部样式定义在外部样式表的链接之前,则 <h1> 元素将显示为“navy”:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
自己动手试一试 »
层叠顺序
当一个 HTML 元素有多个样式指定时,将使用哪个样式?
页面上的所有样式将按照以下规则“层叠”到一个新的“虚拟”样式表中,数字 1 的优先级最高:
- 内联样式(HTML 元素内部)
- 外部和内部样式表(在 head 部分)
- 浏览器默认样式
因此,内联样式具有最高优先级,将覆盖外部、内部样式和浏览器默认样式。
视频:如何为 HTML 添加 CSS

