1、网页设计与制作,Web基础知识 网页制作初步 HTML语言基础 层叠样式表的应用 Dreamweaver 4的使用 Fireworks 4.0 Flash 5.0 网页的发布与管理,2,第四章层叠样式表的应用,南京审计学院,精美的网页离不开CSS技术，使用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。CSS样式的全名为Cascading Style Sheet，它可以定义HTML标签，按列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在HTML语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标签，而CSS在开始制作网页时就将这些设
2、定做好，不需要在制作网页文档时再反复写入同样的标签。,chap4 层叠样式表的应用,CSS基础知识CSS结构与规则CSS属性将样式表加入到HTML中CSS应用实例,主要内容：,1.CSS 概述 是在网上精确定位的一种技术。在一个 HTML 文档中加入一个 CSS 样式表，可以更确定地控制一个文档的外貌。如改变一个链接的下划线等以前无法实现的功能。是一种格式化网页的标准方式。2. CSS技术的优点：方便网页格式的修改便于减少网页体积能使网页元素更准确的定位良好的适应性,4.1 CSS基础知识,层叠样式表CSS （ Cascading Style Sheet ）,3.CSS 的构成 一个样式表由样
3、式规则组成, 以告诉浏览器怎样去呈现一个文档. 将样式规则加入到HTML文档中的方法 ：使用HTML的STYLE组件. 这个元素放置于文档的HEAD部分, 包含网页的样式规则. CSS规则由两部分组成：选择器和声明(大多数情况下为包含多个声明的代码块)。选择器是标识已设置格式元素的术语，例如 p、h1、类名称或ID，而声明块则用于定义样式属性。 样式规则组成如下:选择符 属性1: 值1; 属性2: 值2 ；,4.1 CSS基础知识,3.CSS 的构成 选择符共有六种：,4.1 CSS基础知识,HTML选择符类选择符ID 选择符关联选择符伪类伪元素,4.CSS应用举例CSS例子H1 font-s
4、ize: x-large; color: red H2 font-size: large; color: blue 说明：以上是一段定义了H1和H2元素的颜色和字体大小属性,4.1 CSS基础知识,1.基本语法规则组合继承注解,4.2 CSS结构和规则,2.伪类和伪元素 定位锚伪类首行伪元素首个字母伪元素,1.基本语法（1）规则HTML选择符类选择符ID 选择符关联选择符,4.2 CSS结构和规则,HTML选择符 任何HTML元素都可以是一个CSS的选择符。选择符仅仅是指向特别样式的元素。例如，P text-indent: 3em 当中的选择符是P。类选择符,格式：选择符 .类名 属性1: 值
5、1; 属性2: 值2 ； 单一个选择符能有不同的CLASS(类)， 因而允许同一元素有不同的样式。 code.html color: blue code.css color: red 每个选择符只允许有一个类。例如，code.html.proprietary是无效的。 类的声明也可以无须相关的元素: .note font-size: small ,ID 选择符关联选择符,是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可 以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如，以下的上下文选择符： P EM background: yellow 表示段落中的
6、强调文本会是黄色背景,个别地定义每个元素的成分。ID选择符的指定要有指示符“#” 在名字前面。格式： #ID名 属性1: 值1; 属性2: 值2 ； #标识1 text-indent: 3em 文本缩进3em,1.基本语法(2)组合 为了减少样式表的重复声明，组合的选择符声明是允许的。例如，文档中所有的标题可以通过组合给出相同的声明: H1, H2, H3, H4, H5, H6 color: red; font-family: 楷体 注意：区分组合的选择符与关联选择符,4.2 CSS结构和规则,1.基本语法 (3)继承 所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更改。
7、例如，一个BODY定义了的颜色值也会应用到段落的文本中。 (4)注解 样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS注解的例子采用以下格式: /* COMMENTS CANNOT BE NESTED */,4.2 CSS结构和规则,2.伪类和伪元素伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。 伪类区别开不同种类的元素。 伪元素指元素的一部分。伪类或伪元素规则的形式,如 选择符:伪类 属性: 值 选择符:伪元素 属性: 值 一般的类可以与伪类和伪元素一起使用，如下: 选择符.类: 伪类 属性: 值 选择符.类: 伪元素 属性: 值 ,4.2 CSS结构和规则,
8、2.伪类和伪元素 （1）定位锚伪类 伪类可以指定A元素以不同的方式显示链接(links)、已访问链接(visited links)和可激活链接(active links)和鼠标指向的链接。定位锚元素具有四个伪类：link、visited或active、hover。样式表的示例如下: A:link color: red A:active color: blue; font-size: 125% A:visited color: green; font-size: 85% A:hover color: blue; font-size: 100% ,4.2 CSS结构和规则,2.伪类和伪元素（2）首
9、行伪元素(first-line) 通常在报纸上的文章，文本的首行都会以粗印体而且全部大写地展示。CSS包括了这个功能，将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。例如: P:first-line font-variant: small-caps; font-weight: bold ,4.2 CSS结构和规则,2.伪类和伪元素（3）首个字母伪元素(first-letter) 首个字母伪元素用于加大(drop caps)和其他效果。一个首个字母伪元素可以用于任何块级元素。例如: P:first-letter font-size: 300%; float: left 会
10、比普通字体加大三倍。,4.2 CSS结构和规则,本节目录 字体属性 颜色及背景属性 文本属性 方框属性 分类属性,4.3 CSS属性,字体属性字体族科 字体风格 字体变形 字体加粗 字体大小 字体,语法: font-family: | ,* | 例如:P font-family: New Century Schoolbook, Times, serif ,-语法: font-style: 允许值: normal | italic | oblique 初始值: normal- H1 font-style: oblique P font-style: normal ,-语法: font-varia
11、nt: 允许值: normal | small-caps 初始值: normal- SPAN font-variant: small-caps ,-语法: font-weight: 允许值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 初始值: normal - H1 font-weight: 800 P font-weight: normal ,语法: font-size: | | | 允许值: xx-small | x-small | small | mediu
12、m | large | x-large | xx-large larger | smaller (in relation to parent element) 初始值: medium H1 font-size: large P font-size: 12pt LI font-size: 90% STRONG font-size: larger ,语法: font: 允许值: | | ? / ? P font: italic bold 12pt/14pt Times, serif 指定该段为bold(粗体)和italic(斜体)Times或serif字体，12点大小，行高为14点。,4.3 CS
13、S属性,颜色及背景属性颜色 背景颜色 背景图象 背景重复 背景附件 背景位置 背景,4.3 CSS属性,语法: color: H1 color: blue H2 color: #000080 ,语法: background-color: 允许值: | transparent (透明) BODY background-color: white H1 background-color: #000080 ,语法: background-image: BODY background-image: url(/images/foo.gif) P background-image: url(http:/ ,
14、语法: background-repeat: 允许值: repeat | repeat-x | repeat-y | no-repeat BODY background: white url(candybar.gif); background-repeat: repeat-x ,语法: background-attachment: 允许值: scroll | fixed BODY background: white url(candybar.gif); background-attachment: fixed ,语法: background-position: 允许值: | | top | c
15、enter | bottom | left | center | right,语法: background: 允许值: | | | | BODY background: white url(http:/ BLOCKQUOTE background: #7fffd4 ,文本属性文字间隔 字母间隔 文字修饰 纵向排列 文本转换 文本排列 文本缩进 行高,4.3 CSS属性,语法: word-spacing: 允许值: normal | P EM word-spacing: 0.4em ,语法: text-decoration: 允许值: none | underline | overline |
16、line-through | blink A:link,A:visited,A:active text-decoration: none ,语法: vertical-align: 允许值: baseline | sub | super | top | bottom |text -top | middle | text-bottom | 百分比 IMG.middle vertical-align: middle ,语法: text-transform: 允许值: none | capitalize | uppercase | lowercase H1 text-transform: upperc
17、ase ,语法: text-align: 允许值: left | right | center | justify H1 text-align: center ,语法: letter-spacing: 允许值: normal | H1 letter-spacing: 0.1em ,语法: text-indent: 允许值: | P text-indent: 5em ,语法: line-height: 允许值: normal | | | P line-height: 200% ,边框属性上边界 上补白 上边框宽度 上边框 右边界 右补白 右边框宽度 右边框下边界 下补白 下边框宽度 下边框左边界
18、 左补白 左边框宽度 左边框边界 补白 边框宽度 边框边框颜色 边框风格 宽度 高度 漂浮 清除,4.3 CSS属性,分类属性显示 空白 目录样式类型 目录样式图象 目录样式位置 目录样式,4.3 CSS属性,语法: display: 允许值: block | inline | list-item | none block (在元素的前和后都会有换行) inline (在元素的前和后都不会有换行) list-item (与block相同, 但增加了目录项标记) none (没有显示),语法: white-space: 允许值: normal | pre | nowrapnormal (将多个空
19、格折叠成一个) pre (不折叠空格) nowrap (不允许换行，除非遇到标记),语法: list-style-type: 允许值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none LI.square list-style-type: square UL.plain list-style-type: none OL list-style-type: upper-alpha /* A B C D E etc. */,语法: list-style-ima
20、ge: 允许值: | none UL.check list-style-image: url(/LI-markers/checkmark.gif) UL LI.x list-style-image: url(x.png) ,语法: list-style-position: 允许值: inside | outside,语法: list-style: 允许值: | | LI.square list-style: square inside ,共有四种方法：植入样式表链接到样式表上 输入样式表在行内加入样式,4.4 将CSS加入到HTML中,1.植入样式表 所有的样式表信息都列于HTML文件的顶部，
21、同分列，例：,4.4 将CSS加入到HTML中, My First StylesheetStylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies!,2.链接到样式表上 方法：产生一个普通的网页，但不使用规则，而是在内使用标签，例：,4.4 将CSS加入到HTML中,My First StylesheetStylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies!,2.链接到样式表
22、上,4.4 将CSS加入到HTML中,现在生成一个单另的文本文件，起名mystyles.css 文件内容如下： H1 color: green; font-family: impact P background: yellow; font-family: courier 如同发布HTML文件那样，将这个CSS文件发布到你的服务器中。在浏览器中观看网页时，你会发现浏览器将依照链接标签将所有链接了的HTML网页按照样式表的规则显示，在HREF属性中你可以选择使用绝对或相对URL。,3.输入样式表 输入外部样式表的方法同链接的方法类似。不同之处在于链接法不能同其它方法结合使用，但输入法则可以。例：,
23、4.4 将CSS加入到HTML中, My First Stylesheet Stylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies!,4.内联样式 在HTML元素中加入样式规则，基本结构 My First StylesheetStylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies!,4.4 将CSS加入到HTML中,总结：,4.4 将CSS加入到HTML中,1.嵌入样式表,
24、基本结构 注意要点 STYLE元素放在文档的HEAD部分适用范围 可用于当一个文档具有独一无二的样式,总结：,4.4 将CSS加入到HTML中,2.链接到样式表上,基本结构 注意要点 LINK标记放在文档的HEAD部分 首选样式只能指定一个 要组合多个样式表成一个单一样式，必须在每个样式表中使用相同TITLE适用范围 当样式被应用到很多的网页时,总结：,4.4 将CSS加入到HTML中,3.输入外部样式表,基本结构 注意要点 所有的import 声明必须放在样式表的开始部分 被输入的样式表的顺序决定其层叠关系：后面的规则优先级高适用范围 当样式被应用到很多的网页时,总结：,4.4 将CSS加入
25、到HTML中,4.内联样式,基本结构 注意要点 必须将text/css作为Content-Style-Type HTTP页眉 在HEAD部分包括以下标记: 适用情况 需要对页面中的某个元素的显示方式单独加以控制时,1.使用CSS控制文本、颜色、列表.mybutton font-size: 9pt; color: #003366; background-color:D1D1ED; height: 18px .spanstyle position:absolute; visibility:visible; top:-50px; font-size:9pt; color: #0000FF; font
26、-weight:bold; ,4.5 CSS应用实例,Welcome You,赤焰字效果,发亮字效果, Welcome You, Welcome You,投影字效果,使图片产生水中倒影, ,使图片左右移动,选择你喜欢的背景： 第一种背景 第二种背景 第三种背景 ,在线选择页面背景,元素的显示与隐藏,显示与隐藏 ,鼠标悬停时随机改变颜色,sub hellodocument.fgColor=int(256*256*256*rnd)end sub测试：鼠标悬停时我会随机改变颜色,改变鼠标指针形状,在表单中自动显示新的信息,!-function makearray(size)this.length=s
27、ize;for(i=1;i= msgi.length ) seq = 0 ;i+;interval=900;if(i3)i=1;window.setTimeout(Scroll();, interval );interval=100 ;/-,半透明表格,.alpha1filter: Alpha(Opacity=60) hello,world! 半透明的表格 ,使图片移动到指定位置, top: left: ,使图片移动到指定位置,打开指定的驱动器,页面的自动滚动,离开页面时显示告别信息框,本章作业：1. CSS中包含哪几种选择符，写出各种选择符样式的格式2. 将CSS应用到HTML文件中有哪些方
28、法，它们在使用上各有何特点、 分别适用于什么情况？3. 写出满足下列条件的CSS规则：,4.5 CSS应用实例,使页面的背景图片在水平方向上平铺使超链接不再有下划线指定背景图象a.gif的最初位置为页面的右下方,52,作业讲解,BODY background-repeat: repeat-x A:link,A:visited,A:active text-decoration: none body background: url(a.gif) bottom right ,上机要求与安排,作业题目：用HTML语言结合CSS来编辑一张网页作业要求：其中应该包含该讲所列举的基本HTML标记，格 式化文
29、本、图片、表格、超链接等。注意：不要用那些可视化编辑工具来生成该网页，应该通过亲手编写HTML语言，从而熟练掌握各个标记的功能及其用法。,期中测试,题目1：用HTML语言创建如图所示的客户端图像映射。要求：包含3个热点区域:,点击图中的五边形时，链接到文件star.htm点击图中的英文字符所在的矩形区域时，链接到文件tangle.htm点击图中的圆形时，链接到文件tangle.htm,注：可点图(1.jpg)以及star.htm 、tangle.htm 、tangle.htm已经分别给出,期中测试,题目2：用HTML语言创建如图所示的表单,注：表单提交后，用文件deal.asp对该表单加以处理,期中测试,题目3：合理选择CSS的各种滤镜技术对图片进行处理，分别实现下列效果,要求：以上3道题目分别用3个文件保存，文件名为：test1.htm 、test2.htm 、 test3.htm,2.层次的重叠与变换 在层里面可以放置图象、文字和表格等元素，通过改变层的属性进而达到改变其中的图象、文字的目的。Script,4.5 CSS应用实例,2.层次的重叠与变换,4.5 CSS应用实例,
