第6章 网页表现语言—CSS.ppt

动态HTML是HTML、层叠样式表CSS和脚本语言的组合。 6.1 CSS简介 CSS （Cascading Style Sheet层叠样式表）是一种具有层次性的形式设置。 CSS作用在于让网页设计者在网页编排与空间配置上有更大的弹性。它的主要用途是定义网页数据的编排、显示、格式化及特殊效果。 在CSS的配合下，HTML语言如虎添翼，发挥出了更大的效用。 6.1.1 CSS的概念 样式就是格式，在网页中，像文字的大小、色彩以及图片位置等，都是设置显示内容的样式。 层叠是指当在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。 CSS就是让内容和样式分离开来，让HTML标记只控制网页的内容，而内容的样式则交由CSS来控制。 在运用Style Sheet时，首先将内容的样式交给CSS来定义好，而HTML标记把事先定义好的样式直接用，只要负责内容的结构，不必再定义内容的样式。 当多个网页采用相同的外观样式时，只要建立一个定义样式的CSS文件，让HTML调用这个CSS文件所定义的样式即可。 多个网页调用同一个CSS文件 优点： 利用CSS制作和管理网页都非常方便 CSS可以更加精细地控制网页的内容 CSS样式比HTML更加丰富多彩 CSS定义样式的方法灵活多样 举例：LINE-HEIGHT的属性变化 定义方法： 在HTML文件内部定义、在HTML文件外部定义、分标记定义、分段定义。 6.1.2 在网页中插入CSS的方法 当浏览器读取样式单时，要依照文本格式来读，可以使用4种方法把样式单加入到网页中：行内样式、内嵌一个样式单、链接到一个外部的样式单文件和导入多个外部样式单文件。 1.行内样式 即在HTML的各个标记中加入CSS标记内容。 当只想加强网页中的某一个段落时，可以直接把样式定义加入HTML文件，这时，必须用到HTML标记的STYLE属性。 标记 style=属性:属性值; 属性:属性值 ... 举例：HTML文件中加入Style Sheet 第三版教材【例4-1】 2. 在HTML文件的HEAD标记内嵌入CSS的定义 利用STYLE…/STYLE标记，将它集中放在HEAD标记内，不但可以展现CSS的风格，在管理HTML上也显得井然有序。 一般形式：STYLE…/STYLE 属 性： TITLE=“…” 提示文字 TYPE=“…” 指定样式表的MIME类型 样式表 举例1 举例2 ：对标记直接定义 举例3、第三版教材【例4-2】 除了在style.../style内分别定义各种选择符的样式外，如果多个选择符具有相同的样式，可以采用组合选择符，以减少重复定义的麻烦。其格式为： head ... style type=text/css !-- 选择符1, 选择符2, ... , 选择符n{属性:属性值; 属性:属性值; ... } -- /style ... /head 第三版教材【例4-3】 3.将CSS嵌入或链接至HTML文件 如果有数个HTML文件要共用相同的CSS，为了避免重复定义样式表，可以将样式单定义在单独的文本文件，然后将其嵌入或连接至HTML文件。 这样的设计能够有效的管理整个网页，HTML标记只负责文章内容的结构，而CSS控制版面编排，将网页的文字内容与网页的版面设计分开处理。最后将CSS所定义的形式以Link的方式和HTML结合在一起。 LINK标记的用途是定义目前文件与其他文件之间的关联，它必须放在HTML文件的头标记HEAD内。 格式为： head ... link rel=stylesheet href=样式单文件名.css type=text/css / ... /head 样式单文件的格式为： 选择符1{属性:属性值; 属性:属性值; ... } /* 注释内容 */ 选择符2{属性:属性值; 属性:属性值; ... } ... 选择符n{属性:属性值; 属性:属性值; ... } 举例：CSS文件连接到HTML文件 样式表、举例：链接外部样式表 第三版教材【例4-4】：链接外部样式表 4. 导入多个外部样式单文件 指在嵌入样式单的style.../style中