color颜色
我们浏览每一个网页都是内容丰富，颜色多彩的。这些色彩虽然是显卡驱动显示器展示，但是也是通过代码层实现控制的。颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。这些颜色可应用于背景，字体的填充。
十六进制和RGB
CSS中定义颜色使用十六进制（hex）表示法为红，绿，蓝的颜色值结合。可以是最低值是0（十六进制00）到最高值是255（十六进制FF）3个双位数字的十六进制值写法，以＃符号开始。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background-color: lightcyan;}
.container{width: 100px;height: 100px;text-align: center;line-height: 100px;margin: 20px 20px;}
</style>
</head>
<body>
<!--CSS颜色的三种常用表示方法-->
<div class="container" style="background-color: red;">Hello World</div><!--直接使用名称表示颜色-->
<div class="container" style="background-color: #00ff00;">Hello World</div><!--使用十六进制表示红绿蓝三原色的饱和程度-->
<div class="container" style="background-color: rgb(0,0,255);">Hello World</div><!--使用rgb表示三原色饱和程度-->
</body>
</html>
CSS常用十六进制表示颜色，
#ff0000用#开头 六位数从左往右依次表示红绿蓝颜色的饱和程度 不区分大小写，当#ffffff完全饱和时显示白色，#000000时显示黑色。rgb(255,255,255)和十六进制一样，十进制255等于十六进制 ff。
透明度
设置颜色的同时我们还可以对颜色设置透明度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background-color: lightcyan;}
.container{width: 100px;height: 100px;text-align: center;line-height: 100px;margin: 20px 20px;}
</style>
</head>
<body>
<!--rgba()表示透明度-->
<div class="container" style="background-color: rgba(255, 0, 0, 0.75);">Hello World</div><!--第四个参数表示透明度-->
<div class="container" style="background-color: rgba(0, 255, 0, 0.25)">Hello World</div><!--值位于0到1之间的数，越小越透明-->
</body>
</html>
rgba(255,0,0,0.5)第四个参数表示透明度，值越小越透明。此外还可以使用opacity:0.5;属性设置透明度。
颜色名称
所有浏览器都支持颜色名称，147颜色名称定义在HTML和CSS的颜色规格(17个标准色加上130多个其他)。17种标准颜色：浅绿色（lime），黑色（black），蓝色（blue），紫红色（fuchsia），灰色（gray），灰色，绿色（green），湖绿色（aqua），褐色（maroon），深蓝（navy），橄榄（olive），紫（purple），红（red），银（silver），深青（teal），白色（while）和黄色（yellow），透明transparent也是一个合法值。
网友评论