Css 简明教程

CSS - Colors

可以使用预定义的颜色名称、RGB、RGBA、HSL、HSLA 和十六进制值指定 CSS 颜色。CSS 允许我们更改 HTML 文档中任何元素的背景色、文本颜色、边框颜色和光标颜色。

颜色是 Web 设计中非常重要的方面，因为它们不仅增强了视觉吸引力，而且还影响了用户行为。

Table of Contents

Types of Values for CSS Colors

以下是可以设置 css 中颜色属性的所有值。

  1. 颜色名称： CSS 有一组你可以直接使用的预定义颜色名称。例如，红色、蓝色、绿色、灰色、浅蓝色、水绿色。还有很多。

  2. Hexadecimal code: 它以一个哈希 (#) 开头，后面跟着六个十六进制数字，它们表示颜色的 RGB 值。

  3. 简短十六进制代码： 十六进制格式的较短版本，其中每个 RGB 组件由一个数字表示，并且该值被复制。

  4. RGB 函数： rgb() 函数通过输入三个参数（红色、绿色和蓝色值）来定义颜色。参数值可以在 0 到 255 之间变化。

  5. RGBA 函数： rgb() 函数通过输入四个参数（红色、绿色、蓝色和 alpha 值）来定义颜色。Alpha 值使用 0 到 1 之间的小数来描述颜色的强度。

  6. HSL 函数： hsl() 函数接受三个颜色参数：色相（0 到 360 度）、饱和度（%）和亮度（%）

  7. HSLA 函数： hsla() 函数接受四个颜色参数：色相（0 到 360 度）、饱和度（%）、亮度（%）和 alpha（0 到 1 的十进制数）

CSS Background Color

在 CSS 中，我们可以使用 * background-color* 属性为 div、span、body、paragraph 等元素设置背景色。

Example

在这个示例中，我们为 HTML 中的 body、div 和 span 元素设置了不同的背景色。

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{
            background-color: lightgrey;
            padding: 10px;
        }
        div{
            background-color: cyan;
            padding: 10px;
        }
        span{
            background-color: yellow;
            padding: 10px;
        }
        p{
            background-color: white;
            padding: 10px;
        }
    </style>
</head>

<body>
   <div>
      This is a Div
   </div> <br>
   <span>
      This ia a span
   </span>
   <p>
      This is paragraph
   </p>
</body>
</html>

CSS Text Color

在 CSS 中，我们可以使用 * color * 属性为任何类型的元素内的文本设置颜色

Example

在这个例子中，我们在 HTML 中为 p、div、span 元素设置不同的文字颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      div{
         background-color: cyan;
         color: red;
         padding: 10px;
      }
      span{
         background-color: yellow;
         color: green;
         padding: 10px;
      }
      p{
         background-color: black;
         color: white;
         padding: 10px;
      }
    </style>
</head>

<body>
   <div>
      This is a Div
   </div> <br>
   <span>
      This ia a span
   </span>
   <p>
      This is paragraph
   </p>
</body>
</html>

CSS Border Color

在 CSS 中，我们可以使用 * border-color* 属性来设置任何元素边框的颜色。

Example

在这个例子中，我们在 HTML 中为 p、div 和 span 元素设置不同的边框颜色。

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  div {
     border: 2px solid;
     border-color: red;
     padding: 10px;
     margin: 10px 0;
  }
  span {
     border: 2px solid;
     border-color: green;
     padding: 10px;
     margin: 10px 0;
  }
  p {
     border: 2px solid;
     border-color: blue;
     padding: 10px;
     margin: 10px 0;
  }
</style>
</head>

<body>
   <div>
      This is a Div
   </div> <br>
   <span>
      This ia a span
   </span>
   <p>
      This is paragraph
   </p>
</body>
</html>

CSS Caret Color

CSS 中的 caret-color 属性指定了 input 或 textarea 元素中文本光标（插入符）的颜色。可以自定义此属性，以增强用户界面。

Example

在这个例子中，我们为 input 和 textarea 元素设置光标颜色。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      input, textarea {
         width: 100%;
         padding: 5px;
         margin-top: 10px;
         box-sizing: border-box;
         caret-color: darkred;
      }
   </style>
</head>

<body>
   <input type="text"
         placeholder="Click here...">
   <textarea>
      Type Something
   </textarea>
</body>
</html>

CSS Color Keywords

有几个关键字专门用于特定的用途，所有保留的颜色关键字包括： inherit, transparent 和 currentColor 。所有这些关键字的目的和用法如下所述。

CSS Colors Inherit Keyword

CSS 中的 inherit 关键字用于使元素从其父元素继承某个属性的计算值。这对于保持样式的一致性很有用。

Example

在这个例子中，父元素的文字颜色为深红色，而子元素使用 inherit 关键字继承了这个颜色。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
   .parent {
      color: darkred;
      padding: 10px;
      border: 1px solid #ccc;
   }
   .child {
      color: inherit;
      padding: 10px;
      border: 1px solid #ccc;
      background-color: lightgray;
   }
   </style>
</head>

<body>
<div class="parent">
      This is the parent element with color
      set to dark red.
      <div class="child">
         This is the child element inheriting
         the color from the parent.
      </div>
</div>
</body>
</html>

CSS Colors Transparent Keyword

用于表示完全透明颜色的颜色值的透明关键字。（你也可以将不透明度设置为零以实现完全透明的颜色）。查看以下示例

Example

以下代码显示了如何将子元素的颜色设为透明。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .parent {
         background-color: grey;
         padding: 10px;
      }
      .child {
         /* Sets the background to fully transparent */
         background-color: transparent;
         border: solid;
         padding: 10px;
      }
   </style>
</head>

<body>
      <div class="parent">
         Parent Element
         <div class="child">
            Child Element
         </div>
      </div>
</body>
</html>

CSS Colors currentColor Keyword

currentColor 是一个特殊的 CSS 关键字，它表示元素 color 属性的当前值。

Example

在这个代码中，我们为子元素的边框使用了 currentColor 属性，这将告诉浏览器为子元素的边框颜色使用父元素的文本颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      .parent {
      /* Sets the text color to blue */
         color: blue;
         border: 2px solid black;
         padding: 20px;
      }
      .child {
      /* Inherits text color from parent for border */
         border: 2px solid currentColor;
         padding: 10px;
      }
    </style>
</head>

<body>
    <div class="parent">
        Parent Element
        <div class="child">
            Child Element
        </div>
    </div>
</body>
</html>

CSS Building Color Codes

你可以使用我们的色彩代码生成器生成数百万个色彩代码。查看 CSS Color Picker 。

CSS Browser Safe Colors

以下是 216 种应该最安全且计算机独立的颜色列表。这些颜色从十六进制代码 000000 变化到 FFFFFF。这些颜色很安全，因为它们确保所有计算机在运行 256 色调色板时都能正确显示颜色。

000000

000033

000066

000099

0000CC

0000FF

003300

003333

003366

003399

0033CC

0033FF

006600

006633

006666

006699

0066CC

0066FF

009900

009933

009966

009999

0099CC

0099FF

00CC00

00CC33

00CC66

00CC99

00CCCC

00CCFF

00FF00

00FF33

00FF66

00FF99

00FFCC

00FFFF

330000

330033

330066

330099

3300CC

3300FF

333300

333333

333366

333399

3333CC

3333FF

336600

336633

336666

336699

3366CC

3366FF

339900

339933

339966

339999

3399CC

3399FF

33CC00

33CC33

33CC66

33CC99

33CCCC

33CCFF

33FF00

33FF33

33FF66

33FF99

33FFCC

33FFFF

660000

660033

660066

660099

6600CC

6600FF

663300

663333

663366

663399

6633CC

6633FF

666600

666633

666666

666699

6666CC

6666FF

669900

669933

669966

669999

6699CC

6699FF

66CC00

66CC33

66CC66

66CC99

66CCCC

66CCFF

66FF00

66FF33

66FF66

66FF99

66FFCC

66FFFF

990000

990033

990066

990099

9900CC

9900FF

993300

993333

993366

993399

9933CC

9933FF

996600

996633

996666

996699

9966CC

9966FF

999900

999933

999966

999999

9999CC

9999FF

99CC00

99CC33

99CC66

99CC99

99CCCC

99CCFF

99FF00

99FF33

99FF66

99FF99

99FFCC

99FFFF

CC0000

CC0033

CC0066

CC0099

CC00CC

CC00FF

CC3300

CC3333

CC3366

CC3399

CC33CC

CC33FF

CC6600

CC6633

CC6666

CC6699

CC66CC

CC66FF

CC9900

CC9933

CC9966

CC9999

CC99CC

CC99FF

CCCC00

CCCC33

CCCC66

CCCC99

CCCCCC

CCCCFF

CCFF00

CCFF33

CCFF66

CCFF99

CCFFCC

CCFFFF

FF0000

FF0033

FF0066

FF0099

FF00CC

FF00FF

FF3300

FF3333

FF3366

FF3399

FF33CC

FF33FF

FF6600

FF6633

FF6666

FF6699

FF66CC

FF66FF

FF9900

FF9933

FF9966

FF9999

FF99CC

FF99FF

FFCC00

FFCC33

FFCC66

FFCC99

FFCCCC

FFCCFF

FFFF00

FFFF33

FFFF66

FFFF99

FFFFCC

FFFFFF