作者选择了 多样性在技术基金作为 写给捐款计划的一部分接受捐款。
介绍
色彩是设计和开发的有用部分,在创建网站时有助于设置情绪并传达美观。
使用CSS,有四种方法来生成颜色,每一种都有其独特的强度。本教程将向您展示如何使用颜色关键字、六分之一的颜色值、rgb()颜色格式,最后是hsl()颜色格式。您将使用相同的HTML四种方法来体验每个颜色格式如何与相同的内容工作。在整个教程中,您将使用颜色,边界和背景色属性来应用这些颜色格式到HTML。
前提条件
您可以通过阅读《如何将 CSS 风格应用于 HTML 以 Cascade 和 Specificity 》(https://andsky.com/tech/tutorials/how-to-apply-css-styles-to-html-with-cascade-and-specificity)来了解 CSS 的类型选择器、组合器选择器和特定特性,您可以在 How To Select HTML Elements to Style with CSS中找到这些知识。
- 您可以在本地机器上存储的空格 HTML 文件是 index.html,您可以从您所选择的文本编辑器和 Web 浏览器访问。 要开始,请参阅我们的 How To Set Up Your HTML Project 教程,并遵循 How To Use and Understand HTML Elements 有关如何在您的浏览器中查看 HTML 的说明。 如果您是新的 HTML,请尝试整个
设置 HTML 和 CSS 示例
在本节中,您将为您在整个教程中写的所有视觉风格设置HTML基础,您还将创建您的styles.css文件并添加设置内容布局的风格。
首先,在文本编辑器中打开index.html,然后在文件中添加以下HTML:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 </head>
6 <body>
7 </body>
8</html>
接下来,转到<head>标签并添加一个<meta>标签来定义 HTML 文件的 字符集,然后是页面的标题,定义移动设备应该如何渲染页面的<meta>标签,最后是<link>元素,它会加载您以后要创建的 CSS 文件。
这些补充在以下代码块中得到突出说明:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <meta charset="UTF-8" />
6 <title>Colors With CSS</title>
7 <meta name="viewport" content="width=device-width" />
8 <link href="styles.css" rel="stylesheet" />
9 </head>
10 <body>
11 </body>
12</html>
在添加<head>内容后,接下来移动到<body>元素,在那里将添加来自 维基百科文章的颜色的内容。
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <meta charset="UTF-8" />
6 <title>Colors With CSS</title>
7 <meta name="viewport" content="width=device-width" />
8 <link href="styles.css" rel="stylesheet" />
9 </head>
10 <body>
11 <article>
12 <header>
13 <h1>About Color</h1>
14 </header>
15 <p>Color is the characteristic of visual perception described through color categories, with names such as red, orange, yellow, green, blue, or purple. This perception of color derives from the stimulation of photoreceptor cells by electromagnetic radiation. Color categories and physical specifications of color are associated with objects through the wavelengths of the light that is reflected from them and their intensities. This reflection is governed by the object's physical properties such as light absorption, emission spectra, etc.</p>
16 <hr />
17 <p>By defining a color space, colors can be identified numerically by coordinates, which in 1931 were also named in global agreement with internationally agreed color names like mentioned above (red, orange, etc.) by the International Commission on Illumination. The RGB color space for instance is a color space corresponding to human trichromacy and to the three cone cell types that respond to three bands of light: long wavelengths, peaking near 564–580 nm (red); medium-wavelength, peaking near 534–545 nm (green); and short-wavelength light, near 420–440 nm (blue). There may also be more than three color dimensions in other color spaces, such as in the CMYK color model, wherein one of the dimensions relates to a color's colorfulness.</p>
18 <footer>
19 Adapted from Wikipedia’s article on <a href="https://en.wikipedia.org/wiki/Color">Color</a>
20 </footer>
21 </article>
22 </body>
23</html>
该元素可以有自己的<header>和<footer>标签。<header>包含一个<h1>标签,包含内容标题,而<footer>元素包含引用来源的内容。主要内容的两个<p>标签之间有<hr />标签,这是一个自闭标签,创建了一个水平规则行。
这就完成了index.html所需的工作,将您的更改保存到文件中,然后在您的 Web 浏览器中打开index.html。
现在你将开始在这个教程所需的基本风格的工作. 创建一个名为styles.css的文件,并在文本编辑器中打开它。
首先,创建一个body类型选择器,并添加font-famiy: sans-serif以使用浏览器的默认 sans serif 字体,然后添加一个行高度: 1.5以提供默认的字体大小一半的文本间隔:
1[label styles.css]
2body {
3 font-family: sans-serif;
4 line-height: 1.5;
5}
接下来,为<article>元素添加风格,为其创建一个类型选择器,其中包含边缘,padding,width和max-width,以及一个box-sizeing: border-box,以重新定义<article>的Box Model(https://andsky.com/tech/tutorials/how-to-work-with-the-box-model-in-css)。
添加以下代码块的突出部分为每个属性的值:
1[label styles.css]
2...
3article {
4 margin: 2rem auto;
5 padding: 2rem;
6 width: 90%;
7 max-width: 40rem;
8 box-sizing: border-box;
9}
首先,具有2rem auto值的边缘将把文章容器集中在页面上。在教程中稍后添加颜色属性时,2rem的padding将给容器提供足够的空间。
接下来,写一个h1类型的选择器,并给元素一个字体大小的2rem。然后,添加一个边缘的0 0 1rem,以删除默认的边缘顶部,并为边缘底部提供一个新的值。
1[label styles.css]
2...
3h1 {
4 font-size: 2rem;
5 margin: 0 0 1rem;
6 text-align: center;
7}
接下来,你会将一些基本风格应用于<hr>元素。浏览器对<hr>元素的默认设置会创建一个没有高度、完全宽度和边界的框。
首先,给它一个高度值为0.25rem。然后,添加一个边缘属性为2rem auto,以创建<hr>之上和下面的空间,并将元素中心化。添加一个宽度:90%;与最大宽度:18rem;,这样<hr>元素总是小于条目容器,而永远不会大于18rem。最后,使用边界半径属性来围绕<hr>元素的尽头,以值为0.5rem:
1[label styles.css]
2...
3hr {
4 height: 0.25rem;
5 margin: 2rem auto;
6 width: 90%;
7 max-width: 18rem;
8 border-radius: 0.5rem;
9}
最后,创建一个脚选择器块,并添加一个具有2rem值的边缘顶部属性,然后是0.875rem的字体大小:
1[label styles.css]
2...
3footer {
4 margin-top: 2rem;
5 font-size: 0.875rem;
6}
将您的更改保存到 styles.css. 然后,在您的 Web 浏览器中返回 index.html 并重新加载页面. 内容现在已经准备好将颜色应用到基本风格。
在本节中,您在index.html文件中设置了您的HTML,并在styles.css文件中创建了基本风格。
使用关键字值的颜色
从网络上的颜色开始,使用预定义的颜色关键字是有帮助的. 在本节中,您将使用一些颜色关键字来将颜色应用于您的HTML内容。
随着时间的推移,有超过一百种颜色关键字值被添加到列表中。 WWWW Web Consortium在其维基上有一个完整的 颜色关键字值列表 颜色关键字值有助于快速设计或识别和调试 CSS 问题,例如将颜色属性设置为magenta,以便该元素脱颖而出于模糊的颜色板。
首先,转到文章类型选择器并添加背景色,边界和颜色属性。对于背景色,使用淡褐色的海壳关键字。给边界一个0.25rem的厚度,一个固体的风格,并为颜色使用沙发褐色关键字。最后,对于颜色属性,使用棕色关键字:
1[label styles.css]
2...
3article {
4 margin: 2rem auto;
5 padding: 2rem;
6 width: 90%;
7 max-width: 40rem;
8 box-sizing: border-box;
9 background-color: seashell;
10 border: 0.25rem solid sandybrown;
11 color: maroon;
12}
13...
将您的更改保存到styles.css并返回您的浏览器以更新index.html页面。 该页面现在将有一个视觉定义的文章区域,背景颜色为棕色,边界稍微更深的棕色。 文本内容将是红色的,在其他棕色颜色的背景下可能更像棕色。 以下图像显示该页面将如何在您的浏览器中显示:
接下来,回到文本编辑器中的styles.css。 转到h1选择器并添加一个颜色属性。 使用辅助的棕色色调,为颜色属性值添加teal关键字:
1[label styles.css]
2...
3h1 {
4 font-size: 2rem;
5 margin: 0 0 1rem;
6 text-align: center;
7 color: teal;
8}
9...
现在,继续使用互补颜色的概念,转到hr元素并添加一个边界属性为0.25rem固体茶叶。
1[label styles.css]
2...
3hr {
4 height: 0.25rem;
5 margin: 2rem auto;
6 width: 90%;
7 max-width: 18rem;
8 border-radius: 0.5rem;
9 border: 0.25rem solid teal;
10 background-color: darkturquoise;
11}
12...
将这些更改保存到您的styles.css文件中,并在浏览器中更新index.html。两个段落之间的<hr>元素将有一个厚厚的teal边界,内部有更轻的teal颜色,如下图所示:
接下来,回到你的文本编辑器,并进入你的styles.css文件中的脚选择器. 在这里,添加一个颜色属性,并使用巧克力作为值:
1[label styles.css]
2...
3footer {
4 margin-top: 2rem;
5 font-size: 0.875rem;
6 color: chocolate;
7}
在文本编辑器中将您的更改保存为styles.css,然后返回浏览器并更新index.html。您的浏览器会将巧克力显示为比棕色更轻的棕色色色调,但不会像沙布棕色边界一样轻:
在返回您的代码编辑器之前,请注意<footer>元素中的链接的颜色。它使用的浏览器的默认颜色链接,这是蓝色的,除非您访问了链接,在这种情况下颜色是紫色的。
若要在颜色属性上使用继承值,请在文本编辑器中返回styles.css,然后在脚选择器的关闭标签后,添加一个新的脚一组合器以将风格扩展到脚一元素中的脚一元素中。
1[label styles.css]
2...
3footer a {
4 color: inherit;
5}
将您的更改保存到 styles.css 文件中,并在您的 Web 浏览器中更新 index.html。 现在与其他footer` 文本相同的颜色,并保留了底线,它将文本作为链接区分开来。
<$>[注]
注:继承值仅适用于可以接受前台颜色值的颜色,如边界颜色和颜色。其他属性,如背景颜色或盒子阴影,可以访问定义的颜色值,具有称为当前颜色的特殊值。
您在本节中使用了颜色关键词,为内容设置了多种不同对比的颜色. 您还使用了继承值来重复使用颜色值而不明确定义一个值。
使用 Hexadecimal 应用颜色
六进制或六进制颜色值是应用颜色到 Web 元素的最常见方法. 在本节中,您将使用六进制颜色来重新定义和调整内容的视觉风格。
Hexadecimal是一个基于16的估值系统,它使用 0-9作为其数值和字母 a-f作为从 10-15的值。用于控制每个主要颜色(红色,绿色和蓝色)的强度,从 0,表示为 00,到 255,表示为 ff。
六进制颜色代码可以用两种方式编写,第一种是较为常见和更详细的长形式,包含六位数,每个颜色频道为两位。一个例子是用#ffff00创建的黄色。写六位数颜色代码的第二种方式是用三位数编写的短形式,浏览器会将其解释为每个单个值的倍数。在短的形式中,可以用#ff0创建黄色。
要开始使用六色颜色代码,请在文本编辑器中打开styles.css,然后进入文章元素选择器。 对于背景色属性值,请使用#f0f0f0,这是一个非常轻的灰色。 接下来,对于边界属性颜色值,请使用短形式的六色代码#ccc,这是一个中间灰色。 最后,对于主文本颜色属性,请使用暗灰色短形式的六色代码#444:
1[label styles.css]
2...
3article {
4 ...
5 background-color: #f0f0f0;
6 border: 0.25rem solid #ccc;
7 color: #444;
8}
9...
<$>[注]
**注:**在处理文本内容时,重要的是保持背景颜色和文本颜色值之间的良好的色彩对比度,这有助于为广泛的读者和网站用户提供文本的可读性。 要了解更多关于可访问的色彩对比度的重要性,请参阅此 Design with Accessible Color Contrast on the Web video series。
接下来,您将h1颜色值设置为暗红色。在您的styles.css文件中,转到h1选择器,并更新颜色属性以具有#900值,从而将红色频道转向中间点,并将绿色和蓝色频道关闭:
1[label styles.css]
2...
3h1 {
4 ...
5 color: #900;
6}
7...
继续使用红色值,更新hr颜色属性以匹配h1元素。 将边界属性颜色设置为#bd0000,这需要长形状的六色代码,因为颜色是#b00和#a00之间的值。
1[label styles.css]
2...
3hr {
4 ...
5 border: .25rem solid #bd0000;
6 background-color: #f00;
7}
8...
最后,要继续将脚文本作为主文本的更轻版本,请转到脚属性,并将颜色属性更改为#888的中灰色:
1[label styles.css]
2...
3footer {
4 ...
5 color: #888;
6}
7...
将您的更改保存到styles.css,然后返回您的浏览器以更新index.html,并审查您的更改。如下图像所示,该文章容器现在由几个灰色颜色组成,标题和规则行变体为红色:
在本节中,您使用了几种六十进制颜色代码值来定义整个styles.css风格文档中的颜色,在下一节中,您将将这些六十进制值用rgb()颜色代码翻译为更可读的数值。
使用rgb()的颜色
用有限数量的字母数值来定义六分之一的颜色值时,rgb() 使用从 0 到 255 的数值为每个主要颜色通道,仅使用这些数值可以更快地理解由 rgb() 格式创建的颜色,而不是由六分之一。
正如rgb()格式和格式的结构所示,颜色被代表为红色频道值,绿色频道值,然后是蓝色频道值。在rgb()中格式化的黑色颜色是rgb(0,0,0),而白色则格式为rgb(255,255,255)。这也意味着完整的红色是rgb(255,0,0),而完整的绿色是rgb(0,255,0)等等。
要开始重构代码以使用 rgb() 值而不是六分之一值,可以使用 HEX 到 RGB 转换器,例如 这个 HEX 到 RGB 转换器嵌入到 Duck Duck Go 搜索引擎中。使用数学方法,可以使用每个频道的六分之一值来解码数值。在红色频道的六分之一代码是 fe的情况下,这意味着 f 表示从 0 到 15 间 16 次数的 15 次迭代,使 f 等于 16×15,或 240. 六分之一的 fe 的 **e 等于 14 在基础-16 序列中。 将这两个值加上在一起,而红色频道的 `rgb() 值是
此图表将帮助您识别每个 hexadecimal 值的值,将其转换为 rgb() 所需的数值。 第一行是 hexadecimal 序列中的第一个字符的值,即以 16 倍的 hex 值。
| Calculation | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| First Hex Digit | x*16 | 0 | 16 | 32 | 48 | 64 | 80 | 96 | 112 | 128 | 144 | 160 | 176 | 192 | 208 | 224 | 240 |
| Second Hex Digit | x*1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
打开你的 styles.css 文件,然后进入文本编辑器中的 文章 选择块. 用 #f0f0f0 的值来识别 背景颜色 属性. 使用转换工具或与上一个图表的数学公式,这将成为 rgb(240, 240, 240),因为序列中的 f位于第二位置,等于 240。 将这两个值加在一起是 240:
1[label styles.css]
2...
3article {
4 ...
5 background-color: rgb(240,240,240);
6 border: 0.25rem solid #ccc;
7 color: #444;
8}
9...
接下来,对于边界和颜色值,因为这些值被写成短的形式,在转换为rgb()时,将这些值扩展到长的形式是有用的。 #ccc短的形式在长的形式中变成#cccccccc。这会创建一个公式 (12 * 16) + 12,结果是 204。 将该值应用到每个频道时,#ccc将变成rgb(204, 204, 204)。 应用此新值后,如下所示,可以应用到#444的颜色值,从而变成rgb(68, 68, 68):
1[label styles.css]
2...
3article {
4 ...
5 background-color: rgb(240,240,240);
6 border: 0.25rem solid rgb(204, 204, 204);
7 color: rgb(68, 68, 68);
8}
接下来,转到h1和hr颜色属性。对于这三个属性,颜色只使用红色通道,这意味着rgb()对绿色和蓝色通道将为 0:
1[label styles.css]
2...
3h1 {
4 ...
5 color: rgb(153, 0, 0);
6}
7
8hr {
9 ...
10 border: 2px solid rgb(189, 0, 0);
11 background-color: rgb(255, 0, 0);
12}
13...
对于h1``颜色属性,短形式#900扩展到#990000,并使用图表可计算 99序列为 (16 * 9) + 9,这等于 153的结果为rgb(153, 0, 0) 。 按照相同的公式为hr属性,边界六值中的 bd变为 189。
继续在styles.css文件中的文本编辑器中工作,识别footer选择器,并更新color属性使用的灰色。由于值是短形式#888,可以扩展到#888888,并使用图表和公式,最终值变为rgb(136, 136, 136):
1[label styles.css]
2...
3footer {
4 ...
5 color: rgb(136, 136, 136);
6}
7...
将您的更改保存到 styles.css 文件,然后在您的 Web 浏览器中重新加载 index.html 文件. 将不会与上一步与六分数值有任何差异,因为这些 rgb() 值等同。
六进制格式和rgb()格式等同于相同的数值,但rgb()格式更易于人读,使其比以前的格式具有优势,这使开发人员能够更快地做出知情的更改,并调整频道的强度以产生颜色,例如添加更多的红色以使颜色感觉更温暖。
要证明这一点,在文章和脚选择器中的每个灰色颜色的红色频道值中添加 5。对于文章属性,将背景色红色频道更改为245,边界红色频道更改为209,颜色属性红色频道更改为73。
1[label styles.css]
2...
3article {
4 ...
5 background-color: rgb(245,240,240);
6 border: 0.25rem solid rgb(209, 204, 204);
7 color: rgb(73, 68, 68);
8}
9...
10footer {
11 ...
12 color: rgb(141, 136, 136);
13}
14...
将您的更改保存到 styles.css,返回您的浏览器,并更新 index.html. 灰色颜色会变成一个温暖的色调,因为它们比绿色或蓝色更有红色。
在本节中,您了解了rgb()颜色格式以及如何将六分之一的颜色值转换为数字值,这可以更容易地使用。您还增加了rgb()颜色格式的红色频道,以创建更温暖的灰色颜色。
使用hsl()的颜色
在六十度和rgb()的颜色格式与主要颜色的组合值有着更密切的联系的地方,hsl()使用来自 颜色轮的颜色,具有饱和度和轻度水平,并生成最终的颜色。
与 rgb() 格式一样, hsl() 格式由三种值组成,一个字节分开的序列。第一个值是 hue,这是颜色轮上的分级标记。第二个值是 saturation,这是一个百分比值,其中 **100%**意味着完整的颜色和 **0%**意味着没有颜色,结果是白色,黑色或灰色,取决于序列中的最终数字的值。
颜色循环从 0 度开始,这是红色的,并沿着彩虹转向橙色,黄色,绿色,蓝色,紫色,并回到红色,因为循环在 360 度完成。
使用hsl()格式的最大优点是,当有相似值时,颜色可以更加凝聚和互补,例如,可以通过决定色彩值和饱和度百分比来快速组合一色彩方案,然后将所有其他颜色设置为轻度变异。
转换从六十进制或 rgb() 到 hsl() 格式的颜色并不那么简单. 一个 颜色转换工具可以帮助您从六十进制到 hsl() 更改值。
要开始使用hsl()颜色格式,请在文本编辑器中打开styles.css,然后转到文章和脚选项中。在本教程中之前的灰色值后,您可以将颜色和轻度值分别设置为0和0%。
1[label styles.css]
2...
3article {
4 ...
5 background-color: hsl(0, 0%, 94%);
6 border: 0.25rem solid hsl(0, 0%, 80%);
7 color: hsl(0, 0%, 27%);
8}
9...
10footer {
11 ...
12 color: hsl(0, 0%, 45%);
13}
14...
背景颜色是非常轻的灰色,因此它在94%时更接近100%。文章的边界值稍微更暗,但仍然是轻灰色,其轻度值为80%。接下来,文章的颜色值在27%时更暗。最后,脚印文本的颜色使用45%的轻度值,为引用参考文本提供了更轻但仍然可读的灰色。
接下来,转到h1和hr选择器块。与条款颜色属性相似的设置将发生:在接下来的三个属性中,色彩和饱和值将保持不变。
1[label styles.css]
2...
3h1 {
4 ...
5 color: hsl(0, 100%, 25%);
6}
7
8hr {
9 ...
10 border: 2px solid hsl(0, 100%, 35%);
11 background-color: hsl(0, 100%, 50%);
12}
13...
h1``颜色通过具有25%的亮度值获得暗红色,而hr则具有35%的亮度值的暗红色边界,而背景颜色则通过具有50%的亮度值获得纯红色。
将您的更改保存到 styles.css,返回您的浏览器,并更新 index.html 以找到您的风格在 hsl() 颜色格式中写时会显示的样子。
现在,回到你的文本编辑器,然后进入你的styles.css文件中的文章和脚选择器. 你现在只会调整色彩和饱和度值,但将轻度值留在原有的位置上。 将颜色值设置为200在两个选择器之间的所有四种颜色属性上。 然后,对于文章选择器上的颜色属性,将饱和度值设置为50%。 最后,将脚``颜色属性的饱和度级别设置为100%。 请参照下面的代码块的突出部分,以了解这些颜色值将如何出现:
1[label styles.css]
2...
3article {
4 ...
5 background-color: hsl(200, 50%, 94%);
6 border: 0.25rem solid hsl(200, 50%, 80%);
7 color: hsl(200, 50%, 27%);
8}
9...
10footer {
11 ...
12 color: hsl(200, 100%, 45%);
13}
14...
将您的更改保存到styles.css文件中,并在您的 Web 浏览器中重新加载index.html。如下图像所示,灰色现在是不同轻度和饱和度的白色颜色。文章颜色因50%饱和度而更加模糊,而脚颜色则具有100%饱和度而更加生动。
与hsl()颜色格式合作的最大优点之一是创建补充色彩的彩色板。一个补充颜色总是位于颜色圈的对面。红色的补充颜色是绿色。红色在色彩值的0度标记下,它的补充值是180度标记。在文章和脚的颜色有色值的 200的情况下,扣除 180将给出一个补充色值的 20,橙色。
在文本编辑器中,进入styles.css文件中的h1和hr选项,对每个颜色属性的色彩值,从0更改为20,将颜色从红色设置为橙色的补充颜色:
1[label styles.css]
2...
3h1 {
4 ...
5 color: hsl(20, 100%, 25%);
6}
7
8hr {
9 ...
10 border: 2px solid hsl(20, 100%, 35%);
11 background-color: hsl(20, 100%, 50%);
12}
13...
将您的更改保存到 styles.css,然后返回您的 Web 浏览器以更新 index.html. 通过对色彩值的一些修改,一个令人愉快的色彩板合并在一起。
在本节中,您使用hsl()颜色格式创建颜色,使用颜色理论的色调,饱和度和轻度方面。
结论
在本教程中,您使用了 CSS 网站上定义颜色的四种方法。关键字颜色值允许快速访问 CSS 规格所描述的预定义颜色。六进制颜色是最常见和广泛使用的格式,在少数字符中包含大量信息。rgb()颜色形成将六进制值的值转换成更全面的格式,使用单元分开列表中的数值。最后,hsl()颜色格式允许颜色理论的概念应用于网站开发,使用颜色圈,饱和度和轻度的色调来创建独特的和互补的颜色板。所有这些格式都可以在单一的网站上一起使用,每一个都以自己的力量发挥作用。
如果您想阅读更多 CSS 教程,请尝试 How To Style HTML with CSS series中的其他教程。