西安交通大学：《计算机网络与通讯》课程教学资源（PPT课件讲稿）第10讲 网页布局与CSS

第10讲网页布局与CSs 《网页设计与编程》

第10讲 网页布局与CSS 《网页设计与编程》

网页布局与层叠样式表 ◆样式表的概念并不是新创造的,文字处 理器和桌面印刷系统长期以来都在使用 做某种特殊样式的排版 ◆样式表最重要的作用是提供了一种能使 所有Web页面的样式保持一致的方法

网页布局与层叠样式表 样式表的概念并不是新创造的，文字处 理器和桌面印刷系统长期以来都在使用 做某种特殊样式的排版 样式表最重要的作用是提供了一种能使 所有Web页面的样式保持一致的方法

CSs的必要性 ◆许多HTML元素都有外观属性,如果在元素中 没有指定相应的值,那么浏览器将使用这些属 性的默认值 ◆例如,元素中包含 ont-size属性,某个浏 览器可能将这个属性的默认值设定为30个点 (pt) ◆而通过样式表则可以将该默认值更改为26个 这种改动可以只对某个元素有效,也可 以对这个文档中所有的元素都有效

CSS的必要性 许多HTML元素都有外观属性，如果在元素中 没有指定相应的值，那么浏览器将使用这些属 性的默认值。 例如，元素中包含font-size属性，某个浏 览器可能将这个属性的默认值设定为30个点 （pt） 而通过样式表则可以将该默认值更改为26个， 这种改动可以只对某个元素有效，也可 以对这个文档中所有的元素都有效

CSS的必要性 ◆样式表的某些功能可能需要借助元素的 各种属性、字体的样式以及字体的尺寸 元素来实现 ◆然而,利用样式表可以对这些样式说明 进行更精确、更一致的描述 ◆日前已经不提倡直接绝大多数用于描述 外观的元素属性,而是建议使用样式表

CSS的必要性 样式表的某些功能可能需要借助元素的 各种属性、字体的样式以及字体的尺寸 元素来实现 然而，利用样式表可以对这些样式说明 进行更精确、更一致的描述 目前已经不提倡直接绝大多数用于描述 外观的元素属性，而是建议使用样式表

样式表的层次 ◆样式表的三个层次按照从低层到高层的 顺序依次是: 内置( inline)样式表 ■文档层( document level样式表 外部( externa)样式表

样式表的层次 样式表的三个层次按照从低层到高层的 顺序依次是: ◼ 内置(inline)样式表 ◼ 文档层(document level)样式表 ◼ 外部(external)样式表

样式表的层次 ◆HTML样式表之所以被称为层叠样式表, 是因为文档样式可以三个不同层次上进 行定义 ◆低层样式表可以取代高层样式表,所以 某个元素内容的样式是由样式表的叠加 来确定的

样式表的层次 HTML样式表之所以被称为层叠样式表， 是因为文档样式可以三个不同层次上进 行定义 低层样式表可以取代高层样式表，所以 某个元素内容的样式是由样式表的叠加 来确定的

样式表的层次 ■内置样式表适用于单个元素的内容 文档层样式表适用于整个文档的主体 外部样式表则可以应用在多个文档的主体中 ◆在使用时,内置样式表优先于文档样式 表,而文档样式表又优先于外部样式表 ◆在出现冲突的情况下,低层次的样式表 具有使用上的优先权

样式表的层次 ◼ 内置样式表适用于单个元素的内容 ◼ 文档层样式表适用于整个文档的主体 ◼ 外部样式表则可以应用在多个文档的主体中。 在使用时，内置样式表优先于文档样式 表，而文档样式表又优先于外部样式表。 在出现冲突的情况下，低层次的样式表 具有使用上的优先权

CSS可能遇到的问题 ◆与元素和元素属性所面临的情况一样 某种特殊的浏览器可能不能处理样式表 中指定的一些属性值 对于这种情况,浏览器要么用一个可选 择的值进行替代,要么将简单地忽略所 给出的这些属性值

CSS可能遇到的问题 与元素和元素属性所面临的情况一样， 某种特殊的浏览器可能不能处理样式表 中指定的一些属性值。 对于这种情况，浏览器要么用一个可选 择的值进行替代，要么将简单地忽略所 给出的这些属性值

内置样式 ◆内置样式说明出现在元素中,并且仅适 用于那个元素中的内容。 ◆这种细粒度的样式应用背离了样式表的 主要设计思想—对完整文档的各种元 素进行样式统 ◆对内置样式说明应当谨慎使用

内置样式 内置样式说明出现在元素中，并且仅适 用于那个元素中的内容。 这种细粒度的样式应用背离了样式表的 主要设计思想——对完整文档的各种元 素进行样式统一 对内置样式说明应当谨慎使用

文档层样式 ◆文档层样式说明出现在文档的头部分, 并且适用于文档的整个主体。 ◆这是对文档所有内容的显示外观进行格 式统一的一种方法

文档层样式 文档层样式说明出现在文档的头部分， 并且适用于文档的整个主体。 这是对文档所有内容的显示外观进行格 式统一的一种方法