CSS基础常用属性之颜色(如果想知道CSS的颜色知识点,那么只看这一篇就足够了!)

简介: CSS基础常用属性之颜色(如果想知道CSS的颜色知识点,那么只看这一篇就足够了!)

1.颜色属性

       在CSS中颜色属性是用来设置文本颜色的,而其的表示方式有一下的四种方式:

       

       【1】使用颜色关键词表示

我们直接使用案例来看一下:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.18.css">
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

CSS代码:

/* 将div元素的文字改为橙色 */
div {
    color: orange;
}

也就是我们直接使用颜色的英文来修改元素的文字颜色。

常见的颜色关键词:

颜色 颜色关键词
红色 red
橙色 orange
黄色 yellow
绿色 green
蓝色 blue
青色 teal
紫色 purple

(补充:使文字透明,则使用颜色关键词transparent)。

当然还有更多的颜色关键词,读者可以自行上网查找(官网颜色关键词链接)-----------------------><named-color> - CSS: Cascading Style Sheets | MDN

注意:

彩色关键字是不区分大小写的标识符,该标识符用于表示特定的颜色。

警告!:对颜色关键字的支持因浏览器而异,因此,为了安全起见,最好使用十六进制或功能符号。

       【2】使用RGB / RGBA表示

什么使RGB:

RGB值指定为:rgb(red, green, blue),其中每个参数(red,green和blue)定义颜色的强度,可以是一个整数值(从0到255)或一个百分比值(从0%到100%),整数值255对应100%。

这里我们举出常见的RGB(也可以使用百分比):

       color: rgb(255, 0, 0);/* 红色 */
       color: rgb(0, 255, 0);/* 绿色 */
       color: rgb(0, 0, 255);/* 蓝色 */
       color: rgb(0, 0, 0);/* 黑色 */
       color: rgb(255, 255, 255);/* 白色 */

小规律:

1. 若三种颜色值相同,呈现的是灰色,值越大,灰色越浅。
2. rgb(0, 0, 0) 是黑色, rgb(255, 255,255) 是白色。
3. 对于rbga 来说,前三位的rgb 形式要保持一致,要么都是0~255 的数字,要么都是
百分比。

了解了RGB之后,对于使用RGB来表示文本颜色,我们直接使用案例讲解:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.18.css">
</head>
<body>
    <div>这是一段将要修改文本颜色的文字</div>
</body>
</html>

CSS代码:

/* 将div元素的文字改为红色 */
div {
    color: rgb(255, 0, 0);
}

注意:

当使用百分比表示时。如果超出有效范围(0-255或0%-100%)的值将被自动裁剪或更改为设备支持的范围内。(以下同理)

这就是使用RGB来给元素的文本添加颜色,当然我们会发现,还有一种和RGB十分相似的方式加RGBA。而RGBA只是在RGB的基础上多了一个给文字添加颜色透明。(如图)

我们使用案例来进一步理解这个透明度:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.18.css">
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

CSS代码 :

/* 将div元素的文字改为绿色并且颜色透明的为100% */
div {
    color: rgba(0, 255, 0, 100%);
}

如果我们将透明度改为30%:

/* 将div元素的文字改为绿色并且颜色透明的为30% */
div {
    color: rgba(0, 255, 0, 30%);
}

我们就可以发现文字的颜色不是那么的明显了,这也就是好透明度导致的。

       【3】使用HEX / HEXA表示

HEX / HEXA即颜色的十六进制表示,十六进制表示法的RGB值#由紧随其后的六个十六进制字符(0~9,a~f)的字符组成。HEX 的原理同与 RGB 一样,依然是通过:红、绿、蓝色进行组合,只不过要用 6位(分成3组) 来表达,格式为:# rr gg bb

例如常见的颜色的十六进制表示为:

color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */

补充:每一种颜色的最小值是: 00 ,最大值是: ff。

我们直接使用案例来更好的理解一下:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.18.css">
</head>
<body>
    <div>这是一段文字,我们将要使用十六进制形式修改其颜色</div>
</body>
</html>

CSS代码:

/* 将div元素的文字改为红色 */
div {
    color: #ff0000;
}

这样我们就了解了使用HEX的表示方式来修改文本颜色了。当然和RGB一样,HEX也有HEXA的表示方式,其也是多了一个透明度的数值。

/* 将div元素的文字改为红色,透明度参数为66 */
div {
    color: #ff000066;
}

很明显,文本颜色变浅了,这就是透明度所导致的。

注意:

注意点: IE 浏览器不支持HEXA ,但支持HEX。

       

       【4】使用HSL / HSLA表示

在学习使用HSL / HSLA表示文本颜色之前,让我们先来学习一下什么使HSL:

HSL 是通过:色相、饱和度、亮度,来表示一个颜色的,格式为: hsl(色相,饱和度,亮度)

在CSS中色相:取值范围是0~360 度,具体度数对应的颜色如下图:

饱和度:取值范围是0%~100% 。(向色相中对应颜色中添加灰色, 0% 全灰, 100% 没有
灰)
亮度:取值范围是0%~100% 。( 0% 亮度没了,所以就是黑色。100% 亮度太强,所以就是
白色了)

了解了什么是HSL,那么我们就使用hsl来给CSS元素中的文本修改其颜色:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.18.css">
</head>
<body>
    <div>这是一段文字,我们将要使用HSL修改其颜色</div>
</body>
</html>

CSS代码:

/* 将div元素的文字改为红色*/
div {
    color: hsl(0, 100%, 50%);
}

当然,和上边的RGB、HEX一样,HSL也有HSLA,而HSLA 其实就是在HSL 的基础上,添加了透明度。

我们直接使用代码来看一下:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.18.css">
</head>
<body>
    <div>这是一段文字,我们将要使用HSLA修改其颜色</div>
</body>
</html>

CSS代码:

/* 将div元素的文字改为红色,并且不透明度为50%*/
div {
    color: hsl(0, 100%, 50%, 50%);
}

这样我们就了解了CSS中有关颜色的所有修改方式。

相关文章
|
3天前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
22 0
学习css的clip-path属性
|
10天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
14 0
|
16天前
|
前端开发
设计--字体样式---斜体,CSS字体属性用法
设计--字体样式---斜体,CSS字体属性用法
|
16天前
|
前端开发
前端 CSS 经典:mix-blend-mode 属性
前端 CSS 经典:mix-blend-mode 属性
10 0
|
16天前
|
前端开发
前端 CSS 经典:backface-visibility 属性
前端 CSS 经典:backface-visibility 属性
13 0
|
前端开发
CSS颜色代码大全
  FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000 #FFB7DD #FF88C2 #FF44AA  #FF0088  #C10066  #A20055  #8C0044  #FFCCCC ...
827 0
|
前端开发
CSS颜色代码大全
FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000 #FFB7DD #FF88C2 #FF44AA #FF0088 #C10066 #A20055 #8C0044 #FFCCCC #FF888...
930 0
|
10天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
54 0
|
15天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
22天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js