Web技术应用基础.ppt

《Web技术应用基础.ppt》由会员分享，可在线阅读，更多相关《Web技术应用基础.ppt（60页珍藏版）》请在三一文库上搜索。

1、1,第2篇 Web客户端程序设计基础,第5章 CSS,2,5.1 XML,XML的产生 HTML遇到一些瓶颈问题，促使可扩展性标记语言XML（eXtendable Markup Language）的诞生。1996年7月XML工作小组在W3C（World Wide Web Consortium）的赞助下成立，于1998.1.10正式通过XML1.0规范。由于XML具有可扩展性、结构性、自我描述性的特点，并采用数据和样式分离原则，使其在数据的管理、交换上拥有极为卓越的性能。,3,XML与HTML的比较,XML的开发并不是取代HTML的，而是弥补其不足的。具体有以下差异： 1.XML文件可以自定义标

2、记和属性，HTML则不能。 2.XML是属于一般用途的标记语言，而HTML则是一种特殊用途的标记语言。 3.XML着重于文件的结构，而HTML则擅长于文件的表现。 4.XML文件可以有选择地利用DTD或XML纲要（XML Schema）来确认文件的有效性，HTML则不可以。,4,XML文档的类型,两种类型： 良构的XML文档 有效的XML文档,5,良构的XML文档 范例 Michael Guo Male 1966.7 Computer Graphics,Data mining,Teacher ,6,良构的XML文档必须符合以下规则,所有的XML文档都要有一个包含所有其他元素的根元素 所有的元素

3、必须有开始标记和结束标记 标记必须正确嵌套，不能交叉 大小写敏感 空白不能随便放置 所有的属性值必须用引号（英文状态的半角字符）括起来 更详细的规则，可参考W3C网站或相关书籍,7,有效的XML文档,有效的XML文档是遵照XML语法规则和文档类型定义（DTD)规则构造的一种文档。 DTD（Document Type Definition）是一段关于该文档中数据的组织存放结构的说明。 定义了某项数据应该在哪出现 规定了各种数据项之间的关系,8,内部DTD 范例resum-in.xml Michael Guo Male 1966.7 Computer Graphics,Data mining,Te

4、acher ,定义resume文档,空格,9,外部DTD 预先定义好DTD文档resume.dtd ,10,使用外部型DTD声明的XML文档 Resume-ex.xml Michael Guo Male 1966.7 Computer Graphics,Data mining,Teacher ,11,XML文档的浏览,在浏览器中直接浏览 如良构的XML文档 运用CSS技术显示XML文档 文档中引用的css文件mycss.css name background-color:#cccc99;font-size:22pt;width:100%; sex font-family:“Arial“;fon

5、t-size:16pt;color:blue; birthday font-family:“Arial“;font-size:16pt;color:red; skill font-family:“Arial“;font-size:14pt;color:green;,12,xml-css.xml Michael Guo Male 1966.7 Computer Graphics,Data mining,Teaching ,13,CSS,5.1 CSS简介 5.1.1 CSS作用 网页展现的样式从网页中独立出来集中管理,它通过设置CSS属性元素获得各种不同效果。,14,过程与步骤： 1.通过依次单

6、击任务栏上的【开始】【程序】【附件】【记事本】菜单命令打开记事本。 2在记事本的编辑面板中输入以下代码，创建了使用样式的页面css1.htm： 样式表举例 ,15,font-weight: bold; color: #993366; 这段文字将显示为红色 这段文字的背景色为黄色 这段文字将以黑体显示 今天学习样式表的相关知识。 ,css1.htm,16,什么是CSS CSS(Cascading Style Sheet,层叠样式表)技术上一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。 特点： 可以实现网页结构与格式分离； 对网页布局、字体、背景和其

