有关颜色的相关概念
CSS 中的前景色和背景色就是 color 和 backgorund-color 两个属性,其中 color 属性表示前景色,background-color 属性表示背景色。
hsl(H, S, L)
函数实现的,具体含义如下:
p { background-color: hsl(50, 33%, 25%); }
opacity
属性,介于0~1之间,如果大于1则当做1。
rgba(R,G,B,A)
函数,其中 A 为 alpha 表示透明度。
hsl(H,S,L,A)
函数,其中 A 为 alpha 表示透明度。
属于 CSS2 版本的是 rgb()
函数,CSS3 新增加了 rgba()
、hsl()
和 hsla()
函数。这样就形成了四种具体的颜色模式。
CSS 中的值是一种定义允许子值集合的方法。例如我们现在可以使用色彩关键字、RGB 色彩模式或 HSL 色彩模式不同类型来描述颜色值。
在 CSS 中除了颜色值需要不同类型描述之外,比较常见的还有长度值也需要不同类型描述,例如 10px 或 50% 等。
CSS中描述长度时需要加上单位
cm
厘米 1cm = 96px/2.54 mm
毫米 1mm = 1/10th of 1cm Q
四分之一毫米 1Q = 1/40th of 1cm in
英寸 1in = 2.54cm = 96px pc
十二点活字 1pc = 1/16th of 1in pt
点 1pt = 1/72th of 1in px
像素 1px = 1/96th of 1in em
父元素的字体大小 ex
字符“x”的高度 ch
数字“0”的宽度 rem
根元素的字体大小 lh
元素的line-height vw
视窗宽度的1% vh
视窗高度的1% vmin
视窗较小尺寸的1% vmax
视图大尺寸的1% 像素的英文为 Pixel,简写为 px。像素是指在由一个数字序列表示的图像中的一个最小单位。简单来说,如果我们把一张图片放大数倍,会发现这些连续色调其实是由许多色彩相近的小方点所组成,而这些小方点就是构成影像的最小单元就是像素。
**百分比(%)**总是将某个值作为参考,设置为这个参考值的百分比,例如 40%。在 CSS 中一般情况下,百分比(%)多是将当前 HTML 元素的父级元素作为参考值。例如如果一个父级元素拥有两个子级元素,一个子级元素的宽度为 40%,另一个子级元素的宽度为 80%,那么第二个子级元素的宽度就是第一个子级元素的宽度的 2 倍。如下示例代码所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百分比</title>
<style>
.parent {
width: 200px;
height: 100px;
border: 1px solid lightcoral;
}
#child1 {
width: 40%;
height: 50px;
background-color: limegreen;
}
#child2 {
width: 80%;
height: 50px;
background-color: lightslategray;
}
</style>
</head>
<body>
<div class="parent"><!--宽度200px,高度100px-->
<div id="child1"><!--高度20px,宽度80px</div>-->
<div id="child2"><!--高度50px,宽度160px</div>-->
</div>
</body>
</html>
em 与 rem 都是相对单位,目前更多应用于移动端设备,例如手机、平板电脑的显示。具体的含义如下所示:
上述 2 种单位都具有如下 3 种情况: