[互联网]不错的教程CSSDIV教程范本02.ppt

《[互联网]不错的教程CSSDIV教程范本02.ppt》由会员分享，可在线阅读，更多相关《[互联网]不错的教程CSSDIV教程范本02.ppt（97页珍藏版）》请在三一办公上搜索。

1、第五章 样式表,统一网站风格、制作基本特效,CSS样式表,2,主要内容,一、样式表(CSS)的基本概念二、CSS与HTML文档的结合方法三、CSS属性的理解与应用四、CSS样式的单位五、CSS样式在网页中的应用六、CSS的高级应用,CSS样式表,3,一、CSS的基本概念,1、编写CSS样式的方法使用CSS编辑器如Dreamweaver、Frontpage等都会自带CSS编辑器。使用超文本编辑器如Dreamweaver、Frontpage等超文本编辑器均可编辑样式表；记事本,CSS样式表,4,一、CSS的基本概念,2、基本语法,选择符属性:值,选择符属性1:值1;属性2:值2;,单一选择符的复合

2、样式声明应该用“;”隔开，为便于阅读也可以分行写。,几乎所有的HTML标记符形式都可以作为选择符。,CSS例子H1 font-size:x-large;color:redH2 font-size:large;color:blue,5-1.htm,H1 font-size:x-large;color:redH2 font-size:large;color:blue,CSS样式表,5,一、CSS的基本概念,3、CSS样式的组合、继承和关联性样式的组合：把具有相同声明定义的选择符组合在一起，并用逗号隔开。例如：段落元素p、单元格元素td和类c1可以使用相同样式：,p,td,.c1font-size:

3、12pt;font-family:黑体;color:red,5-2.htm,CSS样式表,6,一、CSS的基本概念,样式的继承：若子元素未定义，则它将继承上级元素的样式的定义。但存在少数属性不能继承，见P119。,CSS例子,5-3.htm,CSS样式表,7,一、CSS的基本概念,样式表的关联性：样式表的关联性指在某些样式定义中，可以定义某样式仅在某个特定元素范围内才有效。例如：,p bfont-size:12pt;font-family:黑体;color:red,b元素仅在p元素作用范围内会套用上述的样式设定。而在其他地方不具有这些属性。,5-4.htm,CSS样式表,8,一、CSS的基本概

4、念,4、注释 CSS文字的注释形式与C语言类似。,pfont-size:12pt/*P标签的样式定义*/,CSS样式表,9,一、CSS的基本概念,5、选择符 样式表的基本语法形式：,selectorproperty1:value1;property2:value2;,需要应用的样式的内容,样式的属性,样式的属性的值,Select的五种合法的类别：HTML标记符、用户定义的类Class、用户定义的ID、虚类和虚元素 P119,CSS样式表,10,选择符的类别,HTML标记符应用比较多，注意继承性、组合性和关联性（P119）的应用。用户定义的类选择符可以使用任何名称命名类。里所有的元素都可以定义“

5、类”。语法如下：,selector.classnameproperty1:value1;property2:value2;.classnameproperty1:value1;property2:value2;,例5-5.htm,1、两种定义形式的区别？2、在标签中使用类选择符样式的使用方式如何？,CSS样式表,11,选择符的类别,ID选择符应用的形式基本与类选择符类似，定义时用“#”替代”.”。因此应用时一般选取其中的一种。见P120例子。虚类和虚元素在html的页面元素中没有这种属性，故称其为虚类，仅在IE5.0以上的浏览器版本才支持虚类选择符。语法如下：,页面元素名：元素虚属性名样式表内

6、容,CSS样式表,12,a:link color:#000000a:visited color:#cccccca:hover color:#000000;font-style:italica:active color:#aaaaaa,:link color:#000000:visited color:#cccccc:hover color:#000000;font-style:italic:active color:#aaaaaa,例5-6.htm,CSS样式表,13,二、CSS与HTML文档的结合方法,HTML与样式表有多种结合方法内联样式：在标记符内定义外联样式使用标记符链接到外部的样式文

7、件使用CSS的import标记符来导入样式文件在HTML标签中直接加入样式表的定义。,CSS样式表,14,二、CSS与HTML文档的结合方法,内联样式：在标记符内定义，在本网页内起作用。,CSS样式表,15,二、CSS与HTML文档的结合方法,外联样式：使用标记符链接到外部的样式文件，凡链接的网页都起作用1、定义外部样式文件，用记事本或者Dreamweaver，编辑完后文件扩展名应为”.css”；2、建立HTML网页文档；3、在网页文档中使用标签将前面的样式表文档链接到网页中。,例5-7.htm,CSS样式表,16,二、CSS与HTML文档的结合方法,外联样式：使用import导入外部的样式文

8、件，凡在导入该样式表的网页都起作用1、定义外部样式文件，用记事本或者Dreamweaver，编辑完后文件扩展名应为”.css”；2、建立HTML网页文档；3、在网页文档中import导入前面的样式表。,例5-8.htm,CSS样式表,17,二、CSS与HTML文档的结合方法,在HTML标签中直接加入样式表的定义若在个别标签需要作样式调整，可使用这种方式。使用标签的“Style”属性来定义样式。,被定义的样式文本在此处。,例5-8.htm,CSS样式表,18,三、CSS属性的理解与应用,样式表的5类常用属性：详见P126字体属性 P126：字体、字号、行距等。颜色及背景属性 P127：背景颜色、

9、背景图片等。文本属性：P128区块属性 P128：边框粗细等。分级属性 P128：各组件的字距、行距、缩排等。鼠标属性 P130：鼠标形状等。详见帮助文件,CSS属性,CSS样式表,19,字体属性,Font-family:指定文字的字体H1font-family:华文彩云Font-style：指定文字是否加粗或使用斜体。取值：normal（正常）、oblique（偏斜体）、italic（斜体）Font-size：指定文字的大小。Font：上述样式属性的综合表示法。Pfont:bold 16pt,CSS样式表,20,颜色及背景属性,Color:颜色Background-color：指定背景颜色H

10、1background-color:#000800Background-image：指定Html组件的背景图片，值为url或none。Bodybackground-image:url(image1.jpg),CSS样式表,21,文本属性,Text-decoration：设置底线、顶线、闪烁等文字效果。值为none,underline,overline,line-through,blink.Text-align：指定文字的对齐方式。值为：left,right,center,justify,CSS样式表,22,区块属性,定义边界，取值为：长度|百分比|auto上边界：margin-top；下边界：

11、margin-bottom左边界：margin-left：右边界：margin-rightP.narrow margin-right:50%定义边框：Border-colorBorder-widthBorder-style,CSS样式表,23,分级属性,List-style-type：指定项目符号或编号允许值：disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none List-style-image：指定项目符号的图形文件名称，值为url或noneLI.square list-style-ty

12、pe:square UL.plain list-style-type:none OL list-style-type:upper-alpha/*A B C D E etc.*/OL OL list-style-type:decimal/*1 2 3 4 5 etc.*/OL OL OL list-style-type:lower-roman/*i ii iii iv v etc.*/,CSS样式表,24,鼠标属性,让鼠标移到不同对象上面，显示不同形状。Cursor属性，取值如下Auto：自动按默认显示Crosshair：“”Hand:手形Text：文本I形Wait：等待,CSS样式表,25,练

13、习：,1、若要在网页上使用使用统一的页面风格：背景为浅蓝灰色（#cdcdfe），文本为深蓝色（#000066），所有网页都不留边(Margin)，且列表项目、表格及段落文本中的字体均为10.5pt；颜色：绿色；文本对齐：居中；字体：楷体,Times New Roman；文字格式：加粗。,CSS样式表,26,练习：,2、编辑一个外联样式表，它使所有网页中表格的文本显示为如下风格：文字大小：10.5pt;颜色：绿色；文本对齐：居中；字体：楷体文字格式：加下划线,CSS样式表,27,练习：,3、在上题中，若有一个网页中的某个表格要采取不同的显示方式：如颜色：蓝色；字体：黑体,Arial Black其

14、他与上题相同，应在该页上使用什么样式表？,CSS样式表,28,练习：,4、定义一个类选择符，样式为：文字大小：12pt;颜色：绿色；文本对齐：居中；字体：楷体，Times New Roman文字格式：加粗并在多个页面元素中引用此类样式。,CSS样式表,29,练习：,5、定义一个伪类选择符，使超链接具有一下特效：（1）超链接没有下划线；（2）当鼠标指向超链接时，文字从10pt变成12pt，文字加粗；（3）超链接文本在单击前是蓝色，在单击后是灰色，并变成斜体。,CSS样式表,30,课堂练习：,定义一个内联样式，使网页中的所有段落显示效果如下：字的大小：12px字的颜色：0000ff对齐方式为居中背

