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注释：链接：
/css/css_comments.asp
/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 颜色：链接：
/css/css_colors.asp
/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 颜色：链接：
/css/css_colors_rgb.asp
/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 颜色：链接：
/css/css_colors_hex.asp
/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 颜色：链接：
/css/css_colors_hsl.asp
/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 背景：链接：
/css/css_background.asp
/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 背景图像：链接：
/css/css_background_image.asp
/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 背景重复：链接：
/css/css_background_repeat.asp
/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 背景附着：链接：
/css/css_background_attachment.asp
/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 背景简写：链接：
/css/css_background_shorthand.asp
/css/css_background_shorthand.asp
W3school：CSS基础：CSS注释 颜色（颜色 RGB HEX HSL） 背景（背景 背景图像 背景重复 背景附着 简写背景属性）
