HTML 样式 - CSS

CSS 代表层叠样式表（Cascading Style Sheets）。

CSS 能极大地减少工作量。它可以一次性控制多个网页的布局。

CSS = Styles and Colors

Manipulate Text

Colors, Boxes

什么是 CSS？

层叠样式表（CSS）用于格式化网页的布局。

使用 CSS，您可以控制颜色、字体、文本大小、元素间距、元素的定位与布局方式、使用的背景图像或背景颜色、不同设备和屏幕尺寸的不同显示效果等等！

提示：词语“层叠”意味着应用于父元素的样式也将应用于父元素内的所有子元素。因此，如果您将正文文本颜色设置为“蓝色”，正文内的所有标题、段落和其他文本元素也将获得相同的颜色（除非您另行指定）！

使用 CSS

CSS 可以通过 3 种方式添加到 HTML 文档中：

行内样式 - 通过在 HTML 元素内部使用 style 属性
内部样式表 - 通过在 <head> 部分使用 <style> 元素
外部样式表 - 通过使用 <link> 元素链接到外部 CSS 文件

添加 CSS 最常用的方式是将样式保存在外部 CSS 文件中。然而，在本教程中，我们将使用行内和内部样式，因为这更易于演示，也便于您自己尝试。

行内 CSS

行内 CSS 用于为单个 HTML 元素应用独特的样式。

行内 CSS 使用 HTML 元素的 style 属性。

下面的例子将 <h1> 元素的文本颜色设置为蓝色，将 <p> 元素的文本颜色设置为红色：

实例

<h1 style="color:blue;">蓝色标题</h1>

<p style="color:red;">红色段落。</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 border 属性：

p {
  border: 2px solid powderblue;
}

亲自试一试

CSS 内边距

CSS padding 属性定义文本和边框之间的内边距（空间）。

实例

使用 CSS border 和 padding 属性：

p {
  border: 2px solid powderblue;
  padding: 30px;
}

亲自试一试

CSS 外边距

CSS margin 属性定义边框外的外边距（空间）。

实例

使用 CSS border 和 margin 属性：

p {
  border: 2px solid powderblue;
  margin: 50px;
}

亲自试一试

链接到外部 CSS

外部样式表可以使用完整 URL 引用，也可以使用相对于当前网页的路径引用。

实例

此例使用完整 URL 链接到样式表：

<link rel="stylesheet" href="https://www.w3school.com.cn/html/styles.css">

亲自试一试

实例

此例链接到位于当前网站 html 文件夹中的样式表：

<link rel="stylesheet" href="/html/styles.css">

亲自试一试

实例

此例链接到与当前页面位于同一文件夹中的样式表：

<link rel="stylesheet" href="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 样式标签

标签	描述
<html>	定义 HTML 文档的样式信息。
<html>	定义文档与外部资源之间的链接。

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。