网络工程 2007 训练项目 图像及动画处理 HTML 基础知识 ? CSS 及应用 ? CSS 及应用 脚本语言 JavaScript 和 VBScript ACCESS 数据库及 SQL 语言 ASP 应用入门 CSS 及其应用 在静态 HTML 页面设计中，对每一种元素，为了改变其默认的外观，我们需要在设计 视图中对选定的元素进行设置， 或者在代码视图加入外观的代码。 这一做法带来的坏处就是： 当以后用户想改变某个页面的外观， 就需要将指定的页面调入编辑器中加以重新编辑， 直到 获得新的效果。在小型网站中，这一做法是可行的，但大型网页成千上万个页面这样编辑显 然是不现实的。 为了能够统一一个网站的风格， 方便网页编辑快速地将网站由一种网络转换 为一种风格，网络设计者提出了层叠样式表（CSS，Cascading Style Sheets） 。 注注：在在进进行行实实验验前前，建建议议先先阅阅读读附附录录的的 C CS SS S 相相关关内内容容（附附后后） ： 1CSS 样式表：是 WEB 页面中单独用来定义外观样式的一类的文件，在普通的 HTML 页 面中，如果给某个元素定义了外观，会在代码生成一些代码： 在设计视图中，我们将文字改为红色： 代码视图中有如下变化： 注意：在上面代码中，有几个变化： （1）文字部分前面增加了; （2）中增加了 说明：当前样式中的颜色为十六进制的红色。 这是样式表应用的最简单的例子。 在实际应用中，我们一般不把样式和页面放在同一个文件中，这样，每个类似网页都要 重新放置相同的代码，为了提高代码的重用性，我们可以单独定义一个文件，用来放置所有 的样式定义，这种文件的扩展一般是 CSS。 CSS的生成一般有两种方式，一是自己写CSS样式表，如在Dreamweaver启动时选择新 建CSS样式表，二是从其它网站得到样式表文件，如图书馆网站中使用了CSS.CSS样式表文 件，可以在浏览器中输入：http:/lib.hytc.edu.cn/css.css，会出现下载文件提示，或者直接用 Dreamweaver打开CSS文件。 这个文件的细节： 如何将外部 CSS 样式表加载到页面中： 在需要挂载 CSS 样式的页面，如 untitled-1.htm 中，点击“文本”菜单： 确定后，可以看到，页面的字体变小了， （12 像素） ，同时在代码视图中，增加了一行： 表示引用了与网页同一目录下的 CSS.CSS 文件。 对样式表元素的引用： 在开始的例子中，我们用 Class 引用了在样式表中以点号（.）开头的一个样式，在样式 表中，实际有三种形式： （1） 以 HTML 中实际存在的名称：如 body，这样在 body 中的所有元素都会以在 body 段定义的样式出现。 （2） 以点号（.）开头样式定义，在网页中引用时，以 “样式名”引用。 （3） 以井号（#）开头的样式定义，在网页中引用时，以 id=”样式名”引用。 示例示例 1： 对上面的 CSS 样式增加几行代码： 注意最后两个样式：.REDCOLOR 和#SHOWCOLOR，在网页中引用时，有如下引用形式： 产生的效果如下： 说明，样式表确实发挥了其作用。 示例示例 2: 将压缩文件”CSS 应用示例-season.rar”中的所有解压到同一文件夹下，查看 sample.htm 的运 行效果： 文件夹下还有一个 season.css 样式表文件，其内容如下： 其中以点号定义了四种样式，spring,summer,autumn 和 winter，每种样式里都单独定义 了背景图片、字符颜色，a:link 里指定了超链接的颜色及背景图片，a:hover 指定了当鼠标放 在超链接上时字符要改变的颜色及背景图片变化。 分析代码及其产生的效果。 在页面中已经 做好了对四种样式的引用，注意的是：以点号定义的样式引用时用 ”，伪类 a 及其它 在页面已经存在的元素直接用名称表示：如 body. 采用示例 1 中的方法将样式表附加到页面文件中，查看效果： 注意每个季节中文字颜色的变化，鼠标放到超链接（春夏秋冬）上时文字和背景的变化。 更多内容请参阅附录及互联网。 附录：来自附录：来自CSS 百度百科：百度百科：http:/baike.baidu.com/view/15916.htm 1 CSS 的发展历史 从 1990 年代初 HTML 被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们 各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者 用的，最初的 HTML 版本只含有很少的显示属性，读者来决定网页应该怎样被显示。 但随着 HTML 的成长，为了满足设计师的要求，HTML 获得了很多显示功能。随着这些功 能的增加外来定义样式的语言越来越没有意义了。 1994 年哈坤利提出了 CSS 的最初建议。伯特波斯（Bert Bos）当时正在设计一个叫做 Argo 的浏览器，他们决定一起合作设计 CSS。 当时已经有过一些样式表语言的建议了，但 CSS 是第一个含有“层叠”的主意的。在 CSS 中，一个文件的样式可以从其它的样式表中继承下来。读者在有些地方可以使用他自己更喜欢 的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活 地加入自己的设计，混合各人的爱好。 哈坤于 1994 年在芝加哥的一次会议上第一次展示了 CSS 的建议，1995 年他与波斯一起 再次展示这个建议。当时 W3C 刚刚建立，W3C 对 CSS 的发展很感兴趣，它为此组织了一次 讨论会。哈坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的主要技术负责 人。1996 年底，CSS 已经完成。1996 年 12 月 CSS 要求的第一版本被出版。 1997 年初，W3C 内组织了专门管 CSS 的工作组，其负责人是克里斯里雷。这个工作组 开始讨论第一版中没有涉及到的问题，其结果是 1998 年 5 月出版的第二版要求。到 2004 年 为止，第三版还未出版。 * 1996 年 W3C 正式推出了 CSS1. * 1998 年 W3C 正式推出了 CSS2. * CSS2.1 是 W3C 现在正在推荐使用的. * CSS3 现在还处于开发中. 2 网页设计中常用的网页设计中常用的 CSS 属性属性 文字或元素的颜色 color 背景颜色 background-color 背景图像 background-image 字体 font-family 文字大小 font-size 列表样式 list 鼠标样式 cursor 边框样式 border 内补白 padding 外边距 margin 等. 3 CSS 的语法的语法 CSS 的定义是由三个部分构成: 选择符(selector)，属性(properties)和属性的取值(value)。 语法: selector property: value (选择符 属性:值) 说明: 选择符是可以是多种形式，一般是你要定义样式的 HTML 标记，例如 BODY、P、 TABLE，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开: 例子:body color: black，此例的效果是使页面中的文字为黑色。 如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的 组合: 例子:p font-family: “sans serif“ (定义段落字体为 sans serif) 如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开: 例子:p text-align: center; color: red (段落居中排列;并且段落中的文字为红色) 2. 选择符组 你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式 重复定义: h1, h2, h3, h4, h5, h6 color: green (这个组里包括所有的标题元素，每个标题元素的文 字都为绿色) p, table font-size: 9pt (段落和表格里的文字尺寸为 9 号字) 效果完全等效于: p font-size: 9pt table font-size: 9pt 3. 类选择符 用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称 前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先 定义两个类: p.right text-align: right p.center text-align: center 然后用不在不同的段落里，只要在 HTML 标记里加入你定义的 class 参数: 这个段落向右对齐的 这个段落是居中排列的 类选择符还有一种用法，在选择符中省略 HTML 标记名，这样可以把几个不同的元素定义 成相同的样式: .center text-align: center (定义.center 的类选择符为文字居中排列) 这样的类可以被应用到任何元素上。下面我们使 h1 元素(标题 1)和 p 元素(段落)都归为 “center”类，这使两个元素的样式都跟随“.center”这个类选择符: 这个标题是居中排列的 这个段落也是居中排列的 注意:这种省略 HTML 标记的类选择符是我们经后最常用的 CSS 方法，使用这种方法，我 们可以很方便的在任意元素上套用预先定义好的类样式。 4. ID 选择符 在 HTML 页面中 ID 参数指定了某个单一元素，ID 选择符是用来对这个单一元素定义单独 的样式。 ID 选择符的应用和类选择符类似，只要把 CLASS 换成 ID 即可。将上例中类用 ID 替代: 这个段落向右对齐 定义 ID 选择符要在 ID 名称前加上一个“#”号。和类选择符相同，定义 ID 选择符的属性也 有两种方法。下面这个例子，ID 属性将匹配所有 id=“intro“的元素: #intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent (字体尺寸为默认尺寸的 110%;粗体;蓝色;背景颜色透明) 下面这个例子，ID 属性只匹配 id=“intro“的段落元素: p#intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent 注意:ID 选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。 5. 包含选择符 可以单独对某种元素包含关系定义的样式表，元素 1 里包含元素 2，这种方式只对在元素 1 里的元素 2 定义，对单独的元素 1 或元素 2 无定义，例如: table a font-size: 12px 在表格内的链接改变了样式，文字大小为 12 像素，而表格外的链接的文字仍为默认大小。 6. 样式表的层叠性 层叠性就是继承性， 样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包 含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把 很多层嵌套的样式叠加在一起，除非另外更改。例如在 DIV 标记中嵌套 P 标记: div color: red; font-size:9pt 这个段落的文字为红色 9 号字 (P 元素里的内容会继承 DIV 定义的属性) 注意:有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如， 上边界属性值是不会继承的，直觉上，一个段落不会同文档 BODY 一样的上边界值。 另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了 P 的颜 色: