CSS权威指南学习笔记--Chapter4 值和单位

Chapter4 值和单位

一、 数字

两类数字：整数和实数（小数）。都区分正负数，但属性可能会限制所允许的数字范围。

二、 百分数

百分数值总是相对于另一个值。

接受百分数值的属性会对所允许的百分数值定义某些限制，还会定义百分数计算到什么程度。

三、 颜色

1.命名颜色：

CSS2.1中，CSS规范了定义17种颜色：

大多数浏览器能识别多达140个颜色名。

CSS3颜色规范定义中更扩展了颜色名。

2.用RGB指定颜色：

通过指定不同组合的红色，绿色和蓝色分量来创造颜色；

四种方式来控制颜色：

函数式RGB：这种类型颜色值的一般语法是rgb(color)，其中color用一个百分数或是整数三元组表示。百分数值在0-100%；整数范围在0-255；

• 百分数记法：百分数激发中也可以使用分数。

rgb(100%,100%,100%)/*白色*/
rgb(0%,0%,0%)/*黑色*/

• 整数三元组记法：整数三元组中只能使用整数。

rgb(255,255,255)/*白色*/
rgb(0,0,0)/*黑色*/

灰度值中所有rgb的三个值都是一样的。

h1 {color:rgb(75%,0%,0%);}

Notice：无论那种记法，如果值落在可取范围之外，均会裁剪到最接近的范围边界。两种记法的转换：知道各RGB分量的百分数，只需将它们乘以255。

十六进制RGB：

• 十六进制RGB：将三个介于00-FF的十六进制数连起来，就可以设置一种颜色。这种记法的一般语法是#RRGGBB。
• 简写十六进制：如果组成十六进制的三组数各自都是成对的，则可以采用简写的形式。这种记法的一般语法是#RGB。浏览器会取每一位，并将其复制成两位。

h1 {color:#000;} /*等同于h1 {color:#000000;}黑色*/
h1 {color:#666;} /*等同于h1 {color:#666666;}*/
h1 {color:#FFF;} /*等同于h1 {color:# FFFFFF;}白色*/

Web安全颜色：

在256色计算机系统上总能避免抖动的颜色。

若使用RGB百分数，则三个分量必须是0%或是20%的倍数。

若使用RGB整数三元组，则三个分量必须是0或者51的倍数。

若采用十六进制表示法，则值00、33、66、99、CC和FF的三元组是安全的。

四、 长度单位

所有长度单位都可以表示为整数或负数，其后跟一个标签。另外还可以使用实数。若长度为0，其后不需要跟单位。

1.绝对长度单位：

五种：英寸(in)，厘米(cm)，毫米(mm)，点(pt)，派卡(pc)

2.相对长度单位：

• em：一个em定位为一种给定字体的font-size值。这个值可能随元素的不同而改变。在设置字体大小时，em的值会相对于父元素的字体大小改变。
• ex：ex是指所用字体中小写x的高度。大多数字体的小写字母都是相应于大写字母高度的一半。1ex=0.5em
• px：像素。一般用来度量图像大小，因为图像的高度和宽度本身就是像素数。

五、 URL

1.在Web页面中：

//绝对url：不论这个url放到哪里都能正常工作
url(protocol://server/pathname)

//相对url：指定一个相对于该url所在文档的位置。当图像与包含该url的页面在同一个服务器上能正常工作
url(pathname)

2.在CSS中：

相对url要相对于样式表本身，而不是相对于该样式表所在的html文件。

<link rel=”stylesheet” type=”text/css” href=”http://www.waffles.org/styles/basic.css”>
@import url(special/toppings.css)/*查找相对于basic.css，等同于下面的import*/
@import url(http://www.waffles.org/styles/special/toppings.css)

Notice：url和开始括号之间不能有空格。

3.关键字：
none：不等同于0

如果一个属性接受关键字，那么其关键字只针对于该属性的作用域。

inherit：所有的属性共有。作用是使属性值与其父元素相同。

#toolbar {background:blue;color:white;}
<div id=”toolbar”>
<a href=”one.html”>One</a>|<a href=”two.html”>Two</a>|
<a href=”three.html”>Three</a>
</div>

div设置了蓝背景，白字；但a元素会根据浏览器首选项设置应用样式。

#toolbar a{color:inherit;}

六、 CSS2单位

声音样式表相关。

• 角度值：定义给定的声音从哪个位置发出。三种角度：度(deg)，梯度(grad)，弧度(rad)；最终都会将这些值解释在0-360度范围内。
• 时间值：指定语音元素之间的延迟。可以表示为毫秒(ms)，秒(s)；值不能为负。
• 频率值：为语音浏览器可以产生的声音声明一个给定的频率。赫兹(Hz)，兆赫(MHz)；不能为负数。
• 统一资源标识符URI(Uniform Resource Identifier)：也就是统一资源定位符URL(Uniform Resource Locator)。