基本的CSS样式

这是一段机器翻译的文本，可能包含错误！

关于 CSS

HTML 是构建网页结构的基础，但 HTML 并不能说明网页应该呈现什么样的外观。这时 CSS 就派上用场了。

CSS 代表“层叠样式表”，这可能并没有说明太多，但最重要的是要知道它是一个“样式表”。换句话说，它为网页提供一种“风格”。它非常容易阅读，而且实际上很容易编写，但您在编写时必须准确。

我们首先要了解的是一种叫做“内部 CSS”的东西。

内部 CSS

这是一种位于 HTML 文件中的“CSS”类型。CSS 可以位于单独的文件中，但我们稍后会讨论这一点。

为了开始学习 CSS，我们将从 HTML 中的 <head> 标签开始。

任务 1.1

将这个 <style> 标签添加在 <head> 和 </head> 之间的某个位置：

<style>

</style>

这定义了一个我们可以编写 CSS 代码的区域。

结构

CSS 代码的结构与 HTML 非常不同，但它相对容易理解：

element {
    property: value; // 这是 CSS 元素的属性值
}

CSS 代码由三个部分组成：

element:
- 确定我们要设置样式的对象。
- 示例包括 h1、p、body、a，即任何标签。
property:
- 确定要更改此元素的什么内容。
- 示例：
  - color - 更改文本颜色
  - background-color - 更改背景颜色。
value:
- 确定属性要更改为的值。
- 例如，将文本颜色更改为 red，将创建红色文本。

Important

每行 CSS 代码都应以分号 ; 结尾。
否则，您的 CSS 代码将无法正常工作。

任务 1.2a

在 <style> 标签内。添加以下 CSS 代码：

p {
    color: red; // 这段代码将段落文本颜色设置为红色
}

h1 {
    background-color: blue; // 这段代码将一级标题的背景颜色设置为蓝色
    color: black; // 这段代码将一级标题的文本颜色设置为黑色
}

任务 1.2b

你认为这段代码会做什么？

任务 1.2c

如果你要将文本更改为蓝色，你会怎么做？如果是黄色呢？如果是绿色呢？尝试一下，看看会发生什么！

任务 1.2d

尝试在单个元素中添加更多行，例如：为段落 (p 元素) 添加背景颜色。 提示: 请记住，每行必须以分号 ; 结尾。

任务 1.2e

使用 font-size 来更改文本大小。以下是如何操作的示例：

p {
    color: red;
    font-size: 18px;
    // 这是段落的样式
}

Info

px 是 pixel 的缩写，表示文本大小应以像素为单位。

选择器

在结构中提到的 element，就是我们所说的“选择器”。有许多类型：

选择器	描述
`h1`, `p`, `div`, `a`	选择 HTML 标签。例如，所有 `<h1>` 元素。
`*`	选择页面上的所有元素。这很少使用。
`.class`	我们稍后会讨论这个，它选择具有给定“类”的所有元素。这比选择所有给定类型的元素更具体。
`#id`	选择具有特定 ID 的元素。这比类更具体。

类

“类”选择器是最有用的 选择器 之一。它允许您选择更具体的元素。让我们看一个例子。

我们有以下 HTML 代码：

<p>Dette er en paragraf!</p>
<p>Jaggu, dette er enda en paragraf!</p>
<p>Denne paragrafen kunne gjerne ha vert blå。</p>

如何使用 CSS 使只有第三段落具有蓝色文本？嗯，我们可以使用类来实现！

任务 1.3a

使用以下 CSS 类来使段落变为蓝色：

<p>Dette er en paragraf!</p>
<p>Jaggu, dette er enda en paragraf!</p>
<p class="blue-paragraph">Denne paragrafen kunne gjerne ha vert blå。</p>

因此，使用以下 CSS 代码在 <style> 中：

.blue-paragraph {
    color: blue; // 蓝色段落
}

结果将如下所示：

任务 1.3b

然后尝试使用名为 red-paragraph 的类使另外两个段落变为红色。

任务 1.3c

尝试使用一个 p 选择器，并应用一些不同的样式。会发生什么？结果是否符合预期？

Info

CSS 中发生的事情取决于特定性的高低。类选择器比“标签”选择器更具特定性。这意味着无论你将什么放在 p 样式中，类中的样式才是真正生效的。

Tip

你也可以在同一个元素上拥有多个类。你需要做的就是用空格分隔类：

<p class="blue-text epic-background">Dette ser tøft ut!</p>

任务 1.4

尝试一下！尝试在以下 HTML 代码中使用类来让国歌变得非常酷！ (只需复制并修改代码即可)

如果您想了解更多关于您可以使用 CSS 做什么，请访问 w3schools！

<span>Ja vi elsker dette landet</span><br>
<span>Som det stiger frem</span><br>
<span>Furet værbitt over vannet</span><br>
<span>Med de tusen hjem</span><br>
<span>Elsker Elsker det og tenker</span><br>
<span>På vår far og mor</span><br>
<span>Og den saganatt som senker</span><br>
<span>Drømmer på vår jord</span><br>
<br>
<span>Dette landet harald berget</span><br>
<span>Med sin kjemperad</span><br>
<span>Dette landet håkon verget</span><br>
<span>Mens øyvind kvad</span><br>
<span>Olav på det land har malet</span><br>
<span>Korset med sitt blod</span><br>
<span>Fra dets høye sverre talte</span><br>
<span>Roma midt imot</span><br>

Info

你也可以在某些词语周围使用 <span>，如果你想对它们做一些有趣的事情。

ID 选择器

与类相似，CSS 中还有另一种选择元素的方法，即使用“ID”。这比类更具体。现在可能有点难以理解为什么要使用它，但如果您经常使用 HTML、CSS 和 JavaScript，ID 的用处将会更加清晰。

一个元素可以有一个 ID，其意图是使其是***唯一的***。只有一个元素应该具有给定的 ID。这使得在选择内容时非常具体。这里我们只展示一个它在 CSS 中看起来如何的例子：

<h1 id="main-header">Velkommen til min nettside!</h1>
<!-- 欢迎来到我的网站！ -->

CSS 代码用于选择这个标题：

#main-header {
    font-weight: bold;
    /* Dette er en overskrift */  /* 这是一个标题 */
}