Web程序设计精品教学课件：chapter-11.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * 11.3.2 内部样式表 基本语法 head style type=＂text/css＂ !-- 选择符{样式属性:取值;样式属性:取值;…} 选择符{样式属性:取值;样式属性:取值;…} …… -- /style /head 11.3.2 内部样式表 语法说明 ? style标记用来说明所要定义的样式。 ? type=＂text/css＂说明这是一段CSS样式表代码。 ? !--与--标记的加入是为了防止一些不支持CSS的浏览器，将style与/style之间的CSS代码当成普通的字符串显示在网页中。 ? 选择符也就是样式的名称，这里的选择符可以选用HTML标记的所有名称。 11.3.2 内部样式表 特点 内部样式表方法就是将所有的样式表信息都列于HTML文件的头部，因此这些样式可以在整个HTML文件中调用。如果想对网页一次性加入样式表，即可选用该方法。 11.3.3 嵌入样式表 基本语法 head … /head body … HTML标记 style=＂样式属性:取值;样式属性:取值;…＂ … /body 11.3.3 嵌入样式表 语法说明 ? HTML标记就是页面中标记HTML元素的标记，例如body、p等。 ? style参数后面引号中的内容就相当于样式表大括号里的内容。需要指出的是，style参数可以应用于HTML文件中的body标记，以及除了basefont、param和script之外的任意元素。 11.3.3 嵌入样式表 特点 利用这种方法定义的样式，其效果只能控制某个标记。所以比较适用于指定网页中某小段文字的显示风格，或某个元素的样式。 11.3.4 导入外部样式表 基本语法 head style type=”text/css” @import url（外部样式表文件地址）； … /stytle … /head 11.3.4 导入外部样式表 语法说明 ? Import语句后面的“；”是不可省略的。 ? 外部样式表文件的文件扩展名必须为.css。 ? 样式表地址可以是绝对地址，也可以是相对地址。 11.3.4 导入外部样式表 特点 在使用中，某些浏览器可能会不支持导入外部样式表的@import声明。所以此方法不经常用到。 11.4 编写CSS文件 11.4.1 编写头部的CSS 11.4.2 编写主体的CSS 11.4.3 编写外部的CSS 11.4.1 编写头部的CSS 实例代码 11.4.1 编写头部的CSS 在上面代码中的head与/head之间插入如下代码。 11.4.1 编写头部的CSS 网页效果 11.4.2 编写主体的CSS 实例代码 11.4.2 编写主体的CSS 网页效果 11.4.3 编写外部的CSS1．应用链入外部样式表方法在HTML文件内调用外部定义的CSS文件 编写CSS文件的代码 11.4.3 编写外部的CSS1．应用链入外部样式表方法在HTML文件内调用外部定义的CSS文件 建立一个新的HTML文件，并链接到上面定义的CSS文件上 11.4.3 编写外部的CSS1．应用链入外部样式表方法在HTML文件内调用外部定义的CSS文件 网页效果 11.4.3 编写外部的CSS2．应用导入外部样式表方法在HTML文件内调用外部定义的CSS文件 建立如下的HTML文件 11.4.3 编写外部的CSS2．应用导入外部样式表方法在HTML文件内调用外部定义的CSS文件 再建立单独的CSS文件 11.4.3 编写外部的CSS2．应用导入外部样式表方法在HTML文件内调用外部定义的CSS文件 网页效果 * * * * * * * * * * * Web程序设计 第 章 11 第11章 CSS样式表基础 11.1 CSS的概述 11.2 CSS的使用 11.3 插入CSS样式表 11.4 编写CSS文件 11.1 CSS的概述 11.1.1 CSS基本概念 11.1.2 CSS的特性 11.1 CSS的概述 概述CSS的作用 ? 内容和样式的分离，使得网页设计趋于明了、简洁。 ? 弥补HTML对标记属性控制的不足，如：背景图像重复的控制和标题大小的控制等。在HTML中可控制的标题仅有7级，即h1~~h7，而利用CSS可以任意设置标题大小。 ? 精确控制网页布局，如行间距、字间距、段落缩进和图片定位等属性。 ? 提高网页效率，因为多个网页同时应用一个CSS样式，即减少了代码的下载，又提高了浏览器的浏览速度和网页的更新速度。如图11-1中的网页，内容已定，如果CSS样式不满意，