如何添加 CSS
当浏览器读取样式表时，它会根据样式表中的信息格式化 HTML 文档。
插入样式表有三种方法：
- 外部 CSS
- 内部 CSS
- 内联 CSS
外部 CSS
使用外部样式表，您只需更改一个文件即可更改整个网站的外观！
每个 HTML 页面都必须在 head 部分内的 <link> 元素中包含对外部样式表文件的引用。
示例
外部样式在 HTML 页面的 <head> 部分内的 <link> 元素中定义：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
外部样式表可以在任何文本编辑器中编写，并且必须使用 .css 扩展名保存。
外部 .css 文件不应包含任何 HTML 标签。
“mystyle.css”文件如下所示：
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
注意：不要在属性值 (20) 和单位 (px) 之间添加空格：
错误 (空格)：margin-left: 20 px;
正确 (无空格)：margin-left: 20px;
内部 CSS
如果单个 HTML 页面具有唯一样式，则可以使用内部样式表。
内部样式在 <style> 元素内定义，位于 head 部分内。
示例
内部样式在 <style> 元素内定义，位于 HTML 页面的 <head> 部分内：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 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 {
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 元素指定了多个样式时，将使用哪种样式？
页面中的所有样式将按照以下规则“层叠”到新的“虚拟”样式表中，其中第一个样式具有最高优先级：
- 内联样式（HTML 元素内）
- 外部和内部样式表（在 head 部分）
- 浏览器默认
因此，内联样式具有最高优先级，并将覆盖外部和内部样式以及浏览器默认设置。
听说过 W3Schools Spaces 吗？您可以在这里免费创建自己的网站，或保存代码片段以供日后使用。
总结
本文介绍了的HTML引入CSS方式，如有问题欢迎私信和评论
4671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
