CSS层叠样式表—CSS文本属性

最新推荐文章于 2024-11-01 12:26:05 发布

来聊前端

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量38

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36893834/article/details/131995434

版权

CSS颜色属性

学习目标

在这里插入图片描述

HSL颜色

在CSS中，我们可以使用hsl属性来定义颜色效果。通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

语法：

color:hsl(色调,饱和度,亮度)

说明：

hsl属性取值如下表所示。

值	范围
色调	0-360
饱和度	0%-100%
亮度	0%-100%

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			color: hsl(0, 100%, 50%);
		}
	</style>
</head>
<body>
	<p>今天天气很好</p>
</body>
</html>

HSLA颜色

在CSS中，我们可以使用hsla属性来定义颜色效果。通过对色调(H)、饱和度(S)、亮度(L)、透明度（A）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

语法：

color:hsla(色调,饱和度,亮度,透明度)

说明：

hsl属性取值如下表所示。

HSLA颜色:色调(H)、饱和度(S)、亮度(L)、透明度(A)。

值	范围
色调	0-360
饱和度	0%-100%
亮度	0%-100%
透明度	0-1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			color: hsla(0, 100%, 50%,0.5);
		}
	</style>
</head>
<body>
	<p>今天天气很好</p>
</body>
</html>

RGB颜色

在CSS中，我们可以使用RGB属性来定义颜色效果。RGB颜色:红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

语法：

color:rgb(红色,绿色,蓝色)

说明：

RGB属性取值如下表所示。

值	范围
R红色	0-255或0%-100%
G绿色	0-255或0%-100%
B蓝色	0-255或0%-100%

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			color: rgb(255, 0, 0);
		}
	</style>
</head>
<body>
	<p>今天天气很好</p>
</body>
</html>

RGBA颜色

在CSS中，我们可以使用RGB属性来定义颜色效果。RGB颜色:红®、绿(G)、蓝(B)、透明度(A)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

语法：

color:rgb(红色,绿色,蓝色,透明度)

说明：

RGBA属性取值如下表所示。

值	范围
R红色	0-255或0%-100%
G绿色	0-255或0%-100%
B蓝色	0-255或0%-100%
A透明度	0-1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			color: rgba(255, 0, 0,0.5);
		}
	</style>
</head>
<body>
	<p>今天天气很好</p>
</body>
</html>

十六进制颜色

十六进制色彩：其实是RGB颜色的笔筒区间表示方式。常见的十六进制表示方式#00aaff。

语法：

color:#00aaff;

说明：

十六进制颜色属性取值如下表所示。

值	范围
R红色	0-9a-f
G绿色	0-9a-f
B蓝色	0-9a-f

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			color: #00aaff;
		}
	</style>
</head>
<body>
	<p>今天天气很好</p>
</body>
</html>

英文单词

使用表示颜色的英文单词例如red,yellow,pink,green,blue等表示具体的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			color: red;
		}
	</style>
</head>
<body>
	<p>今天天气很好</p>
</body>
</html>