css-颜色与单位
文章目录
- 0x01 像素
- 0x02 百分比
- 0x03 em和rem
- 0x04 RGB和RGBA
-
- 4.1 RGB
- 4.2 RGBA
- 4.3 十六进制的RGB值
- 0x05 HSL和HSLA
-
- 5.1 HSL
- 5.2 HSLA
本文内容
单位：像素、百分比、em、rem
颜色：rgb，rgba，hsl，hsla
0x01 像素
像素是图像中不可分割的单位或者是元素，屏幕(显示器)也是由像素构成的，不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，可以用ppi来衡量，当ppi达到一定数值时，人眼就分辨不出颗粒感了。
例如“640x480显示器”，它表示横向640像素和纵向480像素（就像VGA显示器），因此其总数为640 × 480 = 307,200像素。
在css中，像素作为长度单位,用px表示。
对于
<body>
<div class="box1">
<div class="box2">div>
div>
<div class="box3">div>
body>
设置样式：
.box1{
width:300px;
height: 100px;
background-color: orange;
}
效果：
0x02 百分比
也可以将属性值设置为相对于其父元素属性的百分比，设置百分比可以使子元素跟随父元素的改变而改变。
.box2{
width: 50%;
height: 50%;
background-color:aqua;
}
这里的50%是相对box1而言的。
效果：
0x03 em和rem
em是相对于元素的字体大小来计算的，1em = 1font-size。em会根据字体大小的改变而改变。
rem是相对于根元素的字体大小来计算。
.box3{
font-size: 20px;
width: 10em;
height: 10em;
background-color: greenyellow;
}
效果：
html{
font-size: 30px;
}
box3{
font-size: 20px;
width: 10rem;
height: 10rem;
background-color: greenyellow;
}
将根元素设置位30px，可见box3随之变动。rem在移动端开发用的比较多。
效果：
0x04 RGB和RGBA
4.1 RGB
RGB是颜色单位，在CSS中可以直接使用颜色名来设置各种颜色，比如：red、orange、yellow、blue、green … …但是在CSS中直接使用颜色名是非常的不方便。于是就可以用RGB值来表示颜色
对于RGB值，RGB通过三种颜色的不同浓度来调配出不同的颜色，R red，G green ，B blue
每一种颜色的范围在0 - 255 (0% - 100%)之间
CSS中的语法：RGB/rgb(红色,绿色,蓝色)
.box1{
background-color: red;
background-color: rgb(255, 0, 0);
}
效果：
4.2 RGBA
在RGB的基础上加了一个透明度效果，A(Alpha)表示不透明度。
RGBA需要四个值，前三个值和RGB一样，第四个值表示不透明度，用0~1表示。
例如：0表示完全透明，1表示完全不透明，0.5表示半透明。
background-color: rgba(106,153,85,.5);
效果：
4.3 十六进制的RGB值
语法：#红色绿色蓝色。每个颜色的取值范围：00-ff
如果颜色两位两位重复可以进行简写 ，例如：#aabbcc --> #abc
background-color: #ff0000;
效果：
0x05 HSL和HSLA
5.1 HSL
HSL即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）
色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。范围：(0 - 360)
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
L 亮度，颜色的亮度 0% - 100%
eg.
background-color: hsl(98, 48%, 40%);
效果：
5.2 HSLA
和RGB类似，A(Alpha)也表示不透明度。
background-color: hsla(98, 48%, 40%, 0.658);
效果：
本文到此结束！