在我们的显示屏中，一个像素点由三原色构成，分别为：红、绿、蓝。然而在计算机中使用0-255来表示某个原色的不同程度，在二进制中，可以使用八位二进制（00000000-11111111）进行表示。在十六进制中用（ 00-ff ）表示。那么红色（0-255），绿色（0-255），蓝色（0-255）三原色组成的颜色就有256*256*256种，组成了屏幕中五彩缤纷的画面。
由此就可以衍生出颜色的表示方式：
加入透明度：
使用色相表示（hsl）：
这是一种将所有颜色对应成一个圆，一个角度代表一种颜色，所以取值范围为0-360，但是它还包括了饱和度和亮度。
h:0-360,色相
s:0-100%，饱和度
l:0-100%，亮度
例如：hsl(0, 50%, 50%)
在制作页面的时候我们经常需要设置字体颜色或者背景颜色，丰富多彩的颜色能够让页面呈现更好的效果，在网站中用到颜色的地方也很多，文字颜色，背景颜色，边框颜色等都需要用到。
在css中表示颜色的方法主要有以下几种。
1. 关键字颜色
属性值是颜色的名称。
例如：
div{
color:red
}
2. 十六进制
十六进制表示颜色的原理是利用光的三原色：红色，绿色，蓝色。利用这三种颜色就能组合出很多颜色，比如红色光和绿色光就可以组合成黄色，三种颜色的光可以组成白色，没有光的时候就是黑色。
下图为光色三原色：
请点击输入图片描述
十六进制颜色是由#加六位的十六进制表示的，范围是00到ff，前两位表示红色，中间两位表示绿色，最后两位表示蓝色。
例如：
#ff0000表示红色，这个色值包含最大数量的红色，但是没有绿色和蓝色，所以是红色。
#00ff00表示绿色，这个色值包含最大数量的绿色，但是没有红色和蓝色，所以是绿色。
#0000ff表示蓝色，这个色值包含最大数量的蓝色，但是没有红色和蓝色，所以是蓝色。
#000000表示黑色，这个色值没有颜色，表示没有光，所以是黑色。
#ffffff表示白色，这个色值包含最大数量的红色绿色和蓝色，组合到一起是白色。
十六进制的00到ff，是十进制的0到255，因此每种颜色都有256种取值，能够组合出来的颜色就是：256*256*256=16777216，这么多种色值足够可以让我们的页面变的丰富多彩。
这里的三原色为什么是红色、绿色、蓝色，而和我们学美术的时候的红色、黄色、蓝色不一样呢?因为学美术的时候用的是颜料的三原色，颜料的三原色利用的是光的反射原理。
3. RGB
RGB表示颜色的方式原理和十六进制是一样的，是利用光的三原色：红色，绿色，蓝色。
R表示red，红色。
G表示green，绿色。
B表示blue，蓝色。
取值从0到255，也可以是百分数。
rgb(red, green, blue)
例如：
rgb(255,0,0)或者rgb(100%,0,0)表示红色，
rgb(0,255,0)或者rgb(0,100%,0)表示绿色，
rgb(0,0,255)或者rgb(0,0,100%)表示蓝色，
rgb(0,0,0)或者rgb(0,,0,0)表示黑色，
rgb(255,255,255)或者rgb(100%100%,100%)表示白色，
4. HSL
HSL表示颜色的方法是通过色相，饱和度和亮度表示的。其中H是Hue色相，S是Saturation饱和度，L是Lightness亮度。
下图为HSL颜色模式：
请点击输入图片描述
H：色相。就是颜色名称。取值为是0到360。
S：饱和度。是色彩的纯度，取值是0%到100%。
L：亮度。取值为是0%到100%。
hsl(hue, saturation, lightness)
例如：
div{
width: 100px
height: 100px
background: hsl(100, 80%, 50%)
}
5. RGBA
RGBA颜色表示形式只是比RGB多了一个A。A表示Alpha透明度。取值是0到1.
rgba(red, green, blue, alpha)
例如：
div{
width: 100px
height: 100px
background: rgba(255, 0, 0, 0.5)
}
效果图：
6. HSLA
HSLA颜色表示形式只是比HSL多了一个A。A表示Alpha透明度。取值是0到1.
hsla(hue, saturation, lightness, alpha)
例如：
div{
width: 100px
height: 100px
background:hsla(100, 80%, 50%,0.8)
}
步骤如下：
1、首先打开电脑上自带的记事本程序，然后输入html网页基本结构语句。<html><body></body></html>
2、由于css样式必须在标签<head></head>之间，因此我们点击<html>后面，输入<head></head>标签。
3、在head标签之间输入样式标签<style></style>,然后定义一些属性，例如
<style type="text/css">
body {background-color: yellow} 定义网页背景色为黄色；
h1 {background-color: #00ff00} 定义h1标签背景色为#00ff00；
h2 {background-color: transparent} 定义h2标签背景色为透明；
p {background-color: rgb(250,0,255)} 定义p标签背景色为rgb值；
p.no2 {background-color: graypadding: 20px} 这个定义class属性为no2的p标签背景色为灰色，并且边距为20px；
</style>
4、然后点击body标签后面输入正文标签内容，例如
<h1>这是KING</h1>
<h2>这是KING</h2>
<p>这是KING</p>
<p class="no2">这个KING设置20内边距。</p>
5、点击记事本菜单中的文件，选择另存为，把内容保存为html网页格式。双击打开预览效果。6、我们可以发现代码中两个同样的<p>标签显示的css样式却不同，区别就在于样式中定义的p.no2,这就是正文代码中class="no2"的优势所在，可以定义个性风格。
![这句C语言语句怎么解释strl = strlen(xx[i])；](/aiimages/%E8%BF%99%E5%8F%A5C%E8%AF%AD%E8%A8%80%E8%AF%AD%E5%8F%A5%E6%80%8E%E4%B9%88%E8%A7%A3%E9%87%8Astrl+%3D+strlen%28xx%5Bi%5D%29%EF%BC%9B.png)
