使用Dojo的Ajax应用开发进阶

 

提到CSS，很多Web开发人员都不陌生。它是在 Web 应用中控制展现的标准技术。CSS 与 HTML 和 JavaScript 一起，构成了 Ajax 应用的基础。对于 CSS，已经有很多图书和文章进行过详细的介绍。本文不介绍 CSS 语法的细节，而是从一些实际开发中会遇到的问题出发，讨论一些与具体实践相关的话题。

下面首先介绍 CSS 中的一些重要概念，可以帮助读者加深对 CSS 的理解。本文中以 CSS 2.1 规范来进行说明。

CSS 的重要概念

CSS 的语法非常简单，包含的元素也很少，主要有“@ 规则”和样式规则集。“@ 规则”是以 @开头的规则声明，常用的有 @import、@media和 @charset等。样式规则集是一系列样式声明规则的集合。每个样式规则集由选择器和声明两部分组成。

选择器和声明

选择器（selector）定义了一种模式匹配规则，用来选择当前文档中的元素。符合规则的元素将被应用上与该选择器对应的样式声明。CSS 提供了一些基本的选择器。基本的选择器也可以进行组合，形成复杂的表达式。基本选择器的具体说明如下：

通用选择器（*）：匹配文档中的任意元素。

元素类型选择器：匹配文档中的某类元素。如 span匹配文档中所有的 span元素。

后代选择器：匹配作为特定元素的后代出现的元素。比如 div span匹配包含在 div元素中的 span元素。

直接后代选择器：匹配作为特定元素的直接后代出现的元素。比如 div > span匹配父节点是 div元素的 span元素。

相邻兄弟元素选择器：匹配与特定元素有相同父节点，并且直接出现在该元素后面的元素。比如 div + span匹配与 div元素父节点相同，并且直接出现在 div元素之后的 span元素。

属性选择器：匹配属性值满足某些条件的元素。如 div[title]匹配有 title属性的 div元素；div[title=Header]匹配 title属性的值为 Header的 div元素。

类选择器：匹配包含某个 CSS 类的元素。如 .header匹配包含了 CSS 类 header的元素。类选择器实际上是属性选择器的一种，是根据属性 class的值来进行选择的。

ID 选择器：匹配指定 ID 属性值的元素。如 #myDiv匹配 ID 为 myDiv的元素。

伪元素和伪类选择器：匹配一些无法根据其在文档树中的位置来定位的元素。常用的伪元素选择器有：:first-line匹配段落中的第一行；:first-letter匹配块中第一行的第一个字母。常用的伪类选择器有：:link和 :visited分别匹配没有访问过的和已经访问过的链接；:hover匹配当前鼠标悬浮其上的元素；:active匹配当前被用户激活的元素；:focus匹配当前有输入焦点的元素。

声明是 CSS 中样式属性的名值对，其形式是“属性名称 : 属性值”。如声明“font-color : red”把样式 font-color的值设为 red。

属性继承

对于 CSS 中的某些样式属性来说，如果元素没有显式的指定一个值，该属性就会继承该元素的父元素的这个属性的值。常见的会被继承的属性有：visibility、color、font和 text-decoration等。需要注意的是，发生属性继承的时候，子元素继承的是父元素属性的计算值，而不是指定值。比较典型的例子是通过 em或是百分数指定的字体大小。比如父元素的字体大小的声明是“font-size : 1.2em”，而实际计算出来的字体大小是 12px，则子元素继承的是 12px，而不是 1.2em。通过设置属性的值为 inherit可以让该属性强制继承其父元素对应属性的值。

在介绍完 CSS 的重要概念之后，下面介绍 CSS 规则的层叠顺序。