精通CS 级WB标准解决方案 基础知识 #secondary Content hI( font-size: 1. 2em: I <div id="mainContent> <hI>welcome to my site </h1> </div> <div id="secondary Content"> <hI>tatest news/h1> /div> 这是一个非常简单的示例。但是,只使用前面讨论的四种选择器就可以成功地找到许多元素。如果你发 现自己在文档中添加了许多不必要的类,那么这可能是文档结构不合理的一个警告信号。这时应该分析这些 元素之间的差异。你常常会发现惟一的差异是它们在页面上出现的位置。不要给这些元素指定不同的类,而 是将一个类或ID应用于它们的祖先,然后使用后代选择器定位它们。 伪类 有时候,希望根据文档结构之外的其他条件对元素应用样式,例如表单元素或链接的状态。这要使用伪 类选择器来完成。 /*maks all unvisited links blue*/ a: like color: blue /*makes all visited links green*/ a: visited color: green: I /*maks links red when hovered or activated*/ hover,a:activei color: red /*maks table rows red when hovered over*/ tr: hoveri background-color: red /=maks input elements yellow when focus is applied*/ input: focus background-color: yellow link和: visited称为链接伪类,只能应用于锚元素。: hover、: active和: focus称为动态伪类,理论 上可以应用于任何元素。不幸的是,只有少数现代浏览器(比如 Firefox)支持这种功能。IE6和更低版本 只注意应用于锚链接的: active和: hover选择器,完全忽略: focus 1.2.2通用选择器 通用选择器可能是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符,它匹配所有可 用元素。与其他语言中的通配符一样,通用选择器由一个星号表示。通用选择器一般用来对页面上的所有元 素应用样式。例如,可以使用以下规则删除每个元素上默认的浏览器填充和空白边 padding: 0; margin: 0: 在与其他选择器结合使用时,通用选择器可以用来对特定元素的所有后代应用样式,或者跳过一级后代。 在本章稍后将看到这么做的实际效果。 1.2.3高级选择器 CSS2有许多其他有用的选择器。不幸的是,虽然 Firefox和 Safari等现代浏览器支持这些高级选择 器,但是IE6和更低版本不支持。好在在创建CSS时考虑到了向后兼容性。如果浏览器不理解某个选择器 那么它会忽略整个规则。因此,可以在现代浏览器中应用样式和易用性方面的改进,同时不必担心它在老式 浏览器中造成问题。但是要记住,在对于站点功能很重要的任何元素上应该避免使用这些高级选择器。 来源于互联网的一些图片,在转換的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请买原版书 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd #secondaryContent h1 { font-size: 1.2em;} <div id="mainContent"> <h1>welcome to my site </h1> …… </div> <div id="secondaryContent"> <h1>tatest news</h1> …… </div> 这是一个非常简单的示例。但是，只使用前面讨论的四种选择器就可以成功地找到许多元素。如果你发 现自己在文档中添加了许多不必要的类，那么这可能是文档结构不合理的一个警告信号。这时应该分析这些 元素之间的差异。你常常会发现惟一的差异是它们在页面上出现的位置。不要给这些元素指定不同的类，而 是将一个类或 ID 应用于它们的祖先，然后使用后代选择器定位它们。 伪类 有时候，希望根据文档结构之外的其他条件对元素应用样式，例如表单元素或链接的状态。这要使用伪 类选择器来完成。 /*maks all unvisited links blue*/ a: like{ color: blue;} /*makes all visited links green*/ a: visited { color: green;} /*maks links red when hovered or activated*/ a: hover, a: active{ color: red;} /*maks table rows red when hovered over*/ tr: hover { background-color: red;} /*maks input elements yellow when focus is applied*/ input: focus{ background-color: yellow;} :link 和:visited 称为链接伪类，只能应用于锚元素。:hover、:active 和:focus 称为动态伪类，理论 上可以应用于任何元素。不幸的是，只有少数现代浏览器（比如 Firefox）支持这种功能。IE 6 和更低版本 只注意应用于锚链接的:active 和:hover 选择器，完全忽略: focus。 1.2.2 通用选择器 通用选择器可能是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符，它匹配所有可 用元素。与其他语言中的通配符一样，通用选择器由一个星号表示。通用选择器一般用来对页面上的所有元 素应用样式。例如，可以使用以下规则删除每个元素上默认的浏览器填充和空白边： *{ padding: 0; margin: 0; } 在与其他选择器结合使用时，通用选择器可以用来对特定元素的所有后代应用样式，或者跳过一级后代。 在本章稍后将看到这么做的实际效果。 1.2.3 高级选择器 CSS 2 有许多其他有用的选择器。不幸的是，虽然 Firefox 和 Safari 等现代浏览器支持这些高级选择 器，但是 IE 6 和更低版本不支持。好在在创建 CSS 时考虑到了向后兼容性。如果浏览器不理解某个选择器， 那么它会忽略整个规则。因此，可以在现代浏览器中应用样式和易用性方面的改进，同时不必担心它在老式 浏览器中造成问题。但是要记住，在对于站点功能很重要的任何元素上应该避免使用这些高级选择器。 16
精通CSS:高级WB标准解决方案 基础知识 1.子选择器和相邻同胞选择器 这些高级选择器中的第一个是子选择器。后代选择器选择一个元素的所有后代,而子选择器只选择元素 的直接后代,即子元素。在下面的示例中,外层列表中的列表项显示一个定制的图标,而嵌套列表中的列表 项不受影响: #nav>li background: url(folder. png)no-repeat left top <li>Home</li> <li>Service <li>Design</li> <li>Development</li> <li>Consultancy</li> </ul> </1i> <li>contact Us/1 </u1> 在IE6和更低版本中,可以使用通用选择器模拟子选择器的效果。为此,先在所有后代上应用你希望 子元素具有的样式。然后,使用通用选择器覆盖子元素的后代上的样式。所以,要实现与前面的子选择器示 例相同的效果,可以这样做 #nav li background: url(folder. png)no-repeat left top; *nav li background: url(folder. png)no-repeat left top 还可能希望根据一个元素与另一个元素的相邻关系对它应用样式。相邻同胞选择器可用于定位同一个父 元素下某个元素之后的元素。可以使用相邻同胞选择器让顶级标题后面的第一个段落以粗体显示,同时不影 响其他段落 hI +pfont-weightbold <h1>Main heading</h1> Kp>First Paragraph</p> Kp>Second Paragraph</p> 2.属性选择器 顾名思义,属性选择器可以根据某个属性是否存在或属性的值来寻找元素。因此能够实现某些非常有意 思和强大的效果。 例如,当鼠标停留在具有 title属性的元素上时,大多数浏览器会显示一个工具提示。可以使用这种特 性解释某些内容(比如缩写词)的含义: Abbr title="Cascading style sheets">CSS</abbr> 但是,如果不把鼠标停留在这个元素上,那么没有任何迹象能够表明存在这一额外信息。为了解决这个 问题,可以使用属性选择器对具有 title属性的abbr元素应用与其他元素不同的样式一一在下面的示例中, 在它们下面加上点。还可以在鼠标停留在这个元素上时将鼠标指针改为问号,表示这个元素与众不同,从而 提供更多的上下文相关信息。 abbr[title]:I border-bottom: 1px dotted #999: 1 abbr[title]: hover( cursor: help 除了根据某个属性是否存在对元素应用样式之外,还可以根据属性值应用样式。例如,使用rel属性值 follow链接的站点无法从 Google获得评级收益( ranking benefit)。以下规则在这种链接旁边显示- 本书来源于互联网的一些图片,在转換的过程中,不可避兔地存在一些文字错误,仅供大家学习时参考,请购买原版书。 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd 1. 子选择器和相邻同胞选择器 这些高级选择器中的第一个是子选择器。后代选择器选择一个元素的所有后代，而子选择器只选择元素 的直接后代，即子元素。在下面的示例中，外层列表中的列表项显示一个定制的图标，而嵌套列表中的列表 项不受影响： #nav > li { background: url(folder.png)no-repeat left top;} <ul id="nav"> <li>Home</li> <li>Services <ul> <li>Design</li> <li>Development</li> <li>Consultancy</li> </ul> </li> <li>contact Us</li> </ul> 在 IE 6 和更低版本中，可以使用通用选择器模拟子选择器的效果。为此，先在所有后代上应用你希望 子元素具有的样式。然后，使用通用选择器覆盖子元素的后代上的样式。所以，要实现与前面的子选择器示 例相同的效果，可以这样做： #nav li { background: url(folder.png)no-repeat left top;} #nav li *{ background: url(folder.png)no-repeat left top;} 还可能希望根据一个元素与另一个元素的相邻关系对它应用样式。相邻同胞选择器可用于定位同一个父 元素下某个元素之后的元素。可以使用相邻同胞选择器让顶级标题后面的第一个段落以粗体显示，同时不影 响其他段落： h1 + p { font-weightbold;} <h1>Main heading</h1> <p>First Paragraph</p> <p>Second Paragraph</p> 2. 属性选择器 顾名思义，属性选择器可以根据某个属性是否存在或属性的值来寻找元素。因此能够实现某些非常有意 思和强大的效果。 例如，当鼠标停留在具有 title 属性的元素上时，大多数浏览器会显示一个工具提示。可以使用这种特 性解释某些内容（比如缩写词）的含义： <abbr title="Cascading style sheets">CSS</abbr> 但是，如果不把鼠标停留在这个元素上，那么没有任何迹象能够表明存在这一额外信息。为了解决这个 问题，可以使用属性选择器对具有 title 属性的 abbr 元素应用与其他元素不同的样式——在下面的示例中， 在它们下面加上点。还可以在鼠标停留在这个元素上时将鼠标指针改为问号，表示这个元素与众不同，从而 提供更多的上下文相关信息。 abbr[title]: { border-bottom: 1px dotted #999;} abbr[title]: hover{ cursor: help;} 除了根据某个属性是否存在对元素应用样式之外，还可以根据属性值应用样式。例如，使用 rel 属性值 nofollow 链接的站点无法从 Google 获得评级收益（ranking benefit）。以下规则在这种链接旁边显示一 17
精通CS 级WB标准解决方案 基础知识 个图像,以此表示不推荐这个目标站点 a[rel="nofollow"]I background-image: url(nofollow. gif) 由于IE6和更低版本不支持属性选择器,有一种更聪明的使用属性选择器的方法。可以对IE应用一种 样式,对更符合标准的浏览器应用另一种样式。例如,IE在显示1像素的点边界方面有问题,所以可以将 点边界显示为虚线。可以使用属性选择器将点边界只应用于能够正确地表现它的浏览器。这需要寻找 class 属性而不是使用类选择器。 ntro border-style: solid [class="intro" border-style: dotted: I 些属性可以有多个值,值之间用空格分隔。属性选择器允许根据属性值之一寻找元素。例如,一些开 发人员建议在链接的属性中使用预定义的关键字来定义站点拥有者与其他人的关系。可以利用这一信息将 个图像应用于在rel属性中包含关键字 friend的任何链接。 a [rel="friend"] background-image: url(friend. gif): I ahref=http://www.hicksdesign.com/"rel="friendmetcolleague">johnHicks</a 使用具有 friend值的rel属性称为 XHTML Friends Network(简称为XFN),这是最近开发的几种新的 微格式”之一。可以在http://gmpg.org/xfn/了解关于XFN的更多信息,可以在http://microformats.org 解微格式的概念。 旦这些高级的CSS2选择器得到广泛的支持,在代码中添加额外的div或类的需求就会大大减少。 1.2.4层叠和特殊性 即使在不太复杂的样式表中,也可能有两个或更多规则寻找同一元素。CSS通过一个称为层叠( cascade) 的过程处理这种冲突。层叠给每个规则分配一个重要度。作者的样式表被认为是最重要的,其次是用户的样 式表,最后是浏览器或用户代理使用的默认样式表。为了让用户有更多的控制能力,可以通过将任何规则指 定为! Important来提高它的重要度,让它优先于任何规则,甚至优先于作者加上! Important标志的规则 因此,层叠采用以下重要度次序: 标为! Important的用户样式。 标为! lmportant的作者样式。 作者样式。 用户样式 浏览器/用户代理应用的样式。 然后,根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优先于具有比较一般的选择器的 规则。如果两个规则的特殊性相同,那么后定义的规则优先 1.特殊性 为了计算规则的特殊性,每种选择器被分配一个数字值。然后,将规则的每个选择器的值加在一起,计 算出规则的特殊性。不幸的是,特殊性的计算不是以10为基数的,而是采用一个更高的未指定的基数。这 确保非常特殊的选择器(比如⑩选择器)不会被大量比较一般的选择器(比如类型选择器)的组合所超越 但是,为了简化,如果在一个特定选择器中的选择器数量少于10个,那么可以以10为基数计算特殊性。 选择器的特殊性分成四个成分等级:a、b、c和d。 如果样式是行内样式,那么a=1 b=ID选择器的总数。 c=类、伪类和属性选择器的数量。 本书来源于互联网的一些图片,在转换的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请购买原版书。 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd 个图像，以此表示不推荐这个目标站点： a[rel="nofollow"]{ background-image: url(nofollow.gif); padding-right: 20px; } 由于 IE 6 和更低版本不支持属性选择器，有一种更聪明的使用属性选择器的方法。可以对 IE 应用一种 样式，对更符合标准的浏览器应用另一种样式。例如，IE 在显示 1 像素的点边界方面有问题，所以可以将 点边界显示为虚线。可以使用属性选择器将点边界只应用于能够正确地表现它的浏览器。这需要寻找 class 属性而不是使用类选择器。 .intro { border-style: solid;} [class="intro"]{ border-style: dotted;} 一些属性可以有多个值，值之间用空格分隔。属性选择器允许根据属性值之一寻找元素。例如，一些开 发人员建议在链接的属性中使用预定义的关键字来定义站点拥有者与其他人的关系。可以利用这一信息将一 个图像应用于在 rel 属性中包含关键字 friend 的任何链接。 a[rel="friend"]{ background-image: url(friend.gif);} <a href="http: //www.hicksdesign.com/" rel="friend met colleague">John Hicks</a> 使用具有 friend 值的 rel 属性称为 XHTML Friends Network（简称为 XFN），这是最近开发的几种新的 “微格式”之一。可以在 http: //gmpg.org/xfn/了解关于 XFN的更多信息，可以在 http: //microformats.org 了解微格式的概念。 一旦这些高级的 CSS 2 选择器得到广泛的支持，在代码中添加额外的 div 或类的需求就会大大减少。 1.2.4 层叠和特殊性 即使在不太复杂的样式表中，也可能有两个或更多规则寻找同一元素。CSS 通过一个称为层叠（cascade） 的过程处理这种冲突。层叠给每个规则分配一个重要度。作者的样式表被认为是最重要的，其次是用户的样 式表，最后是浏览器或用户代理使用的默认样式表。为了让用户有更多的控制能力，可以通过将任何规则指 定为!important 来提高它的重要度，让它优先于任何规则，甚至优先于作者加上!important 标志的规则。 因此，层叠采用以下重要度次序： 标为!important 的用户样式。 标为!important 的作者样式。 作者样式。 用户样式。 浏览器/用户代理应用的样式。 然后，根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优先于具有比较一般的选择器的 规则。如果两个规则的特殊性相同，那么后定义的规则优先。 1. 特殊性 为了计算规则的特殊性，每种选择器被分配一个数字值。然后，将规则的每个选择器的值加在一起，计 算出规则的特殊性。不幸的是，特殊性的计算不是以 10 为基数的，而是采用一个更高的未指定的基数。这 确保非常特殊的选择器（比如 ID 选择器）不会被大量比较一般的选择器（比如类型选择器）的组合所超越。 但是，为了简化，如果在一个特定选择器中的选择器数量少于 10 个，那么可以以 10 为基数计算特殊性。 选择器的特殊性分成四个成分等级：a、b、c 和 d。 如果样式是行内样式，那么 a = 1。 b = ID 选择器的总数。 c = 类、伪类和属性选择器的数量。 18
精通CSS:高级WB标准解决方案 基础知识 d=类型选择器和伪元素选择器的数量 使用这些规则可以计算任何CSS选择器的特殊性。表1-1给出一系列选择器以及相应的特殊性 表1-1特殊性示例 选择器 特殊性 以10为基数的特殊性 Style= 1,0,0,0 1000 #wrapper #content 0,2,0.0 200 #content. datePosted, 1, 1, 0 div#content 0,1,0,1 101 0,1,0,0 p comment. dateposted 0, 0, 2, 1 p.commenti 0,0,1,1 divi 0,0,0,2 p{} 0,0,0,1 初看上去,上面对特殊性的讨论和更高的未指定的基数可能有点儿让人糊涂,所以再解释一下。基本上, 用 style属性编写的规则总是比其他任何规则特殊。具有I选择器的规则比没有I选择器的规则特殊,具有 类选择器的规则比只有类型选择器的规则特殊。最后,如果两个规则的特殊性相同,那么后定义的规则优先。 2.在样式表中使用特殊性 在编写CSS时特殊性非常有用,因为它可以对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。 例如,假设希望站点上大多数表单的宽度是30em,但是搜索表单的宽度只有15em form width: 30em: I form*search( width: 15em 在创建新表单时,不需要为修改CSS中的任何东西操心,因为你知道会正确地应用样式。但是,在大型 站点上,会发现例外情况越来越多。例如,希望登录表单的宽度是20em,大型应用程序表单的宽度是40em 每当创建更特殊的样式时,可能需要覆盖一些一般规则。这可能需要一些额外的代码。而且,因为元素可以 从许多地方获得样式,情况可能变得非常复杂 为了避免过分混乱,我尽量保持一般性样式非常一般,特殊样式尽可能特殊,从而不需要覆盖特殊样式。 如果发现不得不多次覆盖一般样式,那么从一般规则中删除需要覆盖的声明,并且将它显式地应用于需要它 的每个元素,这样可能比较简单 3.在主体标签上添加类或ID 种有意思的使用特殊性的方法是在主体(body)标签上应用类或ID。这样做之后,就可以根据页面 或在站点范围内覆盖样式。例如,如果希望主页具有与站点其余部分不同的布局,那么可以在主页的主体元 素上添加一个类名,并且使用它覆盖样式 #content float: left: I homepage #content float: right #nav( float: right homepage #nav( float: left: 在后面你会看到如何使用这种技术在站点导航中向访问者突出显示当前页面。 在站点的每个页面上添加一个ID,这样用户就能够用自己的用户样式表覆盖你的样式表。站点范围的 ID(俗称为CSS签名)一般采用id="ww- Sitename-com"格式。用户至少可能希望覆盖你选择的字号或颜色 方案,从而让站点更容易阅读。为此,他们可以将以下规则添加到自己的用户样式表中 body#www-andbudd-com( 本书来源于互联网的一些图片,在转搀的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请买原版书。 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd d = 类型选择器和伪元素选择器的数量。 使用这些规则可以计算任何 CSS 选择器的特殊性。表 1-1 给出一系列选择器以及相应的特殊性。 表 1-1 特殊性示例 选择器 特殊性 以 10 为基数的特殊性 Style="" 1,0,0,0 1000 #wrapper #content { } 0,2,0,0 200 #content .datePosted { } 0,1,1,0 110 div#content { } 0,1,0,1 101 #content { } 0,1,0,0 100 p.comment .dateposted { } 0,0,2,1 21 p.comment{ } 0,0,1,1 11 div p { } 0,0,0,2 2 p { } 0,0,0,1 1 初看上去，上面对特殊性的讨论和更高的未指定的基数可能有点儿让人糊涂，所以再解释一下。基本上， 用style属性编写的规则总是比其他任何规则特殊。具有ID选择器的规则比没有ID选择器的规则特殊，具有 类选择器的规则比只有类型选择器的规则特殊。最后，如果两个规则的特殊性相同，那么后定义的规则优先。 2. 在样式表中使用特殊性 有用，因为它可以对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。 例如 m;} CSS 中的任何东西操心，因为你知道会正确地应用样式。但是，在大型 站点 常一般，特殊样式尽可能特殊，从而不需要覆盖特殊样式。 如果 方法是在主体（body）标签上应用类或 ID。这样做之后，就可以根据页面 或在 : right;} left;} 站点导航中向访问者突出显示当前页面。 样式表。站点范围的 ID（ 在编写 CSS 时特殊性非常 ，假设希望站点上大多数表单的宽度是 30em，但是搜索表单的宽度只有 15em： form{ width: 30em;} form#search{ width: 15e 在创建新表单时，不需要为修改 上，会发现例外情况越来越多。例如，希望登录表单的宽度是 20em，大型应用程序表单的宽度是 40em。 每当创建更特殊的样式时，可能需要覆盖一些一般规则。这可能需要一些额外的代码。而且，因为元素可以 从许多地方获得样式，情况可能变得非常复杂。 为了避免过分混乱，我尽量保持一般性样式非 发现不得不多次覆盖一般样式，那么从一般规则中删除需要覆盖的声明，并且将它显式地应用于需要它 的每个元素，这样可能比较简单。 3. 在主体标签上添加类或 ID 一种有意思的使用特殊性的 站点范围内覆盖样式。例如，如果希望主页具有与站点其余部分不同的布局，那么可以在主页的主体元 素上添加一个类名，并且使用它覆盖样式： #content{ float: left;} .homepage #content{ float #nav{ float: right;} .homepage #nav{ float: 在后面你会看到如何使用这种技术在 在站点的每个页面上添加一个 ID，这样用户就能够用自己的用户样式表覆盖你的 俗称为 CSS 签名）一般采用 id="www-sitename-com"格式。用户至少可能希望覆盖你选择的字号或颜色 方案，从而让站点更容易阅读。为此，他们可以将以下规则添加到自己的用户样式表中： body#www-andbudd-com{ 19
精通CSS:高级WB标准解决方案 基础知识 font-size: 200%: background-color: black 但是,不只如此。CSS签名使用户能够完全重新设置你的站点的样式。他们可以隐藏自己不喜欢的元素、 修改布局或采用全新的设计。 1.2.5继承 人们常常将继承和层叠混为一谈。尽管它们初看上去有点儿相似,但是这两个概念实际上是很不一样的 幸运的是,继承是一个非常容易理解的概念。应用样式的元素的后代会继承样式的某些属性,比如颜色或字 号。例如,如果将主体元素的文本颜色设置为黑色,那么主体元素的所有后代也显示黑色的文本。对于字号, 也是这样的。如果将主体的字号设置为14像素,那么页面上的所有内容应该会继承这个字号。我说“应该 会”是因为 Windows的IE和 Netscape在继承表格中的字号方面有问题。为了解决这个问题,必须指定表格 应该继承字号,或者在表格上单独设置字号。 如果在主体上设置字号,你会注意到页面上的标题没有采用这个样式。你可能会认为标题没有继承文本 字号。但是,实际上是浏览器的默认样式表设置了标题字号。直接应用于元素的任何样式总会覆盖继承的样 式。这是因为继承的样式的特殊性为空。 继承非常有用,因为它使开发人员不必在元素的每个后代上添加相同的样式。如果打算设置的属性是 个继承的属性,那么也可以将它应用于父元素。可以编写: p, div, h1, h2, h3, ul, ol, dl, li color: black 但是下面的写法更简单 body( color: black: 1 正如恰当地使用层叠可以简化CSS,恰当地使用继承也可以减少代码中选择器的数量和复杂性。但是 如果大量元素继承各种样式,那么判断样式的来源就会变得困难。 1.3规划、组织和维护样式表 站点越大、越复杂、图形越丰富,CSS就越难管理。在本节中,将讨论管理代码的方法,包括将文件分 割为多个样式表、按逻辑对样式进行分组以及通过添加注释使代码更容易阅读。 1.3.1对文档应用样式 可以将样式放在 style标签之间,从而直接在文档头上添加样式,但是,这不是对文档应用样式的好方 法。如果要创建使用相同样式的另一个页面,那么就不得不在新页面上复制CSS。如果以后要修改样式,那 么就不得不在两处进行修改,而不是在一处。幸运的是,CSS允许将所有样式放在一个或多个外部样式表中。 将外部样式表附着到网页上有两种方法。可以链接它们,也可以导入它们 <link href=css/basic css" rel="stylesheet" type="text/css"/> style type=text/css"> @import url(css/advanced. css") </ style〉 Netscape4等老式浏览器不理解导入。因此,可以使用导入对老式浏览器隐藏它们不理解的复杂样式。 在前面的示例中,链接了一个简单的样式表,其中包含大多数浏览器都能理解的基本样式。然后导入了一个 比较高级的样式表,其中包含比较复杂的样式,比如浮动和定位布局。可以利用这种方法分别为老式浏览器 和比较现代的版本创建不同的设计。 互联网的一些图片,在转换的过程中,不可避免地存在一些文字错误,仅供大家学习时参考,请购买原版书。 起点网络提供webttt.com 作者: Andy bude
精通 CSS : 高级 WEB 标准解决方案 第一章 基础知识 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原版书。 起点网络提供 webttt.com 作者： Andy Budd black; ，不只如此。CSS 签名使用户能够完全重新设置你的站点的样式。他们可以隐藏自己不喜欢的元素、 修改 2.5 继承 承和层叠混为一谈。尽管它们初看上去有点儿相似，但是这两个概念实际上是很不一样的。 幸运 的标题没有采用这个样式。你可能会认为标题没有继承文本 字号 在元素的每个后代上添加相同的样式。如果打算设置的属性是一 个继 简化 CSS，恰当地使用继承也可以减少代码中选择器的数量和复杂性。但是， 如果 3 规划、组织和维护样式表 CSS 就越难管理。在本节中，将讨论管理代码的方法，包括将文件分 割为 3.1 对文档应用样式 签之间，从而直接在文档头上添加样式，但是，这不是对文档应用样式的好方 法。 t url("css/advanced.css"); e> 等老式浏览器不理解导入。因此，可以使用导入对老式浏览器隐藏它们不理解的复杂样式。 在前 font-size: 200%; background-color: color: white; } 但是 布局或采用全新的设计。 1. 人们常常将继 的是，继承是一个非常容易理解的概念。应用样式的元素的后代会继承样式的某些属性，比如颜色或字 号。例如，如果将主体元素的文本颜色设置为黑色，那么主体元素的所有后代也显示黑色的文本。对于字号， 也是这样的。如果将主体的字号设置为 14 像素，那么页面上的所有内容应该会继承这个字号。我说“应该 会”是因为 Windows 的 IE 和 Netscape 在继承表格中的字号方面有问题。为了解决这个问题，必须指定表格 应该继承字号，或者在表格上单独设置字号。 如果在主体上设置字号，你会注意到页面上 。但是，实际上是浏览器的默认样式表设置了标题字号。直接应用于元素的任何样式总会覆盖继承的样 式。这是因为继承的样式的特殊性为空。 继承非常有用，因为它使开发人员不必 承的属性，那么也可以将它应用于父元素。可以编写： p,div,h1,h2,h3,ul,ol,dl,li{ color: black;} 但是下面的写法更简单： body{ color: black;} 正如恰当地使用层叠可以 大量元素继承各种样式，那么判断样式的来源就会变得困难。 1. 站点越大、越复杂、图形越丰富， 多个样式表、按逻辑对样式进行分组以及通过添加注释使代码更容易阅读。 1. 可以将样式放在 style 标 如果要创建使用相同样式的另一个页面，那么就不得不在新页面上复制 CSS。如果以后要修改样式，那 么就不得不在两处进行修改，而不是在一处。幸运的是，CSS 允许将所有样式放在一个或多个外部样式表中。 将外部样式表附着到网页上有两种方法。可以链接它们，也可以导入它们： <link href="css/basic.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- @impor --> </styl Netscape 4 面的示例中，链接了一个简单的样式表，其中包含大多数浏览器都能理解的基本样式。然后导入了一个 比较高级的样式表，其中包含比较复杂的样式，比如浮动和定位布局。可以利用这种方法分别为老式浏览器 和比较现代的版本创建不同的设计。 20