腾讯星座查询：必威体育精装版专辑在美国的网络。.ppt

第10讲 网页布局与CSS 《网页设计与编程》 网页布局与层叠样式表 样式表的概念并不是新创造的，文字处理器和桌面印刷系统长期以来都在使用做某种特殊样式的排版 样式表最重要的作用是提供了一种能使所有Web页面的样式保持一致的方法 CSS的必要性 许多HTML元素都有外观属性，如果在元素中没有指定相应的值，那么浏览器将使用这些属性的默认值。 例如，h2元素中包含font-size属性，某个浏览器可能将这个属性的默认值设定为30个点（pt） 而通过样式表则可以将该默认值更改为26个，这种改动可以只对某个h2元素有效，也可以对这个文档中所有的h2元素都有效。 CSS的必要性 样式表的某些功能可能需要借助元素的各种属性、字体的样式以及字体的尺寸元素来实现 然而，利用样式表可以对这些样式说明进行更精确、更一致的描述 目前已经不提倡直接绝大多数用于描述外观的元素属性，而是建议使用样式表。 样式表的层次 样式表的三个层次按照从低层到高层的顺序依次是: 内置(inline)样式表 文档层(document level)样式表 外部(external)样式表。 样式表的层次 HTML样式表之所以被称为层叠样式表，是因为文档样式可以三个不同层次上进行定义 低层样式表可以取代高层样式表，所以某个元素内容的样式是由样式表的叠加来确定的。 样式表的层次 内置样式表适用于单个元素的内容 文档层样式表适用于整个文档的主体 外部样式表则可以应用在多个文档的主体中。 在使用时，内置样式表优先于文档样式表，而文档样式表又优先于外部样式表。 在出现冲突的情况下，低层次的样式表具有使用上的优先权。 CSS可能遇到的问题 与元素和元素属性所面临的情况一样，某种特殊的浏览器可能不能处理样式表中指定的一些属性值。 对于这种情况，浏览器要么用一个可选择的值进行替代，要么将简单地忽略所给出的这些属性值。 内置样式 内置样式说明出现在元素中，并且仅适用于那个元素中的内容。 这种细粒度的样式应用背离了样式表的主要设计思想——对完整文档的各种元素进行样式统一 对内置样式说明应当谨慎使用。 文档层样式 文档层样式说明出现在文档的头部分，并且适用于文档的整个主体。 这是对文档所有内容的显示外观进行格式统一的一种方法。 外部样式表 在网站建设中，往往希望网站的整体风格能够一致，这就是外部样式表的主要应用目的 外部样式表并不是它们所适用的文档的一部分。外部样式表单独存储，并且在所有使用它们的文档中都要进行说明。 外部样式表 可以用MIME类型text/css将外部样式表编写成一些文本文件，它们可以存储在因特网上的任何一台计算机中，浏览器获取外部样式表就如同获取文档一样。 网页首部的link元素也可用于指定外部样式表，在link元素中，rel属性用于指定被链接的文档与包含该链接的文档之间的关系，而href属性用于指定样式表文档的URL地址 外部样式表的引用 link rel = stylesheet type=”text/css” href=”themes/AutoTheme/style.css”/link 指向一个外部样式表的链接必须放在HTML基本文档的头部（header容器中）。 样式说明格式 一个样式说明的格式取决于该样式表的层次。在一个元素中内置样式说明是以style属性值的形式出现的，其一般形式如下： style = “property_1:value_1；property_2:value_2;...;property_n:value_n;” 样式说明格式 内置样式说明的作用范围只限于所处元素中的内容部分。 文档层样式说明在文档头部以一个style元素内容的形式出现，该说明的格式与内置样式表的格式有很大的区别。 样式说明格式 在style元素中内容的一般形式如下： style type=”text/css” !-- rule_list -- /style 样式说明格式 style元素中的type属性向浏览器指明了在style元素中样式说明的类型。 在上面这个例子中，type属性被设置成“text/css‘’，即层叠样式表。 由于还有许多其他类型的样式表，因此样式说明的类型还是必要的。 样式说明格式 注意，style元素中的规则列表是出现在HTML注释中的。 由于这些规则列表并不是真正的HTML，在规则列表中所包含的是提供给浏览器的有关外观样式的信息，而不是使用者看到的内容。 style元素的注释 由于style元素的内容是一个HTML注释，所以必须使用一种不同的方法在style元素的内容中添加真正的注释 在style元素中这种注释由“/*”开始至“*/”结束。 规则列表----rule_list 规则列表中的样式规则均包含两部分：