7、它图文效果实现更加精确的控制； 更好的易用性和扩展性，可以单独以一个文件的形式出现。,17,CSS,样式表的使用结构 多个网页文件共享样式文件 多个样式文件套用在一个网页文件上,HTML,CSS 样式文件N,CSS 样式文件1,18,2.CSS样式表定义,CSS样式表由样式规则组成，告诉浏览器如何去显示一个文档。样式规则一般由选择符与属性组成。常用的选择符有HTML标签、用户自定义类和用户自定义ID等。,19,CSS样式语法规则,选择符规则 例如：h1color:blue; 选择符（selector）：表示要定义样式的类型，选择符可以包括HTML标签符、用户自主义类class或用户自定义ID。

8、 规则（rule）：“属性(attributes)”表示由CSS标准定义的样式属性，“属性值(values)”为样式属性的值。,20,CSS样式语法规则,关于样式表的语法，要注意以下几个问题。 属性必须要包含在号之中。 属性和属性值之间用“:”分隔。 当有多个属性时，用“;”进行区分。 在书写属性时属性之间使用空格换行等，并不影响属性的显示。 如果一个属性有几个值，则每个属性值之间用空格分隔开。,21,22,用户自定义类作为选择符 定义格式：选择符.类名selector.classname attributes1:values1;attributes2:values2;，例： span.blu

9、ecolor:#0000FF span.redcolor:red 应用样式时在对应的HTML标签中加入class属性，属性值为样式表的类名。例： 这是一个引用两个不同span样式的例子，蓝色span与红色span,23,CSS样式定义,选择符为HTML标记 利用用户自定义类可以实现所有的HTML标签的样式选择，当要达到复杂的样式效果时（比如，你想让主体文字的1段用绿色显示，第2段用紫色显示，而第3段用灰色显示），可以采用样式分类的方法实现。,24,CSS样式定义,选择符为HTML标记：示例 P.first color: green P.second color: purple P.third

10、color: gray HTML代码如下： The first paragraph, with a class name of “first.“ The second paragraph, with a class name of “second.“ The third paragraph, with a class name of “third.“,25,CSS样式定义,用户自定义ID作为选择符 用户自定义ID与用户自定义类的功能相同，其区别仅为定义语法与引用方法不同。 定义格式如下：#ID名 attributes1:values1;attributes2:values2; 示例：id_se

11、lectors.html #yellowcolor:yellow 其引用如下所示： 本段为黄色,26,CSS样式定义,ID样式符与类样式符对比： 类选择符可以重复使用，且可以用在任意元素上，使用任意次。 HTML内id属性是唯一的，拥有id的元素才会应用该样式。 ID选择符的优先权高于类选择符。,提示：使用.classname和使用#IDname这两种方式在效果上并没有区别，但最好只使用其中之一，以免造成混淆。,27,CSS样式定义,CSS虚类选择器： 专用于控制链接的显示效果，共4种选择器： a:link（没有接触过的链接）,用于定义了链接的常规状态。 a:visited（访问过的链接）,用

12、于阅读文章，能清楚的判断已经访问过的链接。 a:hover（鼠标放在链接上的状态）,用于产生视觉效果。 a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。,28,CSS样式定义,CSS样式选择器： 几点说明： a:link链接状态是基本的，推荐至少要定义这种链接。 推荐“a:hover”链接颜色使用红色，能产生极好的视觉效果 以上4种选择器第4种较少使用，在定义选择器时，必须严格按a:link、a:visited、a:hover、a:active顺序定义，否则可能会无效。,29,CSS样式引用 直接定义style属性 内联式样式 嵌入样式表 外部样式表,30,CSS,

13、1.直接定义style属性,html标签中以style属性引用样式 示例： 这是一个直接书写样式的段落 。,31,例5.2 直接定义HTML标记中的style属性 用四种方式将样式表功能应用到Web页面中 ,ex5-2,32,CSS,2.定义内部样式表,头部标签嵌套引用 网页之间插入样式表代码： ,33, 定义内部样式表 /*定义样式*/ 用四种方式将样式表功能应用到Web页面中 第一段文字默认对齐 第二段文字居中对齐 ,Ex5-3,34,CSS,3.嵌入外部样式表, style1.css 保存文字的其它样式 h1 text-align:center; font-style:italic; f

