zs0907CSS层叠样式表.ppt

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,CSS,层叠样式表,学习,目标,：,了解什么是,CSS,掌握样式的定义及使用,掌握,Style,对象,掌握,CSS,属性,本章学习内容知识框架如图所示,本章内容,了解,DHTML,样式表,什么是,层叠,样式表,为什么要使用,层叠,样式表,层叠,样式表的语法规则,创建并使用,层叠,样式表,DHTML简介,什么是DHTML,DHTML是一个用动态内容描述HTML页面的术语，它包括HTML、CSS和JavaScript技术，这三种技术通过文档对象模型（DOM）融合在一起。,使用,DHTML,技术，在客户端就可以动态地操纵数据或改变页面内容，产生动态效果，还可以达到一定的与用户交互的效果。,层叠样式,表简介,什么,是层叠样式,表,为了将显示描述彻底的独立于文档的结构，制定的样式独立制,CSS,。,W3C,推荐的样式表标准包括,CSS,和,XSL,CSS,主要用于,HTML,XSL,主要用于,XML,CSS,是一种用来装饰,HTML,的标记集合，是对,HTML,标记的一种扩展，可以进一步美化,HTML,页面,层叠样式,表,的特点,（,1,）将显示格式和文档结构分离,HTML,语言定义文档的结构和各要素的功能，而层叠样式表将定义格式的部分和定义结构的部分分离，能够对页面的布局进行灵活的控制。,（,2,）对,HTML,语言处理样式的最好补充,HTML,语言对页面布局上的控制很有限，如精确定位、行间距或者字间距等；,CSS,样式表可以控制页面中的每一个元素，从而实现精确定位，,CSS,样式表控制页面布局的能力逐步增强。,（,3,）体积更小加快网页下载速度,样式表是简单的文本，文本不需要图像，不需要执行程序，不需要插件。这样层叠样式表就可以减少图像用量、减少表格标签及其他加大,HTML,体积的代码，从而减小文件尺寸加快网页的下载速度。,（,4,）实现动态更新、减少工作量,定义样式表，可以将站点上的所有网页指向一个独立的,CSS,样式表文件，只要修改,CSS,样式表文件的内容，整个站点相关文件的文本就会随之更新，减轻了工作负担。,样式表规则,样式表规则,用法：,RuleSelector,property:value;property:value;.,规则选择器,声明,属性,属性值,样式表中的选择器,简单选择器,(,仅描述元素，而不考虑该元素在文档结构中的位置,),HTML,选择器,-,选择器是,HTML,标记的名称,类选择器,使用,HTML,元素的,CLASS,属性,ID,选择器,使用,HTML,元素的,ID,属性,上下文选择器,(,引用元素的上下文,),HTML,选择器示例,HTML,选择符就是,HTML,的标记符，例如,P,、,BODY,、,A,等。如果用,CSS,定义了他们，那么在整个网页中，该标识的属性都应用定义中的设置。,HTML,选择符的定义方法如下：,tagproperty:value,例如，设置表格的单元格内的文字大小为,9pt,，颜色为蓝色的,CSS,代码如下：,td font-size:9pt;color:blue;,CSS,可以在一条语句中定义多个选择符，例如：将段落文本和单元格内的文字设置为蓝色的,CSS,代码如下：,td,pcolor,:blue;,HTML选择器示例,Pfont-style:italic;font-weight:bold;color:limegreen,这些选择器使用HTML元素的名称唯一的区别是删除了尖括号。,HTML选择器示例,类选择器示例,Class,选择符可以分为两种：,1,）第一种是相关的,class selector,，,它只与一种,HTML,标记有关系。它的语法格式如下：,Tag.Classnameproperty:value,例如，让一部分而不是全部,H1,的颜色是红色，可以使用以下代码：,H1.redonecolor:red,吉林省明日科技有限责任公司,This is H1.,2,）第二种是独立,Class,选择符，它可以被任何,HTML,标记所应用。,它的语法格式如下：,.,Classnameproperty:value,例如，可以将样式,blueone,应用于,H2,和,P,中的代码如下：,.,blueonecolor:bule,有雨的日子,不知是无意还是天意，有你的日子总有雨！,显然,Class,选择符应用起来会方便得多。,类选择器示例,.water color:blue,.danger color:red,测试水,测试危险,无样式,斜体,类选择器示例,ID,选择符其实与独立的,Class,选择符的功能一样，而他们的区别在于语法和用法不同。它的语法格式如下：,#,IDnameproperty:value,ID,选择符的用法是在,HTML,标记中应用,ID,属性引用,CSS,样式。例如：,#redonecolor:red,红色热情,黑色神秘,由于以上代码中的“红色热情”使用,ID,标识引用,redone,样式，所以文字“红色热情”是红色的，而文字“黑色神秘”则仍采用默认颜色。,PROPERTY,：,就是那些将要被修改的属性，例如,color,。,VALUE,：,PROPERTY,的值，比如,color,的属性值是,red,。,ID选择器示例,ID选择器示例,ID选择器,#control color:red,这是火焰的颜色,本段没有应用样式,ID选择器示例,上下文选择器示例,上下文选择器,BODYcolor:blue;background:lavender;font-family:Arial;,UL color:red,香蕉,西瓜,火龙果,芒果,桔子,苹果,上下文选择器示例,在HTML中引用样式表,Style元素,Style属性,Link元素,使用Style元素,STYLE,元素应插入文档的,元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了,STYLE,元素的文档会,受到影响。,H1color:maroon;,Pcolor:hotpink;font-family:Arial;,使用Style属性内嵌样式表,style属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。样式表可以只有一条规则。使用Style属性，可以绕过Style元素，而将声明直接放入单个的开始标记中。,设置属性,本段应用了内嵌样式,本段以默认样式显示,。,您能发现本行中的,不同之处,吗？,使用Link元素链入外部样式表,如果多个,HTML,文件要共享样式表，可以将样式表定义为一个独立的,CSS,样式文件。链,入外部样式表是把样式表保存为一个样式表文件，然后在页面中用,标记链接到这个样式表文件，这个,标记必须放到页面的,区内。,设置属性,。,导入外部样式表,使用,import,引入外部样式表,这种方式是在,HTML,文件的头部,标记之间，用,CSS,样式表的,import,声明引入外部样式表，格式如下。,import URL(,外部样式文件名,);,例如，应用,import,声明引入外部样式表，代码如下：,import URL(style1.css);,import URL(!import;,则浏览器显示的“第一段文字”、“第二段文字”、“第三段文字”的字号都为,24px,。,CSS,样式的优先级,CSS,属性,字体属性,文本属性,颜色和背景属性,容器属性,列表属性,鼠标属性,定位和显示,CSS,滤镜,字体属性,字体属性主要包括字体综合设置、字体族科、字体大小、字体风格、字体加粗、字体英文大小写转换等，如表所示。,下面对以上字体属性进行详细讲解。,（,1,）,font,复合字体属性,语法：,font,：,font-style|font-variant|font-weight|font-size|line-height|font-family,该属性是复合属性。声明方式中的参数必须按照如上的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性默认值。,（,2,）,font-family,指定字体,语法：,font-family,：,字体,1,，字体,2,，字体,3,可以设置多种字体。按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应使用引号括起。当浏览器找不到第一种字体，将使用第二种字体替代，以此类推。,（,3,）,font-size,设定字号,语法：,font-size,：,|,：,指的是绝对长度。使用时应谨慎地考虑到其在不同浏览器上浏览时可能出现的不同效果。对于一个用户来说，绝对长度的字体有可能会很大或者很小，如,xx-small|x-small|small|medium|large|x-large|xx-large,等。,：,指的是相对长度，一般使用百分比实现，其百分比取值是基于父对象中字体的尺寸。,（,4,）,font-style,设定样式,语法：,font-style,：,normal|italic|oblique,normal,：,正常值。,italic,：,斜体。,oblique,：,偏斜体。,字体属性,（,5,）,font-weight,设定字体粗细,语法：,font-weight,：,normal|bold|bolder|lighter|100-900,字体粗细属性值如表,9.2,所示。,下面示例中,标记的文本字体粗细是,bolder,，,标记文本字体粗细是,200,，程序代码如下。,字体属性,文本属性,文本属性设置文字之间的显示特性。,CSS,文本属性主要包括字母间隔、文字修饰、文本排列、行高、文字大小写等，如表,9.3,所示。,下面是对文本属性的详细讲解。,（,1,）,letter-spacing,设定字符间距,语法：,letter-spacing,：,normal|length,normal,：,正常值。,length,：,指定长度，包含长度单位。,（,2,）,word-spacing,设定单词间距,语法：,word-spacing,：,normal|length,normal,：,正常值。,length,：,指定长度，包含长度单位。,（,3,）,text-decoration,设定文字修饰,语法：,text-decoration,：,underline|,overline,|line-through|blink|none,文字修饰属性值如表,9.4,所示。,文本属性,（,4,）,text-align,设定横向文字对齐方式,语法：,text-align,：,left|right|center|,justity,横向文字对齐方式属性值如表,9.5,所示。,文本属性,（,5,）,vertical-align,设定纵向文字对齐方式,语法：,vertical-align,：,super|sub|top|middle|bottom|text-top|text-bottom,纵向文字对齐方式属性值如表,9.6,所示。,文本属性,（,6,）,text-indent,设定文字首行缩进,语法：,text-indent,：,value,使用,text-indent,属性可以设定页面文字首行缩进。,（,7,）,line-height,设定文字行高,语法：,line-height,：,value,使用,line-height,属性可以设定页面文字行高。,下面通过具体的,CSS,样式设置文本文字的常用属性。程序代码如下：,文本属性,颜色和背景属性,CSS,的颜色属性允许设计者指定页面元素的颜色，背景属性用于指定页面的背景颜色或者背景图像的属性。颜色和背景属性如表,9.7,所示。,下面是对颜色和背景属性的详细讲解。,（,1,）,color,设定颜色,语法：,color,：,color-value,HTML,语言使用十六进制的,RGB,颜色值对颜色进行控制，即颜色可以通过英文名称或者十六进制来表现。如标准的红色，可以用,RED,作为名称来表现，也可以用,#FF0000,作为十六进制来表现。能够使用的预设颜色命名总共有,140,种，常用的有,16,种：,Black,、,Olive,、,Teal,、,Red,、,Blue,、,Maroon,、,Navy,、,Gray,、,Lime,、,Fuchsia,、,White,、,Green,、,Purple,、,Silver,、,Yellow,和,Aqua,。,（,2,）,background-color,设定背景颜色,语法：,background-color,：,color-value,（,3,）,background-image,设定背景图像,语法：,background-image,：,none|,url(url,),none,：,无背景图。,url(url,),：,使用绝对或相对地址指定背景图像。不仅可以输入本地图像文件的路径和文件名称，也可以用,URL,的形式输入其他位置的图像名称。,页面中可以用,JPG,或者,GIF,图片作为背景图，这与向网页中插入图片不同，背景图像放在网页的最底层，文字和图片等都位于其上。,颜色和背景属性,（,4,）,background-repeat,设定背景图像平铺,语法：,background-repeat,：,repeat|repeat-x|repeat-y|no-repeat,背景图像平铺属性值如表,9.8,所示。,（,5,）,background-attachment,设定背景图像是否跟随页面内容滚动,语法：,background-attachment,：,scroll|fixed,scroll,：,背景图像跟随页面内容滚动。,fixed,：,背景图像固定。,颜色和背景属性,（,6,）,background-position,设定背景图像位置,语法：,background-position,：,value|top|center|bottom|left|center|right,背景图像位置属性可以确定背景图像的绝对位置，这是,HTML,标记不具备的功能。该属性只能用于块级元素和替换元素（包括,img,，,input,，,textarea,，,select,和,object,）。,背景图像位置属性值如表,9.9,所示。,颜色和背景属性,（,7,）,background,设定背景综合属性,语法：,background,：,background-color|background-image|background-repeat|background-attachment|background-position,如果使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为：,transparent none repeat scroll 0%0%,。,CSS,颜色和背景属性的应用非常广泛，弥补,HTML,显示属性的不足，使页面显示更加完美。,例,下面的示例是颜色和背景属性的综合应用，读者会看到,CSS,属性美化页面的效果，程序代码如下。,CSS,颜色和背景属性的应用,颜色和背景属性,从,60%8px,处开始显示,有一条路,走过了总会想起,有一个人,经历了就再难忘记,在单元格标记的,style,属性中设置背景图的摆放位置,本单元格背景图在,0%100%,处,本单元格背景图在,100%0%,处,运行结果如图所示。,颜色和背景属性,容器属性,在设计页面时，,CSS,可以将元素放置在一个容器中。容器属性如表所示。,例,下面示例定义,CSS,的容器属性，将元素存放在一个容器中，方便对元素的操作，程序代码如下：,CSS,区块属性的应用,.class1width:400px;height:100px;margin-top:20px;margin-right:30px;,margin-bottom:20px;margin-left:20px;float:left;border-left-style:groove;,border-left-width:3px;border-left-color:#FF9900;border-bottom-style:double;,border-bottom-width:4px;border-bottom-color:#FF9900;padding-left:3px;,padding-bottom:3px;letter-spacing:3px;line-height:20px,CSS,样式的概念,CSS,（,Cascading Style Sheets,层叠样式表）是,W3C,协会为弥补,HTML,在显示属性设定上的不足而制定的一套扩展样式标准。,CSS,标准中重新定义了,HTML,中原来的文字显示样式，增加了一些新概念，如类、层等，可以对文字重叠、定位等。所谓“层叠”，实际上就是将显示样式独立于显示的内容，进行分类管理，例如分为字体样式、颜色样式等，需要使用样式的,HTML,文件进行套用。,运行结果如图所示。,容器属性,列表属性,CSS,中列表的设定丰富了列表的外观。列表属性用于设置列表标记（,ol,和,ul,）,的显示特性，其属性如表所示。,下面是对列表属性的详细讲解。,（,1,）,list-style-type,设定列表样式,语法：,list-style-type,：,value,list-style-type,属性可以设定多种符号类型，如表所示。,（,2,）,list-style-image,设定列表图像,语法：,list-style-image,：,none|,url,（,url,）,none,：,不指定图像。,url,（,url,）：,使用绝对或者相对地址指定背景图像。,可以使用图像作为列表的标记，,JPG,和,GIF,格式都可以。,列表属性,（,3,）,list-style-position,设定列表位置,语法：,list-style-position,：,outside|inside,outside,：,列表贴近左侧边框。,inside,：,列表缩进。,例,9.4,下面示例设置,CSS,列表位置属性值，程序代码如下。,CSS,列表图像属性的应用,CSS,样式表属性,字体属性,文本属性,颜色和背景属性,边框属性,鼠标光标属性,定位属性,区块属性,列表属性,运行结果如图所示。,列表属性,（,4,）,list-style,设定综合属性,语法：,list-style,：,list-style-image|list-style-position|list-style-type,下面应用,list-style,可以设置列表项目的综合属性，代码如下：,ul,list-style:,url(bg.gif,),inside,circle;,列表属性,鼠标属性,通过设置,CSS,样式表鼠标光标属性，当将鼠标移动到链接上时，可以看到多种不同的效果。,语法：,cursor,：,value,具体的,cursor,属性值如表,9.13,所示。,下面示例定义了鼠标光标属性值。程序代码如下：,鼠标属性,定位和显示,CSS,提供用于定义元素二维、三维空间定位以及可见性的定位属性。设置定位属性可以将元素定位于相对其他元素的相对位置或者绝对位置。可以使用表所示的属性来定位网页的元素位置。,例,定义元素的定位属性，呈现出元素的二维和三维空间定位的效果，程序代码如下。,CSS,定位属性的应用,定位和显示,&,nbsp;&nbsp,;,这是一幅花卉图,!,CSS,定位属性的应用,文字的重叠显示,文字的重叠显示,运行结果如图所示。,定位和显示,CSS,滤镜,使用滤镜属性可以把可视化的滤镜和转换效果添加到一个标准的,HTML,元素上（例如图片、文本等），从而使页面的视觉效果更加鲜亮。滤镜如表所示。,下面重点介绍,Alpha,滤镜，该滤镜主要用于设置透明层次。,语法：,filter,：,Alpha,（,Opacity=value,，,Finishopacity,=value,，,Style=value,，,Startx,=value,，,Starty,=value,，,Finishx,=value,，,Finishy,=value,）,Alpha,属性是把一个目标元素与背景混合。可以通过指定数值来控制混合的程度。,Alpha,滤镜属性值如表所示。,CSS,滤镜,例,使用,CSS,滤镜会更快捷地对,HTML,页面中的元素进行特效处理。下面示例是几种,CSS,滤镜的应用。程序代码如下：,CSS,滤镜的应用,CSS,滤镜效果,CSS,滤镜,Alpha,滤镜,&,nbsp,;,Blur,滤镜,Wave,滤镜,&,nbsp,;,Gray,滤镜,运行结果如图所示。,CSS,滤镜,CSS+DIV,美化与布局页面,标记与,标记,与,的区别,用,CSS+DIV,实现指定尺寸无边框无滚动条窗口,标记与,标记,在使用,CSS,排版的页面中，,与,是两个常用标记。利用这两个标记，加上,CSS,对其样式的控制，可以很方便的实现各种效果。,（,divsion,）,简单而言是一个区块容器标记，即,之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种,HTML,元素。因此，可以把,中的内容视为一个独立的对象，用于,CSS,的控制。声明时只需要对,进行相应的控制，其中的各标记元素都会因此而改变。,例,通过,CSS,对,块进行控制，制作一个宽,400,像素，高,100,像素的黄色区块，并设置相应的文字效果，如图所示。,程序代码如下：,div,标记的应用,标记与,标记,这是一个,div,标记,标记与,标记一样，作为容器标记而被广泛应用,HTML,语言中。在,与,中间同样可以容纳各种,HTML,元素，从而形成独立的对象。在上面的例子中，如果把,替换成,，,样式表中把,div,替换成,span,，,执行后会发现效果完全一样。从这里可以得出,与,这两个标记起到的作用都是独立出各个区块，二者没有太多的不同。,标记与,标记,与,的区别在于，,是一个块级（,block-level,）,元素，它包围的元素会自动换行。而,仅仅是一个行内元素，在它的前后不会换行。,没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用,元素。,此外，,标记可以包含于,标记之中，成为它的子元素，而反过来则不成立，即,标记不能包含,标记。,例,下面通过一个实例演示,与,的区别，效果如图所示。,从图中可以看出，,标记的,3,幅图片被分在了,3,行中，而,标记的图片在同一行，没有换行。程序代码如下：,div,与,span,的区别,标记与,标记,div,标记不同行：,span,标记同一行：,标记与,标记,用,CSS+DIV,实现指定尺寸无边框无滚动条窗口,对于一个页面风格清新自然的网站来说，如果弹出的窗口带有不适合页面风格的灰色边框及死板的标题栏，那么这势必会影响网站的整体效果。,例,下面使用,CSS+DIV,实现一种更为完善的无边框窗口。运行网页，单击“用户登录”超级链接即可弹出无边框的用户登录窗口，如图所示。,实现过程如下：,（,1,）在要弹出无边框窗口的页面的最底部加入一个,DIV,层，其,name,属性的值为,User,，,并通过,其,style,属性控制层的大小和层的隐藏，该层中的内容为无边框窗口要显示的内容。,User,层的完成代码如下：,=,用户登录,=,用户名：,密,&,nbsp,;,码：,用,CSS+DIV,实现指定尺寸无边框无滚动条窗口,&,nbsp,;,（,2,）在页面中加入“用户登录”超级链接，该超级链接执行的操作是调用自定义,JavaScript,函数,Myopen,(),显示,User,层。关键代码如下：,用户登录,（,3,）,编写自定义的,JavaScript,函数,Myopen,(),，,用于控制层的居中显示，代码如下。,function,Myopen(divID,),/,根据传递的参数确定显示的层,divID.style.display,=block;,divID.style.left,=(document.body.clientWidth-240)/2;,divID.style.top,=(document.body.clientHeight-139)/2;,用,CSS+DIV,实现指定尺寸无边框无滚动条窗口,附录,1.,样式,表属性,类型,CSS,属性,值,字体,属性,font-family,Arial,，,serif,，,宋体,font-size,Small,，,medium,，,large,或直接指定字体大小,font-style,normal,italic,font-weight,normal,bold,lighter,100,200,文本,属性,text-align,left,right,center,justify,text-indent,度量或,%,text-decoration,none,blink,underline,overline,line-through,text-transform,none,capitalize,uppercase,lowercase,vertical-align,Baseline,super,sub,top,text-top,middle-bottom,text-bottom,word-spacing,度量,letter-spacing,度量,附录,2.,样式,表属性,类型,CSS,属性,值,框,属,性,border,None,solid,double,ridge,inset,outset,groove,dotted dashed,border-style,同上,border-width,度量，,thick,，,medium,，,thin,border-color,#RRGGBB,，颜色名称,margin-top,度量或,%,Margin-left,度量或,%,定位,属性,top,度量,width,度量或,%,height,度量或,%,left,度量,颜色,属性,color,#RRGGBB,，颜色名称,background-,color,#RRGGBB,，颜色名称，,transparent,background-image,url,background-repeat,repeat,repeat-x,repeat-y,no-repeat,