第9讲网页布局与CSS-浙江林学院课件.ppt

1、第10讲 网页布局与CSS网页设计与编程网页布局与层叠样式表 样式表的概念并不是新创造的，文字处理器和桌面印刷系统长期以来都在使用做某种特殊样式的排版样式表最重要的作用是提供了一种能使所有Web页面的样式保持一致的方法CSS的必要性 许多HTML元素都有外观属性，如果在元素中没有指定相应的值，那么浏览器将使用这些属性的默认值。例如，元素中包含font-size属性，某个浏览器可能将这个属性的默认值设定为30个点（pt）而通过样式表则可以将该默认值更改为26个，这种改动可以只对某个元素有效，也可以对这个文档中所有的元素都有效。CSS的必要性样式表的某些功能可能需要借助元素的各种属性、字体的样式以

2、及字体的尺寸元素来实现然而，利用样式表可以对这些样式说明进行更精确、更一致的描述目前已经不提倡直接绝大多数用于描述外观的元素属性，而是建议使用样式表。样式表的层次样式表的三个层次按照从低层到高层的顺序依次是:n内置(inline)样式表n文档层(document level)样式表n外部(external)样式表。样式表的层次 HTML样式表之所以被称为层叠样式表，是因为文档样式可以三个不同层次上进行定义低层样式表可以取代高层样式表，所以某个元素内容的样式是由样式表的叠加来确定的。样式表的层次n内置样式表适用于单个元素的内容n文档层样式表适用于整个文档的主体n外部样式表则可以应用在多个文档的主

3、体中。在使用时，内置样式表优先于文档样式表，而文档样式表又优先于外部样式表。在出现冲突的情况下，低层次的样式表具有使用上的优先权。CSS可能遇到的问题与元素和元素属性所面临的情况一样，某种特殊的浏览器可能不能处理样式表中指定的一些属性值。对于这种情况，浏览器要么用一个可选择的值进行替代，要么将简单地忽略所给出的这些属性值。内置样式内置样式说明出现在元素中，并且仅适用于那个元素中的内容。这种细粒度的样式应用背离了样式表的主要设计思想对完整文档的各种元素进行样式统一对内置样式说明应当谨慎使用。文档层样式文档层样式说明出现在文档的头部分，并且适用于文档的整个主体。这是对文档所有内容的显示外观进行格式

4、统一的一种方法。外部样式表在网站建设中，往往希望网站的整体风格能够一致，这就是外部样式表的主要应用目的外部样式表并不是它们所适用的文档的一部分。外部样式表单独存储，并且在所有使用它们的文档中都要进行说明。外部样式表可以用MIME类型text/css将外部样式表编写成一些文本文件，它们可以存储在因特网上的任何一台计算机中，浏览器获取外部样式表就如同获取文档一样。网页首部的元素也可用于指定外部样式表，在元素中，rel属性用于指定被链接的文档与包含该链接的文档之间的关系，而href属性用于指定样式表文档的URL地址外部样式表的引用指向一个外部样式表的链接必须放在指向一个外部样式表的链接必须放在HTM

5、L基本文档的头部（基本文档的头部（header容器容器中）。中）。样式说明格式 一个样式说明的格式取决于该样式表的层次。在一个元素中内置样式说明是以style属性值的形式出现的，其一般形式如下：style=“property_1:value_1；property_2:value_2;.;property_n:value_n;”样式说明格式内置样式说明的作用范围只限于所处元素中的内容部分。文档层样式说明在文 档 头 部 以 一 个元素内容的形式出现，该说明的格式与内置样式表的格式有很大的区别。样式说明格式在元素中内容的一般形式如下：样式说明格式元素中的type属性向浏览器指明了在元素中样式说明的

6、类型。在上面这个例子中，type属性被设置成“text/css，即层叠样式表。由于还有许多其他类型的样式表，因此样式说明的类型还是必要的。样式说明格式注意，元素中的规则列表是出现在HTML注释中的。由于这些规则列表并不是真正的HTML，在规则列表中所包含的是提供给浏览器的有关外观样式的信息，而不是使用者看到的内容。元素的注释由于元素的内容是一个HTML注释，所以必须使用一种不同的方法在元素的内容中添加真正的注释在元素中这种注释由“/*”开始至“*/”结束。规则列表-rule_list规则列表中的样式规则均包含两部分：n选择器(selector)n列表前者用于指出受规则影响的一个或多个元素，后者

