CSS设置网页颜色

目录

前言:

1.颜色名字:

2.十六进制码:

3.RGB:

4.RGBA:

5.HSL:

1.hue:

2.saturation:

3.lightness:

6.HSLA:


前言:

我们在电脑显示器,手机屏幕,电视上面看到的颜色都是通用三种颜色混合而成的:红(red),绿(green),蓝(blue)简称为三原色,按照不同的比例就可以配出其他的颜色...

在CSS中提供了一些属性可以用来设置颜色如color,可以用来设置文字的颜色,下列是描述颜色的6中方式:

初识CSS-CSDN博客 0基础看这一篇就够了HTML教程(详细汇总)_php代码格式-CSDN博客

说明
颜色名字使用颜色的名字来描述颜色,如red,blue,green等等,颜色名称是不区分大小写的.color:red;
十六进制码用十六进制码来描述颜色如:#RRGGBB或#RGB,"#"后面跟3位或者6位十六进制/(0-9,A-F).color:#RGB;
RGB通过rgb()函数对red,green,blue三原色的强度进行控制,从而实现不同的颜色。color:rgb(255,0,51);
RGBARGBA是在RGB的基础上面增加了alpha通道来设置颜色的透明度,需要使用rgba()函数来实现。color:rgba(255,0,0,1);
HSL通过hsl()函数对颜色的色调,饱和度,亮度进行调节,从而实现不同的颜色。color:hsl(120,100%,25%);
HSLAHSLA是在HSL的基础上面增加了alpha通道来设置颜色的透明度,实现需要使用hsla()函数。color:hsla(240,100%,50%,0.5);

1.颜色名字:

在CSS可以使用颜色名来表示颜色,如下表所示:

颜色名颜色
aqua天蓝
blue蓝色
gray灰色
lime浅绿
navy深蓝
orange橙色
red红色
teal蓝绿色
yellow黄色
black黑色
fuchsia品红
green绿色
maroon紫红色
olive橄榄色
purple紫色
silver浅灰色
white白色

除了上述的颜色之外浏览器还支持其他颜色名,但是不同浏览器解析时可能存在差异,对此是不建议使用颜色名来设置颜色的...

2.十六进制码:

十六进制码是以6个十六进制数(0到9,a到f)来表示颜色,最前面加#这六个数还可以分为三组每组两个,来表示redgreenblue三种颜色的前度,使用十六进制的时候,如果每组的两个十六进制是相同的,如#00ff00,或者#aabbcc等等,他们可以简写成#0f0,#abc,如:

h1{color:#000;
}
span{color: #fff;;
}

你可以通过ps或者其他制图软件来获得颜色的十六进制码,如下所示:

3.RGB:

RGB是redgreen,blue的缩写,它是一种色彩的模式,可以通过对redgreen,blue这三种颜色的比例控制来实现各种各样的颜色,在CSS中如果要使用RGB就需要借助rgb()函数,函数的语法格式如:rgb(red,green,blue).其中redgreenblue是这三个颜色的强度,这三个参数的取值可以是0~255之间的整数,也可以是0%~100%之间的百分比,示例代码如下:

h1 {color: rgb(62, 190, 81);
}span {color: rgb(198, 36, 36);
}

4.RGBA:

RGBA是RGB的扩展,是在RGB的基础上增加了对Alpha通道的控制,Alpha可以设置颜色的透明度。我们可以借助rgba()函数来使用RGBA模式,该函数会接收四个参数,除了redgreenblue三个之外,还需要一个0到1之间的小数来表示颜色的透明度,其中0表示完全透明,1表示完全不透明,rgba()的语法如:rgba(red,green,blue,alpha);.其中redgreenblue来表示颜色,alpha来表示颜色的透明度:示例代码如下:

h1 {color: rgba(22, 91, 32,0.23);
}span {color: rgba(211, 31, 31, 0.584);
}

5.HSL:

HSL是Hue(色调),Saturation(饱和度),Lightness(亮度)的缩写,他也是一种色彩的模式,通过对色调,饱和度,亮度三个属性来调节最后实现不同的颜色,在CSS中可以使用hsl()函数来实现HSL,函数的语法格如:hsl(hue,saturation,lightness) 。语法说明如下:

1.hue:

参数hue是表示颜色在色盘上面的度数(从0到360),0或360表示红色,120表示绿色,240表示蓝色,如下图所示:

2.saturation:

参数saturation是一个百分比,表示颜色的饱和度,其中0%表示灰色,100%表示全彩,如下所示:

3.lightness:

参数lightness也是一个百分比的数值,表示颜色的亮度,0%是黑色(表示没有),50%(既不黑也不亮),100%白色(曝光严重),如下图所示:

