• RSS订阅 加入收藏  设为首页
站长杂谈

CSS颜色

时间:2024/5/12 18:54:00   作者:郑士利   来源:正势利   阅读:29   评论:0
内容摘要:CSS颜色CSS使用颜色值来指定颜色。通常,这些用于设置元素的前景色(即其文本)或元素的背景色。它们还可以用于影响边框和其他装饰效果的颜色。语法CSS可以以多种方式设置元素的颜色。让我们检查所有可能的语法来设置元素的高度。命名颜色CSS命名颜色是颜色的名称,例如红色、蓝色、黑色或浅海蓝色。color:blue;bord...

CSS颜色

CSS使用颜色值来指定颜色。通常,这些用于设置元素的前景色(即其文本)或元素的背景色。它们还可以用于影响边框和其他装饰效果的颜色。

语法

CSS可以以多种方式设置元素的颜色。让我们检查所有可能的语法来设置元素的高度。

命名颜色

CSS命名颜色是颜色的名称,例如红色、蓝色、黑色或浅海蓝色。

color: blue;

border: 1px solid red;

background: aliceblue;

RGB十六进制颜色

color: #f09;

border: 1px solid #ff0099;

background: #eee;

RGB(红、绿、蓝)颜色

color: rgb(255 0 153);

border: 1px solid rgb(255 0 153);

background: rgb(255 0 153 / 80%);

HSL(色调、饱和度、亮度)颜色

color: hsl(150 30% 60%);

border: 1px solid hsl(150 30% 60%);

background: hsl(150 30% 60% / 0.8);

HWB(色相,白度,黑度)颜色

color: hwb(12 50% 0%);

border: 1px solid hwb(12 50% 0%);

background: hwb(194 0% 0% / 0.5);

LAB(明度、A轴、B轴)颜色

color: lab(50% 40 59.5);

border: 1px solid lab(50% 40 59.5);

background: lab(50% 40 59.5 / 0.5);

轻度、饱和度和色相 (LCH) 色彩

color: lch(52.2% 72.2 50);

border: 1px solid lch(52.2% 72.2 50);

background: lch(52.2% 72.2 50 / 0.5);

OkLab(亮度,A轴,B轴)颜色

color: oklab(59% 0.1 0.1);

border: 1px solid oklab(59% 0.1 0.1);

background: oklab(59% 0.1 0.1 / 0.5);

Oklch(明度,色彩度,色相)颜色

color: oklch(60% 0.15 50);

border: 1px solid oklch(60% 0.15 50);

background: oklch(60% 0.15 50 / 0.5);

CSS颜色-关键字

CSS支持直接将颜色名称传递给属性背景颜色(background-color)和文字颜色(color)。CSS支持140种标准颜色名称

下面是一个示例:

<html>

<head>

<style>

  div {

     background-color: aqua;

     padding: 10px;

  }

</style>

</head>

<body>

  <h3>Color Keyword - example</h3>

  <p>As the keyword passed is aqua, the background will appear as aqua colored..</p>

  <div>

     This div element has a colored background based on the color keyword passed, i.e aqua.

  </div>

</body>

</html>



标签:颜色 

逝者如斯,不舍昼夜作者QQ及微信:49922779 点击这里给我发消息

相关评论
QQ交流群:120100441    QQ客服:49922779 闽ICP备01008686号