CSS权威指南学习笔记--Chapter4 值和单位
2015-12-11 10:31
477 查看
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)。
相关文章推荐
- DTcms 导航选中样式以及简化方法
- CSS-background-position百分比
- C#颜色和名称样式对照表
- 绝对定位+div+css来控制版面是非常好的
- background-position 用法详细介绍
- CSS选择器列表
- 【嘉兴东臣php】HTML+CSS+JS基础学习周总结
- animate.css简介
- css杂类收集2
- css清除浮动clearfix:after的用法详解
- 《CSS3秘籍》第8-11章
- CSS格式化排版
- CSS的继承、层叠和特殊性
- CSS选择器
- CSS样式基本知识
- CSS3动画效果
- 认识CSS样式
- CSS之拖拽库
- 关于css,js,jQurey的外部引用
- CSS- 横向和纵向时间轴