精通CSS:高级WB标准解决方案 基础知识 块引用元素。但是,如果这个引用只是另一个段落元素标签,那么就很难寻找了 除了人容易理解之外,程序和其他设备也可以理解有意义的标记(也称为语义标记)。例如,搜索引擎 可以识别出标题行(因为它被包围在hl标签中)并给它分配更高的重要度。屏幕阅读器的用户可以依靠标 题作为辅助的页面导航措施 对于本书来说更重要的是,有意义的标记提供了将元素调整为你所需样式的简单方法。它在文档中添加 了结构并且创建一个底层框架。可以直接设置元素的样式,而不需要添加其他标识符,因此避免了不必要的 代码膨胀 (X)HTML包含丰富的有意义元素,比如: hl、h3等 l、o1和dl strong和 blockquote和cite abbr、 acronym和code fieldset、 legend和 label. caption、 thead、 tbody和 tfoot 因此,当存在意义合适的元素时,就应该使用 1.ID和类名 有意义的元素提供了很好的基础,但是可用元素的列表并不全面。(XHM是作为简单的文档标记语言 创建的,而不是界面语言。因此,没有用于内容区域或导航栏等的专用元素。虽然可以使用ML创建自己的 元素,但是由于太复杂,这在目前还不太现实。 次优的解决方案是使用现有的元素,并且通过添加ID或类名给它们赋予额外的意义。这会在文档中添 加额外的结构,并给样式提供有用的“钩子”。因此,可以建立一个简单的链接列表,并且给它分配 ID mainNav, 从而创建出定制的导航元素: <ul id= mainnav "> <li>a href=#>Home/a></li <li>a href="#">About</a></li 〈1i) a href="#” Contact/a)</1i </u1> 使用ID名标识页面上的单独元素(比如站点导航),ID必须是惟一的。ID可以用来标识持久的结构性 元素,例如主导航或内容区域。ID还可以用来标识一次性元素,例如某个链接或表单元素。 在整个站点上,ID名应该应用于概念上相似的元素以避免混淆。从技术上说,如果联系人表单和联系 人详细信息在不同的页面上,那么可以给它们分配同样的ID名 contact。但是,如果以后需要根据每个元 素的上下文环境设置它们的样式,那么就会遇到问题。所以,使用不同的ID名(比如 contact Form和 contactDetails)就会简单得多 个ID名只能应用于页面上的一个元素,而同一个类名可以应用于页面上任意数量的元素。类非常适 合标识内容的类型或相似的条目。例如,假设有一个新闻页面,其中包含每条新闻的日期。不必给每个日期 分配不同的ID,而是可以给所有日期分配类名date 在分配ID和类名时,一定要尽可能保持名称有意义并与表现方式无关。例如,可以给导航元素分配ID ighthandNav,因为你希望它出现在右边。但是,如果以后将它的位置改到左边,那么CSS和(XHML就会 不同步。所以,将这个元素命名为 subway或 secondaryNav更合适。这种名称解释了这个元素是什么,而没 有涉及如何表现它。对于类名,也是这样的。即使你希望所有错误消息以红色显示,也不要使用类名red, 而应该选择更有意义的名称,比如 error或 feedback(见图1-3)。 本书来源于互联网的一些图片,在转搀的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请买原版书。 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd 块引用元素。但是，如果这个引用只是另一个段落元素标签，那么就很难寻找了。 除了人容易理解之外，程序和其他设备也可以理解有意义的标记（也称为语义标记）。例如，搜索引擎 可以识别出标题行（因为它被包围在 h1 标签中）并给它分配更高的重要度。屏幕阅读器的用户可以依靠标 题作为辅助的页面导航措施。 对于本书来说更重要的是，有意义的标记提供了将元素调整为你所需样式的简单方法。它在文档中添加 了结构并且创建一个底层框架。可以直接设置元素的样式，而不需要添加其他标识符，因此避免了不必要的 代码膨胀。 (X)HTML 包含丰富的有意义元素，比如： h1、h3 等。 ul、ol 和 dl。 strong 和 em。 blockquote 和 cite。 abbr、acronym 和 code。 fieldset、legend 和 label。 caption、thead、tbody 和 tfoot。 因此，当存在意义合适的元素时，就应该使用。 1. ID 和类名 有意义的元素提供了很好的基础，但是可用元素的列表并不全面。(X)HTML 是作为简单的文档标记语言 创建的，而不是界面语言。因此，没有用于内容区域或导航栏等的专用元素。虽然可以使用 XML 创建自己的 元素，但是由于太复杂，这在目前还不太现实。 次优的解决方案是使用现有的元素，并且通过添加 ID 或类名给它们赋予额外的意义。这会在文档中添 加额外的结构，并给样式提供有用的“钩子”。因此，可以建立一个简单的链接列表，并且给它分配 ID mainNav， 从而创建出定制的导航元素： <ul id="mainNav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Centact</a></li> </ul> 使用 ID 名标识页面上的单独元素（比如站点导航），ID 必须是惟一的。ID 可以用来标识持久的结构性 元素，例如主导航或内容区域。ID 还可以用来标识一次性元素，例如某个链接或表单元素。 在整个站点上，ID 名应该应用于概念上相似的元素以避免混淆。从技术上说，如果联系人表单和联系 人详细信息在不同的页面上，那么可以给它们分配同样的 ID 名 contact。但是，如果以后需要根据每个元 素的上下文环境设置它们的样式，那么就会遇到问题。所以，使用不同的 ID 名（比如 contactForm 和 contactDetails）就会简单得多。 一个 ID 名只能应用于页面上的一个元素，而同一个类名可以应用于页面上任意数量的元素。类非常适 合标识内容的类型或相似的条目。例如，假设有一个新闻页面，其中包含每条新闻的日期。不必给每个日期 分配不同的 ID，而是可以给所有日期分配类名 date。 在分配 ID 和类名时，一定要尽可能保持名称有意义并与表现方式无关。例如，可以给导航元素分配 ID rightHandNav，因为你希望它出现在右边。但是，如果以后将它的位置改到左边，那么 CSS 和(X)HTML 就会 不同步。所以，将这个元素命名为 subNav 或 secondaryNav 更合适。这种名称解释了这个元素是什么，而没 有涉及如何表现它。对于类名，也是这样的。即使你希望所有错误消息以红色显示，也不要使用类名 red， 而应该选择更有意义的名称，比如 error 或 feedback（见图 1-3）。 11
精通CSS:高级WB标准解决方案 基础知识 的名称 好的名称 error leftcolumn secondary Content main Nav firstPara intro 图1-3好的ID名和差的ID名 在写类名和ID名时,需要注意区分大小写。CSS大体上是不区分大小写的语言。但是,在标记中实体 (比如类名和ID名)是否区分大小写取决于标记语言是否区分大小写。如果使用ⅫHTM,那么类名和ID名 是区分大小写的;如果使用常规的HM,那么是不区分大小写的。处理这个问题最好的方式是保持一致的 命名约定。所以,如果在(X)HML类名中使用驼峰式大小写( camel case),那么在CSS中也采用这种形式。 由于类具有灵活性,它们是非常强大的。同时,它们也可能被过度使用或滥用。CSS新手常常在几乎所有东 西上添加类,从而试图更精细地控制它们的样式。早期的 WYSIWYG编辑器也倾向于在应用样式的每个地方都 添加类。许多开发人员在使用编辑器生成的代码学习CSS时继承了这个坏习惯。这种现象称为“多类症 ( classitis),在某种程度上,这和使用基于表格的布局一样糟糕,因为它在文档中添加了无意义的代码。 <h3 class="newsHead">Zeldman. com turns 10 </h3> <p class="newsText">Another milestone for jeffry as zeldman. com turns 10 yoda </p> <p class="newsText"><a href="news. php" class="newsLink >More</aX/p> 在前面的示例中,每个元素都通过使用一个与新闻相关的类名标识为新闻的一部分。这使新闻标题和正 文可以采用与页面其他部分不同的样式。但是,不需要用这么多类来区分各个元素。可以将新闻条目放在 个部分中,并且加上类名news,从而标识整个新闻条目。然后,可以使用层叠识别新闻标题或文本。 <div class= news h3>Zeldman. com turns 10 </h Kp> Another milestone for jeffry as zeldman. com turns 10 yoda </p> Kp>a href="news. php">More</a></p> </div> 以这种方式删除不必要的类有助于简化代码,使页面更简洁。稍后,将讨论CSS选择器和为样式寻找目 标。无论如何,这种对类名的过度依赖是不必要的。我常常只在不适合使用ID的情况下对元素应用类,而 且尽可能少使用类。我创建的大多数文档常常只需要添加几个类。如果你发现自己添加了许多类,那么这很 可能意味着你的(X)HTM文档的结构有问题。 2.div和span 有助于在文档中添加结构的一个元素是div元素。许多人误以为div元素没有语义意义。但是,div实 际上代表部分( division),它提供了将文档分割为有意义的区域的方法。所以,通过将主要内容区域包围 在div中并分配 ID mainContent,就可以在文档中添加结构和意义。 为了将不必要的标记减到最少,应该只在没有现有元素能够实现区域分割的情况下使用div元素。例如, 如果使用主导航列表,那么不需要将它包围在div中。 <diy id= mainNay "> <ul <li>a href="#">Home</a></li> <li>a href=#">About< /a>/li> <li>a href=#">Centact/a></li> </ul> 本书来源于互联网的一些图片,在转搀的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请买原版书。 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 在写类名和 ID 名时，需要注意区分大小写。CSS 大体上是不区分大小写的语言。但是，在标记中实体 （比如类名和 ID 名）是否区分大小写取决于标记语言是否区分大小写。如果使用 XHTML，那么类名和 ID 名 是区分大小写的；如果使用常规的 HTML，那么是不区分大小写的。处理这个问题最好的方式是保持一致的 命名约定。所以，如果在(X)HTML 类名中使用驼峰式大小写（camel case），那么在 CSS 中也采用这种形式。 由于类具有灵活性，它们是非常强大的。同时，它们也可能被过度使用或滥用。CSS 新手常常在几乎所有东 西上添加类，从而试图更精细地控制它们的样式。早期的 WYSIWYG 编辑器也倾向于在应用样式的每个地方都 添加类。许多开发人员在使用编辑器生成的代码学习 CSS 时继承了这个坏习惯。这种现象称为“多类症” （classitis），在某种程度上，这和使用基于表格的布局一样糟糕，因为它在文档中添加了无意义的代码。 <h3 class="newsHead">Zeldman.com turns 10 </h3> <p class="newsText"> Another milestone for jeffry as zeldman.com turns 10 yoday</p> <p class="newsText"><a href="news.php" class="newsLink">More</a></p> 在前面的示例中，每个元素都通过使用一个与新闻相关的类名标识为新闻的一部分。这使新闻标题和正 文可以采用与页面其他部分不同的样式。但是，不需要用这么多类来区分各个元素。可以将新闻条目放在一 个部分中，并且加上类名 news，从而标识整个新闻条目。然后，可以使用层叠识别新闻标题或文本。 <div class="news"> <h3>Zeldman.com turns 10 </h3> <p> Another milestone for jeffry as zeldman.com turns 10 yoday</p> <p><a href="news.php">More</a></p> </div> 以这种方式删除不必要的类有助于简化代码，使页面更简洁。稍后，将讨论 CSS 选择器和为样式寻找目 标。无论如何，这种对类名的过度依赖是不必要的。我常常只在不适合使用 ID 的情况下对元素应用类，而 且尽可能少使用类。我创建的大多数文档常常只需要添加几个类。如果你发现自己添加了许多类，那么这很 可能意味着你的(X)HTML 文档的结构有问题。 2. div 和 span 有助于在文档中添加结构的一个元素是 div 元素。许多人误以为 div 元素没有语义意义。但是，div 实 际上代表部分（division），它提供了将文档分割为有意义的区域的方法。所以，通过将主要内容区域包围 在 div 中并分配 ID mainContent，就可以在文档中添加结构和意义。 为了将不必要的标记减到最少，应该只在没有现有元素能够实现区域分割的情况下使用 div 元素。例如， 如果使用主导航列表，那么不需要将它包围在 div 中。 <div id="mainNav"> <ul > <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Centact</a></li> </ul> 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd 12
精通CSS:高级WB标准解决方案 基础知识 </div> 可以完全删除div,直接在列表上应用ID: < ul id=mainnay"> <li>Home/li> <li>About</li> <li>Centact/li> /ul1> 过度使用div常常称为“多div症”( divitus),这是代码结构不合理而且过分复杂的一个信号, 些CSS新手会尝试用div重建自己原来的表格结构。但是,这只是用一套不必要的标签替换了另一套不必要 的标签。实际上,应该使用div根据条目的意义或功能(而不是根据它们的表现方式或布局)对相关条目进 行分组。div可以用来对块级元素进行分组,而span可以用来对行内元素进行分组或标识 <h2>wheres dunstan?</h2> Kp>Published on <span class="date">March 22nd, 2005</ span> by <span class="author >Andy Budd</span></p> 一般不需要对行内元素进行分组或标识,所以使用span的情况比div少。在实现图像替换等效果时会 看到span,在这种情况下,它们用做额外的钩子,可以应用额外的样式 尽管目标是保持代码尽可能简洁且有意义,但是有时候为了以希望的方式显示页面,无法避免添加额外 的无语义的div或span。如果是这种情况,那么也不必过分为此担心。我们正处在一个过渡时期,CSS3有 望提供更强大的文档控制能力。在目前,现实世界的需要常常比理论出现得早。关键是知道在什么时候必须 进行折中,并且要根据正确的原因进行折中。 CSS有各种版本(即“ level”),所以知道要使用哪个版本是很重要的。CSS1在1996年末成为推荐 标准,其中包含非常基本的属性,比如字体、颜色、空白边。CSS2在此基础上添加了高级概念(比如浮动 和定位)以及高级的选择器(比如子选择器、相邻同胞选择器和通用选择器)。在编写本书时,CSS2仍然 是CSS的最新版本,尽管它早在1998年就已经成为推荐标准。 万维网联盟(W3C)的行动非常缓慢,所以尽管CSS3的开发工作在新千年开始之前就开始了,但是距 离最终的发布还有相当长的路要走。为提高开发和浏览器实现的速度,CSS3被分割为模块,这些模块可以 独立发布和实现。CSS3包含一些令人兴奋的新特性,包括一个用于多列布局的模块。但是,选择器模块最 接近于完成,可能在2006年成为推荐标准。 因为预期从CSS2到CSS3的发布之间时间会很长,2002年人们启动了CSS2.1的开发。这是CSs2 的修订版,它计划纠正一些错误,并且更精确地描述CSS的浏览器实现。CSS2.1正在逐渐接近完成,但是 可能在2006年年底之前无法实现。然而,它更准确地反映了CSS当前的状态,我当前就使用这个版本。 1.1.2文档类型、 DOCTYPE切换和浏览器模式 DTD(文档类型定义)是一组机器可读的规则,它们定义M或(X)HTM的特定版本中允许有什么,不 允许有什么。在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分 析页面的 DOCTYPE声明来了解要使用哪个DTD,因此知道要使用(X)HTM的哪个版本 D0 TYPE声明是(X)HML文档开头处的一行或两行代码,它描述使用哪个DTD。在下面的示例中,要使 用的DTD是 XHTML1.0 Strict的DTD <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtm11/Dtd/xhtmll-transitional.dtd> DOCTYPE通常(但不总是)包含指定的DTD文件的URL。浏览器一般不读取这些文件,而是只识别常见 的 DOCTYPE声明。 1.有效性检验 除了根据语义加标记之外,(XHML文档还需要用有效的代码来编写。如果代码是无效的,浏览器会尝 书来源于互联网的一些图片,在转换的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请头原版书 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd </div> 可以完全删除 div，直接在列表上应用 ID： <ul id=mainNav""> <li>Home</li> <li>About</li> <li>Centact</li> </ul> 过度使用 div 常常称为“多 div 症”（divitus），这是代码结构不合理而且过分复杂的一个信号。一 些 CSS 新手会尝试用 div 重建自己原来的表格结构。但是，这只是用一套不必要的标签替换了另一套不必要 的标签。实际上，应该使用 div 根据条目的意义或功能（而不是根据它们的表现方式或布局）对相关条目进 行分组。div 可以用来对块级元素进行分组，而 span 可以用来对行内元素进行分组或标识： <h2>where's durstan?</h2> <p>Published on <span class="date">March 22nd,2005</span> by <span class="author">Andy Budd</span></p> 一般不需要对行内元素进行分组或标识，所以使用 span 的情况比 div 少。在实现图像替换等效果时会 看到 span，在这种情况下，它们用做额外的钩子，可以应用额外的样式。 尽管目标是保持代码尽可能简洁且有意义，但是有时候为了以希望的方式显示页面，无法避免添加额外 的无语义的 div 或 span。如果是这种情况，那么也不必过分为此担心。我们正处在一个过渡时期，CSS 3 有 望提供更强大的文档控制能力。在目前，现实世界的需要常常比理论出现得早。关键是知道在什么时候必须 进行折中，并且要根据正确的原因进行折中。 CSS 有各种版本（即“level”），所以知道要使用哪个版本是很重要的。CSS 1 在 1996 年末成为推荐 标准，其中包含非常基本的属性，比如字体、颜色、空白边。CSS 2 在此基础上添加了高级概念（比如浮动 和定位）以及高级的选择器（比如子选择器、相邻同胞选择器和通用选择器）。在编写本书时，CSS 2 仍然 是 CSS 的最新版本，尽管它早在 1998 年就已经成为推荐标准。 万维网联盟（W3C）的行动非常缓慢，所以尽管 CSS 3 的开发工作在新千年开始之前就开始了，但是距 离最终的发布还有相当长的路要走。为提高开发和浏览器实现的速度，CSS 3 被分割为模块，这些模块可以 独立发布和实现。CSS 3 包含一些令人兴奋的新特性，包括一个用于多列布局的模块。但是，选择器模块最 接近于完成，可能在 2006 年成为推荐标准。 因为预期从 CSS 2 到 CSS 3 的发布之间时间会很长，2002 年人们启动了 CSS 2.1 的开发。这是 CSS 2 的修订版，它计划纠正一些错误，并且更精确地描述 CSS 的浏览器实现。CSS 2.1 正在逐渐接近完成，但是 可能在 2006 年年底之前无法实现。然而，它更准确地反映了 CSS 当前的状态，我当前就使用这个版本。 1.1.2 文档类型、DOCTYPE 切换和浏览器模式 DTD（文档类型定义）是一组机器可读的规则，它们定义 XML 或(X)HTML 的特定版本中允许有什么，不 允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分 析页面的 DOCTYPE 声明来了解要使用哪个 DTD，因此知道要使用(X)HTML 的哪个版本。 DOCTYPE 声明是(X)HTML 文档开头处的一行或两行代码，它描述使用哪个 DTD。在下面的示例中，要使 用的 DTD 是 XHTML 1.0 Strict 的 DTD： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> DOCTYPE 通常（但不总是）包含指定的 DTD 文件的 URL。浏览器一般不读取这些文件，而是只识别常见 的 DOCTYPE 声明。 1. 有效性检验 除了根据语义加标记之外，(X)HTML 文档还需要用有效的代码来编写。如果代码是无效的，浏览器会尝 13
精通CSS:高级WB标准解决方案 基础知识 试解释标记本身,有时候会产生错误的结果。更糟的是,如果发送具有正确的MME类型的ⅫTM文档,理 解ⅫML的浏览器将不显示无效的页面。因为浏览器需要知道要使用的DTD才能正确地处理页面,所以对页面 进行有效性检验要求有 DOCTYPE声明 可以使用W3C检验器检查(X)HTML是否是有效的,这是一个类似于检验器 bookmarklet或 Fires Developer Extension的插件。许多(X)HML编辑器现在内置了检验器,还可以在计算机上本地安装W3C检 验器的副本。检验器会指出页面是否是有效的,如果是无效的页面,它还会指出原因是什么。 有效性检验很重要,因为它有助于找到代码中的bug。因此,尽早和经常进行有效性检验是个好习惯。 但是,有效性检验太苛刻了,许多好页面由于很小的错误(比如&符号没有进行编码)或者因为遗留的内容 而无法通过有效性检验。所以,尽管有效性检验是很重要的,但是在现实世界中,需要一定程度的常识 有各种代码检验工具。可以访问http://validator.w3.org/并且输入自己的URL来对自己的站点进行 在线检验。但是,如果要经常进行检验(这是个好习惯),那么每次都输入自己的URL有点儿麻烦。我使用 个方便的检验器 bookmarklet(也称 wavelet),这是一小段可以存储在浏览器的书签或收藏夹中的 JavaScript。单击这个书签就会触发 JavaScript动作。对于检验器 bookmarklet,它通过W3C检验器运行 当前页面并显示结果。在我的个人站点(wWw.andybudd.com/bookmarklets/)上可以找到这个检验器 bookmarklet和其他许多方便的Web开发 bookmarklet。 如果使用 Firefox,那么可以下载和安装各种插件。在可用的大量检验器插件中,我个人喜欢的是Web Deve lopers extension插件。除了可以检验(XHML和CSS之外,它还可以执行许多其他有用的任务,比如 描述各种(X)HTMI元素、关闭样式表以及在浏览器中编辑样式。可以从http //chrispederick.com/work/firefox/webdeveloper/下载WebDevelopersExtension,这是使用Firefox 的CSS开发人员必须具备的插件。 还有一个用于IE6和更高版本的开发人员工具栏。可以从http://tinyurl.com/7mnyh下载这个工具 栏。尽管它的特性不如 Firefox工具栏那么丰富,但是仍然非常有用。 D0 CTYPE声明除了对有效性检验很重要之外,浏览器还将它们用于另一个用途。 2.浏览器模式 当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建 了两种表现模式:标准模式和怪异模式( quirks mode)。在标准模式中,浏览器根据规范表现页面;在怪 异模式中,页面以一种比较宽松的向后兼容的方式显示。怪异模式通常模拟老式浏览器(比如 Microsoft ie 4和 Netscape Navigator4)的行为以防止老站点无法工作。 对于这两种模式之间的差异,最显著的例子涉及 Windows上IE专有的框模型。在IE6出现时,在标准 模式中使用正确的框模型,在怪异模式中使用老式的专有框模型。为了维持对IE5和更低版本的向后兼容 性, Opera7和更高版本也在怪异模式中使用有缺点的IE框模型。 表现方面的其他差异比较小,而且是与特定浏览器相关的,包括对于十六进制颜色值不需要#号、假设 CSS中没有指定单位的长度的单位是像素,以及在使用关键字时将字号增加一级。 Mozilla和 Safari还有第三种模式,称为“几乎标准的模式( almost standards mode)”,除了在处理表 格的方式方面有一些细微的差异之外,这种模式与标准模式相同。 3. DOCTYPE切换 浏览器根据D0 CTYPE是否存在以及使用的DTD来选择要使用的表现方法。如果ⅪHTML文档包含形式完整 D0 CTYPE,那么它一般以标准模式表现。对于HML4.01文档,包含严格DTD的 DOCTYPE常常导致页面以标 准模式表现。包含过渡DTD和URI的 DOCTYPE也导致页面以标准模式表现,但是有过渡DTD而没有URI会导 致页面以怪异模式表现。 DOCTYPE不存在或形式不正确会导致HTML和ⅫHTM文档以怪异模式表现。 根据 DOCTYPE是否存在选择表现方法的效果被称为D0 CTYPE切换( DOCTYPE switching)或 DOCTYPE侦测 (D0 CTYPE sniffing)。并非所有浏览器都采用这些规则,但是这些规则很好地说明了 DOCTYPE切换的工作 方式。 Eric meyer深入研究了这个主题,并且制作了一张图表 (http://meyerweb.com/eric/dom/dtype/dtype-grid.html)来说明不同的浏览器如何根据DOCTYPE 本书来源于互联网的一些图片,在转换的过程中,不可避兔地存在一些文字错误,仅供大家学习时参考,请购买原书 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd 试解释标记本身，有时候会产生错误的结果。更糟的是，如果发送具有正确的 MIME 类型的 XHTML 文档，理 解 XML 的浏览器将不显示无效的页面。因为浏览器需要知道要使用的 DTD 才能正确地处理页面，所以对页面 进行有效性检验要求有 DOCTYPE 声明。 可以使用 W3C 检验器检查(X)HTML 是否是有效的，这是一个类似于检验器 bookmarklet 或 Firefox Developer Extension 的插件。许多(X)HTML 编辑器现在内置了检验器，还可以在计算机上本地安装 W3C 检 验器的副本。检验器会指出页面是否是有效的，如果是无效的页面，它还会指出原因是什么。 有效性检验很重要，因为它有助于找到代码中的 bug。因此，尽早和经常进行有效性检验是个好习惯。 但是，有效性检验太苛刻了，许多好页面由于很小的错误（比如&符号没有进行编码）或者因为遗留的内容 而无法通过有效性检验。所以，尽管有效性检验是很重要的，但是在现实世界中，需要一定程度的常识。 有各种代码检验工具。可以访问 http: //validator.w3.org/并且输入自己的 URL 来对自己的站点进行 在线检验。但是，如果要经常进行检验（这是个好习惯），那么每次都输入自己的 URL 有点儿麻烦。我使用 一个方便的检验器 bookmarklet（也称 favelet），这是一小段可以存储在浏览器的书签或收藏夹中的 JavaScript。单击这个书签就会触发 JavaScript 动作。对于检验器 bookmarklet，它通过 W3C 检验器运行 当前页面并显示结果。在我的个人站点（www.andybudd.com/bookmarklets/）上可以找到这个检验器 bookmarklet 和其他许多方便的 Web 开发 bookmarklet。 如果使用 Firefox，那么可以下载和安装各种插件。在可用的大量检验器插件中，我个人喜欢的是 Web Developers Extension 插件。除了可以检验(X)HTML 和 CSS 之外，它还可以执行许多其他有用的任务，比如 描述各种(X)HTML 元素、关闭样式表以及在浏览器中编辑样式。可以从 http: //chrispederick.com/work/firefox/webdeveloper/下载 Web Developers Extension，这是使用 Firefox 的 CSS 开发人员必须具备的插件。 还有一个用于 IE 6 和更高版本的开发人员工具栏。可以从 http: //tinyurl.com/7mnyh 下载这个工具 栏。尽管它的特性不如 Firefox 工具栏那么丰富，但是仍然非常有用。 DOCTYPE 声明除了对有效性检验很重要之外，浏览器还将它们用于另一个用途。 2. 浏览器模式 当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建 了两种表现模式：标准模式和怪异模式（quirks mode）。在标准模式中，浏览器根据规范表现页面；在怪 异模式中，页面以一种比较宽松的向后兼容的方式显示。怪异模式通常模拟老式浏览器（比如 Microsoft IE 4 和 Netscape Navigator 4）的行为以防止老站点无法工作。 对于这两种模式之间的差异，最显著的例子涉及 Windows 上 IE 专有的框模型。在 IE 6 出现时，在标准 模式中使用正确的框模型，在怪异模式中使用老式的专有框模型。为了维持对 IE 5 和更低版本的向后兼容 性，Opera 7 和更高版本也在怪异模式中使用有缺点的 IE 框模型。 表现方面的其他差异比较小，而且是与特定浏览器相关的，包括对于十六进制颜色值不需要#号、假设 CSS 中没有指定单位的长度的单位是像素，以及在使用关键字时将字号增加一级。 Mozilla 和 Safari 还有第三种模式，称为“几乎标准的模式（almost standards mode）”，除了在处理表 格的方式方面有一些细微的差异之外，这种模式与标准模式相同。 3. DOCTYPE 切换 浏览器根据 DOCTYPE 是否存在以及使用的 DTD 来选择要使用的表现方法。如果 XHTML 文档包含形式完整 DOCTYPE，那么它一般以标准模式表现。对于 HTML 4.01 文档，包含严格 DTD 的 DOCTYPE 常常导致页面以标 准模式表现。包含过渡 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式表现，但是有过渡 DTD 而没有 URI 会导 致页面以怪异模式表现。DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以怪异模式表现。 根据 DOCTYPE 是否存在选择表现方法的效果被称为 DOCTYPE 切换（DOCTYPE switching）或 DOCTYPE 侦测 （DOCTYPE sniffing）。并非所有浏览器都采用这些规则，但是这些规则很好地说明了 DOCTYPE 切换的工作 方式。Eric Meyer 深入研究了这个主题，并且制作了一张图表 （http: //meyerweb.com/eric/dom/dtype/dtype-grid.html）来说明不同的浏览器如何根据 DOCTYPE 14
精通CSS:高级WB标准解决方案 基础知识 声明选择表现方法 D0 CTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS,如果 选择了错误的 DOCTYPE,那么页面就将以怪异模式表现,其表现就可能会有错误或不可预测。因此,一定要 在站点的每个页面上包含形式完整的D0 CTYPE声明,并且在使用HTML时选择严格的DTD <! DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01//EN http://www.w3.org/tr/htm14/sTriCt.dtd> <!doctYpehtmlPublIc"-//W3c//dTdXhtMl1.0Transitional//en"http: 7/www.w3.org/tr/xhtm11/dTd/Xhtmll-transitional.dtd> K!doctYpehtmlPubLic-//W3c//dtDxhTml1.0Strict//enhttp //www.w3.org/tr/xhtm11/dTd/Xhtmll-strict.dtd> 许多HML编辑器会自动添加D0 CTYPE声明。如果创建ⅫHTM文档,它们还可能在 DOCTYPE声明前面添 加XM声明 <?xml version="1.0 encoding="gb2312"?> ⅫⅦL声明是XM文件使用的可选声明,它定义使用的ⅫML版本和字符编码类型等设置。不幸的是,如果 D0TYPE声明不是页面上的第一个元素,那么IE6会自动切换到怪异模式。因此,除非要将页面用做XML 文档,否则最好避免使用ⅫM声明。 1.2为样式找到目标 有效且结构良好的文档为应用样式提供了一个框架。要想使用CSS将样式应用于特定的(XHML元素 需要有办法找到这个元素。在CSS中,执行这一任务的样式规则部分称为选择器( selector)。 1.2.1常用的选择器 最常用的选择器类型是类型选择器和后代选择器。类型选择器用来寻找特定类型的元素,比如段落、锚 或标题元素,只需指定希望应用样式的元素的名称。类型选择器有时候也称为元素选择器或简单选择器 p color: black: ai text-decoration: underline hI fon-weight: bold; 后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其他两个选择器之间的空格表示。在下 面的示例中,只在作为列表项的后代的锚元素上应用样式,而段落中的锚不受影响。 li a text-decoration: none: I 这两种选择器适合于应用那些应用范围广的一般性样式。要想寻找更特定的元素,可以使用ID选择器 和类选择器。顾名思义,这两种选择器用于寻找那些具有指定ID或类名的元素。ID选择器由一个#字符表 示,类选择器由一个点号表示。下面示例中的第一条规则使简介段落中的文本以粗体显示,第二条规则让日 期显示为绿色 #intro font-weight: bold: I dateposted color: green: I Kp id="intro">some text</p> Kp class="dateposted">24/3/2006</p> 正如前面提到的,许多CSS开发人员过度依赖类选择器和ID选择器(虽然后者的程度较轻)。如果他 们希望以一种方式对主内容区域中的标题应用样式,而在第二个内容区域中采用另一种方式,那么他们很可 能创建两个类并且在每个标题上应用一个类。一种简单得多的方法是使用类型、后代、ID和(或)类几种 选择器的组合: #mainContent hl font-size: 1.Sem 书来源于互联网的一些图片,在转搀的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请头原版书 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd 声明选择表现方法。 DOCTYPE 切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的 CSS，如果 选择了错误的 DOCTYPE，那么页面就将以怪异模式表现，其表现就可能会有错误或不可预测。因此，一定要 在站点的每个页面上包含形式完整的 DOCTYPE 声明，并且在使用 HTML 时选择严格的 DTD。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 许多 HTML 编辑器会自动添加 DOCTYPE 声明。如果创建 XHTML 文档，它们还可能在 DOCTYPE 声明前面添 加 XML 声明： <?xml version="1.0" encoding="gb2312"?> XML 声明是 XML 文件使用的可选声明，它定义使用的 XML 版本和字符编码类型等设置。不幸的是，如果 DOCTYPE 声明不是页面上的第一个元素，那么 IE 6 会自动切换到怪异模式。因此，除非要将页面用做 XML 文档，否则最好避免使用 XML 声明。 1. 2 为样式找到目标 有效且结构良好的文档为应用样式提供了一个框架。要想使用 CSS 将样式应用于特定的(X)HTML 元素， 需要有办法找到这个元素。在 CSS 中，执行这一任务的样式规则部分称为选择器（selector）。 1.2.1 常用的选择器 最常用的选择器类型是类型选择器和后代选择器。类型选择器用来寻找特定类型的元素，比如段落、锚 或标题元素，只需指定希望应用样式的元素的名称。类型选择器有时候也称为元素选择器或简单选择器。 p { color: black;} a { text-decoration: underline;} h1 { fon-weight: bold;} 后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其他两个选择器之间的空格表示。在下 面的示例中，只在作为列表项的后代的锚元素上应用样式，而段落中的锚不受影响。 li a { text-decoration: none;} 这两种选择器适合于应用那些应用范围广的一般性样式。要想寻找更特定的元素，可以使用 ID 选择器 和类选择器。顾名思义，这两种选择器用于寻找那些具有指定 ID 或类名的元素。ID 选择器由一个#字符表 示，类选择器由一个点号表示。下面示例中的第一条规则使简介段落中的文本以粗体显示，第二条规则让日 期显示为绿色： #intro { font-weight: bold;} .dateposted { color: green;} <p id="intro">some text</p> <p class="dateposted">24/3/2006</p> 正如前面提到的，许多 CSS 开发人员过度依赖类选择器和 ID 选择器（虽然后者的程度较轻）。如果他 们希望以一种方式对主内容区域中的标题应用样式，而在第二个内容区域中采用另一种方式，那么他们很可 能创建两个类并且在每个标题上应用一个类。一种简单得多的方法是使用类型、后代、ID 和（或）类几种 选择器的组合： #mainContent h1 { font-size: 1.8em;} 15