[CSS]-3-颜色与度量单位
引言
这篇文章介绍CSS中常用的几种颜色配置方法以及常见的几种页面度量单位。
文章目录
0×1.颜色选择器
颜色选择器能够帮助我们实现不同区块的颜色配置，让页面更加美观，在CSS中，有下面四种可以使用的颜色选择器，任意一种选择器都可以满足颜色配置的需求，使用哪种取决于个人编码习惯和实际需求。
下面对每种颜色选择器给出一个使用实例，颜色代码可以上网搜索"颜色代码表"来获取。
a.单词颜色选择器
支持大部分英文中与颜色相关的单词，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>单词颜色选择器实例</title>
<style type="text/css">
<!--将id为p1的标签的背景颜色配置成pink，文字颜色配置成green-->
#p1{
color: green;
background-color: pink;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com</p>
</body>
</html>
显示效果：
www.qingsword.com
b.十六进制颜色选择器
使用带井号前缀的6位十六进制表示颜色，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>十六进制颜色选择器实例</title>
<style type="text/css">
<!--使用蓝紫罗兰色作为文字颜色，使用淡紫色作为区块背景色-->
#p1{
color: #8A2BE2;
background-color: #E6E6FA;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com</p>
</body>
</html>
显示效果：
www.qingsword.com
Ps：在十六进制代码中，两位一组，分成三组，如果每两位数字或字母相同，都可以简写成一位的形式，例如#FF0000，两位一组#FF|00|00，可以简写成#F00。
c.rgb十进制颜色选择器
相对于十六进制的形式，rgb十进制采用3位十进制数来表示颜色，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>rgb颜色选择器实例</title>
<style type="text/css">
<!--设置文字颜色为红色，背景色为淡蓝色，rgb颜色被包含在一对中括号中用3个十进制数表示-->
#p1{
color: rgb(255, 0, 0);
background-color: rgb(187, 255, 204);
}
<!--rgba能够配置颜色的透明度，除了前面三个十进制数外，最后一个十进制数的范围是0~1，0表示完全透明，本例将文字的颜色设置成半透明-->
#p2{
color: rgba(255, 0, 0, 0.5);
background-color: rgb(187, 255, 204);
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com</p>
<p id="p2">晴刃</p>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
d.HSL模型颜色选择器
HSL色彩模式是工业界的一种颜色标准，是通过对色相(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，CSS中并不是很常用，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>hsl颜色选择器实例</title>
<style type="text/css">
#p1{
<!--hsl括号中第一个数字的范围是0~255表示相对色相，后面两个用百分数表示，分别表示饱和度和亮度-->
color: hsl(5,80%,30%);
background-color: rgb(187, 255, 204);
}
#p2{
<!--在hsla中，前三个数字同hsl，最后一个参数与rgba的最后一个参数相同，表示颜色透明度，范围0~1,0表示完全透明-->
color: hsla(5,80%,30%,0.3);
background-color: rgb(187, 255, 204);
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com</p>
<p id="p2">晴刃</p>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
0×2.度量单位
在现实生活中我们要表示一个物体的宽度高度可以使用诸如"米，分米"这样的度量单位，而在网页设计中，一般使用"像素，百分比"作为度量单位。
a.px
px像素（Pixel），相对长度单位，px是相对于显示器屏幕分辨率而言的，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>px实例</title>
<style type="text/css">
<!--p1的文字大小5px-->
#p1{
font-size: 5px;
}
<!--p2的文字大小15px-->
#p2{
font-size: 15px;
}
<!--p3的文字大小25px-->
#p3{
font-size: 25px;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com</p>
<p id="p2">www.qingsword.com</p>
<p id="p3">www.qingsword.com</p>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
www.qingsword.com
b.em
em是相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于其父系标签css配置的字体尺寸，如果其父系没有配置字体尺寸，则相对于浏览器默认的字体尺寸，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>em实例</title>
<style type="text/css">
<!--配置整个文档body中文字的大小为10像素-->
body{
font-size: 10px;
}
<!--因为body配置了默认的字体大小，p1使用em将相对于body中设置的大小，本例p1的文字大小是10*1.5=15px-->
#p1{
font-size: 1.5em;
}
<!--将p2设置成15px，看看与p1的文字大小是不是相同？-->
#p2{
font-size: 15px;
}
<!--如果区块中配置了font-size，将覆盖默认的文字大小（10px），区块中所有的em将相对于这个大小（25px），line-height可以设置行高，本例行高为2*25=50px-->
#p3{
font-size: 25px;
line-height: 2em;
background-color: pink;
color:green;
}
<!--将div的宽高设置成相对于其父系默认font-size值的5倍，即body的font-size的5倍50px，这个div的高度和上面p3的行高一致-->
div{
width: 5em;
height: 5em;
background-color: pink;
color:green;
}
</style>
</head>
<body>
<p id="p1">www.qingsword.com</p>
<p id="p2">www.qingsword.com</p>
<p id="p3">www.qingsword.com</p>
<div>div</div>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
www.qingsword.com
c.百分比
百分比与em不同，em配置的宽度或高度取决于其父系标签的font-size值，而百分比取决于其父系的宽度与高度值，而不是font-size值，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>百分比实例</title>
<style type="text/css">
<!--父div的宽高为100px-->
#d1{
width: 100px;
height: 100px;
background-color: pink;
}
<!--子div的宽高设置成其父的一半-->
#d2{
width: 50%;
height: 50%;
background-color: red;
}
<!--p1的父级是相对于浏览器宽度的50%，我们可以尝试着调整浏览器的宽度，p1会自适应浏览器的宽度调整，并且永远只占浏览器宽度的一半-->
#p1{
background-color: green;
width: 50%;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
<p id="p1">www.qingsword.com</p>
</body>
</html>
显示效果：
www.qingsword.com