一文搞懂CSS中长度和颜色
【摘要】 一文搞懂CSS中长度和颜色
CSS中的常用单位
CSS的属性值有很多种数据格式，其中最复杂的是表示长度和颜色的方式。
1、长度
1.1、px
px就是指像素点的数量，100px就是100个像素点的长度。
1.1.1、样例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.magnifier {
position: relative;
color: dodgerblue;
}
.lens {
position: absolute;
width: 100px;
height: 100px;
border: 10px solid;
border-radius: 50%;
}
.handle {
position: absolute;
width: 20px;
height: 100px;
border-radius: 0 0 10px 10px;
background-color: currentColor;
left: 100px;
top: 100px;
transform: rotate(-45deg);
transform-origin: top;
}
</style>
</head>
<body>
<figure class="magnifier">
<div class="lens"></div>
<div class="handle"></div>
</figure>
</body>
</html>
1.1.2、效果图
1.1.3、说明
现在我们要调整这个放大镜的尺寸到原尺寸的1.5倍，那么我们就要把CSS中的100px改为150px，20px改为30px，一共有8个属性用到了px，那就要同时改8处。再假如要把放大镜调整到原大的2.15倍，还要再改这8处，而且计算也变复杂了，可见px的缺点就是因为它是绝对尺寸，调整起来很麻烦。
1.2、em
和绝对尺寸相对的一个概念是相对尺寸，也就是它先确定一个基准，然后其他尺寸都以这个基准来计算大小，当要修改时，只要改一下基准值，其他尺寸就都按比例自动改变了。em是指相对于font-size的大小，例如一个元素有属性font-size: 10px，那么1em就等于10px，1.5em就等于15px，5em就等于50px。如果一个容器内所有的子元素都使用em单位，那么，当要调整容器的大小时，只要调整font-size的值即可。
1.2.1、样例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.magnifier {
position: relative;
color: dodgerblue;
font-size: 10px;
}
.lens {
position: absolute;
width: 10em;
height: 10em;
border: 1em solid;
border-radius: 50%;
}
.handle {
position: absolute;
width: 2em;
height: 10em;
border-radius: 0 0 1em 1em;
background-color: currentColor;
left: 10em;
top: 10em;
transform: rotate(-45deg);
transform-origin: top;
}
</style>
</head>
<body>
<figure class="magnifier">
<div class="lens"></div>
<div class="handle"></div>
</figure>
</body>
</html>
1.2.2、效果图
1.2.3、说明
我们在.magnifier选择器中先定义了font-size: 10px;，然后把其后所有尺寸都改为em单位，例如100px改为10em，20px改为2em。
如果现在我们要调整这个放大镜的尺寸到原尺寸的1.5倍，只要把.magnifier选择器中的font-size属性值从10px改为15px即可，其他em单位的数值都不用改动。
浏览器默认的font-size是16px，它对应的1.1em=17.6px、1.2em=19.2px、1.3em=20.8px结果都不是整数，不方便计算。推荐将font-size设置为10px，这样1.1em=11px、1.2em=12px、1.3em=13px，结果都是整数，换算起来很方便。
2、颜色
CSS提供了4种表示颜色的方式，分别是颜色名称、HSL表示法、RGB表示法和增加了透明效果的HSLA/RGBA表示法。
2.1、颜色名称
颜色名称是指red、blue、green这些英文单词，CSS颜色名称共计有100多种，详见如下地址：
https://www.runoob.com/cssref/css-colornames.html
2.1.1、样例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.magnifier {
position: relative;
color: dodgerblue;
font-size: 10px;
}
.div-background {
background-color: yellow;
width: 250px;
height: 150px;
}
</style>
</head>
<body>
<figure class="magnifier">
<div class="div-background"></div>
</figure>
</body>
</html>
2.1.2、效果图
2.2、HSL
HSL是用色相（hue）、饱和度（saturation）和亮度（lightness）调配出的颜色。
2.2.1、样例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.magnifier {
position: relative;
color: dodgerblue;
font-size: 10px;
}
.div-background {
background-color: hsl(30, 100%, 50%);
width: 250px;
height: 150px;
}
</style>
</head>
<body>
<figure class="magnifier">
<div class="div-background"></div>
</figure>
</body>
</html>
2.2.2、效果图
2.2.3、说明
其中色相也就是我们日常说的“颜色”，它的值是从0°到360°，也就是一个圆周角的角度，按彩虹色的顺序从0°开始排列，0°是红色，30°是橙色，60°是黄色，120°是绿色，180°是青色，240°是蓝色，300°是紫色，360°又回到红色。
饱和度是指纯色与灰色混合之后，纯色的占比，取值是0%到100%，100%表示未混入任何灰色的纯色，0%表示全灰。
亮度的取值范围也是从0%到100%，表示从暗到明的程度，0%表示全黑，100%表示全白，50%表示纯色。
因为纯色的饱和度是100%，亮度是50%，所以只要调整色相的度数，就可以得到不同的纯色，例如红色是hsl(0, 100%, 50%)，绿色是hsl(120, 100%, 50%)，蓝色是hsl(240, 100%, 50%)。
2.3、RGB
RGB颜色模式是用红色、绿色、蓝色3色调配出的颜色，RGB色值是以#号开头的6个十六进制数，每种颜色用2位十六进制表示，取值范围是从#00到#ff，例如红色（red）是#ff0000，绿色（green）是#00ff00，蓝色（blue）是#0000ff，黄色是#ffff00（红色和绿色混合）。
2.3.1、样例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.seasons {
width: 20em;
height: 20em;
font-size: 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0.2em;
}
.seasons div {
border: 0.1em solid gray;
text-align: center;
line-height: 6em;
font-size: 1.5em;
color: black;
}
.seasons div:nth-child(1) {
border-radius: 100% 0 0 0;
background-color: springgreen;
}
.seasons div:nth-child(2) {
border-radius: 0 100% 0 0;
background-color: #ff4500;
}
.seasons div:nth-child(3) {
order: 4;
border-radius: 0 0 100% 0;
background-color: rgb(255, 215, 0);
}
.seasons div:nth-child(4) {
border-radius: 0 0 0 100%;
background-color: hsl(195, 100%, 50%);
}
</style>
</head>
<body>
<figure class="seasons">
<div>spring</div>
<div>summer</div>
<div>fall</div>
<div>winter</div>
</figure>
</body>
</html>
2.3.2、效果图
2.3.3、说明
颜色名称、HSL模式的颜色和RGB模式的颜色可以混合使用，如以上样例。
各子元素用不同的背景色，其中春季用色彩单词springgreen（嫩绿），夏季用十六进制色值#ff4500（橘红），秋季用rgb色值rgb(255, 215, 0)（金黄），冬季用HSL色值hsl(195, 100%, 50%)（宝石蓝）。
2.4、HSLA/RGBA
HSLA/RGBA比HSL/RGB多出的最后一个A，学名叫“alpha”通道，实践中我们把它当作一个不透明度值对待，取值范围是从0到1，0表示完全透明，那么这个颜色就像不存在一样，1表示完全不透明，就像没有设置过这个值一样，0.5当然就表示半透明了。
2.4.1、样例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hashtag {
width: 10em;
height: 10em;
position: relative;
}
.hashtag div {
position: absolute;
}
.hashtag div:nth-child(odd) {
width: 20%;
height: 100%;
}
.hashtag div:nth-child(even) {
width: 100%;
height: 20%;
}
.hashtag div:nth-child(1) {
left: 10%;
background-color: hsla(197, 71%, 73%, 0.8);
}
.hashtag div:nth-child(2) {
top: 10%;
background-color: hsla(300, 47%, 75%, 0.8);
}
.hashtag div:nth-child(3) {
right: 10%;
background-color: hsla(0, 79%, 72%, 0.8);
}
.hashtag div:nth-child(4) {
bottom: 10%;
background-color: hsla(28, 100%, 86%, 0.8);
}
</style>
</head>
<body>
<figure class="hashtag">
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
</body>
</html>
2.4.2、效果图
2.4、transparent
transparent关键字表示透明色，就像透明玻璃一样，用户看不到这个颜色。单独使用color: transparent的意义不大，因为有不止一种方法可以实现相同的效果，例如通过在RGBA/HSLA模式下把A值设置为0，或者使用visibility: hidden属性。
transparent主要是用在一系列颜色中，例如通过把元素的4个边框中的3个边框设置为透明色，再加上其他样式，就可以创作出三角形；再如元素的背景是多种颜色生成的渐变色时，在其中有规律地加入透明色，则可以创作出条纹背景。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）