CSS2 学习 - 值与单位

2014年10月05日 陈鑫杰

前言

这是影响颜色、距离、大小的一种元素,也是 CSS 工作的基础。

数字

分为整数和小数。
可以是正负值,但具体以属性的范围为准。

百分数

总是基于另一个值,可能是同一元素的另一个属性值、从父元素继承的一个值、祖先元素的一个元素。
具体计算后值的范围,受属性、浏览器等因素限制。

##颜色

命名颜色

只推荐使用 red、black、gray 等简单的颜色名。
受 CSS 规范合法命名的颜色不多影响,在使用时推荐尽量使用下面两种形式。

函数式 GRB

通过组合不同的红色、绿色和蓝色分量来创造颜色。
数值可以是百分数(0%~100%)或整数(0~255):rgb(100%, 100%, 100%)、rgb(255, 255, 255)。

十六进制 GRB

例如:#FFFFFF(等价于 grb(255, 255, 255, 255))
简写记法:#000(等价于 #000000),#F00(等价于 #FF0000)

WEB 安全颜色

在 256 色计算机系统上总能避免抖动的颜色。
三个分量都能被 0% 或 20% 整除
三个分量都能被 0 或 51 整除
三个分量都能被 0 或 33 整除,即使用 00,33,66,99,CC 的三个元组。(十六进制记法)

长度单位

绝对长度

英寸(in)、厘米(cm)、毫米(mm)、点(pt)、派卡(pc)
这些单位会受显示器尺寸和分辨率影响。
ppi 之类的,总之就是在不同尺寸(台式机显示器和笔记本显示器),不同分辨率(不同显卡)上显示的大小不一致。

相对长度

em(em-height)、ex(x-height)、px(像素)
em 的大小会随着父元素字体大小而改变。
ex 是所用字体中小写 x 的高度。(并不是一个好的实现方式,因为不同字体间小写 x 的高度并不是一致的。)
px 像素,受显示器本身像素影响。例如:在高分辨率和低分辨率的显示器上,每英寸内的像素框是不确定的。直接造成高分辨率显示器上字体很小,低分辨率显示器上字体很大的问题。
取舍:在字体大小方面,相对长度会更好些,特别是 em,它会随字体大小进行缩放。其次是 px。
在其他属性方面,px 会更好些。例如:固定的边距、间距等设置一个固定值,要比随着文本大小而变化来的更好些。

URL

绝对 URL,定义了 Web 空间的一个绝对位置。
相对 URL,定义了 Web 空间的一个相对该 URL 所在文档的位置。

(转载本站文章请注明作者和出处 FoamValue – www.foamvalue.com ——=== 访问 404页面 寻找遗失儿童。 ===——