作者选择了 多样性在技术基金作为 写给捐款计划的一部分接受捐款。
介绍
CSS的核心功能由两个功能执行: cascade 和 specificity. Cascade 处理如何读取 CSS 属性并应用于元素. Specificity 指示浏览器找到正确的元素并应用风格。 具体性的起点是 selector,它告诉浏览器要找到哪个元素。
选择正确的元素并提供正确的视觉风格是写CSS代码的基础,每次你需要调整网页上的元素的外观,使用选择器是关键。
本教程将构建您的技能集,并帮助您通过向您展示如何在特定场景中选择合适的元素来开发视觉丰富的网站。您将开始使用类型选择器来选择 HTML 元素来选择风格。
前提条件
- 熟悉 cascade and specificity的概念,因为它们适用于 CSS.
- 一个空的HTML文件,存储在您的本地机器上作为index.html,您可以从您的文本编辑器和选择的Web浏览器访问。 要开始,请参阅我们的 How To Set Up Your HTML Project教程,并遵循 How To Use and Understand HTML Elements有关如何在您的浏览器中查看您的HTML的说明。 如果您是新手的HTML,请尝试整个 How To Build a Website in HTML系列。
- 一个空的CSS文件名为
styles.css保存到您的本地机器上同一个目
设置HTML
在这个第一步,你将设置的HTML,你将风格在整个教程的剩余部分.本教程的HTML的目的是提供各种元素和情况的风格。
在您的编辑器中打开 index.html 文件,并添加下面的 boilerplate HTML,以便为该文件提供必要的基线代码:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <link href="styles.css" rel="stylesheet" />
6 </head>
7 <body>
8 </body>
9</html>
<link />元素已经在styles.css文件中加载,所以请确保该文件也已准备好。
现在,你需要一些内容. 开始通过在<body>元素中添加<header>和<article>元素。 在下面的代码块中,突出的部分将帮助你识别什么是新的或改变了:
1[label index.html]
2<!doctype html>
3<html>
4 ...
5 <body>
6 <header></header>
7 <article></article>
8 </body>
9</html>
<body> 和<header> 元素之间的关系被称为 parent 和 child,因为<header> 元素位于<body> 标签中。
接下来,您将在<header>中添加一个孩子元素,以给页面一个标题:
1[label index.html]
2...
3<header>
4 <h1>About Coral Reefs</h1>
5</header>
6...
在<article>中,添加四个孩子:一个<header>元素和三个<section>元素。<article>元素提供了所谓的 landmark,一个用于帮助使用辅助技术的浏览器的名称。在一个里程碑中应该只有一个<header>元素。
1[label index.html]
2...
3<article>
4 <header></header>
5 <section></section>
6 <section></section>
7 <section></section>
8</article>
9...
现在,为<文章>提供一个标题。 这里使用一个<h2>,因为它在<body>的<header>下方具有顶级标题的第二级标题。 添加<strong>标签在生物多样性一词周围,以强烈强调文本。 当您在浏览器中加载index.html,此文本不会因浏览器的默认值而有所不同。 您将稍后用此格式来区分标题和<strong>文本。
1[label index.html]
2...
3<article>
4 <header>
5 <h2>Coral Reef <strong>Biodiversity</strong></h2>
6 </header>
7 ...
8</article>
9...
接下来,在第一个段落中添加内容. 这将是两个段落,包含在<p>标签中,提供一些关于珊瑚礁的细节。在第一个段落中,添加一个<em>标签和一个<strong>标签,围绕一些短语来强调该内容:
1[label index.html]
2...
3<article>
4 <header>
5 ...
6 </header>
7 <section>
8 <p>Coral reefs are teeming with life. They are known as the <em>rainforests of the sea</em> with how many various speieces live within their waters. The defining feature of these ecosystems are the plant-like coral, which are really colonies of tiny invertabrates called <strong>polyps</strong>.</p>
9 <p>Sadly, many reefs around the world are in danger due to rising ocean temperatures, pollution, and overfishing.</p>
10 </section>
11 ...
12</article>
13...
在第二节中,为本节的标题添加一个<h3>标签,就像之前的<h2>一样,它被设置为<h3>,因为它是内容的子集。在<h3>中,添加一个<strong>标签,像在<h2>中一样在标题中围绕一个短语。然后使用<ul>标签来定义列表和<li>来定义列表中的每一个项目。
1[label index.html]
2...
3<article>
4 <header>
5 ...
6 </header>
7 <section>
8 ...
9 </section>
10 <section>
11 <h3><strong>Animal Life</strong> in a Coral Reef</h3>
12 <ul>
13 <li>Angelfish</li>
14 <li>Clownfish</li>
15 <li>Octopus</li>
16 <li><strong>Sharks</strong></li>
17 <li>Barracuda</li>
18 </ul>
19 </section>
20 ...
21</article>
22...
在最后一节中,设置类似于第二节的内容,标题为<h3>和标题中的一个单词周围的<strong>元素,而不是一个未分类的列表,创建一个有<ol>标签的排序列表来定义列表,但仍然用<li>标签定义每个项目。
1[label index.html]
2...
3<article>
4 <header>
5 ...
6 </header>
7 <section>
8 ...
9 </section>
10 <section>
11 ...
12 </section>
13 <section>
14 <h3>Sammy's <strong>Favorite</strong> Reef Food</h3>
15 <ol>
16 <li>Sea Grass</li>
17 <li><strong>Kelp</strong></li>
18 <li>Sea Grapes</li>
19 <li>Sea Lettuce</li>
20 </ol>
21 </section>
22</article>
23...
保存你的檔案
它涵盖了本教程的HTML,并提供了您可以开始编写风格的元素. 现在您已经完成了index.html,请在编辑器中打开,以便根据需要进行参考。 然后在浏览器中打开index.html,以查看您的浏览器的默认风格,这将看起来像下面的图像:
接下来,你会将风格应用到你创建的HTML页面。
使用类型选择器选择元素
在本节中,您将使用 type selector,更常被称为元素选择器。类型选择器根据标签名称在页面上找到元素,使其在特定性方面最广泛。
首先,看看浏览器中的index.html。 这是使用浏览器默认设置的页面看起来是什么样子。 这些是浏览器提供的预定义风格,以便为页面内容提供视觉信息。 这是风格的有用的起点; 在下面的例子中,您只会修改一些属性来定制页面外观。
接下来,在您的编辑器中打开 styles.css 文件. 默认浏览器字体通常是 serif font,这是一个引用字符的装饰性结尾的字符术语,例如在 Times New Roman中发现的字体。
创建一个类型选择器为 HTML <body> 元素,通过键入标签中的单词, body,其次是打开和关闭的弯曲字符。在弯曲字符中,添加一个新的行,然后添加 CSS 属性 font-family 值为 sans-serif。这个添加的 font-family 将改变整个文档的字符为 sans serif font。 与 serif 不同, sans serif 字符在字符上缺乏装饰性结尾,例如在 Helvetica或 Arial:
1[label styles.css]
2body {
3 font-family: sans-serif;
4}
一旦你做了这些更改,保存styles.css并刷新你的浏览器来验证文本已经全部改变到浏览器的默认sans-serif字体. 字体在整个页面上改变的原因是由于CSS的功能称为 heritance. 继承是当一个孩子的元素继承属性值从父母元素,除非另有说明。
接下来,调整页面中的h2和h3元素的字体重量。默认情况下,浏览器将应用风格,使这些元素成为大胆的字体。创建一个h2和一个h3类型选择器,在每个元素中添加一个字体重量属性,值为正常。
1[label styles.css]
2body {
3 font-family: sans-serif;
4}
5
6h2 {
7 font-weight: normal;
8}
9
10h3 {
11 font-weight: normal;
12}
保存并返回您的浏览器,并刷新index.html页面。<h2>和<h3>元素的内容已从大胆变更到正常字体重,除了<strong>元素中的文本。
任何设计的主要目的是帮助沟通,在这种情况下,设计正在通过字体重的对比来强调内容的特定部分。接下来,你将应用颜色来帮助鼓励这种对比。从一个em类型选择器开始,并应用一个背景颜色的黄色给它一个更突出的效果。接下来,为了帮助进一步关注强内容,创建一个强类型选择器,其颜色属性设置为红色:
1[label styles.css]
2...
3h3 {
4 font-weight: normal;
5}
6
7em {
8 background-color: yellow;
9}
10
11strong {
12 color: red;
13}
如下图所示,页面上的整个文本已变成无序字体,内容标题<h2>和h3>不再大胆,所有<strong>元素内容现在都是红色,而元素内容具有黄色突出背景:
在此步骤中,您使用多个类型选择器创建每个选择器的特定风格。类型选择器告诉浏览器根据元素的名称找到一个元素,并且是最广泛的具体性。
使用组合器选择器选择元素
在本节中,您将使用 combinator selector 进行更具体的元素选择,该选择器使用 HTML 元素的嵌入关系来选择相应的元素,您将使用此选择器使相同的元素类型在其他元素类型中出现时看起来不同。
在浏览器中打开index.html。当您查看风格时,由于强选择器将颜色:红色应用于页面上的强的所有实例,每时都会出现红色出现。
组合选项是由选项之间的空间字符定义的,HTML 原始字符是从左到右读取的。 最右选项是预期目标。 这可以是复杂的或简单的,以便 scope,或为预期元素提供足够的具体性。 要了解组合选项是如何工作的,请打开 styles.css 并在文件底部添加一个 p 类型的选项,然后添加一个空间,然后一个 `strong' 类型的选项,然后是一个开放和封闭的弯曲的支架:
1[label styles.css]
2...
3p strong {
4}
这是一个组合选项,该选项是针对<strong>元素,这些元素是<p>元素的祖先后裔,这意味着<p>元素不必是<strong>元素的直接父母,以便这个组合选项是真实的。
1[label styles.css]
2...
3p strong {
4 color: coral;
5}
保存更改,然后返回浏览器更新index.html。
接下来,在整个文件中添加更多的颜色多样性,开始使用一个h3的后代的h3元素,然后将这些蓝色转换为:
1[label styles.css]
2...
3p strong {
4 color: coral;
5}
6
7h3 strong {
8 color: blue;
9}
最后,要添加一些更多的颜色,请将<强>元素的颜色更改为dodgerblue,即丰富的蓝色,并将<强>元素的颜色更改为绿色。这里有助于了解组合器选择器的祖先要求。您可能认为您需要写出ul li strong和ol li strong以正确地瞄准这些元素。但这可以简化为ul strong和ol strong,因为ul和ol是足够具体的:
1[label styles.css]
2...
3h3 strong {
4 color: blue;
5}
6
7ul strong {
8 color: dodgerblue;
9}
10
11ol strong {
12 color: green;
13}
返回浏览器并点击更新. 未分类列表中的<strong>元素现在是丰富的蓝色,而排序列表中的<strong>元素现在是绿色,如下图所示:
在本节中,您了解了组合器选择器. 您使用了两个类型选择器的选择器多次创建<strong>元素的各种实例的自定义颜色。
使用 Selector 组选择多个元素
在本节中,您将使用 selector group 选择 HTML 元素。有一个名为 Don’t Repeat Yourself的编程原则,即 DRY。
在编辑器中打开styles.css。在教程中早些时候,你写了两种风格来将浏览器的默认重量从bold更改为normal:
1[label styles.css]
2...
3h2 {
4 font-weight: normal;
5}
6
7h3 {
8 font-weight: normal;
9}
10...
由于h2和h3类型的选择器在选择器块中具有相同的属性和值,所以可以将其与一个选择器组合起来。选择器组通过在选择器之间放一个字符串来完成。在这种情况下,您可以删除h3选择器块,然后在h2类型选择器后添加一个字符串,然后添加一个字符串,然后添加一个h3类型选择器。将每个选择器放到一个新的行上,以帮助清单的可读性。
1[label styles.css]
2...
3h2,
4h3 {
5 font-weight: normal;
6}
7...
打开浏览器并重新加载index.html,以验证没有发生任何变化。h2和h3现在都通过选择器块共享相同的风格,但是,您并不局限于保持风格看起来相同。
1[label styles.css]
2...
3h2,
4h3 {
5 font-weight: normal;
6}
7
8h2 {
9 color: maroon;
10}
11
12h3 {
13 color: navy
14}
15...
更新您的浏览器中的index.html,以发现h2和h3仍然具有相同的正常``字体重的共用风格,但仍然有各自的颜色属性。
选择者组不局限于某种特定类型的选择者,可以将不同类型的选择者聚合在一起以具有相同的风格. 这种组合功能可以以任何方式使用。
1[label styles.css]
2...
3h2,
4h3,
5ol strong {
6 font-weight: normal;
7}
8...
在浏览器中刷新index.html,排序列表中的<强>元素将不再大胆,而是具有正常``字体重量,如下图像所示:
<$>[注] 注 使用选择者组,你可以将不同的风格合并到一个选择者块中,但在DRY CSS和人体可读 CSS之间存在一个平衡,在人类可读性方面有一个最佳做法。作为一个极端的例子,可以编写几个大组选择器,以便不重复单个属性,但开发人员更难理解。
在本节中,您使用组选择器工作并将重复的 CSS 属性转换为单个选择器块,您还添加了组选择器与选择器组,以写出具有高特异性的可重复使用的属性。
结论
在本教程中,您了解了编写CSS所需的基线选择器,现在您可以有效地在CSS页面上找到一个元素,该元素深深嵌入HTML,并给它特定的风格。
如果您想阅读更多 CSS 教程,请查看我们的 CSS 主题页面。