15、景颜色：gray,CSS样式表,31,四、CSS样式的单位,定义长度：符号 数值 单位（P132）绝对长度单位：cm,mm,in,pt(印刷点数),pc等。相对长度单位：px（像素）,em,ex。百分比单位百分比值总是相对于另一个值来说的，参照值一般是该元素本身的字体尺寸。样式的单位,CSS样式表,32,四、CSS样式的单位,定义颜色rgb函数：rgb(R,G,B)R、G、B可用百分比值表示，也可用0255的整数值表示。使用十六进制数组：#RRGGBB直接使用颜色名。,color:rgb(100%,0,0)color:rgb(255,0,0)color:#FF0000color:red,CSS

16、样式表,33,五、CSS样式在网页中的应用,1、在网页中创建样式，分别创建下列三种样式标签选择符类选择符ID选择符2、在网页中导入、链入样式表文件,CSS样式表,34,五、CSS样式在网页中的应用,CSS样式表,35,六、用CSS样式制作一些特殊效果,1、给文字设置图形背景：利用层2、文字间的重叠效果：利用两个层3、首字放大P:first-letter,例5-10.htm,CSS样式表,36,七、样式表的高级应用,1、CSS的滤镜属性（filter）的应用2、应用滤镜制作常见特效文字特效鼠标特效图像特效3、利用css进行页面布局,滤镜实例,CSS样式表,37,1、CSS的滤镜属性（filter

17、）的应用,样式表滤镜的构成标记FILTER:滤镜名（属性名属性值，属性名属性值，.）;例如：p filter:alpha(opacity=80,style=1);静态滤镜的种类（IE4.0以上版本）Alpha让对象呈现渐变半透明效果 Blur 让对象产生风吹模糊的效果 DropShadow 让对象有一个下落式的阴影 Glow在对象的周围产生光晕而模糊的效果,CSS样式表,38,Chroma让图像中的某一颜色变成透明色 FlipH让HTML对象水平转换 FlipV让HTML对象垂直转换 Wave让HTML对象产生水平或是垂直方向上的正弦波形 Shadow让对象产生阴影效果 Mask利用一个HTM

18、L对象在另一个对象上产生图像的遮罩Light在HTML元件上放置一个光影Gray把一个彩色的图象变成灰色调图象 Invert让对象产生照片底片的效果 XRay让对象轮廓突出显示,1、CSS的滤镜属性（filter）的应用,CSS样式表,39,（1）Alpha让对象呈现渐变半透明效果,1、CSS的滤镜属性（filter）的应用,p filter:alpha(opacity=80,style=0,starX=2,finishX=4);,filter:alpha(属性=属性值),0表示全图统一同一透明度,应用在层或表格或图片中有效。,CSS样式表,40,（2）Blur让对象产生模糊的效果 P158,

