W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）

一、CSS注释

1.注释用于解释代码，以后在您编辑源代码时可能会有所帮助。浏览器会忽略注释。
2.位于 style 元素内的 CSS 注释，以 /* 开始，以 */ 结束：

/* 这是一条单行注释 */
p {color: red;
}

在代码中的任何位置添加注释：

p {color: red;  /* 把文本设置为红色 */
}

注释能横跨多行：

/* 这是
一条多行的
注释 */ p {color: red;
}

3.HTML 和 CSS 注释：HTML 中，可以使用（< !–…-- >）语法在 HTML 源代码中添加注释。

在下面的例子中，结合使用 HTML 和 CSS 注释：

<!DOCTYPE html>
<html>
<head>
<style>
p {color: red; /* 将文字颜色设置为红色 */
}
</style>
</head>
<body><h2>My Heading</h2><!-- 这些段落将是红色的 -->
<p>Hello World!</p>
<p>这段文本由 CSS 设置样式。</p>
<p>CSS 注释不会在输出中显示。</p></body>
</html>

w3school：CSS注释：链接：
https://www.w3school.com.cn/css/css_comments.asp
https://www.w3school.com.cn/css/css_comments.asp

二、CSS 颜色（颜色、RGB、HEX、HSL）

1.CSS 颜色

1）CSS 颜色：指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。
2）CSS 颜色名：在 CSS 中，可以使用颜色名称来指定颜色：
代码：

<!DOCTYPE html>
<html>
<body><h1 style="background-color:Tomato;">番茄色</h1>
<h1 style="background-color:Orange;">橙色</h1>
<h1 style="background-color:DodgerBlue;">道奇蓝</h1>
<h1 style="background-color:MediumSeaGreen;">中海绿色</h1>
<h1 style="background-color:Gray;">灰色</h1>
<h1 style="background-color:SlateBlue;">板岩蓝</h1>
<h1 style="background-color:Violet;">紫色</h1>
<h1 style="background-color:LightGray;">浅灰</h1></body>
</html>

效果：

解释：CSS/HTML 支持 140 种标准颜色名。
3）CSS 背景色：可以为 HTML 元素设置背景色：代码：

<!DOCTYPE html>
<html>
<body><h1 style="background-color:DodgerBlue;">Hello World</h1><p style="background-color:Tomato;">
Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.
</p></body>
</html>

效果：

4）CSS 文本颜色：可以设置文本的颜色：
代码：

<!DOCTYPE html>
<html>
<body><h3 style="color:Tomato;">Hello World</h3><p style="color:DodgerBlue;">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p><p style="color:MediumSeaGreen;">The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p></body>
</html>

效果：

5）CSS 边框颜色：可以设置边框的颜色：
代码：

<!DOCTYPE html>
<html>
<body><h1 style="border: 2px solid Tomato;">Hello World</h1><h1 style="border: 2px solid DodgerBlue;">Hello World</h1><h1 style="border: 2px solid Violet;">Hello World</h1></body>
</html>

效果：

6）CSS 颜色值：在 CSS 中，还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色：
代码：

<!DOCTYPE html>
<html>
<body><p>与颜色名称 "Tomato" 等同：</p><h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1><p>与颜色名称 "Tomato" 等同，但是有 50% 透明度：</p><h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1><p>除了预定义的颜色名称之外，还可以使用 RGB、HEX、HSL 指定颜色，甚至可以使用 RGBA 或 HSLA 颜色值指定带透明度的颜色。</p></body>
</html>

效果：

w3school：CSS 颜色：链接：
https://www.w3school.com.cn/css/css_colors.asp
https://www.w3school.com.cn/css/css_colors.asp

2.CSS RGB 颜色

1）RGB 值

在 CSS 中，可以使用下面的公式将颜色指定为 RGB 值：

rgb(red, green, blue)

每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。

例如，rgb(255, 0, 0) 显示为红色，因为红色设置为最大值（255），其他设置为 0。

要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。

要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。

2）实例：

1》代码：

<!DOCTYPE html>
<html>
<body><h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1><p>在 HTML 中，您可使用 RGB 值规定颜色。</p></body>
</html>

效果：

2》通常为所有 3 个光源使用相等的值来定义灰色阴影：

代码：

<!DOCTYPE html>
<html>
<body><h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1><p>通过使用相等的红绿蓝色值，您会得到不同的灰阶。</p></body>
</html>

效果:

3）RGBA 值

1》RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度。

RGBA 颜色值指定为：

