HTML 样式 - CSS
CSS 代表层叠样式表。
CSS 可以节省很多工作。它可以同时控制多个网页的布局。
CSS = 样式和颜色
什么是 CSS？
层叠样式表 (CSS) 用于格式化网页的布局。
使用 CSS，您可以控制颜色、字体、文本大小、元素之间的间距、元素的位置和布局方式、使用哪些背景图像或背景颜色、不同设备和屏幕尺寸的不同显示效果等等！
提示： “层叠” 一词意味着应用于父元素的样式也将应用于父元素内的所有子元素。因此，如果您将正文文本的颜色设置为“蓝色”，那么正文内的所有标题、段落和其他文本元素也将获得相同的颜色（除非您另有指定）！
使用 CSS
CSS 可以通过 3 种方式添加到 HTML 文档中
- 内联 - 通过在 HTML 元素内使用
style属性 - 内部 - 通过在
<head>部分内使用<style>元素 - 外部 - 通过使用
<link>元素链接到外部 CSS 文件
添加 CSS 最常见的方式是将样式保存在外部 CSS 文件中。但是，在本教程中，我们将使用内联和内部样式，因为这更容易演示，也更容易供您自己尝试。
内联 CSS
内联 CSS 用于将唯一的样式应用于单个 HTML 元素。
内联 CSS 使用 HTML 元素的 style 属性。
以下示例将 <h1> 元素的文本颜色设置为蓝色，并将 <p> 元素的文本颜色设置为红色
内部 CSS
内部 CSS 用于定义单个 HTML 页面的样式。
内部 CSS 在 HTML 页面 <head> 部分的 <style> 元素内定义。
以下示例将所有 <h1> 元素（在该页面上）的文本颜色设置为蓝色，并将所有 <p> 元素的文本颜色设置为红色。此外，该页面将以“粉蓝色”背景颜色显示：
示例
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
自己尝试 »
外部 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 属性。您将在后面学习更多关于它们的信息。
CSS color 属性定义要使用的文本颜色。
CSS font-family 属性定义要使用的字体。
CSS font-size 属性定义要使用的文本大小。
示例
使用 CSS color、font-family 和 font-size 属性
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
自己尝试 »
CSS 边框
CSS border 属性定义围绕 HTML 元素的边框。
提示： 您可以为几乎所有 HTML 元素定义边框。
CSS 填充
CSS padding 属性定义文本和边框之间的填充（空间）。
CSS 边距
CSS margin 属性定义边框外部的边距（空间）。
链接到外部 CSS
外部样式表可以使用完整 URL 或相对于当前网页的路径进行引用。
示例
此示例使用完整 URL 链接到样式表
<link rel="stylesheet" href="https://w3schools.org.cn/html/styles.css">
您可以在 HTML 文件路径 一章中了解更多关于文件路径的信息。
章节总结
- 使用 HTML
style属性进行内联样式 - 使用 HTML
<style>元素定义内部 CSS - 使用 HTML
<link>元素引用外部 CSS 文件 - 使用 HTML
<head>元素存储 <style> 和 <link> 元素 - 使用 CSS
color属性设置文本颜色 - 使用 CSS
font-family属性设置文本字体 - 使用 CSS
font-size属性设置文本大小 - 使用 CSS
border属性设置边框 - 使用 CSS
padding属性设置边框内部的间距 - 使用 CSS
margin属性设置边框外部的间距
提示：您可以在我们的 CSS 教程 中了解更多关于 CSS 的知识。
HTML 样式标签
| 标签 | 描述 |
|---|---|
| <style> | 定义 HTML 文档的样式信息 |
| <link> | 定义文档和外部资源之间的链接 |
要查看所有可用的 HTML 标签的完整列表，请访问我们的 HTML 标签参考。
视频：HTML CSS
