《JavaScript程序设计基础教程 教学课件 PPT 作者 曾海 第9章 CSS+DIV技术》由会员分享，可在线阅读，更多相关《JavaScript程序设计基础教程 教学课件 PPT 作者 曾海 第9章 CSS+DIV技术（62页珍藏版）》请在金锄头文库上搜索。
1、课件制作人：,第9章 CSS+DIV技术,【学习目标】,制作网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变整个页面的风格。通过本章的学习，读者可以达到以下学习目的： 了解什么是CSS 掌握样式的定义及使用 掌握Style对象 掌握CSS属性 学会使用CSS+DIV美化与布局页面,课件制作人：,【学习导航】,首先介绍什么是CSS，样式的定义与使用，接着重点讲解Style对象，CSS属性，最后介绍如何使用CSS+DIV美化与布局页面。本章在书中的学习位置如图9.1所示。,课件制作人：,【知识框架】,本章学习内
2、容知识框架如图9.2所示。,课件制作人：,本章目录,9.1 CSS简介 9.2 样式定义 9.3 使用样式 9.4 Style对象 9.5 CSS属性 9.6 CSS+DIV美化与布局页面,课件制作人：,9.1 CSS简介,CSS就是一种叫做样式表（style sheet）的技术，也有人称之为层叠样式表（Cascading Style Sheet）。制作网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变整个页面的风格。 CSS样式表的特点如下： （1）将显示格式和文档结构分离 HTML语言定义文档的结构和各要
3、素的功能，而层叠样式表将定义格式的部分和定义结构的部分分离，能够对页面的布局进行灵活的控制。 （2）对HTML语言处理样式的最好补充 HTML语言对页面布局上的控制很有限，如精确定位、行间距或者字间距等；CSS样式表可以控制页面中的每一个元素，从而实现精确定位，CSS样式表控制页面布局的能力逐步增强。 （3）体积更小加快网页下载速度 样式表是简单的文本，文本不需要图像，不需要执行程序，不需要插件。这样层叠样式表就可以减少图像用量、减少表格标签及其他加大HTML体积的代码，从而减小文件尺寸加快网页的下载速度。 （4）实现动态更新、减少工作量 定义样式表，可以将站点上的所有网页指向一个独立的CSS
4、样式表文件，只要修改CSS样式表文件的内容，整个站点相关文件的文本就会随之更新，减轻了工作负担。 （5）支持CSS的浏览器增多 样式表的代码有很好的兼容性，只要是识别串接样式表的浏览器就可以应用CSS样式表。当用户丢失了某个插件时不会发成中断；使用老版本的浏览器代码不会出现乱码的情况。,课件制作人：,9.2 样式定义,样式定义的格式 选择符的分类,课件制作人：,样式定义的格式,定义CSS的语句形式如下： selector property:value;property:value; SELECTOR：选择符。 当多个对象具有相同的样式定义时，多个对象之间可以用逗号分隔，例如： tr,thfon
5、t:12px;margin:20px;font-color:#336699 这里要注意，样式列表中的注释应写在“/* */ ”之间。,课件制作人：,选择符的分类,在CSS样式中有3种选择符分别是： （1）HTML选择符 HTML选择符就是HTML的标记符，例如P、BODY、A等。如果用CSS定义了他们，那么在整个网页中，该标识的属性都应用定义中的设置。HTML选择符的定义方法如下： tagproperty:value 例如，设置表格的单元格内的文字大小为9pt，颜色为蓝色的CSS代码如下： td font-size: 9pt; color: blue; CSS可以在一条语句中定义多个选择符，例
6、如：将段落文本和单元格内的文字设置为蓝色的CSS代码如下： td,pcolor: blue;,课件制作人：,选择符的分类,（2）Class选择符 Class选择符可以分为两种，一种是相关的class selector，它只与一种HTML标记有关系。它的语法格式如下： Tag.Classnameproperty:value 例如，让一部分而不是全部H1的颜色是红色，可以使用以下代码： H1.redonecolor:red 吉林省明日科技有限责任公司 This is H1. 第二种是独立Class选择符，它可以被任何HTML标记所应用。 它的语法格式如下： .Classnameproperty:v
7、alue 例如，可以将样式blueone应用于H2和P中的代码如下： .blueonecolor:bule 有雨的日子 不知是无意还是天意，有你的日子总有雨！ 显然Class选择符应用起来会方便得多。,课件制作人：,选择符的分类,（3）ID选择符 ID选择符其实与独立的Class选择符的功能一样，而他们的区别在于语法和用法不同。它的语法格式如下： #IDnameproperty:value ID选择符的用法是在HTML标记中应用ID属性引用CSS样式。例如： #redonecolor:red 红色热情 黑色神秘 由于以上代码中的“红色热情”使用ID标识引用redone样式，所以文字“红色热情”
8、是红色的，而文字“黑色神秘”则仍采用默认颜色。 PROPERTY：就是那些将要被修改的属性，例如color。 VALUE：PROPERTY的值，比如color的属性值可以是red。,课件制作人：,9.3 样式定义,嵌入样式表 链接外部样式表 引入外部的样式表 内嵌样式 CSS样式的优先级,课件制作人：,嵌入样式表,用标记将样式表嵌入在HTML文件的头部。标记的属性type指明样式的类别，除了CSS样式表外，还有Netscape浏览器使用的JSS（JavaScript Style Sheets，Java脚本样式表）样式表，其样式类别为text/javascript；type的默认值为text/c
9、ss。标记内定义的前后加上注释符的作用是使不支持CSS的浏览器忽略样式表的定义。嵌入样式表的作用范围是在本HTML文件内。,课件制作人：,链接外部样式表,如果多个HTML文件要共享样式表，可以将样式表定义为一个独立的CSS样式文件。HTML文件在头部用标记链接到CSS样式文件。 例如，在HEAD标记里用标记链接CSS样式文件，代码如下： ,课件制作人：,引入外部的样式表,这种方式是在HTML文件的头部标记之间，用CSS样式表的import声明引入外部样式表，格式如下。 import URL(“外部样式文件名“); 例如，应用import声明引入外部样式表，代码如下： import URL(“s
10、tyle1.css“); import URL(“http:/ 引入外部样式表的使用方式与链接到外部样式表很相似，都是将样式定义保存为单独文件。两者的本质区别是：引入方式在浏览器下载HTML文件时将样式文件的全部内容拷贝到import关键字位置，以替换该关键字；而链接到外部的样式表方式仅在HTML文件需要引用CSS样式文件中的某个样式时，浏览器才链接样式文件，读取需要的内容并不进行替换。,课件制作人：,内嵌样式,这种方式是在HTML标记中，将定义的样式规则作为标记style属性的属性值。样式定义的作用范围仅限于此标记范围之内。一个内嵌样式的应用如下： 要在一个HTML文件中使用内联样式，必须在
11、该文件的头部对整个文件进行单独的样式表语言声明，声明如下： 内嵌样式主要应用于样式仅适用于单个页面元素的情况。它将样式和要展示的内容混在一起，自然会失去一些样式表的优点。所以建议这种方式应尽量少用。,课件制作人：,CSS样式的优先级,当对同一段文本应用多个层叠样式表样式时，文本中的元素将遵循样式表的作用优先顺序依次调用样式。 样式表的作用优先顺序遵循以下原则： （1）内联样式中所定义样式的优先级最高。 （2）其他样式按其在HTML文件中出现或者被引用的顺序，遵循就近原则，靠近文本越近的优先级越高。 （3）选择符的作用优先顺序为：上下文选择符、类选择符、ID选择符，优先级依次降低。 （4）未在任
12、何文件中定义的样式，将遵循浏览器的默认样式。,课件制作人：,CSS样式的优先级,依照以上原则对下面的示例进行分析。 代码中针对标记定义了3个样式表， 标记包含3个标记。第1个标记根据原则1、2条，套用的样式值为：“color：#6699FF”，“font-size：16px”，“text-align：center”。样式表定义的类选择器p.class1，只有class属性为class1的标记才使用，第2个标记套用的样式值为：“color：green”，“font-size：12px”，“text-align：center”。第3个标记中不含有class和style属性，套用的样式值为：“col
13、or：red”，“font-size：16px”，“text-align：center”。程序代码如下。 pcolor:red;font-size:24px; p.class1color:green;font-size:12px; pfont-size:16px;text-align:center; 第一段文字 第二段文字 第三段文字 样式表的作用顺序是较为复杂的，特别是同时引用多个样式文件时，应十分注意。如果希望一个属性的值不被其他样式定义中相同的属性所定义的值覆盖，可用特定参数!import，如将上例第一个p样式定义为： pcolor:red;font-size:24px !import;
14、 则浏览器显示的“第一段文字”、“第二段文字”、“第三段文字”的字号都为24px。,课件制作人：,9.4 Style对象,Style元素对象是HTML对象的一个属性。Style元素对象提供了一组对应于浏览器所支持CSS属性的属性（如background 、fontSize和borderColor等）。每一个HTML对象都有一个style属性，可以使用这个属性访问CSS样式属性。 例9.1 一般网站中都有很多超链接，当鼠标移动到某一超链接上时，此超链接就会以不同的字体样式显示，例如超链接的字体样式显示为斜体、粗体、下划线、删除线或是粗斜体等，效果如图9.1所示。,课件制作人：,9.4 Style
15、对象,下面将通过JavaScript改变超链接字体样式，主要应用字体样式中的fontWeight、fontStyle以及textDecoration属性，程序代码如下： /当鼠标移动到超链接时改变指定链接的字体样式 function onmovein(v) if (v=“a“) a.style.fontWeight = “Bold“; /粗体 if (v=“b“) b.style.fontStyle = “Italic“; /斜体 if (v=“c“) c.style.textDecoration = “underline“; /下划线 if (v=“d“) d.style.textDecoration = “line-through“; /删除线 if (v=“e“) e.style.fontWeight = “Bold“; /粗体 e.style.fontStyle = “Italic“; /斜体 /当鼠标移出超链接时，恢复超链接的字体样式 function onmoveout() a.style.fontWeight = “normal“; b.style.fontStyle = “normal“; c.style.textDecoration = “none“; d.style.textDecoration = “none“; e
