暑期学习日记11：CSS颜色

土肥圆波太郎

已于 2022-07-22 21:25:30 修改

阅读量104

点赞数

文章标签：学习

于 2022-07-20 22:13:12 首次发布

本文链接：https://blog.csdn.net/weixin_48485475/article/details/125901847

版权

1.CSS指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值设定CSS颜色

2.在 CSS 中，可以使用颜色名称来指定颜色：如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
	<h1 style="background: tomato">tomato</h1>
	<h1 style="background: blue">blue</h1>
	<h1 style="background: red">red</h1>
	<h1 style="background: yellow">yellow</h1>
	<h1 style="background: green">green</h1>
</body>
</html>

显示效果为：

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<h1 style="background-color:tomato;">tomato</h1>
<h1 style="background-color:rgb(255, 99, 71);">tomato</h1>
<h1 style="background-color:#ff6347;">tomato</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">tomato</h1>
</body>
</html>

显示效果为：

4.使用background设置CSS 背景颜色，如第1例：

5.使用color设置CSS 文本颜色，如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
	<h1 style="color: tomato">tomato</h1>
	<h1 style="color: blue">blue</h1>
	<h1 style="color: red">red</h1>
	<h1 style="color: yellow">yellow</h1>
	<h1 style="color: green">green</h1>
</body>
</html>

显示效果为：

6.使用solid设置CSS 边框颜色，如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
	<h1 style="border:2px solid tomato">tomato</h1>
	<h1 style="border:2px solid blue">blue</h1>
	<h1 style="border:2px solid red">red</h1>
	<h1 style="border:2px solid yellow">yellow</h1>
	<h1 style="border:2px solid green">green</h1>
</body>
</html>

显示效果为：