14、ont-family:隶书; font-size:x-large; style2.css 保存文字的颜色 h1 color:green;,35,CSS, 嵌入外部样式表 /*定义样式*/ 用四种方式将样式表功能应用到Web页面中 ,例5.4,36,CSS,4.链接外部样式表,之间通过link引用外部文件： 文章标题 ,37,链接外部样式表 用四种方式将样式表功能应用到Web页面中 ,例5.5,38,综合范例,以下代码是sheet1.css /* CSS Document */ h1 font-size: 36px; font-family: “隶书“; font-weight: bold; c

15、olor: #993366; h2 b color:blue .water font-family:“隶书“; font-size:24px; text-align:right/*类选择器*/ h3.hello font-family:“隶书“; text-align:center; font-size:36px/*指定的类选择器*/,39,以下代码是sheet2.css /* CSS Document */ #danger color:#990000; font-family:“华文彩云“; font-size:24px/*ID选择器*/ /*以下是虚类的定义*/ a:link color:

16、red; text-decoration: none; /*未访问的链接*/ a:visited color:blue; text-decoration: none; /*已访问的链接*/,40,a:hover color:#990000; text-decoration:underline /*鼠标指针移到上面链接的颜色*/ a:active color:yellow; text-decoration: none; /*活动链接*/ h2 b color:green/*重新定义了上下文选择器*/,41,以下代码是ss4.htm 导入外部样式表 ,42, 标题1的使用。 测试上下选择器（没有上

17、下文） 测试上下选择器（具有上下文） 这是黄河的水 黄河水 天上来 这句话没有使用类“hello”的效果。 这句话才使用了类“hello”的效果。 这里危险。 测试链接的颜色，使用了虚类，实际做的过程中读者自行体会。 ,ss4.htm,43,CSS属性,HTML元素中的属性 文本 背景 内外填充属性 边框属性 定位与显示属性,44,CSS属性,属性单位,45,文本属性,文本属性是CSS属性中的一大类，用来设置文字的显示效果。其中部分属性设置效果可以通过文字的标记实现。,46,CSS样式文本属性,47, h3 font-family: times p font-family: courier p

18、.sansserif font-family: sans-serif , h1 font-style: italic h2 font-style: normal p font-style: oblique ,48,背景属性,背景属性设定对象的背景颜色或背景图像。 CSS样式背景属性,49, body background-image: url(images/eg_background3.jpg); background-repeat: repeat ,body background: #00ff00 url(images/eg_background3.jpg) no-repeat fixed

19、center; ,50,内外填充属性,一些Web元素如表格、图像等可以看作是一个容器，容器中放置了呈现内容。所谓的内外填充，可以认为是容器内外侧的衬垫。,51,CSS样式填充属性,52, p.margin margin: 2cm 4cm 3cm 4cm , td.test1 padding: 1.5cm td.test2 padding: 0.5cm 2.5cm ,53,边框属性,边框属性用来设置对象的边框颜色、类型以及粗细。 CSS样式边框属性,54,CSS样式边框属性(续表),55,定位与显示属性,内外填充属性站在容器的角度，设定了页面的排版。从容器内容的角度来说，也可以设置内容相对于容器

20、的定位以及内容的尺寸。,56,CSS样式定位与显示属性,57, .s1position:absolute;top:20px;left:30px;z-index:1;width:400;font-size:40pt;color:blue .s2position:absolute;top:23px;left:33px;z-index:2;width:450;font-size:40pt;color:yellow .s3position:absolute;top:26px;left:36px;z-index:3;width:400;font-size:40pt;color:red ,58,CSS,定位技术的应用 ,定位属性范例,59, Web技术应用基础 Web技术应用基础 Web技术应用基础 欢迎学习 欢迎学习 ,例5.6,60,教学内容,样式符属性：值,内部、外部两种引用方式,CSS属性值较多，本章详细介绍边框、颜色、定位等常用属性,