rgba(red, green, blue, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：

2》实例：

代码：

<!DOCTYPE html>
<html>
<body><h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1><p>您可通过使用 RGBA 颜色值来生成透明色。</p></body>
</html>

效果：

w3school：CSS RGB 颜色：链接：
https://www.w3school.com.cn/css/css_colors_rgb.asp
https://www.w3school.com.cn/css/css_colors_rgb.asp

3.CSS HEX 颜色

1）HEX 值

在 CSS 中，可以使用以下格式的十六进制值指定颜色：

#rrggbb

其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。

例如，#ff0000 显示为红色，因为红色设置为最大值（ff），其他设置为最小值（00）。

2）实例：代码：

<!DOCTYPE html>
<html>
<body><h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1><p>在 HTML 中，您可以使用十六进制值规定颜色。</p></body>
</html>

效果：

3）通常为所有 3 个光源使用相等的值来定义灰色阴影：

代码：

<!DOCTYPE html>
<html>
<body><h1 style="background-color:#000000;">#000000</h1>
<h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
<h1 style="background-color:#787878;">#787878</h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
<h1 style="background-color:#ffffff;">#ffffff</h1><p>通过对红色，绿色和蓝色使用相等的值，您将获得不同的灰阶。</p></body>
</html>

效果：

w3school：CSS HEX 颜色：链接：
https://www.w3school.com.cn/css/css_colors_hex.asp
https://www.w3school.com.cn/css/css_colors_hex.asp

4.CSS HSL 颜色

1）HSL 值

在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：

hsla(hue, saturation, lightness)

色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。

饱和度（saturation）是一个百分比值，0％表示灰色阴影，而 100％是全色。

亮度（lightness）也是百分比，0％是黑色，50％是既不明也不暗，100％是白色。

2）实例：代码：

<!DOCTYPE html>
<html>
<body><h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1><p>在 HTML 中，您可以使用 HSL 值来设置颜色。</p></body>
</html>

效果：

3）饱和度

饱和度可以描述为颜色的强度。

100％是纯色，没有灰色阴影

50％是 50％灰色，但是您仍然可以看到颜色。

0％是完全灰色，您无法再看到颜色。

代码：

<!DOCTYPE html>
<html>
<body><h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1><p>通过 HSL 颜色，设置更少的饱和度意味着更少的颜色，0% 为全灰。</p></body>
</html>

效果：

4）亮度

颜色的明暗度可以描述为要赋予颜色多少光，其中 0％表示不亮（黑色），50％表示 50％亮（既不暗也不亮），100％表示全明（白）。

代码：

<!DOCTYPE html>
<html>
<body><h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1><p>通过 HSL 颜色，亮度 0% 显示黑色，亮度 100 显示白色。</p></body>
</html>

效果：

5）通常通过将色调和饱和度设置为 0 来定义灰色阴影，并将亮度从 0％到 100％进行调整可以得到更深/更浅的阴影：

代码：

<!DOCTYPE html>
<html>
<body><h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1>
<h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1>
<h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1>
<h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1>
<h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1>
<h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1><p>利用 HSL 颜色，可通过将饱和度设置为 0％，并根据灰色的暗/亮程度调整亮度来制作灰阶。</p></body>
</html>

效果：

6）HSLA 值

HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。

HSLA 颜色值指定为：

hsla(hue, saturation, lightness, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：

代码：

<!DOCTYPE html>
<html>
<body><h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1><p>您可使用 HSLA 颜色值生成透明色。</p></body>
</html>

效果：

w3school：CSS HSL 颜色：链接：
https://www.w3school.com.cn/css/css_colors_hsl.asp
https://www.w3school.com.cn/css/css_colors_hsl.asp

三、CSS背景（背景、背景图像、背景重复、背景附着、简写背景属性）

1.CSS 背景

1）CSS 背景属性用于定义元素的背景效果。CSS 背景属性：

background-color

background-image

background-repeat

background-attachment

background-position

2）CSS 背景属性：CSS background-color

background-color 属性指定元素的背景色。

第一部分

代码：

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightblue;
}
</style>
</head>
<body><h1>Hello World!</h1><p>此页面拥有浅蓝色背景色！</p></body>
</html>

效果：

解释：
1.实例：页面的背景色设置如下：

body {background-color: lightblue;
}

2.通过 CSS，颜色通常由以下方式指定：

有效的颜色名称 - 比如 “red”

十六进制值 - 比如 “#ff0000”

RGB 值 - 比如 “rgb(255,0,0)”

第二部分

其他元素：可以为任何 HTML 元素设置背景颜色：

实例：h1、p 和 div 元素将拥有不同的背景色：

h1 {background-color: green;
}div {background-color: lightblue;
}p {background-color: yellow;
}

第三部分

不透明度 / 透明度：opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

div {background-color: green;opacity: 0.3;
}

注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

第四部分

使用 RGBA 的透明度：不对子元素应用不透明度。

下面的例子设置背景色而不是文本的不透明度：

除 RGB 外，还可以将 RGB 颜色值与 alpha 通道一起使用（RGBA） - 该通道指定颜色的不透明度。

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

实例：
部分：

div {background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

实例：
使用 opacity、使用 RGBA 颜色值：

<!DOCTYPE html>
<html>
<head>
<style>
div {background: rgb(0, 128, 0);
}div.first {background: rgba(0, 128, 0, 0.1);
}div.second {background: rgba(0, 128, 0, 0.3);
}div.third {background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body><h1>透明框</h1><p>使用 opacity：</p><div style="opacity:0.1;"><h1>10% opacity</h1>
</div><div style="opacity:0.3;"><h1>30% opacity</h1>
</div><div style="opacity:0.6;"><h1>60% opacity</h1>
</div><div><h1>opacity 1</h1>
</div><p>使用 RGBA 颜色值：</p>
<div class="first"><h1>10% opacity</h1>
</div><div class="second"><h1>30% opacity</h1>
</div><div class="third"><h1>60% opacity</h1>
</div><div><h1>默认</h1>
</div><p>注意使用 opacity 属性时文本以及背景颜色如何变得透明。</p></body>
</html>

效果：

w3school：CSS 背景：链接：
https://www.w3school.com.cn/css/css_background.asp
https://www.w3school.com.cn/css/css_background.asp

2.CSS 背景图像

1）CSS 背景图像

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

实例：页面的背景图像可以像这样设置：


body {background-image: url("paper.gif");
}

2）注意：使用背景图像时，请使用不会干扰文本的图像。

可以为特定元素设置背景图像，例如 p 元素：
代码：

<!DOCTYPE html>
<html>
<head>
<style>
p {background-image: url("/i/paper.jpg");
}
</style>
</head>
<body><h1>Hello World!</h1><p>本段以一幅图像作为背景！</p></body>
</html>

效果：

w3school：CSS 背景图像：链接：
https://www.w3school.com.cn/css/css_background_image.asp
https://www.w3school.com.cn/css/css_background_image.asp

3. CSS 背景重复

1）CSS background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

2）某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：

<!DOCTYPE html>
<html>
<head>
<style>
body {background-image: url("/i/css/gradient_bg.png");
}
</style>
</head>
<body><h1>Hello World!</h1><p>奇怪的背景图片...</p></body>
</html>

效果：

3）如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：

<!DOCTYPE html>
<html>
<head>
<style>
body {background-image: url("/i/css/gradient_bg.png");background-repeat: repeat-x;
}
</style>
</head>
<body><h1>Hello World!</h1><p>在这里，背景图像仅在水平方向上重复！</p></body>
</html>

效果：

提示：如需垂直重复图像，请设置 background-repeat: repeat-y;。

4）CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像：

<!DOCTYPE html>
<html>
<head>
<style>
body {background-image: url("/i/photo/tree.png");background-repeat: no-repeat;
}
</style>
</head>
<body><h1>Hello World!</h1>
<p>W3School 背景图像实例。</p>
<p>这幅背景图像仅显示一次，但它会打扰读者！</p></body>
</html>

效果：

5）在上例中，背景图像与文本放置在同一位置。我们想要更改图像的位置，以免图像过多干扰文本。CSS background-position：

background-position 属性用于指定背景图像的位置。
把背景图片放在右上角：

<!DOCTYPE html>
<html>
<head>
<style>
body {background-image: url("/i/photo/tree.png");background-repeat: no-repeat;background-position: right top;margin-right: 200px;
}
</style>
</head>
<body><h1>Hello World!</h1>
<p>W3School 不重复并设置位置的背景实例。</p>
<p>现在，背景图像仅显示一次，并且位置与文本分开。</p>
<p>在此例中，我们还在右侧添加了外边距，因此背景图片将永远不会干扰文本。</p></body>
</html>

效果：

w3school：CSS 背景重复：链接：
https://www.w3school.com.cn/css/css_background_repeat.asp
https://www.w3school.com.cn/css/css_background_repeat.asp

4.CSS 背景附着

1）CSS background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）。

2）实例：指定应该固定背景图像：

body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;background-attachment: fixed;
}

3）实例：指定背景图像应随页面的其余部分一起滚动：

body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;background-attachment: scroll;
}

w3school：CSS 背景附着：链接：
https://www.w3school.com.cn/css/css_background_attachment.asp
https://www.w3school.com.cn/css/css_background_attachment.asp

5.CSS 背景简写（简写背景属性）

1）CSS background - 简写属性

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

简写前：

body {background-color: #ffffff;background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;
}

简写后：使用简写属性 background：
使用简写属性在一条声明中设置背景属性：

body {background: #ffffff url("tree.png") no-repeat right top;
}

实例：

<style>
body {background: #ffffff url("/i/photo/tree.png") no-repeat right top;margin-right: 200px;
}
</style>

解释：
background 属性是在一条声明中指定所有背景属性的简写属性。

在这里，背景图像只显示一次，并位于右上角。

我们还添加了右外边距，以使文本不会覆盖背景图片。

2）在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

3）属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

4）所有 CSS 背景属性

background 在一条声明中设置所有背景属性的简写属性。
background-attachment 设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip 规定背景的绘制区域。
background-color 设置元素的背景色。
background-image 设置元素的背景图像。
background-origin 规定在何处放置背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置背景图像是否及如何重复。
background-size 规定背景图像的尺寸。

w3school：CSS 背景简写：链接：
https://www.w3school.com.cn/css/css_background_shorthand.asp
https://www.w3school.com.cn/css/css_background_shorthand.asp