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

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都有相应的模式RGBAHSLA,不仅允许您设置想要显示的颜色,还有此颜色的透明度。它们和与之相应的函数采用同样的参数,再加上第四个范围在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’); 从路径中获取图像