CSS 声明( Declarations )
CSS 声明1可以为空,或者由 CSS 特性( property ),后加一个冒号 ":",跟着是一个特性的值构成。中间可以有空格将它们隔开。
可用以下方式表达:
property : value;
其中 property 指代的是所有 CSS 特性,value 指的是这个特性的值。
例如:
p{
height:100px;
}
其中,height 是特性,而 "100px" 是值。CSS 声明的基础是 CSS 特性。
CSS 特性( properties )
CSS 是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 其中的样式信息,其实就是用户对于如何设置元素渲染方式的设置信息。
自提倡 Web 数据与分离理念以来,CSS 作为不可或缺的一部分参与了这项伟大运动。
以 TABLE 为例,设置它的高度,可以表示为
<table height="100">
<tr>
<td>hello</td>
</tr>
</table>
这种表示方式的坏处是不利于 TABLE 元素的统一管理,比如,页面上有 1 万个 TABLE 元素, 我已经用了 1 万次粘贴(当然,你可以借助工具),将所有的高度置成了 100,如果要改成150,那么,又是 1 万次。 利用 CSS 完全可以摆脱这种窘境,修改 TABLE 的高度,只需这样:
<style type="text/css">
table {
height: 100px;
}
</style>
<table>
<tr>
<td>hello</td>
</tr>
</table>
其中的 height 就是 CSS 特性的一种,每个 CSS 特性都有一个名字,可以赋予它 CSS 值,以达到不同的渲染效果。你可以让所有的 TABLE 变得更高,设置它的 height 特性的值为 "150px" 就可以了。
这里有一个W3C 官方的 CSS 特性全表:W3C - Full property table, 可以查阅 CSS 特性,关于它的值的表示看不明白?不要紧,下面的内容将会就此做详细的讲解。
注:
- 关于 声明和特性 的更多信息,请参考 W3C CSS2.1 - 4.1.8 Declarations and properties
CSS 特性的值1
整数和数字
有些值类型可能会包含整数和实数。实数和整数都只能用十进制的数来表示。
整数值表示为 <integer>,是由数字 0~9,和前面的正负号组成。例如:0,-2,-7,7。
实数值表示为 <number>,是由 0~9,小数点以及前面的正负号组成。例如:-1.5,3.1415926,实数包括整数。
注意,有时候,某些特性会给定实数和整数的确切范围,比如,经常用到的非负整数。
使用此类值的 CSS 特性有:'line-height'、'pitch-range'、'richness'、'z-index' 和 'widows' 等。
比如其中的 'z-index' 表示为:
'z-index' : auto | <integer> | inherit
长度值
长度值适用于水平或垂直方向的尺寸。
长度值表示为 <length>。长度值的格式是: <number> + 单位( e.g., px, em, etc.),注意,一定要有单位,除非这个值是0。 如果长度值是0,单位可有可无。
可用此类值的 CSS 特性很多,例如,'margin'、'padding'、'height' 和 'width'等。
有些特性支持负的长度值,比如 ‘margin’。但是如果给一个不支持负长度值的特性设置一个负的值,那么这个声明会被忽略。
长度的单位有两种:相对长度和绝对长度。下面对这两类单位详细介绍。
1). 相对长度
相对长度会随着它参考值的变化而变化,不是固定的值。
- em : 与 'font-size' 的大小有关,与作用到元素上的 'font-size' 的值大小相等;
- ex : 一个小写字母 x 的高度2;
- px : 像素数( pixels )。
例如:
h1 { margin: 0.5 em } /* em */
h1 { margin: 1 ex } /* ex */
p { font-size: 12 px } /* px */
2). 绝对长度
- in : 英寸 — 等于2.54厘米
- cm : 厘米
- mm : 毫米
- pt : 点 — CSS 2.1里 1pt 等于 1/72 英寸
- pc : 皮卡 — 1pc 等于 12pt,也就是 1/6 英寸
例如:
h1 { margin: 0.5in } /* inches */
h2 { line-height: 3cm } /* centimeters */
h3 { word-spacing: 4mm } /* millimeters */
h4 { font-size: 12pt } /* points */
h4 { font-size: 1pc } /* picas */
百分比值
百分比值表示为 <percentage>。它的格式是:<number> + %。
常见可用百分比为值的 CSS 特性如:'height'、'width' 等。
百分比值总是跟其他的值有关,比如长度值。
URL 和 URI
Web 上可用的每种资源 - HTML 文档、图像、视频片段、程序等 - 由一个通用资源标志符(Uniform Resource Identifier, 简称 "URI" )进行定位 3。
URL 是Uniform Resource Location的缩写,译为 “统一资源定位符” 。它是 URI 命名机制的一个子集。
URI 表示为 <uri>。注意,定义 URI 使用 “url()” 。
比如,'background-image' 特性的描述:
'background-image' : <uri> | none | inherit
而在设置该特性的时候:
background-image:url(...)
计数器
计数器使用大小写敏感的标识符来表示。参考特性: 'counter-increment' 和 'counter-reset'。
计数器的标记是 'counter(<identifier>)' 或者 'counter(<identifier>, <'list-style-type'>)',其中 'list-style-type' 默认为 “decimal”,即小数点。
注意,IE 浏览器从 IE8 才开始支持计数器。
颜色
颜色值用 <color> 来表示。可以是一个 RGB 的颜色数值,也可以是关键词。
颜色的关键词列表是:aqua、 black、 blue、 fuchsia、 gray、 green、 lime、 maroon、 navy、 olive、 orange、 purple、 red、 silver、 teal、 white 和 yellow。
来自 W3C 官方的截图:
除此之外,用户还可以使用用户环境中某些对象的颜色 4。
当然,这些关键词,浏览器可以扩展,比如:‘gold’、‘darkgray’ 等。
RGB 颜色被用于数值表示颜色。例如,用不同的表示方法表示红色:
em { color : #f00 } /* #rgb */
em { color : #ff0000 } /* #rrggbb */
em { color : rgb(255,0,0) }
em { color : rgb(100%, 0%, 0%) }
十六进制的 RGB 颜色值必须含有 “#” 前缀,后跟三个或六个十六进制字符。 其中,三位的和六位之间的转换是:'#rgb' 等于 '#rrggbb',所以,'#FFFFFF' 可以简写成 '#FFF'。
函数记号的 RGB 颜色值,rgb(……),括号里面是三个逗号分隔的 0~255 的值,或者是三个百分比值。百分比值 p 和整数值 v 的关系是 v=255×p。
超过有效范围的值,应该被处理为可用范围内的值,如:
em { color : rgb(255, 0, 0) } /* 范围 0 - 255 */
em { color : rgb(300, 0, 0) } /* 修剪为 rgb(255, 0, 0) */
em { color : rgb(255, -10, 0) } /* 修剪为 rgb(255, 0, 0) */
em { color : rgb(110%, 0%, 0%) } /* 修剪为 rgb(100%, 0%, 0%) */
字符串
字符串可以被写在单引号或双引号中。
字符串表示为:<string>。
一个字符串不能直接包含一个新行。想要达到此目的,可以使用转义字符 ISO-10646 (U+000A),它表示换行符。
注:
- 参见 W3C 原文:W3C CSS2.1 - 4.3 Values
- x-height 为英文字体设计中的一个术词,它的标准高是一个小写字母 x 的高度单位;
- 详细信息,见 rfc3986; 也可以通过 IBM 了解的更清楚: 分清 URI、URL 和 URN
- 更多信息,请参照: system colors
不存在的特性和不合法的值1
对于不存在的特性和不合法的值,用户端都应该以忽略此声明的方式予以处理。比如:
p{
W3Help : "good";
height : "hello";
}
此样式中 W3Help 字符虽然存在,但是却不存在 W3Help 这个 CSS 特性,也不存在 "hello" 的 height 特性的值。所以,这两条样式声明都应该被忽略。
不合法的值可能引起的浏览器兼容性问题,其中有一种情况是人为的错误,被不同的浏览器以不同的方式处理,还有一种情况是,某些浏览器支持其他浏览器所不支持的值,比如:
cursor : 'hand';
恐怕,只有 IE 以及他的追随者还有使用 IE 渲染引擎的国内特色"山寨"浏览器,支持 'cursor' 特性的 "hand" 值。
注:
- 关于 CSS 解析错误处理的规则,详见: W3C CSS2.1 - 4.2 Rules for handling parsing errors
引申阅读
相关兼容性问题,可以参考:
- W3Help - RY8002: 各浏览器对 CSS 代码及 CSS 相关 DOM 操作中长度 "<length>" 类型的值缺失单位的容错程度存在差异
- W3Help - RY8003: 各浏览器对 CSS 错误解析规则的差异及 CSS hack
- W3Help - RY8005: 各浏览器对于计算后宽度和高度为含有小数的长度值时,其最终值会不一致
- W3Help - RU3001: 只有 IE 和 Opera 支持 'cursor:hand'
CSS 声明( Declarations )的更多相关文章
- 深入常用CSS声明(一) —— Background
一直对一些自己常用的css声明掌握得不是很全,只知道常用的一些属性和值,但是对于其他的用法确实一知半解,这篇文章旨在扫盲,先不说有多深的理解,至少做到能够看到这些声明的属性和值的时候做到不陌生. 这里 ...
- Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...
- CSS权威指南之css声明,伪类,文本处理--(简要笔记一)
1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...
- CSS声明顺序
CSS对元素样式进行声明,虽然一条规则中的声明可以按照任何顺序写出来,但是还是应该有个优先级的顺序. 如下的声明顺序摘抄自<CSS设计指南>,优先级顺序如下: display及相关声明 p ...
- 四.CSS声明
概述 一条CSS规则包括选择符和声明两个部分,声明又包括属性和值,属性指出要影响样式的那个方面,而值用于把属性设定成什么 每个HTML元素有很多属性,可以用CSS来设定,但值却只有少数的几种 CSS属 ...
- css声明的优先级
选择器的特殊性 选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如0,0,0,0,0 一个选择器的具体特殊性如下确定 1.对于选择器给定的ID属性值,加0,1,0,0 2.对于选择器中给 ...
- css声明应用优先级
1.特殊性 选择器的特殊值由四部分组成:0,0,0,0 第一位预留给内联样式 <h1 style="color:red;"></h1> 第二位属于ID选 ...
- CSS声明各个浏览器私有属性的命名前缀
-moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome.safari私有属性-o代表opera私有属性
- CSS 层叠及样式表来源
Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...
随机推荐
- HDU 5835 Danganronpa(弹丸论破)
Danganronpa(弹丸论破) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Other ...
- Redis 在新浪微博中的应用
Redis 在新浪微博中的应用 Redis简介 1. 支持5种数据结构 支持strings, hashes, lists, sets, sorted setsstring是很好的存储方式,用来做计数存 ...
- 函数对象适配器之ptr_fun的使用示例
//============================================================================ // Name : CopyInts4.c ...
- 简单几步配置gitlab
简单几步配置gitlab 之前配置gitlab需要很多步骤,要装apache2.ruby.tomcat.mysql等一片东西.有没有更简单的方式呢?现在可以借助bitnami,简化了很多. 可以参考v ...
- SQL Povit
),) ,,@logistics_code='All',@fee_type='All' ),) ,@strDateList='',@from_date=cast((ltrim(@yr)+'-'+ltr ...
- C运行时的数据结构
本文描述一下:C运行时的数据结构,相关的段,压栈等 unix默认的编译器会将编译生成的文件默认命名为a.out 目标文件和可执行文件可以有几种不同的格式,所有这些不同格式具有一个共同的概念,那就是段. ...
- iOS - UIGestureRecognizer
前言 NS_CLASS_AVAILABLE_IOS(3_2) @interface UIGestureRecognizer : NSObject @available(iOS 3.2, *) publ ...
- Dijkstra(迪杰斯特拉)源最短路径 小白说明
源最短路径 小白说明 Dijkstra算法,书上其实说的很简洁,仔细看,仔细思考是会理解的.但要先理解几条引论和推理. 而自己思考的思路在不需要任何推理只从贪心思路出发,和Dijkstra有所不同,但 ...
- 关于inline-block 元素之间为何会产生间隔
关于inline-block 元素之间为何会产生间隔 现象: <body> <input type="text"> <input type=" ...
- poj2986A Triangle and a Circle&&poj3675Telescope(三角形剖分)
链接 2986是3675的简化版,只有一个三角形. 这题主要在于求剖分后三角形与圆的相交面积,需要分情况讨论. 具体可以看此博客 http://hi.baidu.com/billdu/item/703 ...