公司网站的设计风格大多是,wordpress the time,济南网站建设 刘彬彬,云南文山学院导语#xff1a; 在通过 CSS 设置元素样式的时候#xff0c;对于颜色的定义#xff0c;有以下四种表达方式。 文章目录 方式一#xff1a;【颜色名】方式二#xff1a;rgb 或 rgba方式三#xff1a;#xff1a;HEX 或 HEXA方式四#xff1a;HSL 或 HSLA 方式一#xf… 导语 在通过 CSS 设置元素样式的时候对于颜色的定义有以下四种表达方式。 文章目录 方式一【颜色名】方式二rgb 或 rgba方式三HEX 或 HEXA方式四HSL 或 HSLA 方式一【颜色名】
编写方式直接使用颜色对应的英文单词编写比较简单例如 示例
p {color: aqua;color: red;color: blue;color: purple;color: orange;color: gray;
}特点 书写方便简洁缺点是表达的颜色比较单一,无法适应 多场景下混合色的需求
点击查看官方完整颜色名 方式二rgb 或 rgba
编写方式使用 红、黄、蓝 这三种光的三原色进行混合后产生的颜色 示例
/* 使用 0~255 之间的数字表示一种颜色 */
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);/* 白色 *//* 混合出任意一种颜色 */
color:rgb(138, 43, 226); /* 紫罗兰色 */color:rgba(255, 0, 0, 0.5);/* 半透明的红色 *//* 也可以使用百分比表示一种颜色用的少 */
color: rgb(100%, 0%, 0%);/* 红色 */color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */值得注意 方式三HEX 或 HEXA
HEX 的原理同与 rgb 一样依然是通过红、绿、蓝色进行组合只不过要用 6位分成3组 来表达 值得注意 示例
color: #ff0000;/* 红色 */color: #00ff00;/* 绿色 */color: #0000ff;/* 蓝色 */color: #000000;/* 黑色 */color: #ffffff;/* 白色 *//* 如果每种颜色的两位都是相同的就可以简写*/
color: #ff9988;/* 可简为#f98 *//* 但要注意前三位简写了那么透明度就也要简写 */
color: #ff998866;/* 可简为#f986 */备注IE 浏览器不支持 HEXA 但支持 HEX 。 方式四HSL 或 HSLA HSL 是通过色相、饱和度、亮度来表示一个颜色的格式为 hsl(色相,饱和度,亮度)。 色相取值范围是 0~360 度具体度数对应的颜色如下图 饱和度取值范围是 0%~100% 。向色相中对应颜色中添加灰色0%全灰 100% 没有灰。亮度取值范围是 0%~100% 。 0% 亮度没了所以就是黑色。 100% 亮度太强最后就是呈现白色了。HSLA 其实就是在 HSL 的基础上添加了透明度。 ♂️ 博主座右铭向阳而生我还在路上 —————————————————————————————— 博主想说将持续性为社区输出自己的资源同时也见证自己的进步 —————————————————————————————— ♂️ 如果都看到这了博主希望留下你的足迹【收藏点赞✍️评论】 ——————————————————————————————
