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

薇眠winter

已于 2022-11-08 15:07:28 修改

阅读量1.1k

点赞数

分类专栏： CSS 文章标签：前端 uni-app css html css3

于 2022-08-03 17:55:07 首次发布

本文链接：https://blog.csdn.net/weixin_58725427/article/details/126143240

版权

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<

最低0.47元/天解锁文章

薇眠winter

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）

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

扫一扫