19、1、CSS的滤镜属性（filter）的应用,filter:blur(属性=属性值),p filter:blur(add=1,direction=60,strength=2);,CSS样式表,41,（3）DropShadow让对象有一个下落式的阴影,1、CSS的滤镜属性（filter）的应用,p filter:dropshadow(color=#ff0080,offX=2,offY=2,positive=0);color:#00ff11,filter:dropshadow(属性=属性值),CSS样式表,42,（4）Glow在对象的周围产生光晕而模糊的效果 参数如下：COLOR：指定发光的颜色。S

20、TRENGTH：发光强度的表现，也指光晕的厚度；其大小可以从1到255之间的任何整数来指定这个强度。例如：,1、CSS的滤镜属性（filter）的应用,p filter:glow(color=#880088,strength=3);,CSS样式表,43,（5）Chroma让图像中的某一颜色变成透明色 参数如下：COLOR属性：用来指定要变为透明色的颜色，通过该属性值的设定，我们可以来过滤某图象中的指定颜色。例如：（6）FlipH让HTML对象水平转换（没有参数）FlipV让HTML对象垂直转换（没有参数）例如：,1、CSS的滤镜属性（filter）的应用,p filter:chroma(col

21、or=#0000fe)；,p filter:filph,CSS样式表,44,（7）Wave让HTML对象产生水平或是垂直方向上的正弦波形参数如下：add：是一个布尔值，它用来决定是否将原始图象加入最后的效果之中。0：不使用原图；1：使用freq：是指波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹。phase：用来设置正弦波的偏移量，也就是决定波形的形状，其属性值的取值范围为从0到360度。lightstrength：对于波纹增强光影的效果，其取值范围为从0到100。strength：用来决定波形振幅的大小。,1、CSS的滤镜属性（filter）的应用,CSS样式表,45,（8）Sh

22、adow让对象产生阴影效果 参数如下：color：设置阴影的颜色。direction：设置投影的方向，取值范围为度到度，其中0度代表垂直向上，然后每45度为一个单位，该属性的默认值是向左的270度。例如：,1、CSS的滤镜属性（filter）的应用,p filter:shadow(color=#00ff00,direction=45)；,CSS样式表,46,（9）Mask利用一个对象在另一个对象上产生图像的遮罩 作用：该滤镜能够利用一个HTML对象在另一个对象上产生图像的遮罩，可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样，一般适用于图象对象。参数：color属性用来指定要

23、被遮罩的颜色。,1、CSS的滤镜属性（filter）的应用,CSS样式表,47,（10）Light在HTML元件上放置一个光影（没有参数）作用：该滤镜能够使html对象产生一种模拟光源的投射效果。一旦为对象定义了light滤镜属性，那么就可以调用它的方法来设置或者改变属性。light可用的方法有：MoveLight 移动光源 Changcolor 改变光的颜色 AddAmbient 加入包围的光源 AddPoint加入点光源 Clear 清除所有的光源 AddCone 加入锥形光源 Changstrength 改变光源的强度,1、CSS的滤镜属性（filter）的应用,CSS样式表,48,（1

24、1）Gray把一个彩色的图象变成灰色调图象 作用：该滤镜能够使一张彩色的图片转变为灰色调图象，一般适用于图象对象。参数：该滤镜没有附带参数。（12）Invert让对象产生照片底片的效果作用：该滤镜能够使图象产生照片底片的效果，一般适用于图象对象。参数：该滤镜没有参数。（13）XRay让对象轮廓突出显示作用：该滤镜能够让对象反映出它的轮廓并把这些轮廓加亮显示，一般适用于图象对象。参数：该滤镜没有参数。,1、CSS的滤镜属性（filter）的应用,CSS样式表,49,3、新的滤镜（要结合Javascript脚本）(1)Blentrans:混合转换滤镜，提供淡入淡出效果duration 参数：淡入或

25、淡出的时间，以秒作单位(2)RevealTrans:提供了更加多变的转换效果duration：转换的秒数transition：转换的类型,1、CSS的滤镜属性（filter）的应用,CSS样式表,50,blendTrans实例：5-24bldtrans.html,1、在网页中需要实现淡隐的对象，可插入div标签，并在id栏中输入名字，如div1：,CSS样式表,51,2、在div1中编辑内容，输入文字、插入图片，如下图虚线框内所示。,CSS样式表,52,3、编辑id样式，样式名即位该层的ID名称，本例中即为div1。,CSS样式表,53,4、进入代码视图，在头部插入脚本,/若当前对象没有隐藏,

26、/应用第一个滤镜,/将对象没有隐藏,/播放第一个滤镜,CSS样式表,54,选中“单击”,编辑超链接内容为：javascript:fadein(div1),CSS样式表,55,5、而后预览！若无效果，可将div1的样式中添加定位方式为绝对即可,CSS样式表,56,若要实现淡出，只要再加一个函数：fadeout(obj)即可,而后在设计视图中添加文字，并将该文字的超链接设置成javascript:fadeout(div1),CSS样式表,57,revealTrans：5-25 rvlTrans.html,myText=new Array(4);myText0=学习网页制作！myText1=使用Dr

27、eamWeaver！myText2=制作自己的特色小站！myText3=http:/!var i=-1;function trans()if(i=3)i=0;elsei+;div1.filters0.Apply();div1.innerText=myTexti;div1.filters0.Play();my=setTimeout(trans(),4000);,CSS样式表,58,revealTrans：5-26 rvlTrans_2.html,CSS样式表,59,2、应用滤镜制作常见特效,（1）文字特效（2）用样式表改变鼠标的显示形状（3）图像特效略,CSS样式表,60,2、应用滤镜制作常见特

28、效汇总,（1）文字特效用glow滤镜可以做空心字，方法是将字体颜色设置为背景色，再将glow滤镜的strength的值设置为1或2即可。这个效果的代码如下：,滤镜实例,p filter:glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135),CSS样式表,61,2、应用滤镜制作常见特效汇总,利用Chroma()滤镜做图案文字例如：,滤镜实例,dreamweaver,CSS样式表,62,2、应用滤镜制作常见特效,（2）用样式表改变鼠标的显示形状用cursor样式，取值如下：hand手的形状crosshair十字型text

29、移动到文本上的那种效果wait等待的那种效果default默认效果help问号e-size向右的箭头,ne-resize向右上的箭头n-resize向上的箭头nw-resize向左上的箭头w-resize向左的箭头sw-resize左下的箭头s-resize向下的箭头se-resize向右下的箭头auto由系统自动给出效果,例如：aa,滤镜实例,CSS样式表,63,2、应用滤镜制作常见特效汇总,阴文阳文,滤镜实例,CSS样式表,64,CSS与网页结合应用1、背景的应用,background复合属性和font一样，可以使用复合属性一次性设置与背景相关的所有属性值background的属性列表的顺

30、序依次为：颜色、图像、重复、依附、位置中间用空格分开，如果某个属性值为空，则用默认值代替,.style1 background:lightgrey url(boy1.gif)repeat-y fixed 10%20%,CSS样式表,65,CSS与网页结合应用背景的应用,在页面上添加纯装饰性的图像，同时又希望将图像从内容重分离出来创建一个内容为空的div，并将该图像设置为其背景图创建圆角框简单的圆角框：simple-fixed-rounded.htm高度可变的圆角框：advanced-fixed-rounded.htm高度宽度都可变的圆角框：advanced-flexible-rounded.h

31、tm创建阴影效果简单的阴影：easy-drop-shadow.htm使用负值的空白边偏移技术带边框：easy-drop-shadow2.htm,#branding width:700px;height:200px;background:url(branding.gif)no-repeat;,.img-wrapper img margin:-5px 5px 5px-5px;,CSS样式表,66,CSS与网页结合应用 2、CSS中的布局,要掌握的三个最重要的CSS概念是：框模型（box model，或盒模型）定位（position）浮动（float）这些概念可以控制在页面上安排和显示元素的方式，形

32、成CSS的基本布局与传统的表格控制布局不同只有掌握这些概念，CSS开发就会变得容易这一部份就介绍布局的可视化模型及相关的属性,CSS样式表,67,CSS的布局,Box Model是CSS的基石之一页面上的每个元素被看作是一个矩形框，这个框由元素的内容、填充、边框和空白边(margin)组成,填充出现在内容区域的周围，如果元素上添加背景，那么背景会应用于由内容和填充组成的区域,添加边框会在填充区域外加一条边线，线条可以有多种样式,空白边是透明的，用来控制元素之间的间隔,CSS样式表,68,Box Model中的属性 5-19 boxmoldel.html,填充、边框和空白边都可以设置，默认值均为

33、0注意：在CSS的BOX模型中，width和height指的是内容区域的宽度和高度而IE5和IE6在怪异模式中采用自己的非标准的Box模型，width是内容、填充和边框宽度的总和，height也是如此,CSS样式表,69,MARGIN-空白边宽度设置包括下列属性MARGIN-LEFTMARGIN-RIGHTMARGIN-TOPMARGIN-BOTTOM也可以使用复合属性：margin，按上右下左的顺序 margin:auto|length可以使用长度值或百分数，也可以是auto(由浏览器自动调整),#style1 margin-top:100px#style2 margin-left:100p

34、x#style3 margin-right:20%#style4 margin-bottom:100pt,Box Model,Ex:container.htm,CSS样式表,70,空白边叠加当两个垂直的空白边相遇时，它们将形成一个空白边，其高度为两个空白边的最大值当一个元素包含在另一元素中时，它们的顶/底空白边也会发生叠加内容为空的元素(也没有边框和填充)，这时它的上下空白边就碰到一起，也要发生叠加,CSS样式表,71,PADDING设置填充的宽度使用方法与margin一样,#style1 padding-top:100px#style2 padding-left:100px#style3 p

35、adding-right:10%#style4 padding-bottom:100pt#style5 padding:100pt,Box Model,CSS样式表,72,WIDTH宽度可以使用长度值或百分数，也可以是auto(由浏览器自动调整或保持该元素的原有大小，如图像),#style1 width:100px,HEIGHT高度设置方法与width一样,#style1 height:100px,Box Model,CSS样式表,73,BORDER对于边界的设置，包括宽度、颜色、线条样式三种，使用方法相同：border-color:颜色值列表设置各个边框的颜色，设置顺序和margin一样也可

36、以分别用四个属性：border-top-color，border-bottom-color，border-right-color，border-left-colorborder-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset设置各个边框的线条样式也可以分别用四个属性：border-top-style，border-bottom-style，border-left-style，border-right-style,#style1 border-color:blue green#1f1f1f blue;#

37、style2 border-color:blue;#style3 border-top-color:blue;#style4 border-style:dotted;,Box Model,CSS样式表,74,border-width:medium|thin|thick|length 设置各个边框的宽度也可以分别用四个属性：border-top-width，border-right-width，border-bottom-width，border-left-width也可以使用border-top，border-right，border-bottom，border-left四个属性一次性地设置各

38、个边的宽度、样式和颜色这四个属性使用方法相同，如：border-top:border-top-width border-top-style border-top-color或使用一个复合属性设置所有属性值：border:border-width border-style border-color,#style1 border-bottom:25px solid red;border-left:25px solid yellow;#style2 border-width:1px thin 5px thick;#style1 border-top-width:20px;p border:thick

39、 double yellow;,CSS样式表,75,定位与显示,CSS的定位与显示属性可以把一个HTML元素定位在网页中的任何位置定位与布局密切相关CSS中有三种基本的定位机制普通流：显示的位置由元素在HTML文件中的位置决定浮动：可以左右移动，直到碰到包含框或其它浮动框绝对定位：可以直接将元素定位在页面上地任何位置层叠顺序进行CSS定位时，有可能发生多个元素的重叠需要设置元素在Z轴上的层叠顺序与定位相关的属性主要有14个可参考：http:/www.w3.org/TR/CSS21/visuren.html,CSS样式表,76,普通流定位机制 5-28 relative.thml,按照元素的类型

40、和在HTML源文件中的出现顺序进行定位就是block元素（如p、h、div）（块级框）从上到下一个接一个的排列inline元素（如span、strong元素）在行中水平布置除非特殊的指定，否则所有的框都在普通流中定位相对定位相对于元素在普通文本流中的初始位置如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动,使用相对定位时，元素仍然占据原来的空间，因此被看作普通流定位模型的一个特殊情况另外，移动元素可能导致覆盖其它元素,#style1 position:relative;left:20px;to

41、p:20px,Ex:relative.htm,绝对定位 5-29 absolute.html,可以把某个元素精确的定位在某个地方 绝对定位使元素的位置与文档流无关，因此不占据普通流中的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样绝对定位的元素的位置是相对于最近的父元素而言的,固定定位是绝对定位的一个特殊情况与绝对定位相似，唯一不同的是绝对定位是相对于父元素的某一个位置，而固定定位则是固定在浏览器的视框位置这样当窗口滚动时，固定定位的元素不会随之滚动，总是出现在屏幕的固定位置,#style1 position:absolute;left:20px;top:20px,#style

42、1 position:fixed;left:20px;top:20px,Ex:absolutePos.htm,CSS样式表,78,浮动 5-30float.htm,浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果,Ex:floating-boxes.htm,Ex:clear/text-round.htm,CSS样式表,79,浮动,浮动框覆盖了普通文本流中块框的部分边框和背景，但行框缩短给浮动框腾出空间,三个box都浮动了，向左浮动直到碰到前一个浮动框,#style1 floa

43、t:left;,CSS样式表,80,浮动,如果水平位置没有空间了，则box3会跑到下面去,如果box2的高度没有box1高度大，box1减去box2的高度的部分会把box3拦住,CSS样式表,81,浮动框不再处于普通文档流中，会覆盖其它的块框；而浮动框旁的行框则会被缩短，使其环绕浮动框如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，可以对其周围的元素使用清理属性clear:none|left|right|both添加了clear属性的元素，通过自动增加空白边，达到留出垂直空间的效果,CSS样式表,82,Clear属性,实例：有一图片和一段文字，图片浮动到左侧，文字浮动到右侧，希望将图

44、片和文本包含在另一个具有背景色和边框的元素中,浮动元素不占普通文本流的空间，容器元素成空元素,设置了clear属性的空div元素。移到了浮动框的下面，容器元素得到延伸，包含了浮动元素,.clear clear:both;.news background-color:#eaeaea;border:solid 1px#999;width:500px;.news img float:left;padding:10px 0 10px 10px;.news p float:right;width:350px;margin:0;padding:10px 10px 10px 0;,Ex:enclosing-

45、floats.htm,CSS样式表,83,CSS定位与显示,POSITION设置定位方式属性值：static|absolute|fixed|relative,#style1 position:absolute；right:10px;bottom:10px;#style2 position:relative;,top,left,right,bottom设置元素位置以position定义出来的原点为基准，设置元素的位置,CSS样式表,84,CSS定位与显示,VISIBILITY设置对象是否可见定义这个层级是不是要在画面上显示出功能来，最常利用java script来动态控制某个层级的显示状况，进而

46、达到动态的效果默认值是visible，不显示则设定成hiddendisplay-设置对象显示方式display:block|none|inline|可以各种不同的方式显示对象display=none;与visibility=hidden;是不一样的后者为隐藏的对象保留其占据的物理空间，而前者则不保留Ex:display.htm,#style1 visibility:visible#style1 visibility:hidden,CSS样式表,85,CSS定位与显示,Z-INDEX设置层叠顺序当定位多个元素并将它们相互重叠时，可以使用该属性设置元素在Z轴的层叠顺序z-index:number

47、属性值越大表示在越上层这边填入的数字没有单位,#style1 z-index:100,CSS样式表,86,CSS中的布局,使用CSS布局技术可以完成页面整体布局，实现各种布局样式CSS布局技术都基于三个基本概念：定位、浮动和空白边操纵基本布局方式有很多按外观分，有单列布局、两列布局、三列布局等按实现技术分，有基于自动空白边的布局、浮动布局等按适应性分，有固定宽度布局、流式布局，弹性布局等,CSS样式表,87,居中布局,单列居中设计，是最基础的布局方式可以使用自动空白边方法，Ex:centering-auto-margin.htm可以使用相对定位和负空白边方法，Ex：centering-nega

48、tive-margin.htm,#wrapper width:720px;margin:0 auto;text-align:left;,#wrapper position:relative;left:50%;width:720px;margin-left:-360px;,CSS样式表,88,多列浮动布局,两列浮动布局Ex：2-col-fixed.htm,三列浮动布局Ex:3-col-fixed.htmcontent div包含了两个div,CSS样式表,89,流式布局和弹性布局,流式布局宽度用百分数进行设置使整体布局随浏览器窗口的伸缩而伸缩Ex:3-col-liquid.htm弹性布局以em为

49、单位设置宽度在字号增加时，整个布局随之而扩大Ex:3-col-elastic.htm混合布局可以组合流式布局与弹性布局，以em设置宽度，以百分比设置最大宽度在极端情况下都可以有较好的整体效果Ex:3-col-hybrid.htm,CSS样式表,90,伪列(Faux),前面的例子中，导航和次要内容区都有一个浅灰色的背景，但如果正文比较长，导航和次要内容区域没有扩展到整个内容高度，它们的背景也不会拉长,CSS样式表,91,伪列(Faux),为了使背景能随正文的大小自动延伸，需要使用伪列技术固定宽度的伪列创建背景图案条，然后设置成“纵向平铺”（repeat-y）Ex:faux-3-col-fixed

50、.htm可变宽度的伪列要使用背景图像的百分比定位方法Ex:faux-3-col-liquid.htm,background:#fff url(images/bg-fixed.gif)repeat-y left top;,CSS样式表,92,链接样式,在CSS样式中，定义链接的各种状态a:link 没有接触过的链接用于定义了链接的常规状态。如果希望各种链接都相同，就只需要定义这种链接状态。这种链接状态是基本的a:visited 访问过的链接能清楚的判断已经访问过的链接a:hover 鼠标放在链接上的状态鼠标放到一个链接上，链接就会产生变化；当鼠标离开这个链接时，这种状态就消失a:active 在