CSS 颜色学习笔记

在CSS中使用颜色是非常常见的，通过设置元素的背景颜色、文字颜色等，可以实现丰富的视觉效果。本文将介绍CSS颜色的基本知识和常用的颜色表达方式，并提供一些使用实例。

颜色的表示方式

CSS中有四种表示颜色的方式：关键词、十六进制值、RGB值和HSL值。

CSS提供了一些关键词来表示常见的颜色，例如红色可以用关键词red表示，蓝色可以用blue表示。下面列出了一些常用的关键词：

每种颜色都可以用一个六位的十六进制数来表示，其中前两位表示红色的值，中间两位表示绿色的值，后两位表示蓝色的值。例如红色可以表示为#FF0000，蓝色可以表示为#0000FF。下面是一些常用颜色的十六进制值：

RGB表示红、绿、蓝三种颜色的值，每种颜色的值范围是0-255。例如红色可以表示为rgb(255, 0, 0)，蓝色可以表示为rgb(0, 0, 255)。下面是一些常用颜色的RGB值：

rgb(0, 0, 0): 黑色
rgb(255, 255, 255): 白色
rgb(255, 0, 0): 红色
rgb(0, 255, 0): 绿色
rgb(0, 0, 255): 蓝色
rgb(255, 255, 0): 黄色
rgb(128, 128, 128): 灰色

HSL表示颜色的色相、饱和度和明度。色相的取值范围是0-360，饱和度和明度的取值范围是0%-100%。例如红色可以表示为hsl(0, 100%, 50%)，蓝色可以表示为hsl(240, 100%, 50%)。下面是一些常用颜色的HSL值：

hsl(0, 0%, 0%): 黑色
hsl(0, 0%, 100%): 白色
hsl(0, 100%, 50%): 红色
hsl(120, 100%, 50%): 绿色
hsl(240, 100%, 50%): 蓝色
hsl(60, 100%, 50%): 黄色
hsl(0, 0%, 50%): 灰色

可以使用CSS的color属性来改变文字的颜色，例如：

cssCopy Code
h1 {
  color: red;
}

p {
  color: #0000FF;
}

span {
  color: rgb(255, 255, 0);
}

上面的代码将h1元素的文字颜色设置为红色，p元素的文字颜色设置为蓝色，span元素的文字颜色设置为黄色。

可以使用CSS的background-color属性来改变元素的背景颜色，例如：

cssCopy Code
body {
  background-color: #FFFFFF;
}

div {
  background-color: rgb(0, 255, 0);
}

上面的代码将整个页面的背景颜色设置为白色，div元素的背景颜色设置为绿色。