第三章:CSS的颜色表示

ops/2025/1/19 15:45:02/

目录

一、名称表示

二、rgb或rgba

三、HEX或HEXA

三、HSL或HSLA

四、总结


一、名称表示

直接使用颜色的英文名称表示,例如红色red,绿色green。示例:

css">p{color: red;
}

二、rgb或rgba

rgb分别代表红绿蓝三原色,数值在0~255,rgba中的a表示透明度,范围在0~1,数值越大,越不透明 ,可以理解为不透明度,例如:rgba(0,0,0,1)表示黑色。示例:

css">    p {color: rgba(0, 0, 0, 1);}

三、HEX或HEXA

HEX表示和rgb一样,三个参数分别是红绿蓝,只是表示方法是十六进制,每个颜色用十六进制的两位数表示,使用时在前面加上#,这种表示方法最常用,例如#ffffff表示白色 。

注意:该表示法两位十六进制表示一个颜色,当这两位数相同时,可以只写一位。例如白色可以写成#fff。

A同样是透明度,只是用十六进制表示而已,值越大 ,越不透明,可写可不写,默认是1。示例:

css">    p {/* #f00f等价于#ff0000ff */color: #f00f;}

三、HSL或HSLA

该方法了解即可,很少使用。三个参数分别表示色相(0~360),饱和度(0%~100%),亮度(0%~100%)。A任然是透明度。示例:

css">    p {color: hsla(30, 0%, 100%, 0.877);}

这个是色相环,角度决定颜色。

四、总结

本章节介绍了CSS的四种颜色表示方法,其中最常用的是前三种,最后一种了解即可。下一章节将介绍CSS的字体属性。


http://www.ppmy.cn/ops/151418.html

相关文章

phaserjs+typescript游戏开发之camera实现

以下是一个使用 Phaser.js 和 TypeScript 实现的示例,包含玩家移动、摄像机跟随并限制在游戏世界范围内的基本功能。 TypeScript 和 Phaser.js 实现的完整代码 安装 Phaser.js(使用 npm) 首先,确保你已经安装了 Node.js 和 npm…

Python编程与机器学习:解锁气象、海洋、水文领域的新实践

专题一、Python软件的安装及入门 1.1 Python背景及其在气象中的应用 1.2 Anaconda解释和安装以及Jupyter配置 1.3 Python基础语法 专题二、气象常用科学计算库 2.1 Numpy库 2.2 Pandas库 2.4 Xarray库 专题三、气象海洋常用可视化库 3.1可视化库介绍Matplotlib、Carto…

STM32 FreeRTOS中断管理

STM32 FreeRTOS 中断管理 一、中断优先级配置 在STM32上使用FreeRTOS时,合理配置中断优先级是非常重要的。STM32使用8位宽的寄存器来配置中断的优先等级,但实际只使用了高4位(7:4),因此提供了最大16级的中断优先级。中…

Git克隆报错

Git clone命令出现"fatal repository not found"错误 有时候使用Git命令"git clone [url]“将远程仓库中的代码爬取下来的时候系统会报错"fatal repository not found”。出现这个错误的一个可能的原因是本地已存储的git账号密码与爬取仓库所属的账号密码不…

后盾人JS -- 好用的 JavaScript Symbol 类型

Symbol使用场景介绍 举个例子,当leader让你去机房取某个电脑的时候,机房那么多电脑,你怎么知道取哪个 所以这个时候symbol的作用就显现出来了(上面有什么贴纸的,什么型号的电脑) 声明定义Symbol的几种方…

Vscode——SSH连接不上的一种解决办法

一、完整报错: > @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ > IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! > Someone could be eavesdropping on you right now (man-in-the

Coconut:基于连续潜在空间推理,提升大语言模型推理能力的新方法

Coconut(连续思维链)提出了一种新的大语言模型推理范式,该范式在潜在空间中进行运算,利用模型隐藏层生成的连续思维状态取代传统的基于文本的推理方式。系统将这些状态以输入嵌入的形式反馈至模型,通过广度优先搜索方法…

Python从0到100(八十四):神经网络-卷积神经网络训练CIFAR-10数据集

前言: 零基础学Python:Python从0到100最新最全教程。 想做这件事情很久了,这次我更新了自己所写过的所有博客,汇集成了Python从0到100,共一百节课,帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…