7、由若干成对的属性/值组成。规则列表-rule_list与元素属性的属性/值不同(在元素符属性的每一对属性/值中，两个部分之间使用等号相分隔，而所形成的列表使用双引号进行界定)；在一个样式规则中，样式属性一值的各部分使用冒号相分隔，而所形成的列表则出现在大括弧之间。规则列表-rule_list一 个 样 式 规 则 的 格 式 如 下 所 示：tag_name_listproperty_1:value_1；property_2：value_2；property_n：value_n其中，其中，tag_name_list可以是单个元素可以是单个元素名称，或一个用逗号相隔的若干元素名名称，或一个用逗号

8、相隔的若干元素名称的列表。称的列表。规则列表-rule_listtag_name_listproperty_1:value_1；property_2：value_2；property_n：value_n这里所用的词是元素名称，而不是元素，因此并没有包含尖括号。如果某个属性被赋予了若干个值，那么这些值通常使用空格进行分隔，但是某些属性使用逗号分隔这些属性值。规则列表-rule_list外部样式表的格式与文档样式表的格式相类似，这个外部文件由样式规则的列表构成。通常情况下，一个样式属性在样式表的作用范围内适用于所有的元素，一个内置样式表的作用范围是元素中所包含的内容。对于文档样式表来说，其作用范围

9、是文档的主体，而对于外部样式表来说，其作用范围则是所有使用它的文档的主体。样式类 样式类允许在不同地方出现的同一个元素使用来自文档样式表或外部样式表不同样式说明通过在元素中给定一个名称来对样式类进行定义，这个名称用一个句点与元素的名称相连。样式类例如，在某个文档中如果需要设置两种段落样式，譬如normal和special，那么可以在元素的注释中定义这两个类，形式如下：p.normalproperty-value listp.specialproperty-value list样式类然后可以有如下的代码：这个问题是可以用这个问题是可以用”普通普通”的风格进行展示的风格进行展示那个问题是可以用那个

10、问题是可以用”特殊特殊”的风格进行展示的风格进行展示样式类有时候需要一种能作用于若干元素的内容的样式说明类，这可以使用一个普通类实现，在定义这个普通类的时候，它的名称中不包括元素的名称，而用一个以句点开头的通用类的名称替代元素的名称。例如：.italic font-style:italic样式类然后在某个文档的主体中可以包含下面这些代码：第第3章章首先首先,需要注意的是需要注意的是:但是但是,还需要提醒的是还需要提醒的是:属性和属性值 HTML元素中的属性可以分成六大类：n字体n颜色及背景n文本n边框与布局n列表n元素符等。属性和属性值属性值可以有多种表示形式。当关键字属性值的可选范围有限并且

11、均进行了预定义，那么就可以使用这些关键字属性值，例如underline和small。属性和属性值属性值度量标准与前述相同。但长度属性值后面必须紧跟着用两个字符的缩写词表示的单位名，在数字和单位名之间不能留有空格。可能出现的单位名包括：px(像素)/in(英寸)/cm(厘米)/mm(毫米)/pt(点)和百分比，百分比形式的值是在数字后面加上百分号。属性和属性值URL属性值的形式与链接中所使用的URL的形式则不同，这些URL属性值的一般形式如下：url(protocol:/server/pathname)n在url与左括号之间不能留有空格。属性和属性值在元素中定义属性值之后，该元素中内嵌的所有元素

12、将通过继承获得这些属性值。因此，在元素中使用一个内置样式表设置某个属性值将会有效地影响整个文档中该属性值的设置。除非发生属性值的替代现象，否则文档中的每个元素都将继承中的属性值。和元素在许多情况下，要求某些特殊的字体属性只应用于整个段落中的部分文本。例如，将同一行中的某个字或词组使用不同的字体尺寸或颜色显示出来通常是很有帮助的。元素元素就是针对此目的设计的。例如，在下例中，“全面”这个词与段落中的其他部分并没有区别显示。能够对文本进行能够对文本进行全面全面控制是一件很控制是一件很有意思的事有意思的事元素元素的惟一用法是使用内置样式表更改属性值，例如：能够对文本进行能够对文本进行全面全面控制是一件很有意思的事控制是一件很有意思的事 元素在网页中，节是很常见的形式，每节由若干段落构成，而且每节都有各自的外观表示样式。虽然在段落中使用样式类。然而，往往在设计中希望不仅是对各个段落，而且可以对网页中的节进行样式设置。这里，元素可以实现这个要求。因此它的主要用途是指定网页中某节或某区域的外观展示细节。小结本讲主要介绍CSS的用途、特点 CSS可以用来控制网站的风格样式类同一个元素使用来自文档样式表或外部样式表的样式说明CSS中HTML元素的属性、属性值表达方法的基本用途