一文搞懂CSS中长度和颜色

lwq1228 发表于 2021/07/09 10:37:50 2021/07/09
【摘要】 一文搞懂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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。