7.3 行高:line-height属性[3]

7.3.4 浏览器的差别与错误

浏览器在显示的时候往往会有自己的表现形式,例如在Opera内,行高将按照CSS定义的将行距除以2增加到内容区域的上下两边,而IE和Firefox则不是完全平分,如图7-29所示。

图7-29 不同浏览器对行高的显示

…阅读全文…

7.3 行高:line-height属性[2]——行高的计算与继承

7.3.3 行高的计算与继承

以em、ex和百分比为单位的行高,其基数是元素本身的字体尺寸。例如有代码如下:

<p style="font-size:20px;line-height:2em;">字高20px,行高2em。</p>
<p style="font-size:30px;line-height:2em;">字高30px,行高2em。</p>

2个段落的行高都为2em,但是字体大小不同,因此显示如图7-23所示。
…阅读全文…

7.3 行高:line-height属性[1]

提示:行高的概念看上去很简单――文字行的高度,其实,行高所涉及到的基础知识,对于今后理解其它属性也很重要。

大片密密麻麻的文字往往会让人觉得乏味,因此适当地调整行高(line-height)可以减低阅读的困难与枯燥,并且使页面显得美观。行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的,同时也受字号的影响。

…阅读全文…

4.6层叠

在本书的[2.3.1 (X)HTML与浏览器内置样式]一节曾经介绍过,样式表可能有三个不同的来源:制作者、用户和浏览器。这三个来源的样式表可能在范围上有重叠,它们根据层叠规则互相作用。

4.6.1 层叠的顺序

CSS的层叠对每一个样式规则指定一个权重。如果要应用若干个规则,那么权重最大的那个规则具有优先权。层叠规则依据下面几个步骤进行:

…阅读全文…

4.5 继承

在本书的[3.3.2继承与层叠]一节曾经简要介绍过继承:(X)HTML元素可以从其父元素那里继承部分CSS属性,即使当前元素并没有定义该属性。

4.5.1 值的继承

继承也是基于文档树的,文档树中元素的某些属性可以被其子元素继承,每一个CSS属性都定义了它能否被继承。例如有下列代码,其在浏览器内显示如图4-29所示。

…阅读全文…

4.2 CSS选择器(4)——属性选择器(Attribute Selectors)

  1. 4.2 CSS选择器(1)――通配选择器、类型选择器与ID选择器
  2. 4.2 CSS选择器(2)――类选择器与包含选择器
  3. 4.2 CSS选择器(3)――子元素选择器和相邻兄弟选择器
  4. 4.2 CSS选择器(4)——属性选择器(Attribute Selectors)

4.2.8 属性选择器(Attribute Selectors)

顾名思义,属性选择器可以根据某个属性是否存在或属性的值来匹配元素。因此能够实现一些比较复杂的匹配。
属性选择器有四种匹配方式,各有特色。

…阅读全文…

4.2 CSS选择器(3)――子元素选择器和相邻兄弟选择器

  1. 4.2 CSS选择器(1)――通配选择器、类型选择器与ID选择器
  2. 4.2 CSS选择器(2)――类选择器与包含选择器
  3. 4.2 CSS选择器(3)――子元素选择器和相邻兄弟选择器
  4. 4.2 CSS选择器(4)——属性选择器(Attribute Selectors)
提示:截止到本书完稿之日,主流的浏览器都支持以上几种选择器。而下面所列的选择器,则会有部分浏览器不支持。在以下的章节中,除非特别声明,则IE 7.0、Firefox 2.0及Opera 8.5以及更高版本的浏览器中都支持,而IE 6.0及更早的版本则不支持。

4.2.6 子元素选择器(Child Selectors)

子元素选择器的功能和包含选择器很像,其匹配也是基于文档树的关系,其定义如图4-8所示。

…阅读全文…

4.2 CSS选择器(2)――类选择器与包含选择器

  1. 4.2 CSS选择器(1)――通配选择器、类型选择器与ID选择器
  2. 4.2 CSS选择器(2)――类选择器与包含选择器
  3. 4.2 CSS选择器(3)――子元素选择器和相邻兄弟选择器
  4. 4.2 CSS选择器(4)——属性选择器(Attribute Selectors)

4.2.4 类选择器(Class Selectors)

图4-4 类选择器

类选择器的定义如图4-4所示。

类选择器和ID选择器很像,是通过为(X)HTML元素添加class属性而生效的,可应用在<body>内的任何元素上,不过类选择器是可重复的。例如:

…阅读全文…

4.2 CSS选择器(1)――通配选择器、类型选择器与ID选择器

  1. 4.2 CSS选择器(1)――通配选择器、类型选择器与ID选择器
  2. 4.2 CSS选择器(2)――类选择器与包含选择器
  3. 4.2 CSS选择器(3)――子元素选择器和相邻兄弟选择器
  4. 4.2 CSS选择器(4)——属性选择器(Attribute Selectors)

样式规则由“选择器”和“声明”组成,而声明又由“属性”和“值”组成,如图1所示。

图1 样式规则

CSS的语法很简单,而选择器却复杂而强大,要实现对各个元素的精确控制,需要对不同的选择器有深入的理解。

提示:CSS 2.1的选择器类型非常丰富,但是由于一些浏览器只支持其中部分选择器,因此在应用上大打折扣。

…阅读全文…