快捷搜索:

使用 Dojo 的 Ajax 应用开发进阶教程,第 2 部分:

提到 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 规则的层叠顺序。

CSS 规则的层叠顺序

正如 CSS 的全称“层叠样子容貌外形式表(Cascading Style Sheets)”所表示的含义一样,CSS 中的样式声明规则是有层叠顺序的。可以在不合的地方把相同的规则利用在相同的元素上面。比如对某个 P 元素,某条 CSS 规则将其文本颜色设为血色,而别的一个规则把其文本颜色设为蓝色。显然这两条规则是相互冲突的。在详细显示的时刻,浏览器会根据层叠顺序来判断利用哪条规则,从而确定该 P 元素的文本颜色。层叠顺序的基滥觞基本则很简单,那便是越详细的规则,优先级越高。浏览器根据优先级上下来确定利用哪条规则。详细的来说,一条规则的优先级与其应用的选择器和所在的位置相关。下面分手进行阐明。

根据所应用选择器的优先级顺序

在判断一条规则的优先级时,会首先判断其所用的选择器的优先级顺序。按照优先级从高到低的顺序排列如下:

应用了 !important声明的规则。

内嵌在 HTML 元素的 style属性里面的声明。

应用了 ID 选择器的规则。

应用了类选择器、属性选择器、伪元素和伪类选择器的规则。

应用了元素选择器的规则。

只包孕一个通用选择器的规则。

当浏览器必要判断利用相互冲突的规则中的哪条规则的时刻,首先会根据上面的顺序来判断优先级。优先级高的规则就会被利用。假如优先级相同,则必要进一步判断所应用的选择器的个数。选择器数目较多的规则优先级较高。比如下面两条规则:#myDiv .header .main {}和 #myDiv .header span {},前者的优先级更高。由于前者有一个 ID 选择器,两个类选择器;而后者也有一个 ID 选择器,然则只有一个类选择器。上述的优先级判断算法类似于一样平常的数字大年夜小对照,首先对照最高位,假如相同的话,再对照次高位,以此类推。

假如按照上面的优先级顺序来判断,规则的优先级相同的话(即所用的选择器种别相同,同类选择器的数量也相同),则必要进一步根据规则所在的位置来判断。

根据规则所在位置的优先级顺序

对付规则所在的不合位置,可以按照优先级从高到低排列如下:

在 HTML 文档的 head元素中的 style元素中定义的规则。

经由过程 style元素中的 @import语句引入的样式表中定义的规则。

经由过程 link元素引入的样式表中定义的规则。

在 link元素引入的样式表中,再经由过程 @import语句引入的样式表中定义的规则。

终极用户供给的样式表中定义的规则。

浏览器默认供给的规则。

假如规则所在的位置相同的话,呈现在样式表后面的规则的优先级更高。

经由过程这样的两套规则机制,就包管了浏览器可以办理相互冲突的规则的优先级问题。下面经由过程一个示例来详细阐明层叠顺序的机制。

层叠顺序示例

演示层叠顺序的示例所应用的 HTML 和 CSS 如 代码清单 1所示。

清单 1. 层叠顺序示例

示例文本 1

示例文本 2

示例文本 3

示例文本 4

如 代码清单 1所示,HTML 文档中定义了 4 个 P 元素以及一些 CSS 规则用来定义其文本颜色。对付第一个 P 元向来说,可以利用在之上的有两条规则:一条是经由过程 ID 选择器定义的,别的一条是经由过程类选择器定义的。因为 ID 选择器优先级高,第一条规则被利用,以是文本颜色是绿色;第二个 P 元素只能利用一个类选择器,以是文本颜色是血色;第二个 P 元素有两个规则可以被利用。规则 p.p_blue比 .p_blue多一个元素选择器,前者被利用,以是文本颜色是血色;着末一个 P 元素所能利用的规则中,p_blue2应用了 !important声明,优先级最高,是以文本颜色是蓝色。

对付上面提到的两套规则机制,一个紧张的例外便是用户样式表中的包孕的带 !important的声明具有最高的优先级,跨越网站本身供给的样式表中带 !important声明的规则。这样设计的意图是容许用户应用自己供给的样式来覆盖网站供给的样式,以前进网站的可造访性。

认识了 CSS 规则的层叠顺序之后,就可以办理常见的 CSS 样式被覆写的问题。很多时刻,尤其在团队开拓中,一个 CSS 文件可能被多个开拓职员改动。常常会碰到的一个问题是,自己的 CSS 样式没有起感化。经由过程 Firebug 可以发明,缘故原由是自己的 CSS 样式被其他人写的样式给覆写了。根滥觞基本因是自己样式声明中应用的选择器的优先级较低。办理这个问题的法子便是查看与你的样式发生冲突的 CSS 规则所应用的选择器,并响应提升自己的选择器的优先级,防止自己的样式被覆写。

在先容完 CSS 规则的层叠顺序之后,下面先容 CSS 结构中紧张的观点:盒模型。

盒模型

盒模型(box model)是 CSS 中进行页面结构的紧张观点。页面上文档树中的每个元素在显示的时刻,都邑对应天生一到多个矩形盒子。结构是根据这些盒子来进行的。盒子之间可以相互嵌套。对付一个元向来说,其孕育发生的盒子如 图 1所示。

图 1. CSS 的盒模型示意图

从 图 1中可以看到,一个盒子从里到外有四个层次:最里面的是内容区域,包孕元素本身的内容;紧接着是添补区域;然后是边框;着末是空缺区域。内容区域的宽度和高度切实着实定对照繁杂,必要综合斟酌样式 width和 height的值,以及该盒子中包孕的其它盒子的类型。添补区域、边框和空缺区域的上、下、左、右四个方位的宽度都可以经由过程样式 padding、border和 margin来分手指定。经由过程样式 background指定的背景颜色或图片可以利用在内容区域、添补区域和边框上。空缺区域老是透明的,不会利用背景样式。

在先容完盒模型之后,下面先容若何对页面上的元素进行结构和定位。

结构和定位

浏览器在衬着 HTML 页面的时刻,所进行的操作便是把上面提到的文档树上的元素所对应的盒子,按照必然的规则进行排列。下面将具体先容结构的规则以及元素是若何在页面中定位的。

盒子类型

不合的盒子类型在结构时的行径不一样。盒子的类型是由天生它的元素的类型来抉择的。经由过程样式 display可以指定元素的类型。该样式可以应用的值很多,主要的有 block、inline、inline-block和 none等。样式 display的值为 block的元素称为块级元素(block-level element),它们所天生的盒子是块盒子;display的值为 inline或 inline-block的元素称为行内元素(inline-level element),它们所天生的是行内盒子。块盒子与行内盒子的详细阐明如下:

您可能还会对下面的文章感兴趣: