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