【基础学习-css】5.css的值和单位

base
,

css值一般有以下：

  • 数值: 长度值，用于指定例如元素宽度、边框（border）宽度或字体大小；以及无单位整数。用于指定例如相对线宽或运行动画的次数。
  • 百分比: 可以用于指定尺寸或长度——例如取决于父容器的长度或高度，或默认的字体大小。
  • 颜色: 用于指定背景颜色，字体颜色等。
  • 函数: 例如，用于指定背景图片或背景图片渐变。

数值

有单位值

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

绝对单位值

  • px: 像素
  • mm: 毫米
  • cm: 厘米
  • in: 英寸
  • pt: 磅/点，1/72英寸
  • pc: 十二点活字，1pc等于12个pt

相对单位值

  • em: 1em与当前元素的字体大小相同（一个大写字母M的宽度，默认大小16px）。需注意的是，em是会继承父元素字体大小。
  • ex: 小写x的高度
  • ch: 数字0的宽度
  • rem:rem（root em）和作用差不多，唯一的区别是，它总是等于默认基础字体大小的尺寸。
  • vw: 视口宽度的1/100
  • vh: 视口高度的1/100

角度单位

  • deg: 度，一个圆周360度
  • grad: 百分度，一个圆周400百分度
  • rad: 弧度，一个圆周是2π弧度，1rad 是 180/π 度。
  • turn: 圈数，一个圆周是1turn。

时间单位

无单位值

  • css中 0 值
    例如：
    1
    margin: 0 auto;
  • 行高
    一点五倍行高
    1
    line-height: 1.5;
  • 动画执行的次数
    1
    animation-iteration-count: 5;

百分比单位

其宽度总是会被调整到其父容器宽度一定百分比。一般用来做栅格布局和响应式等。

1
2
3
font-size: 200%;

width: 75%;

颜色

无论是指定文本颜色、背景颜色，还是其他任何颜色。都可以使用颜色值。

关键字

关键字缺点很明显，色值固定化，非常局限，不利于美工的微调。

例如给文本一个红色字体:

1
2
3
p {
  color: red;
}

十六进制值

十六进制值，每个颜色包括一个哈希/磅符号（#）和其后面紧跟的六个十六进制数，其中每个十六进制数可以是0和F之间的一个值（一共16个），0123456789abcdef。每对十六进制数代表一个通道（红色、绿色或者蓝色）允许我们指定256个可用值。 (16 x 16 = 256.) 

1
2
3
p {
  color: #ffff00;
}

RGB

一个RGB值是一个函数rgb()给定的三个参数，分别表示红色，绿色和蓝色通道的颜色值，这与十六进制值的工作方式大致相同。区别在于，RGB中每个通道不是由两个十六进制数字表示的，而是由0到255之间的十进制数表示的。

1
2
3
p {
  color: rgb(255,255,0);
}

HSL

老旧版本ie不支持。hsl()函数接受三个表示色调、饱和度以及明度。

  • 色调：颜色的底色调。这个值在0到360之间，表示色轮的角度。
  • 饱和度：饱和度是多少？这需要一个从0-100%的值，其中0是没有颜色（它将显示为灰色），100%是全彩色饱和度。
  • 明度：颜色有多亮或明亮？这需要一个从0-100%的值，其中0是无光（它会出现全黑的），100%是充满光的（它会出现全白）。
1
background-color: hsl(0,100%,50%);

RGBA 和 HSLA

RGB和HSL都有相应的模式RGBA和HSLA，不仅允许您设置想要显示的颜色,还有此颜色的透明度。它们和与之相应的函数采用同样的参数,再加上第四个范围在0-1的值——设置透明度,或者说alpha通道。0是完全透明的,1是完全不透明的。

例如：

1
2
3
background-color: rgba(255,0,0,0.5);

background-color: hsla(240,100%,50%,0.5);

不透明度（Opacity）

还有另一种方法来指定透明度，通过CSSopacity属性。与设置某个特定颜色的透明度相比，这会设置所有选定元素以及它们的孩子节点的不透明度。

主要区别是设置opacity会导致子元素也变透明。如果只是为了设置背景色透明，可以使用rgba

1
2
3
4
5
6
7
8
p {
  background-color: rgba(255,0,0,0.5);
}

p {
  background-color: rgb(255,0,0);
  opacity: 0.5;
}

函数

css的函数部分,因为有很多，所以在此列出部分的。

例如：

  • rotate(45deg) 旋转45度
  • translate(50px, 60px) 进行X，Y轴的位移
  • calc(90%-15px); 计算百分比值减去固定像素值的计算。
  • url(‘myimage.png’); 从路径中获取图像