前端之CSS的值与单位

CSS中使用的每个属性都允许拥有一个或一组值

CSS的值

颜色

CSS中的值是一种定义允许子值集合的方法。eg:
color：

1. 关键字（blue）
2. 十六进制值
3. rgb()函数 rgba()函数——添加了透明度
4. hsl()函数——色调，饱和度，亮度 hsla()函数——添加了透明度

数值

数据类型

长度

绝对长度单位

相对长度单位

百分比

相对于父元素（100%）

有些情况不接受百分比。

数字

不带单位。
opacity的值是0到1；

<style>
body {
    width: 100vw;
    height: 100vh;
    background-image: url('../images/big-bg.jpg');
    background-size: 100%;
    background-attachment: fixed;
    background-color: black;
    background-position: center;
}

.box {
    border: 3px solid rebeccapurple;
    font-size: 250%;
    opacity: 0.4;
}
</style>

    <div class="box">
        opacity: 0.4
    </div>

图片

图片可以是图像文件，或是渐变色：
渐变背景用CSS Gradient生成，然后复制代码。

位置

position表示二维坐标：

1. 关键字： top, left, bottom, right, center
2. 两个值，分别设置水平、竖直；若是只指定其中一个，另一个默认为center

字符串

用引号括起来

<style>
.box::after {
  content: "This is a string. I know because it is quoted in the CSS."
}
</style>

函数

颜色：rgb()、hsl()
图片路径：url()
计算：calc()

下一节：前端之图像