1. 学习
  2. 入门模块
  3. 你的第一个网站
  4. 设置内容样式

CSS：样式化内容

CSS (层叠样式表) 是用于样式化 Web 内容的代码。本文将引导你基本了解 CSS——它是如何工作的，以及如何改进你在上一篇文章中创建的内容结构的外观和感觉。

预备知识 对你的计算机操作系统、用于构建网站的基本软件和文件系统有基本了解。
学习成果
  • CSS 的目的和功能。
  • CSS 语法的基本组成部分——规则集、选择器、声明、属性、属性值。
  • 常见的 CSS 功能，包括盒模型、更改颜色和字体，以及定位 HTML 元素。

什么是 CSS？

与 HTML 一样，CSS 不是编程语言。它也不是标记语言。 CSS 是一种样式表语言。 CSS 用于样式化 HTML 元素：你选择要样式化的元素，并设置其样式属性的值，这些属性定义了它们的外观。

让我们回顾一下文章 创建内容 中的基本 HTML 示例

html
<p>Instructions for life:</p>

<ul>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Repeat</li>
</ul>

它本身呈现如下

如果我们加入一些 CSS，我们可以改变 HTML 的外观。以下代码片段选择 <p> 元素，并为其提供不同的 字体 和红色文本 颜色。然后它选择所有 <li> 元素，并为每个元素提供一个黄绿色 背景颜色、一个 1 像素的实心黑色 边框 和一个 5 像素的 下边距

css
p {
  font-family: sans-serif;
  color: red;
}

li {
  background-color: greenyellow;
  border: 1px solid black;
  margin-bottom: 5px;
}

应用 CSS 到 HTML 后，演示现在呈现如下

如你所见，只需一点点 CSS，我们就能改变一个朴素列表的外观。

CSS 还有许多其他功能，从指定背景图像和渐变，到控制排版和滚动行为，再到添加动画和构建整个网页布局。

将 CSS 应用到你的 HTML

使用 CSS 时，首先要确保你的 CSS 已成功应用到你的 HTML。在本节中，我们将为你的 first-website 添加一个 CSS 样式表，并将其应用到你的页面。

  1. 在你的 first-website 文件夹中，创建另一个名为 styles 的新文件夹。

  2. 使用文本编辑器，将以下 CSS 粘贴到一个新文件中，这将使你的 <p> 元素具有红色文本颜色。从这样的内容开始测试你的样式表是否正确应用到你的 HTML 非常有用。

    css
    p {
  color: red;
}

  3. 将文件保存到 styles 文件夹中，文件名为 style.css。

  4. 打开你的 index.html 文件。将以下行粘贴到 HTML 头部（在 <head> 和 </head> 标签之间）

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

  5. 保存 index.html 并在浏览器中加载它。你应该会看到类似以下内容

A Mozilla logo and some paragraphs. The paragraph text has been styled red by our css.

如果你的段落文本是红色的，恭喜你！你的 CSS 正在工作。如果不是，请仔细检查上述步骤，确保你正确遵循了每一步。

CSS 语法基础

在前面的 CSS 示例中，p 被称为一个 **选择器** ——它选择要样式化的元素。具体来说，p 选择 HTML 中的所有段落。花括号 ({ }) 内的行被称为一个 **声明** ——它为一个特定属性设置一个值。在这种情况下，**属性** 是 color，它控制段落的文本颜色，而设置的 **属性值** 是 red。

整个结构被称为一个 **规则集**。（术语 _规则集_ 通常简称为 _规则_。）

让我们看另一个规则集，这次有多个声明

css
p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

在一个规则集中，你必须使用分号 (;) 将一个声明与下一个声明分隔开。在每个声明中，你必须使用冒号 (:) 将属性与其值分隔开。

你还可以在一个规则中包含多个选择器，用逗号分隔，以选择多个元素。例如

css
p,
.my-class,
#my-id {
  color: red;
}

在这个 CSS 规则中，我们包含了一个 **元素**（或 **类型**）选择器，它选择一个特定的 HTML 元素。我们还包含了两种其他选择器类型，它们与本教程的其余部分无关。如果你好奇它们的作用，请查看我们的 基本选择器 指南。

注意：Scrimba 的 编写你的第一行 CSS！ MDN 学习合作伙伴 提供了一个有用的交互式 CSS 语法入门。

改进文本

让我们回到我们的例子，并使用 CSS 来改善文本的外观。我们将为页面设置新的字体，并更改不同元素的一些文本设置。

  1. 首先，找到你之前保存的 Google Fonts 的输出。如果你尚未选择字体，请点击链接立即选择。

  2. 将 <link> 元素添加到 index.html 的 <head> 中，就在闭合的 </head> 标签之前。它们应该看起来像这样

    html
    <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
  rel="stylesheet" />

    此代码将你的页面链接到 Google Fonts 服务托管的样式表，该样式表加载你选择的字体。

  3. 接下来，打开你的 style.css 文件并删除现有规则。我们不再希望我们的段落是红色的。

  4. 将以下行添加到 style.css

    css
    html {
  /* px means "pixels". The base font size is now 10 pixels high */
  font-size: 10px;
  /* Replace PLACEHOLDER with the font-family property value you got from Google Fonts */
  font-family: PLACEHOLDER;
}

    注意：CSS 中 /* 和 */ 之间的任何内容都是 **CSS 注释**，浏览器会忽略它。CSS 注释是一种你可以包含关于你的代码或逻辑的有用注释的方式，而不会影响你的网页的渲染方式。

  5. 将 font-family 占位符行替换为 Google Fonts 代码中的 font-family 行，例如

    css
    font-family: "Roboto", sans-serif;

    font-family 属性设置你要应用于 HTML 的字体。此规则为整个页面定义了一个全局基础字体和字体大小。所有 <html> 元素内的元素都将继承相同的 font-size 和 font-family。

  6. 现在让我们为 <h1>、<li> 和 <p> 元素设置一些字体和文本样式。我们将为每个元素设置新的 font-size 值。我们还将使用 text-align 居中标题，并增加段落和列表项的 line-height 和 letter-spacing，使正文内容更具可读性。

    css
    h1 {
  font-size: 60px;
  text-align: center;
}

p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

  7. 保存你的代码并在浏览器中加载你的 HTML（如果你之前打开过它，请刷新）。你的作品应该看起来与此类似

    A Mozilla logo and some paragraphs. A sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

    注意：尝试调整 px 值，直到你为标题和正文文本得到喜欢的字体大小。

CSS 就是关于盒子

你会注意到，随着你越来越多地使用 CSS，很多东西都与盒子有关。页面上的大多数 HTML 元素都可以被视为位于其他盒子之上（或旁边）的盒子。你可以为这些盒子设置大小、颜色、定位等值。这被称为 盒模型。

Three boxes sat inside one another. From outside to in they are labelled margin, border and padding

页面上占用空间的每个盒子都有以下属性：

  • padding：内容周围的空间。在前面的示例中，它是段落文本周围的空间。
  • border：紧邻内边距外面的实线。
  • margin：边框外的空间。

在本节中，我们还使用了以下属性，其中一些你以前见过

  • width：元素的宽度。
  • background-color：元素内容和内边距后面的颜色。
  • color：元素内容的颜色（通常是文本）。
  • text-shadow：元素内部文本的投影。
  • display：元素的显示模式（基本上是指它在网页上的外观或布局方式）。

在接下来的每个部分中

  1. 将提供的 CSS 代码添加到你的 style.css 文件的底部。
  2. 保存文件并刷新浏览器，查看 CSS 如何影响 HTML 渲染。
  3. 阅读提供的解释，以帮助你理解 CSS 的工作原理。
  4. 如果你喜欢冒险，可以尝试更改属性值以进一步自定义你的页面。

