第5章网页制作教程.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,第,5,章,CSS,技术基础,本章知识技能要点：,CSS,层叠样式表在网页制作中的作用,CSS,层叠样式表的基本类型,如何,在,HTML,文件中使用,CSS,CSS,常用的属性及其取值,CSS,中的滤镜效果及其应用,5.1 CSS,的基本概念,5.1.1,了解层叠样式表,CSS,（,Cascading Style Sheets,）,是层叠样式表的简称。,CSS,是一系列格式设置规则，它们控制,Web,页面内容的外观。使用,CSS,设置页面格式时，请将内容与表现形式分开。页面内容（即,HTML,代码）驻留在,HTML,文件自身中，而用于定义代码表现形式的,CSS,规则驻留在另一个文件（外部样式表）或,HTML,文档的另一部分（通常为文件头部分）中。使用,CSS,可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。,CSS,允许控制,HTML,无法独自控制的许多属性。例如，可以为选定的文本指定不同的字体大小和单位（像素、磅值等）。通过使用,CSS,以像素为单位设置字体大小，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。,除设置文本格式外，还可以使用,CSS,控制,Web,页面中块级别元素的格式和定位。例如，可以设置块级元素的边距和边框、其他文本周围的浮动文本等。,5.1 CSS,的基本概念,CSS,格式设置规则由两部分组成：选择器和声明。选择器是标识格式元素的术语（如,P,、,H1,、类名或,ID,），声明用于定义元素样式。在下面的示例中，,H1,是选择器，介于花括号“,”,之间的所有内容都是声明：,H1,font-size:16 pixels;,font-family:Helvetica;,font-weight:bold;,声明由两部分组成：属性（如,font-family,）和值（如,Helvetica,）。上面的,CSS,规则为,H1,标签创建了一个特定的样式：链接到此样式的所有,H1,标签的文本都将是,16,个像素大小、,Helvetica,字体和粗体。,5.1 CSS,的基本概念,5.1.2,层叠式样式表的类型,CSS,的每一条定义都有如下的形式,:,selector property1:value1;property2:value2;.,其中：,selector,称为选择器，,property:value,是属性和属性的取值。,选择器,selector,有三种类型,:,5.1 CSS,的基本概念,5.1.2.1,为某个具体标签定义样式,是为,HTML,的标签定义样式,比如,P,BODY,A,等等。如：,h1 background-color:#336699;,color:red,在,html,文件中应用时的形式为：,大家好,显示的效果是“大家好”使用了背景颜色“,#336699”,和文字颜色“,red”,。,5.1.2.2,为一类标签定义样式,又称为“,class”,类选择器。如定义样式：,.text font-family:,隶书,;color:#ff00ff,，定义了类名为“,text”,的样式。,在,html,文件中应用时的形式为：,大家好,显示的效果是“大家好”使用了字体“隶书”和文字颜色“,#ff00ff”,。,5.1.2.3,为标签设定唯一可用的样式,又称为“,ID”,选择器。如定义样式：,#,tdcolor,color:red,，定义了,ID,为“,tdcolor,”,的样式。,在,html,文件中应用时的形式为：,大家好,5.2,在,HTML,文件中使用,CSS,CSS,与,HTML,文件的结合使用有下述的三种方式。,5.2.1,将,CSS,放在,HTML,文件的标签,之间,使用时，将,CSS,放在,HTML,文件的标签,之间，并且以标签,开始，以,结束。例如：,h1font-size:12pt;color:red,h2font-size:5pt;color:blue,例,5-1,：,h1font-size:20pt;color:red,h2font-size:10pt;color:blue,网页的第一级标题,网页的第二级标题,5.2,在,HTML,文件中使用,CSS,例,5-1的运行效果,5.2.2,在,body,内的标签中实现,在,body,内的标签中使用属性“,style=”,来定义样式。例如：,例,5-2,：,网页的第一级标题,网页的第二级标题,5.2,在,HTML,文件中使用,CSS,例,5-2,的运行效果,5.2.3,在,HTML,文件调用外部样式表文件,外部,CSS,样式表是一系列存储在一个单独的外部,CSS(.css),文件（并非,HTML,文件）中的,CSS,规则。利用文档文件头标记,中的链接标签,，该,(.css),文件可以被链接到,Web,站点中的一个或多个页面。,在,html,文件中应添加语句，例如：,其中，“,rel,”,属性用于确定被链接文件的关系，当链接“,.CSS”,文件时，应使“,rel,=,stylesheet,”,；,“,type”,属性用于指名样式语言的类型，对于,CSS,应使“,type=text/,css,”,；,“,href,”,属性用于指定要链接的“,.,css,”,文件。,5.2,在,HTML,文件中使用,CSS,将两个或更多,CSS,规则应用于同一文本时，这些规则可能会发生冲突并产生意外的结果。浏览器按以下方式应用,CSS,规则：,当两个不同样式表用于同一段文字时，这段文本受所有样式控制。例如，一种规则可能指定文本颜色为蓝色，而另一种规则可能指定文本的字体为隶书。,当两个有相同属性的样式表应用于同一段文字，则应用时与文字最近的样式表起作用。,当,HTML,样式与,CSS,样式存在冲突时，层叠样式表使用高的优先级。,如果有直接冲突，则自定义,CSS,规则（使用,class,属性应用的规则）中的属性将覆盖,HTML,标签样式中的属性。,在下面的示例中，为,h1,定义的样式可以指定所有,h1,段落的字体、大小和颜色，但应用于该段落的自定义,CSS,规则,.Blue,将覆盖,h1,样式中的颜色设置。另一个自定义,CSS,规则,.Red,将覆盖,.Blue,，因为它位于,.Blue,样式的内部。,5.3,层叠样式表的冲突,（一个标记受到两个以上的样式修饰）,例,5-4,：,.redcolor:red;font-size:20,.bluecolor:blue;font-size:30,这段文字由“,.blue”,样式定义为蓝色字体,这段文字由“,.red”,样式定义为红色字体并且字号变小,这段文字又返回为蓝色字体和原来的字号,5.3,层叠样式表的冲突,（一个标记受到两个以上的样式修饰）,例,5-4,的运行效果,5.4.1,字体属性,字体属性主要包含字体名称、字体风格、字体加粗、大小等，如表,5-1,所示。,5.4 CSS,的属性及其取值,例,5-5,：,.font1font-size:20;font-variant:small-caps,.font2font-family:,楷体,_gb2312;,.font3font-style:italic;font-weight:bold,这段文字由“,.font1”,样式定义为,20,像素大小，并将小写字母转换为大写。,这段文字由“,.font2”,样式定义为楷体字体。,这段文字由“,.font3”,样式定义为斜体并加粗。,5.4 CSS,的属性及其取值,例,5-5,的运行效果,5.4 CSS,的属性及其取值,5.4.2,文本属性,字体属性用于控制网页文本的段落格式效果。主要包含字母间隔、文字修饰、文本排列、缩进、大小等。如表,5-2,所示。,5.4 CSS,的属性及其取值,例,5-6,：,.font1text-decoration:line-through,.font2line-height:10%,.font3 letter-spacing:10px,这段文字由“,.font2”,样式定义为使用删除线字体。,这段文字由“,.font1”,样式定义为行间距等于文字大小的,10%,。,这段文字由“,.font3”,样式定义为字符间距等于,10px,。,5.4 CSS,的属性及其取值,5.4 CSS,的属性及其取值,例,5-6,的运行效果,5.4.3,颜色和背景属性,该属性包含网页中元素的颜色及背景等。如表,5-3,。,5.4 CSS,的属性及其取值,例,5-7,：,.titlebackground-color:#e6e600;font-family:,楷体,_gb2312;font-size:30pt,.backimgbackground-image:url(Blue.jpg);font-weight:900,题目,这段文字由“,backimg,”,样式定义为使用图像“,Blue.jpg,”,作为文字背景。,5.4 CSS,的属性及其取值,5.4 CSS,的属性及其取值,例,5-7,的运行效果,5.4.4,边框属性,边框属性作用于网页元素的边框的宽度、式样和颜色,dengdeng,。如表,5-4,。,5.4 CSS,的属性及其取值,5.4 CSS,的属性及其取值,续,例,5-8,：,.,titleborder-style:double,;border-color:red;border-width:10;font-size:20pt,.,backimgborder-style:dotted,;border-color:red;border-width:5;,background-image:url(blue.gif);font-weight:900,使用双线边框的题目,这段文字由“,backimg,”,样式定义为使用图像“,blue.gif,”,作为文字背景，并且使用虚线边框。,5.4 CSS,的属性及其取值,5.4 CSS,的属性及其取值,例,5-8,的运行,效果,在定义,CSS,时使用,filter,滤镜）属性，可以控制文本、图片或其他对象具有更加丰富多彩的显示效果，例如图像的透明效果、图像的模糊效果、图像的翻转效果等等。,常用的滤镜取值如表,5-5,。,5.5 CSS,的滤镜属性,5.5.1 alpha,滤镜,作用：设置透明层次,基本语法：,filter:,alpha(opacity,=value1,finishopacity=value2,style=value3,startx,=value4,starty,=value5,finishx,=value6,finishy,=value7),语法解释：,value,取值如表,5-6,所示。,5.5 CSS,的滤镜属性,例,5-9,：,.alphaimgfilter,:,alpha(opacity,=30,finishopacity=100,style=1),没有使用滤镜的图像 使用了渐变透明滤镜的图像,5.5 CSS,的滤镜属性,5.5 CSS,的滤镜属性,例,5-9,的运行效果,5.5.2 blur,滤镜,作用：设置模糊效果,基本语法：,filter:,blur(add,=value1,direction=value2,strength=value3),语法解释：,value,取值如表,5-7,所示。,5.5 CSS,的滤镜属性,例,5-10,：,.,blurimgfilter,:,blur(add,=false,direction=45,strength=20),没有使用滤镜的图像 使用了模糊滤镜的图像,5.5 CSS,的滤镜属性,5.5 CSS,的滤镜属性,例,5-10,的,运行,效果,5.5.3 shadow,滤镜,作用：渐变阴影效果,基本语法：,filter:,shadow(color,=value1,direction=value2,语法解释：,value,取值如表,5-8,所示。,5.5.4 glow,滤镜,作用：边缘光晕效果,基本语法：,filter:,glow(color,=value1,strength=value2,语法解释：,value,取值如表,5-9,所示。,5.5 CSS,的滤镜属性,例,5-11,：,.,shadowtextfilter,:,shadow(color,=#993399,direction=135);width=800,.,glowtextfilter,:,glow(color,=#cc00cc,strength=5);width=800,使用了渐变阴影效果的文字,使用了边缘光晕效果的文字,5.5 CSS,的滤镜属性,5.5 CSS,的滤镜属性,例,5-11,的运行效果,5.6,练习题,一、思考题,1,什么是,CSS,层叠样式表？,2,CSS,层叠样式表在网页制作中的作用如何？,3,CSS,层叠样式表有哪些基本类型？,4,如何,在,HTML,文件中使用,CSS,？,5,浏览器是怎样处理多个样式同时作用于一个对象时产生的冲突的？,二、操作题,1,使用,CSS,的字体属性定义一样式，并将其作用于网页中的文字对象。,2,使用,CSS,的文本属性定义一样式，并将其作用于网页中的文字对象。,3,使用,CSS,的颜色和背景属性定义一样式，并将其作用于网页中的文字对象。,4,使用,CSS,的边框属性定义一样式，并将其作用于网页中的文字对象。,5,使用,CSS,的滤镜属性定义一透明效果样式，并将其作用于网页中的图像对象。,6,使用,CSS,的滤镜属性定义一模糊效果样式，并将其作用于网页中的图像对象。,