作者选择了 多样性在技术基金作为 写给捐款计划的一部分接受捐款。
介绍
Cascading Style Sheets (CSS)是一个为两个学科设计的语言:程序员和设计师的语言。在网络上使用文本是这种广泛的语言可用性的最清晰的例子之一。
在本教程中,您将了解网页 typography,文本造型艺术. 与打印印机相似,您将设置您的内容,应用视觉风格来帮助沟通内容,并调整内容以便可读性和强调。 在网页上造型文本的目的是通过颜色,大小,形状和空间创建视觉层次。
您将通过编写HTML结构来开始教程,该结构将由Cupcake Ipsum(http://www.cupcakeipsum.com)的位置内容组成。您将使用不同的标题级别(h1-h6)和内容类型(p, strong和 em)来应用多个文本相关的CSS属性,包括 font-family, font-size和 color。您还将从 Google Fonts上加载自定义字体,这是第三方字体托管服务。本教程的每个步骤都会引入新的概念或属性来应用于内容。
前提条件
- 将 HTML 文件存储在您的本地计算机上作为 index.html,您可以从所选的文本编辑器和网页浏览器访问它. 要开始,请参阅我们的 How To Set Up Your HTML Project 教程,然后遵循 How To Use and Understand HTML Elements 有关如何在浏览器中查看您的 HTML 的说明。 如果您是 HTML 的新手,请尝试 How To Build a Website in HTML 系列。
设置 HTML 示例
在这个第一步,你将设置的HTML,你将风格在整个教程的剩余部分.本教程的HTML的目的是为您提供各种元素和情况来练习风格。
使用文本编辑器打开 index.html 文件,例如 nano, Vim,或 Visual Studio Code。
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文件中加载,所以请确保该文件也已准备好。
接下来,你需要一些内容来设计风格. 创建文本风格时,项目通常需要在内容完成之前的风格。 在图形设计世界中,位列内容被用于此目的。 设计师通常会使用拉丁文本作为位列,称为Lorem Ipsum。 这个位列文本有许多现代版本,包括 Cupcake Ipsum。
首先,HTML需要描述 hierarchy,一个清晰的区别和内容的顺序。在HTML中,它是用标题标签完成的,从<h1>到<h6>的顶部标题,通过<h6>的底部标题。浏览器的默认风格为标题定义视觉等级单靠大小,而<h1>元素的默认字体大小要比<h6>大得多。
要创建这种等级内容,你会写出各种标题,并填写每个标题从Cupcake Ipsum的几个单词在index.html中的<body>标签中。
要有正确的HTML语义:
- 页面上只会有一个
<h1>元素. 通常这将是标题。 - 接下来的标题级别将只有一个较小的,等于,或任何更大的级别. 例如,仅次于
<h3>的标题级别将是<h4>,另一个h3>,或一个h2>,但永远不会是<h5>或<h6>。
使用标题语义规则,将以下突出的 HTML 添加到 index.html:
1[label index.html]
2...
3 <body>
4 <h1>Sugar plum chupa chups chocolate bar cupcake donut</h1>
5
6 <h2>Tootsie roll oat cake macaroon</h2>
7
8 <h2>Jelly beans tiramisu pastry danish donut</h2>
9
10 <h3>Lemon drops pastry marshmallow</h3>
11
12 <h3>Apple pie pudding topping</h3>
13
14 <h4>Gingerbread danish</h4>
15
16 <h5>Carrot cake topping lollipop gummi bears</h5>
17
18 <h6>Liquorice bonbon candy cotton candy liquorice</h6>
19 </body>
20...
接下来,您需要一些内容来填写每个标题之间的空间. 这些将是由<p>元素指定的文本段落,以保持每个段落。
添加以下代码块的突出部分,本教程将使用此格式在整个代码块:
1[label index.html]
2...
3 <body>
4 <h1>Sugar plum chupa chups chocolate bar cupcake donut</h1>
5
6 <h2>Tootsie roll oat cake macaroon</h2>
7
8 <p>Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum I love fruitcake pastry. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
9
10 <h2>Jelly beans tiramisu pastry danish donut</h2>
11
12 <h3>Lemon drops pastry marshmallow</h3>
13
14 <p>I love marshmallow candy. Sesame snaps muffin danish. Chocolate cake cookie jelly-o tiramisu halvah brownie halvah chocolate chocolate cake. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll chocolate bar. Macaroon I love muffin candy canes sweet roll I love. I love bonbon marshmallow croissant ice cream I love gummi bears.</p>
15
16 <h3>Apple pie pudding topping</h3>
17
18 <p>Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu soufflé powder caramels I love ice cream. Dragée liquorice toffee jelly jelly beans. Sesame snaps candy canes soufflé. Biscuit donut bear claw jujubes halvah pastry macaroon lemon drops. Tootsie roll dragée cookie candy soufflé dragée cupcake liquorice.</p>
19
20 <h4>Gingerbread danish</h4>
21
22 <p>Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. Wafer tootsie roll I love I love. Cake toffee I love. Cotton candy cotton candy jelly beans I love bonbon toffee. Chupa chups chupa chups caramels ice cream halvah candy chocolate cake. Marshmallow carrot cake jelly beans.</p>
23
24 <h5>Carrot cake topping lollipop gummi bears</h5>
25
26 <p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
27
28 <h6>Liquorice bonbon candy cotton candy liquorice</h6>
29
30 <p>Cupcake donut topping chupa chups halvah chupa chups. Macaroon tootsie roll cupcake caramels chocolate fruitcake gingerbread jelly-o. Tiramisu I love marshmallow jelly-o I love jelly beans candy gummi bears.</p>
31 </body>
32...
最后,添加<strong>,<em>和两种元素的组合,这将提供内容中强调的短语的示例:
1[label index.html]
2...
3 <h2>Tootsie roll oat cake macaroon</h2>
4
5 <p>Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum <strong>I love fruitcake pastry</strong>. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
6
7 <h2>Jelly beans tiramisu pastry danish donut</h2>
8
9 <h3>Lemon drops pastry marshmallow</h3>
10
11 <p>I love marshmallow candy. <em>Sesame snaps</em> muffin danish. Chocolate cake cookie jelly-o tiramisu halvah brownie halvah chocolate chocolate cake. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll chocolate bar. Macaroon I love muffin candy canes sweet roll I love. I love bonbon marshmallow croissant ice cream I love gummi bears.</p>
12
13 <h3>Apple pie pudding topping</h3>
14
15 <p>Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu <strong>soufflé powder caramels</strong> I love ice cream. Dragée liquorice toffee jelly jelly beans. Sesame snaps candy canes soufflé. Biscuit donut bear claw jujubes halvah pastry macaroon lemon drops. Tootsie roll dragée cookie candy soufflé dragée cupcake liquorice.</p>
16
17 <h4>Gingerbread danish</h4>
18
19 <p>Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. <strong><em>Wafer tootsie roll</em></strong> I love I love. Cake toffee I love. Cotton candy cotton candy jelly beans I love bonbon toffee. Chupa chups chupa chups caramels ice cream halvah candy chocolate cake. Marshmallow carrot cake jelly beans.</p>
20
21 <h5>Carrot cake topping lollipop gummi bears</h5>
22
23 <p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
24
25 <h6>Liquorice bonbon candy cotton candy liquorice</h6>
26
27 <p>Cupcake donut topping <em><strong>chupa chups halvah</strong></em> chupa chups. Macaroon tootsie roll cupcake caramels chocolate fruitcake gingerbread jelly-o. Tiramisu I love marshmallow jelly-o I love jelly beans candy gummi bears.</p>
28...
现在你已经写了HTML,保存index.html,并在浏览器中打开它,以查看浏览器默认风格的页面是什么样子:
文本在所有元素中都有大小,默认的<h5>和<h6>样式小于<p>文本。
在此步骤中,您将设置的HTML内容,将被风格化在整个教程的剩余部分。接下来,您将使用字体家族属性,了解有关 font stack,浏览器可以使用的字体列表,并将字体应用到不同的元素。
使用font-family财产
接下来,您将使用字体家族 CSS 属性,并从 Google 字体 服务上加载外部字体文件。这个属性的名称来自一个描述字体集合和该字体的变异的编码术语,包括大胆和语版本。
要开始使用font-family,有助于了解其值选项的细节。一个font-family属性的值是名为字体堆的字体列表。
1font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
浏览器首先会确定Helvetica Neue是否可用,要么作为计算机上安装的字体,要么作为网站提供的字体。如果浏览器找不到名为Helvetica Neue的字体,那么它将列表下载到Helvetica,然后到Arial。
<$>[注] 注: 字体堆提供了最佳功能,而不是当一个字体没有找到时,而是当一个特定的字符在字体中没有找到时。
在同一个目录中创建一个名为 tyles.css 的文件,如 index.html. 在文本编辑器中打开它,并为页面添加默认字体:
1[label styles.css]
2body {
3 font-family: "Avenir Next", Calibri, Verdana, sans-serif;
4}
在这个代码中,你开始使用一个体 类型选择器具有字体家族属性。接下来,对于字体堆,你开始使用Avenir Next,这将在iOS和macOS浏览器上可用。Avenir Next在引用中,因为字体名称是两个单词。下一个字体是Calibri用于Windows浏览器。 请确保在每个字体声明之间放置一个子。 为了提供更通用的字体反弹,然后使用Verdana,这是自2000年代初以来在计算机上广泛可用的。 最后,因为所有这些字体都被分类为 sans serif字体,你将浏览器的默认sans-serif作为字体堆中的最终字体选项。
保存styles.css,然后在您的浏览器中打开index.html。您将找到一个新的字体,而不是浏览器的默认字体。如果您使用的是 Apple 操作系统,Avenir Next 将在浏览器中渲染。如果您使用的是 Windows,则 Calibri 会渲染。下面的图像是 MacOS 上这个字体堆的样子:
在本节中,您使用font-family属性为网页设置了默认字体堆。您还设置了font-family属性,该属性特别适用于标题文本内容。
使用 Google Fonts 加载自定义字体
现在你已经使用了字体家族属性,在你的计算机上已经安装了字体,现在是时候从外部服务中加载字体了。
浏览器有能力加载任何字体,只要为该浏览器提供适当的字体文件格式。一个字体服务,如Google Fonts,通过提供加载字体所需的CSS和字体文件来简化定义和托管字体的工作。
要开始,请在您的浏览器中打开 fonts.google.com。
有许多不同的字体,你可以选择在谷歌字体. 这个教程将使用两个:公共 Sans 和Quicksand。
从 Google 字体的搜索框中,搜索Public Sans。当字体卡从搜索结果中显示时,会显示字体的预览。
公共无字体页面将列出所有字体变异. 这些被称为 weights,从 100 到 900. 对于本教程的目的,找到 Regular (400) 和 Bold (700) 风格,并按一下 + 选择此风格 按钮旁边的每个风格变量,以及他们的意大利式风格。
一旦您选择了第一个风格,选择的家庭工具将滑动,此工具将为您提供使用这些字体所需的HTML和CSS:
选择<link />方法在浏览器中加载字体并复制所提供的HTML。打开index.html,然后在<link />加载styles.css后将代码添加到<head>元素中。
1[label index.html]
2...
3<head>
4 <link href="styles.css" rel="stylesheet" />
5 <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
6</head>
7...
此时,在浏览器中重新加载 index.html 将不会有任何视觉变化. 浏览器正在加载字体,但需要将字体添加到字体堆,以便将字体应用到内容中。
返回Google Fonts以找到加载Public Sans的CSS规则。Google Fonts提供了Public Sans的字体堆和浏览器默认的sans-serif字体,具有字体家族:Public Sans, sans-serif;。
使用styles.css中的现有字体堆,将Avenir Next和Calibri替换为Public Sans:
1[label styles.css]
2body {
3 font-family: "Public Sans", Verdana, sans-serif;
4}
现在,基层字体堆已经被宣布,页面上的所有字体现在都是公共的。
一个常见的设计做法,以更多地关注标题是使用不同的字体标题,而不是主文本. 要将此应用到自己的HTML,返回Google字体,并搜索Quicksand。
一旦找到Quicksand,请选择字体卡,并将 Semi-bold (600) 和 Bold (700) 字体重量添加到所选字体旁边的 Public Sans. Google Fonts 将提供一个新的 URL 来加载所有所选字体和变体。
1[label index.html]
2...
3<head>
4 <link href="styles.css" rel="stylesheet" />
5 <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@600;700&display=swap" rel="stylesheet">" rel="stylesheet">
6</head>
7...
现在Quicksand已设置为在浏览器中加载,您需要将其应用到标题标签中。您将通过添加一个CSS选项单元列表,称为 group selector,添加到您的styles.css文件中,在这种情况下,使用由Google Fonts with Quicks提供的字体堆,然后使用浏览器默认字体sans-serif:
1[label styles.css]
2...
3h1, h2, h3, h4, h5, h6 {
4 font-family: "Quicksand", sans-serif;
5}
將您的變更儲存為「styles.css」並返回您的瀏覽器以重新加載「index.html」。 請在此時關閉 Google 字體。 當瀏覽器加載時,您現在會看到兩個字體顯示。
在本节中,您从 Google 字体服务中加载了两个字体,并将这些字体添加到现有的字体堆中。
使用字体重量和字体风格属性
在本节中,您将使用字体重量和字体风格属性来调整字体的外观。
现在你正在从 Google 字体中加载自定义字体,你可以开始调整文本的特性。从字体重量属性开始,你可以更改字体显示的厚度或薄度。字体重量属性有两个共同值:正常和粗糙。正常值是浏览器中大多数文本的默认字体重量。粗糙值是标题和强元素的默认字体重量。但是对于本教程,你需要使用数字值而不是名称正常和粗糙值。
数字字体重量值取决于您正在加载的字体。当您从 Google 字体中添加了 Public Sans 字体时,您选择了 Regular (400) 和 Bold (700) 重量。 组合中的数字与参考和加载该字体所需的值相匹配。
或者,Quicksand字体选项包括半粗糙(600)和粗糙(700)字体重量,‘600’值没有数值,需要使用数值来定义。
您将首先将所有标题的字体重量设置为Quicksand的600半圆形变体,在您的styles.css文件中,找到包含所有标题值的组选择器,并在选择器块中添加一个字体重量:600;声明:
1[label styles.css]
2...
3h1, h2, h3, h4, h5, h6 {
4 font-family: "Quicksand", sans-serif;
5 font-weight: 600;
6}
一旦你做了这个更改,保存styles.css并重新加载index.html在你的浏览器中,你会看到头条略微变薄,因为它们从Quicksand的700值变为600值。
现在你已经设置了所有标题元素以使用Quicksand 600的重量,还有一些地方可以使用字体的 700变量。 要开始,在你的 styles.css文件中创建一个 h3类型选择器,并在选择器块中添加 font-weight: 700;:
1[label styles.css]
2...
3h3 {
4 font-weight: 700;
5}
随着教程的进展,您将对h3风格进行额外的更改,以使其脱颖而出,但仍保持其等级顺序。
将您的更改保存到styles.css,然后创建一个新的选择器,目标文本包含在<em>和<strong>标签中。
由于 HTML 要获得一个大胆的 italic 风格是 <strong><em>...</em></strong> 和 <em><strong>...</strong></em>,你需要在你的 styles.css 文件中创建一个组合器组选择器,然后将 font-family 属性应用到 "Quicksand", sans-serif 作为值:
1[label styles.css]
2...
3strong em,
4em strong {
5 font-family: "Quicksand", sans-serif;
6}
一旦你已将此添加到你的 styles.css 文件中,保存它,然后在你的浏览器中重新加载 `index.html。 原来大胆的 italic 文本现在使用 Quicksand 并且是 italic,尽管 Google 字体没有提供意大利语版本的字体。
用于处理文本是否是意大利式的属性是字体风格。字体风格属性的值选项是正常和意大利式。而不是使用假大胆,请更改这个选择器的风格,以免出现意大利式化。
1[label styles.css]
2...
3strong em,
4em strong {
5 font-family: "Quicksand", sans-serif;
6 font-style: normal;
7}
这将改变大胆的意大利文本的例子,只变成Quicksand bold。
将您的更改保存到styles.css,并在浏览器中重新加载index.html,以查看更改:
您在本节中使用了字体重量和字体风格属性,以应用从 Google 字体中加载的 Quicksand 字体的变异。
使用字体大小属性
在本节中,您将使用字体大小属性将不同的字体大小应用于整个页面的内容。文本大小是传达信息的一个重要因素。大小好的文本更容易阅读,适当的大小的标题有助于传达层次结构,以便更容易地扫描信息。
默认浏览器字体大小是16px,但它可以有助于提高许多字体的可读性,只是稍微大一点。
1[label styles.css]
2body {
3 font-family: "Public Sans", Verdana, sans-serif;
4 font-size: 18px;
5}
6...
在您的浏览器中打开index.html或刷新页面,字体元素的字体大小变化改变了页面上的所有字体,增加了它们的大小。
元素的默认字体大小是基于母元素的相对大小,在这种情况下是<body>元素,使用字体大小的百分比值。
要尝试这个公式,你将通过为h1元素设置一个目标字体大小为45px。使用该公式,目标大小为45px,基础大小为18px,因此这个公式将是(45 / 18) * 100%,这意味着250%。
返回你 styles.css 文件并添加一个元素选择器为 h1 并添加一个 字体大小: 250%; 属性和值来设置字体大小:
1[label styles.css]
2...
3h1 {
4 font-size: 250%;
5}
6...
现在,您已经为<h1>元素设置了相对字体大小,然后将相同的公式应用到剩余的标题元素中。 每一个元素中,您可以选择圆形或保留完整的十进制值。
打开你的styles.css文件,并开始在h1字体大小属性后添加一个评论,解释了渲染的大小,然后对每个标题应用公式,以便h2具有36px的字体大小,h3等于32px,h4到26px,h5到22px,最后应用h6到18px的基数大小。<h6>元素的默认大小小小于基数,所以将其设置为100%将确保它不会低于基数:
1[label styles.css]
2...
3h1 {
4 font-size: 250%; /* 45px */
5}
6
7h2 {
8 font-size: 200%; /* 36px */
9}
10
11h3 {
12 font-size: 177.78%; /* 32px */
13}
14
15h4 {
16 font-size: 162.5%; /* 26px */
17}
18
19h5 {
20 font-size: 122%; /* 22px */
21}
22
23h6 {
24 font-size: 100%; /* 18px */
25}
26...
返回浏览器并更新 index.html. 所有标题都将根据对
元素的默认字体大小来增加其字体大小。
通过此步骤,您使用了字体大小属性来更改网页上的文本大小. 您使用了大小设计概念来赋予内容超出默认浏览器风格的等级。
使用颜色属性来区分文本
下一节的重点是CSS的颜色属性,使用颜色来区分顺序并增加内容的含义。颜色是最常见的设计考虑之一,特别是在定义文本的不同含义时。在本节中,您将使用命名颜色来设置文本颜色。命名颜色是多年来不断增长的预定义颜色的集合;它们与其他网页颜色值相匹配,例如六分之一的颜色代码。本节将使用维基百科页面上找到的命名颜色列表(https://en.wikipedia.org/wiki/Web_colors#Extended_colors)。
与字体大小一样,你将为整个文档设置默认颜色,这将影响页面上的所有内容,因为颜色是大多数元素的遗传价值。重要的是要记住颜色对比性,因为它有助于可读性,特别是当涉及到让网页可访问所有视野层次时。由于背景颜色将仍然是默认的白色,使用更大胆,更暗的颜色是一个很好的指南。
要开始使用颜色,回到文本编辑器中的styles.css文件中。与字体大小部分一样,找到身体选择器并添加一个颜色属性。大多数浏览器中的文本的默认颜色是黑色。为了可访问的颜色对比,在光明的背景下保持基础颜色黑暗很重要。 使用命名为DarkSlateGray的颜色,这里只有骆驼案例可读性,但如果您想要的话,可以全部下载:
1[label styles.css]
2body {
3 font-family: "Public Sans", Verdana, sans-serif;
4 font-size: 18px;
5 color: DarkSlateGray;
6}
7...
保存您的styles.css文件,并在浏览器中更新index.html。内容的颜色将从黑色改变到深蓝绿色:
现在基本颜色已设置,您可以开始使用其他颜色来提供更多的视觉层次结构. 开始在您的styles.css文件中的h1选择器,并添加一个具有Indigo值的颜色属性:
1[label styles.css]
2...
3h1 {
4 font-size: 250%; /* 45px */
5 color: Indigo;
6}
7...
保存您的tyles.css文件,返回您的浏览器,并更新index.html。<h1>文本现在具有深紫色,而不是默认的深蓝绿色:
接下来,你会将颜色应用到其他标题中。Quicksand是一个有趣的,圆形的字体,你正在使用奇怪的Cupcake Ipsum样本内容,所以通过在每个标题上使用不同的颜色来创建一个明亮而浓郁的颜色方案。返回styles.css并为每个标题选择器添加一个颜色属性和颜色值。对于h2元素使用MediumVioletRed,对于h3使用LimeGreen,对于h4添加Chocolate,对于h5使用Crimson,最后对于h6使用DeepSky Blue:
1[label styles.css]
2...
3h2 {
4 font-size: 200%; /* 36px */
5 color: MediumVioletRed;
6}
7
8h3 {
9 font-size: 177.78%; /* 32px */
10 color: LimeGreen;
11}
12
13h4 {
14 font-size: 162.5%; /* 26px */
15 color: Chocolate;
16}
17
18h5 {
19 font-size: 122%; /* 22px */
20 color: Crimson;
21}
22
23h6 {
24 font-size: 100%; /* 18px */
25 color: DeepSkyBlue;
26}
27...
一旦您已将颜色属性添加到标题中,请保存styles.css并返回浏览器以更新index.html。
通过颜色属性,您了解了网络颜色命名的值,以及如何使用颜色来提供含义。
结论
使用文本是写 CSS for the web 的主要部分。文本不仅在其说法中传达意义,而且在其外观上也传达了意义。使用您用字体家族,字体重量,字体风格,字体大小和颜色属性学到的工具,您可以操纵文本,以帮助为您的网站提供有意义的背景。这些属性不限于本文所涵盖的标题:它们可以与任何包含文本的元素一起使用。
如果您想阅读更多 CSS 教程,请查看我们的 CSS 主题页面。