如何将 CSS 添加到 HTML
当浏览器读取样式表时,它会根据样式表中的信息来格式化 HTML 文档。
将 CSS 插入 HTML 的三种方法
插入样式表的方法有三种:
- 外部 CSS
- 内部 CSS
- 内联 CSS
外部 CSS
使用外部样式表,您只需更改一个文件即可改变整个网站的外观!
每个 HTML 页面必须包含对内部外部样式表文件的引用<link>元素,位于头部部分内。
例子
外部样式在<link>元素内部<head> HTML 页面部分:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
亲自尝试 »
外部样式表可以在任何文本编辑器中编写,并且必须以 .css 扩展名保存。
外部.css 文件不应包含任何 HTML 标签。
“mystyle.css”文件的样子如下:
“mystyle.css”
身体 {
背景颜色:浅蓝色;
}
h1 {
颜色:海军蓝;
左边距:20px;
}
笔记: 不要在属性值和单位之间添加空格:
不正确(空格): margin-left: 20 px;
正确(无空格): margin-left: 20px;
内部 CSS
如果单个 HTML 页面具有独特的样式,则可以使用内部样式表。
内部样式定义在<style> element, inside the head section.
例子
内部样式在<style> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
身体 {
背景颜色:亚麻;
}
h1 {
颜色:栗色;
左边距:40px;
}
</style>
</head>
<body>
<h1>这是一个标题</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 {
颜色:海军蓝;
}
然后,假设 内部样式表 还有以下样式<h1>元素:
h1 {
颜色为橙色;
}
例子
如果定义了内部样式 后 指向外部样式表的链接,<h1> 元素将为“橙色”:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
颜色为橙色;
}
</style>
</head>
亲自尝试 »
例子
但是,如果内部样式定义 前 指向外部样式表的链接,<h1> 元素将为“海军”:
<head>
<style>
h1 {
颜色为橙色;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
亲自尝试 »
层叠顺序
当为 HTML 元素指定多种样式时,将使用哪种样式?
页面中的所有样式将按照以下规则“级联”到一个新的“虚拟”样式表中,其中编号为 1 的样式具有最高优先级:
- 内联样式(HTML 元素内)
- 外部和内部样式表(位于头部)
- 浏览器默认
因此,内联样式具有最高优先级,并且将覆盖外部和内部样式以及浏览器默认设置。
CSS — 如何将 CSS 添加到 HTML — W3Schools 视频
本视频简单介绍了如何将 CSS 添加到 HTML。
这是一系列视频教程的一部分 初学者的 CSS!