当前位置: 老葡京网站娱乐 > web开发 > Dojo > 正文

使用Dojo的Ajax应用开发进阶教程,第3部分: 深入理解CSS

时间:2011-01-21 IBM 成富

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

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

CSS 的重要概念

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

选择器和声明

选择器(selector)定义了一种模式匹配规则,用来选择当前文档中的元素。符合规则的元素将被应用上与该选择器对应的样式声明。CSS 提供了一些基本的选择器?;镜难≡衿饕部梢越凶楹?,形成复杂的表达式?;狙≡衿鞯木咛逅得魅缦拢?/p>

通用选择器(*):匹配文档中的任意元素。

元素类型选择器:匹配文档中的某类元素。如 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 规则的层叠顺序。