6.HSLA:

HSLA是HSL的扩展,在HSLA与HSL相比增加了对颜色的透明度,在CSS中使用HSLA模式需要用hsla()函数,其语法格式如下:hsla(hue,saturation,lightness,alpha),其中alpha是一个0~1以内的小数,表示颜色的透明度,0表示完全透明,1表示完全不透明。

上述所有颜色的示例代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#rgb {color: rgb(293, 0, 0);}#rgba {/* 这个比例就是黑色 */color: rgba(red, green, blue, alpha);}#hex {color: #278692;}#short {color: #000;}#hsl {color: hsl(hue, saturation, lightness);}#hsla {color: hsla(hue, saturation, lightness, alpha);}#built {color: red;}</style>
</head><body><p id="rgb">color:rgb(293,0,0);</p><p id="rgba">color:rgba(red,green,blue,alpha);</p><p id="hex">color:#278692;</p><p id="short">color:#000;</p><p id="hsl">color:hsl(hue,saturation,lightness,alpha);</p><p id="hsla">color:hsla(hue,saturation,lightness,alpha);</p><p id="built">color:red;</p>
</body></html>

上述代码在代码中的运行结果如下:

下篇博客建议: 

 CSS设置网页背景-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/lh11223326/article/details/137292941#comments_32074728

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/802264.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows 关闭占用指定端口的进程

以下示例以443端口为例&#xff0c;具体哪个端口视自己情况而定 输入命令 # 输出的最后一列就是进程号pid netstat -ano | findstr "443" 找出占用443端口的进程号(pid)&#xff08;第二列是你本机的应用占用的端口&#xff0c;看第二列就行&#xff09;如下图&am…

4 万字 102 道Java经典面试题总结(2024修订版)- 多线程篇

&#x1f345; 作者简介&#xff1a;哪吒&#xff0c;CSDN2021博客之星亚军&#x1f3c6;、新星计划导师✌、博客专家&#x1f4aa; &#x1f345; 哪吒多年工作总结&#xff1a;Java学习路线总结&#xff0c;搬砖工逆袭Java架构师 &#x1f345; 技术交流&#xff1a;定期更新…

关于GNSS硬件延迟初步学习,电离层提取

1、卫星端偏差分为频间和频内偏差&#xff08;inter or intra frequency&#xff09;&#xff0c;下面以GPS的C1C和C2W组合为例分析对PPP解算的影响&#xff1a; 如果不改正卫星端的inter-frequency&#xff08;即&#xff1a;C1C-C1W&#xff09;偏差&#xff08;因为每颗卫星…

AI实时换天解决方案:重塑汽车与旅行拍摄新视界

在汽车拍摄与旅行摄影领域&#xff0c;天空作为画面中的重要元素&#xff0c;往往决定着整体视觉效果的成败。美摄科技作为业界领先的AI视觉技术提供商&#xff0c;近日推出了全新的AI实时换天解决方案&#xff0c;为用户带来了前所未有的创意空间与效率提升。 传统的换天技术…

