第10讲 网页布局与CSS
《网页设计与编程》
网页布局与层叠样式表
样式表的概念并不是新创造的,文字处理器和桌面印刷系统长期以来都在使用做某种特殊样式的排版
样式表最重要的作用是提供了一种能使所有Web页面的样式保持一致的方法
CSS的必要性
许多HTML元素都有外观属性,如果在元素中没有指定相应的值,那么浏览器将使用这些属性的默认值.
例如,元素中包含font-size属性,某个浏览器可能将这个属性的默认值设定为30个点(pt)
而通过样式表则可以将该默认值更改为26个,这种改动可以只对某个元素有效,也可以对这个文档中所有的元素都有效.
CSS的必要性
样式表的某些功能可能需要借助元素的各种属性,字体的样式以及字体的尺寸元素来实现
然而,利用样式表可以对这些样式说明进行更精确,更一致的描述
目前已经不提倡直接绝大多数用于描述外观的元素属性,而是建议使用样式表.
样式表的层次
样式表的三个层次按照从低层到高层的顺序依次是:
内置(inline)样式表
文档层(document level)样式表
外部(external)样式表.
样式表的层次
HTML样式表之所以被称为层叠样式表,是因为文档样式可以三个不同层次上进行定义
低层样式表可以取代高层样式表,所以某个元素内容的样式是由样式表的叠加来确定的.
样式表的层次
内置样式表适用于单个元素的内容
文档层样式表适用于整个文档的主体
外部样式表则可以应用在多个文档的主体中.
在使用时,内置样式表优先于文档样式表,而文档样式表又优先于外部样式表.
在出现冲突的情况下,低层次的样式表具有使用上的优先权.
CSS可能遇到的问题
与元素和元素属性所面临的情况一样,某种特殊的浏览器可能不能处理样式表中指定的一些属性值.
对于这种情况,浏览器要么用一个可选择的值进行替代,要么将简单地忽略所给出的这些属性值.
内置样式
内置样式说明出现在元素中,并且仅适用于那个元素中的内容.
这种细粒度的样式应用背离了样式表的主要设计思想——对完整文档的各种元素进行样式统一
对内置样式说明应当谨慎使用.
文档层样式
文档层样式说明出现在文档的头部分,并且适用于文档的整个主体.
这是对文档所有内容的显示外观进行格式统一的一种方法.
外部样式表
在网站建设中,往往希望网站的整体风格能够一致,这就是外部样式表的主要应用目的
外部样式表并不是它们所适用的文档的一部分.外部样式表单独存储,并且在所有使用它们的文档中都要进行说明.
外部样式表

下一页