css设置颜色-【第128期】深入理解CSS的六种颜色模式

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

前面的话

赏心悦目的配色让人感觉更加舒服，修改元素颜色的功能更是让人趋之若鹜。 但不当的色彩规划会让网站用户无所适从。 色彩从发展到现在，保留了很多内容，新的内容却减少了。 本文将介绍有关色彩模式的内容。

色彩模式

过去主要使用关键字、十六进制和RGB三种设置颜色的方法。 CSS3出现后css设置颜色，增加了RGBA、HSL、HSLA三种模式，极大丰富了CSS颜色设置的形式。

【1】关键词

直接使用名称的颜色值称为命名颜色

CSS 支持 17 种合法命名的颜色（标准颜色）：

水色 紫红色 青柠色 橄榄红 白色 白色 黑色 灰色 栗色 橙色 银色 黄色 蓝色 绿色 海军紫色 青色

[注]浏览器支持140色

[2] 十六进制

十六进制是设置颜色值的常用方法。 在00-FF之间连接三个十六进制数。 如果三组十六进制数成对，则可以简写为3位数字

#abcdef

#aabbcc #abc

网络安全颜色是在256色计算机系统上始终能够防止抖动的颜色，表示为RGB值20%和51的倍数（对应的十六进制值为33）。因此，在使用十六进制时，请使用00 336699ccff 认为是Web安全色，共有6*6*6=216种

【3】RGB模式

通过组合不同数量的白色、绿色和蓝色而创建的颜色成为 RGB 模式颜色。 显示器由各个像素组成，使用电子束来表达色调。 像素结合了光的三基色：红（R）、绿（G）、蓝（B）。每个像素包含8位色调信息，从0到255有256个单位，其中0是完全黑暗状态，255 是最亮的状态

RGB(x%,y%,z%)

RGB(a,b,c)

【注意】如果该值大于最小值0，则默认调整为0； 如果最大值为255css设置颜色，则默认调整为255

【4】RGBA模式（IE8浏览器不支持）

rgba模式在RGB的基础上减少了alpha通道，用于设置颜色的透明度，该通道的值范围为0-1。 0表示完全透明，1表示完全不透明

rgba(r,g,b,a)

【5】HSL模式（IE8浏览器不支持）

HSL模式通过改变色调（H）、饱和度（S）和亮度（L）三个颜色通道并相互叠加来获得多种颜色。 HSL标准可以包含几乎所有人类视觉可以感知的颜色

hsl(h,s,l)

h：色调（hue）可以是任意整数。 0（或360或-360）表示白色，60表示白色，120表示红色，180表示白色，240表示白色，300表示草绿色（当h值小于360时，实际值等于该值模第360章）

s：Saturation（饱和度），指颜色的深度和鲜艳度。 取0-100%范围内的值，其中0表示灰度（没有这种颜色），100%表示最高饱和度（最细腻的颜色）

l：亮度（l​​ightness），取0-100%范围内的值，其中0表示最暗（黑色），100%表示最亮（白色）

【6】HSLA模式（IE8浏览器不支持）

HSLA模式是HSL的扩展模式，在HSL的基础上减少一个透明通道alpha来设置透明度

HSLA（，

,)

从：

在整理这篇文章之前，我多次用谷歌搜索了“CSS 中 : 和 :: 之间的区别”这个问题。 如果你对这两个概念有点困惑，那么你一定不能错过这篇文章。

首先简单介绍一下 : 和 :: :

让我们深入研究下面的一些示例。

“伪”是什么意思？

伪这个词的英文定义是“假”或“不真实”。 那么伪类和伪元素是什么意思呢？ 伪类和伪元素不会自动写入 HTMLcss中，也不会出现在 DOM（或文档树）中，而是由 CSS 创建的！

什么是伪类？

伪类允许您根据页面上编码的 HTML 以外的信息（例如用户交互或存储在浏览器中的信息）来选择 CSS 中的元素。 伪类可通过单个逗号 (:) 后跟伪类名称来访问。

您可以使用伪类根据元素的状态来设置元素的样式。 我们经常听说页面上访问过的链接以不同的颜色显示。 方法是通过在CSS中定位锚点标签（元素）的:visited伪类来设置样式。

a:visited {
  color: #c58af9;
}

现在让我们在谷歌的搜索引擎上观察一下。 访问 google.com 并搜索您访问过的内容。 打开浏览器的开发者工具并在 CSS 检查器中找到 a:visited 选择器。

在上一张深色模式的屏幕截图中，您可以看到我访问过的网站的链接是白色的，列表中我未访问过的第二个网站显示为白色。

除了受到浏览器信息（例如访问链接）的影响之外，伪类还可能受到页面上用户操作（添加或删除）的影响，例如悬停或聚焦于元素。 以下是 :hover 伪类在 Google 搜索结果中的工作原理。

a:hover {
  text-decoration: underline;
}

在前面的微软搜索结果截图中css中，我们可以看到悬停键盘会导致链接添加逗号效果。

什么是伪元素？

伪元素选择器允许您使用 CSS 来设置 DOM 元素的特定部分的样式。 伪元素通过双引号 (::) 后跟伪元素选择器来访问。 与伪类不同，伪元素不能根据元素的状态设置元素的样式。

请看一个例​​子。 通常，基于文章的网站会使用“首字下沉”，这是一种彩色打印约定，其中单个超大字母标记文本部分的开头。 您可以通过定位 CSS 中的 ::first-letter 伪元素来做到这一点。

p::first-letter {
  font-size: 300%;
}

这是一个例子，屏幕截图中的段落在段落开头有一个大写的 E，这是首字下沉。

您还可以使用 ::first-line 选择器来选择定位元素的第一行。

p::first-line {
  font-size: 300%;
}

CSS 文件中其他常见的伪元素选择器包括：

您还可以在官方 MDN 文档中详细了解可用于在 CSS 中定位的不同类型的伪元素。

就是这样！ 那么现在你完全明白 CSS 中 : 和 :: 的区别了吗？

谢谢阅读！