更改页面颜色

添加以下内容

css
html {
  background-color: #00539f;
}

此规则为整个页面设置了背景颜色。将颜色代码更改为你选择的颜色 你的网站会是什么样子？

样式化主体

接下来，添加此规则

css
body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

以上代码为 <body> 元素的几个属性设置了新值。让我们逐行讲解

  • width: 600px;：这强制正文始终为 600 像素宽。
  • margin: 0 auto;：当你为 margin 或 padding 等属性设置两个值时，第一个值影响元素的顶部_和_底部（在此例中设置为 0）；第二个值影响元素的左侧_和_右侧。auto 是一个特殊值，它将可用水平空间均匀地分配给左右两侧。
  • background-color: #FF9500;：这会设置元素的背景颜色。我们的项目使用红橙色作为 <body> 背景颜色，以与 <html> 元素使用的深蓝色形成对比。
  • padding: 0 20px 20px 20px;：这设置了内边距的四个值。目的是在内容周围留出一些空间。在此示例中，正文顶部没有内边距，右侧、底部和左侧有 20 像素内边距。这些值按顺序设置顶部、右侧、底部和左侧内边距。
  • border: 5px solid black;：这设置了边框的宽度、样式和颜色值。在这种情况下，它是一个 5 像素宽的实心黑色边框，围绕主体的所有侧面。

定位和样式化主页面标题

现在添加这个

css
h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}

你可能已经注意到正文顶部有一个可怕的间隙。这是因为浏览器对 <h1> 元素应用了默认样式。这可能看起来是个坏主意，但其目的是为未样式化的页面提供基本可读性。为了消除间隙，我们通过设置 margin: 0; 覆盖了浏览器的默认样式。

接下来，我们将标题的上下内边距设置为 20 像素，并将标题文本设置为与 HTML 背景颜色相同的颜色。

最后，text-shadow 为元素的文本内容应用阴影

  • 第一个像素值设置阴影与文本的 **水平偏移**：它横向移动的距离。
  • 第二个像素值设置阴影与文本的 **垂直偏移**：它向下移动的距离。
  • 第三个像素值设置阴影的 **模糊半径**。值越大，阴影看起来越模糊。
  • 第四个值设置阴影的基本颜色。

居中图像

最后，插入此规则

css
img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

接下来，我们将图片居中以使其看起来更好。我们可以使用与正文相同的 margin: 0 auto 技巧，但有一些差异，需要额外的设置才能使 CSS 生效。

<body> 元素是一个 **块级** 元素，这意味着它在页面上占用空间，并且可以接受外边距、内边距和其他盒子属性。另一方面，<img>（图像）元素是 **内联** 元素：默认情况下，它们不像块级元素那样接受外边距值。为了使自动外边距技巧在此图像上生效，我们必须通过使用 display: block; 赋予它块级行为。

最后，我们将 max-width 属性设置为 100%，以确保如果图像大于正文上设置的 width（600 像素），它将被限制为 600px 并且不会拉伸得更宽。

注意：如果你不完全理解 display: block; 以及块级元素和内联元素之间的区别，或者 max-width: 100%;，请不要太担心。随着你继续学习 CSS，它们会更有意义。

总结

如果你遵循了本文中的所有说明，你的页面应该看起来与此页面类似

A Mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

你可以在此处查看我们的版本。如果你遇到困难，可以随时将你的作品与我们GitHub 上的完成示例代码进行比较。

在本文中，我们只触及了 CSS 的皮毛。你将在本课程稍后的 CSS 样式基础 核心模块中学习更多内容。

另见

学习 HTML 和 CSS, Scrimba MDN 学习合作伙伴

Scrimba 的 学习 HTML 和 CSS 课程通过构建和部署五个出色的项目，以及由知识渊博的老师讲授的有趣互动课程和挑战，教你 HTML 和 CSS。

帮助改进 MDN

了解如何贡献

本页面最后修改于 ，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容问题