第03讲.层叠样式表

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,*,层叠样式表,姚小浪,2009-8-10,目标,掌握样式表的语法规则,样式表的分类：,行内样式表,内嵌样式表,外部样式表,掌握常用的样式,了解层,和,标签,2,DHTML,简介,DHTML,=,HTML,脚本语言,JavaScript,+,+,层叠样式表,CSS,指定一个网页的元素,决定元素的大小,颜色和位置,操纵网页的元素,DHTML,是制作,动态,HTML,页面的技术！,3,DHTML,的功能,设计人员可以随着与用户的交互操作而改变文本的颜色、字体和大小,设计人员可以随用户的输入或事件（如单击鼠标）而更改页面的内容,设计人员可以用,x,座标和,y,座标来指定网页元素的确切位置（绝对位置或相对位置）,设计人员可以将网页中的表格绑定到数据库,设计人员可以将选择的字体和网页一起封装,Web,程序员可以编写脚本以更改网页的样式和内容,在,DHTML,中，每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程,动态样式,动态内容,定位,数据绑定,可下载字体,脚本,对象结构,4,DHTML,示例,闪烁文本,移动文本,消隐文本,5,设置属性,这个段落应用了样式,这个段落按默认样式显示,什么是样式？,指定显示样式,样式规则,6,常用的样式属性,属 性,CSS,名称,说 明,颜色,color,文本属性,font-size,字体大小,font-family,字体,text-align,文本对齐,边框属性,(,用于表,单元素,),border-style,边框样式,border-width,边框宽度,border-color,边框颜色,定位属性,(position),top,顶部边距（上边距）,left,左边距,width,宽度,height,高度,z-index,z,轴索引号，用于层,7,根据样式代码的位置，分为三类：,行内样式,内嵌样式,外部样式,样式的分类,在最后一个声明后面加上一个分号,(;),是一个好习惯,8,行内样式,您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的,STYLE,属性定义。,/*,关键代码,-*/,剩余时间：成交结束,新旧程度：全新,所 在,地：北京,宝贝数量：5 件,浏 览 量：220 次,另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以,9,应用样式,P,font-size:20px;,color:blue,;,text-,align:center,我是段落,1,我是段落,2,我是段落,3,我们的样式绝对统一,内嵌样式,-1,样式表,样式规则,所有的段落都采用,P,样式，保证样式统一,行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。,选择器,用分号隔开,10,内嵌样式,-2,选择器,根据选择器的不同，内嵌样式又分为：,HTML,选择器,CLASS,类选择器,ID,选择器,11,/*-,关键代码,-*/,P /*,设置样式：字体和背景色*,/,font-family:System;,font-size:18px;,color:#3333CC;,H2,background-color:#CCFF33;,text-align:center;,品种特征方面：,1,、蛋鱼：蛋鱼,.,。,2,、龙睛：龙睛,.,。,3,、高头：高头,.,。,内嵌样式,-3 HTML,选择器,HTML,选择器,应用,H2,样式,应用,P,样式,12,内嵌样式,-4,class,类选择器,.,myinput,border:1px solid;,border-color:#D4BFFF;,color:#2A00FF,;,用户名,密&,nbsp;码,CLASS,类选择器,应用类选择器：,class,”类名,“,类选择器的定义格式为：,.,类名,样式规则,;,13,#fire,color:red,;,font-size:24px;,我是二级标题，火是这样的,我是段落，火是这样的,内嵌样式,-5 ID,选择器,ID,选择器,ID,选择器的定义格式为：,ID,名,样式规则,;,应用,ID,选择器：,ID,”,ID,名“,14,A,/*,设置超链接不带下划线,*/,color:blue;,text-decoration:none;,/*,文本修饰：无*,/,A:hover,/*,鼠标在超链接上方停留时，带下划线,*,/,color:red;,text-,decoration:underline,;,/*,文本修饰：下划线*,/,A:,visited,color:green,;,text-decoration:none;,A:active,color:green,;,text-decoration:none;,HEAD,俺是超链接，移过来我就显示下划线,内嵌样式,-6,特殊的选择器,HTML,选择器,特殊的伪类：,A,代表超链接，,hover,代表鼠标悬停,15,外部样式,根据样式文件与网页的关联方式又分为：,链接（,LINK,）外部样式表,导入（,import,）外部样式表,样式文件,P,.,网页,2,网页,3,网页,1,16,链接外部样式表,使用,LINK,（链接）标签，语法：,第一步：创建样式表文件,newstyle.css,第二步：把样式文件和网页关联,样式文件：,newstyle.css,P,.,Onel.htm,another.htm,第三步：浏览查看各网页,演示,：,链接,样式表示例,17,导入外部样式表,使用,import,导入，语法：,import,样式表文件,.,css,;,操作步骤同链接样式表,18,外部样式文件,样式的混合使用,行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常,需要混合使用：,有关整个网站统一风格的样式代码，放置在独立的样式文件*,.,css,某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式,某张网页内，部分内容”与众不同“，采用行内样式,对于某个,HTML,标签：,1,）如果有多种样式，如果规定的样式没有冲突，则叠加；,2,）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按,HTML,的默认样式显示；,内嵌样式,行内样式,某个,HTML,标签,19,层标签,关键代码,Z-index=1,，我是第一层，我是容器，包含图片段落,Z-index=2,，我是第二层，包含图片和段落,使用,Z,index,指定是哪一层,是块级容器标签，可以包含图片、标题、段落、文字等,图片,段落,top,left,20,标签,所有韩款童装,10,元,/,件起拍喽,是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容,21,CSS,的优点,改变浏览器的默认显示风格,页面内容和显示样式分离,可以重用样式表,方便网站维护,22,总结,DHTML,是网页中,HTML,、样式表和脚本的组合应用程序，增强网页的交互性,样式分为行内样式、内嵌样式、外部样式,样式表包括选择器和样式规则，选择器又分为,HTML,选择器、类选择器、,ID,选择器以及特殊的伪类,和,都是容器标签，,是块级标签，可包含段落、标题等，,是行级标签，不能包含段落、标题等，只能包含部分文字,23,a,标签伪类的样式（,4,种）,字颜色 字体 字号,段落 边框（颜色 宽度 样式）字体 字号,表格 同段落,Span,标签,div,24,