当前位置: 首页 > news >正文

re:从0开始的CSS学习之路 5. 颜色单位

0. 写在前面

没想到在CSS里也要再次了解这些颜色单位,感觉回到了大二的数字图像处理,可惜现在已经大四了,感觉并没有学会什么AI的东西
在这里插入图片描述

1. 颜色单位

  1. 预定义颜色名:HTML和CSS规定了147种颜色名。例如:red yellow green blue

  2. RGB颜色值
    rgb(red, green, blue):括号中每个参数代表对应颜色的浓度
    浓度值是0-255之间的整数,0表示无浓度,255表示最大浓度
    也可以使用百分比表示浓度 0%~100%

  3. 十六进制颜色值
    #RRGGBB:RR-红色 GG-绿色 BB-蓝色,每种颜色使用十六进制整数表示浓度
    十六进制(满十六进一):0 1 2 3 4 5 6 7 8 9 A B C D E F
    例如:#ff0000
    若每种颜色的两位数值都一样可以简写为:#f00

  4. RGBA:相较于RGB多了个A表示透明度,取值范围在0.0~1.0之间
    0.0表示透明 1.0表示不透明 0.5表示半透明

  5. HSL/HSLA
    H 色调(0-360)0红色->120绿色->240蓝色
    S 饱和度(0%-100%) 0%灰色->100%全彩
    L 亮度(0%-100%) 0%黑色->100%白色
    A透明度(0.0-1.0) 0.0透明->1.0不透明

示例如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>.div1 {width: 200px;height: 200px;/* background-color: red; *//* background-color: rgb(255, 200, 0); *//* background-color: rgb(100%, 0%, 0%); *//* background-color: #f00; *//* background-color: rgba(255, 0, 0, 0.5); */background-color: hsla(0, 100%, 50%, .3);}
</head><body><div class="div1"></div>
</body></html>

实际网页开发感觉hsla用的不多,主要还是以十六进制或rgb为主

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【教程】Linux使用git自动备份和使用支持文件恢复的rm命令
  • 93 log4j-slf4j-impl 搭配上 log4j-to-slf4j 导致的 StackOverflow
  • Rust语言入门小结(第1篇)
  • SQL,HQL刷题,尚硅谷
  • 【MySQL】字符串函数的学习
  • 使用代理IP有风险吗?如何安全使用代理IP?
  • STM32 硬件随机数发生器(RNG)
  • GNU C和标准C
  • Redis(十三)缓存双写一致性策略
  • 在Ubuntu22.04上部署ComfyUI
  • 【51单片机】外部中断和定时器中断
  • 【数据结构】链表OJ面试题5(题库+解析)
  • Java异常处理 throw和throws
  • 黄金交易策略(Nerve Knife):反趋势锁定单的处理机制
  • RISC-V指令格式
  • IE9 : DOM Exception: INVALID_CHARACTER_ERR (5)
  • Centos6.8 使用rpm安装mysql5.7
  • ES6系列(二)变量的解构赋值
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • JavaScript异步流程控制的前世今生
  • js数组之filter
  • mysql 5.6 原生Online DDL解析
  • PHP的Ev教程三(Periodic watcher)
  • rc-form之最单纯情况
  • Sequelize 中文文档 v4 - Getting started - 入门
  • TypeScript实现数据结构(一)栈,队列,链表
  • underscore源码剖析之整体架构
  • Yeoman_Bower_Grunt
  • Zepto.js源码学习之二
  • 基于遗传算法的优化问题求解
  • 今年的LC3大会没了?
  • 融云开发漫谈:你是否了解Go语言并发编程的第一要义?
  • 问题之ssh中Host key verification failed的解决
  • 学习ES6 变量的解构赋值
  • 用jquery写贪吃蛇
  • Java总结 - String - 这篇请使劲喷我
  • MPAndroidChart 教程:Y轴 YAxis
  • 测评:对于写作的人来说,Markdown是你最好的朋友 ...
  • 树莓派用上kodexplorer也能玩成私有网盘
  • 曜石科技宣布获得千万级天使轮投资,全方面布局电竞产业链 ...
  • ​​​【收录 Hello 算法】10.4 哈希优化策略
  • ​configparser --- 配置文件解析器​
  • ​字​节​一​面​
  • #前后端分离# 头条发布系统
  • #微信小程序(布局、渲染层基础知识)
  • #我与虚拟机的故事#连载20:周志明虚拟机第 3 版:到底值不值得买?
  • #在 README.md 中生成项目目录结构
  • (2)空速传感器
  • (6)设计一个TimeMap
  • (DenseNet)Densely Connected Convolutional Networks--Gao Huang
  • (Mac上)使用Python进行matplotlib 画图时,中文显示不出来
  • (备忘)Java Map 遍历
  • (二) Windows 下 Sublime Text 3 安装离线插件 Anaconda
  • (回溯) LeetCode 78. 子集
  • (计算机网络)物理层