字母大小写转换(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;char c1 A;char c2 0;//实现大小写转换&#xff1b;c2 c1 32;//输出结果&#xff1b;printf("c2的编码是&…

20240408,C++数组,函数,指针

是谁说回老家学习结果摆烂了两天&#xff0c;是我&#xff0c;Π—Π&#xff01; Π—Π&#xff01;&#xff01; 一&#xff0c;数组——同C 1.1一维数组 1.0 相同类型&#xff0c;连续内存&#xff0c; 1.1 定义格式&#xff1a;数据类型 数组名【长度】&#xff1…

uni-app(H5)论坛 | 社区 表情选择 UI组件

项目源码请移步&#xff1a;bbs 效果 实现思路 表情切换 人物、动物、小黄人不同表情之间的切换实际就是组件的切换 emoji表情 emoji表情本身就是一种字符 如需其他emoji表情可参考 EmojiAll中文官方网站 需要注意的就是数据库的存储格式需要支持emoji表情&#xff0c;我项…

第8章 数据集成和互操作

思维导图 8.1 引言 数据集成和互操作(DII)描述了数据在不同数据存储、应用程序和组织这三者内部和之间进行移动和整合的相关过程。数据集成是将数据整合成物理的或虚拟的一致格式。数据互操作是多个系统之间进行通信的能力。数据集成和互操作的解决方案提供了大多数组织所依赖的…

配置交换机 SSH 管理和端口安全——实验1:配置交换机基本安全和 SSH管理

实验目的 通过本实验可以掌握&#xff1a; 交换机基本安全配置。SSH 的工作原理和 SSH服务端和客户端的配置。 实验拓扑 交换机基本安全和 SSH管理实验拓扑如图所示。 交换机基本安全和 SSH管理实验拓扑 实验步骤 &#xff08;1&#xff09;配置交换机S1 Switch>enab…

【r-tree算法】一篇文章讲透~

目录 一、引言 二、R-tree算法的基本原理 1 数据结构 2 插入操作 3 删除操作 4 查询操作 5 代码事例 三、R-tree算法的性能分析 1 时间复杂度 2 空间复杂度 3 影响因素 四、R-tree算法的变体和改进 1 R*-tree算法 2 X-tree算法 3 QR-tree算法 五、R-tree算法的…

axure谷歌插件(直接下载)

axure谷歌插件 在网上找一个谷歌的axure&#xff0c;不是登陆就是收费&#xff0c;离谱。找了好久才找到这个&#xff0c;我下载保存到网盘了&#xff0c;直接下载就ok&#xff0c;永久无提取码。 下载插件文件&#xff0c;打开开发者模式&#xff0c;直接拖进来就ok。 网盘…

esxi上给centos7虚拟机扩容硬盘

原来centos7硬盘分配的空间只有40GB 需要直接扩容到200GB 扩容前 扩容后 扩容步骤&#xff1a; 1 .在esxi平台上关机虚拟机&#xff0c;将硬盘调整为200GB&#xff0c;然后开机 2.请出chatGPT 1. 创建新分区 使用剩余的磁盘空间创建一个新的分区。你可以使用fdisk&#xf…

Flink Keyed State的优化与实践

本期作者 1.背景 Flink SQL在业务使用中有较多的双流join场景&#xff0c;当左右流的流量都较大&#xff0c;Join的等待时间即使为1小时&#xff0c;Flink Keyed State&#xff08;Flink State分Operator State和Keyed State&#xff0c;后文所有State均代表后者&#xff09;的…

数据库(mysql)-基本查询语句(DQL)

查询语句 这边查询是给予一定表格,这边先做个解释 教师表包括(name(姓名),gender(性别),salary(工资),title(职位),subject_id(课程的编号),comm(奖金)) 学生表包括(姓名(name),gender(性别),job(职位),生日(birth)) 模版 SELECT 字段名 FROM 查询表 WHERE 查询语句 或与非…

k8s_入门_命令详解

命令详解 kubectl是官方的CLI命令行工具&#xff0c;用于与 apiserver进行通信&#xff0c;将用户在命令行输入的命令&#xff0c;组织并转化为 apiserver能识别的信息&#xff0c;进而实现管理k8s各种资源的一种有效途径 1. 帮助 2. 查看版本信息 3. 查看资源对象等 查看No…

Linux应用开发(3):Linux时间操作(time、mktime、localtime等)

1. 简述 在Linux系统中&#xff0c;时间操作函数是编程中经常使用的一部分&#xff0c;它们允许程序获取和设置系统时间&#xff0c;以及对时间进行各种处理。以下是一些常用的时间操作函数的详细介绍。 2. 时间操作 &#xff08;1&#xff09;time(): 获取1970年1月1日以来的…

爬虫入门教程(一)

爬虫入门教程 1.什么是爬虫 爬虫是一种自动获取网站数据的程序或脚本。它可以自动模拟人类访问网站,获取网页源代码,解析并提取出所需的数据。 爬虫的工作原理类似于搜索引擎的索引程序&#xff0c;它们会按照预定的规则和算法在互联网上不断地爬取网页&#xff0c;收集信息…

k8s知识

k8s是用于容器编排和管理的&#xff0c;docker或者ctr是k8s的运行时&#xff0c;k8s通过容器运行时来启动容器&#xff0c;容器启动需要镜像&#xff0c;镜像可以用docker构建&#xff0c;dockerfile就是用于自定义如何构建镜像&#xff0c;所以上面那套流水线就是先用dockerfi…

Linux|从 STDIN 读取 Awk 输入

简介 在之前关于 Awk 工具的系列文章中&#xff0c;主要探讨了如何从文件中读取数据。但如果你希望从标准输入&#xff08;STDIN&#xff09;中读取数据&#xff0c;又该如何操作呢&#xff1f; 在本文中&#xff0c;将介绍几个示例&#xff0c;展示如何使用 Awk 来过滤其他命令…

即插即用篇 | YOLOv8引入Haar小波下采样 | 一种简单而有效的语义分割下采样模块

本改进已集成到 YOLOv8-Magic 框架。 下采样操作如最大池化或步幅卷积在卷积神经网络(CNNs)中被广泛应用,用于聚合局部特征、扩大感受野并减少计算负担。然而,对于语义分割任务,对局部邻域的特征进行池化可能导致重要的空间信息丢失,这有助于逐像素预测。为了解决这个问题…