css值一般有以下:
- 数值: 长度值,用于指定例如元素宽度、边框(border)宽度或字体大小;以及无单位整数。用于指定例如相对线宽或运行动画的次数。
- 百分比: 可以用于指定尺寸或长度——例如取决于父容器的长度或高度,或默认的字体大小。
- 颜色: 用于指定背景颜色,字体颜色等。
- 函数: 例如,用于指定背景图片或背景图片渐变。
数值
有单位值
例如:
1 | p { |
绝对单位值
- 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 | font-size: 200%; |
颜色
无论是指定文本颜色、背景颜色,还是其他任何颜色。都可以使用颜色值。
关键字
关键字缺点很明显,色值固定化,非常局限,不利于美工的微调。
例如给文本一个红色字体:
1 | p { |
十六进制值
十六进制值,每个颜色包括一个哈希/磅符号(#)和其后面紧跟的六个十六进制数,其中每个十六进制数可以是0和F之间的一个值(一共16个),0123456789abcdef。每对十六进制数代表一个通道(红色、绿色或者蓝色)允许我们指定256个可用值。 (16 x 16 = 256.)
1 | p { |
RGB
一个RGB值是一个函数rgb()
给定的三个参数,分别表示红色,绿色和蓝色通道的颜色值,这与十六进制值的工作方式大致相同。区别在于,RGB中每个通道不是由两个十六进制数字表示的,而是由0到255之间的十进制数表示的。
1 | p { |
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 | background-color: rgba(255,0,0,0.5); |
不透明度(Opacity)
还有另一种方法来指定透明度,通过CSSopacity
属性。与设置某个特定颜色的透明度相比,这会设置所有选定元素以及它们的孩子节点的不透明度。
主要区别是设置opacity
会导致子元素也变透明。如果只是为了设置背景色透明,可以使用rgba
1 | p { |
函数
css的函数部分,因为有很多,所以在此列出部分的。
例如:
- rotate(45deg) 旋转45度
- translate(50px, 60px) 进行X,Y轴的位移
- calc(90%-15px); 计算百分比值减去固定像素值的计算。
- url(‘myimage.png’); 从路径中获取图像