不错的教程-CSSDIV教程范本

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Internet与网页设计,CSS样式表,*,第五章 样式表,统一网站风格、制作基本特效,1,Internet与网页设计,主要内容,一、样式表(CSS)的基本概念,二、CSS与HTML文档的结合方法,三、CSS属性的理解与应用,四、CSS样式的单位,五、CSS样式在网页中的应用,六、CSS的高级应用,2,Internet与网页设计CSS样式表,一、CSS的基本概念,1、编写CSS样式的方法,使用,CSS,编辑器,如,Dreamweaver,、,Frontpage,等都会自带,CSS,编辑器。,使用超文本编辑器,如,Dreamweaver,、,Frontpage,等超文本编辑器均可编辑样式表；,记事本,3,Internet与网页设计CSS样式表,一、CSS的基本概念,2、基本语法,选择符,属性: 值,选择符,属性1: 值1,;,属性2: 值2,;,单一选择符的复合样式声明应该用“;”隔开，为便于阅读也可以,分行写,。,几乎所有的HTML标记符形式都可以作为选择符。,CSS例子,H1 font-size:x-large; color:red,H2 font-size:large; color:blue,5-1.htm,H1 font-size:x-large; color:red,H2 font-size:large; color:blue,4,Internet与网页设计CSS样式表,一、CSS的基本概念,3、CSS样式的组合、继承和关联性,样式的组合：把具有,相同声明定义的选择符,组合在一起，并用逗号隔开。,例如：,段落元素,p,、,单元格元素,td,和类,c1,可以使用相同样式：,p,td,.c1font-size:12pt;font-family:黑体;color:red,5-2.htm,5,Internet与网页设计CSS样式表,一、CSS的基本概念,样式的继承：若子元素未定义，则它将继承上级元素的样式的定义。但存在少数属性不能继承，见,P119,。,CSS例子,5-3.htm,6,Internet与网页设计CSS样式表,一、CSS的基本概念,样式表的,关联性,：,样式表的关联性指在某些样式定义中，可以定义某样式仅,在某个特定元素范围内,才有效。,例如：,p bfont-size:12pt;font-family:黑体;color:red,b元素仅在p元素作用范围内会套用上述的样式设定。 而在其他地方不具有这些属性。,5-4.htm,7,Internet与网页设计CSS样式表,一、CSS的基本概念,4、注释,CSS,文字的注释形式与,C,语言类似。,pfont-size:12pt /*P标签的样式定义*/,8,Internet与网页设计CSS样式表,一、CSS的基本概念,5、选择符,样式表的基本语法形式：,selectorproperty1:value1; property2:value2;,需要应用的样式的内容,样式的属性,样式的属性的值,Select的五种合法的类别：,HTML标记符,、,用户定义的类Class,、,用户定义的ID,、,虚类,和,虚元素,P119,9,Internet与网页设计CSS样式表,选择符的类别,HTML,标记符,应用比较多，注意继承性、组合性和关联性（,P119,）,的应用。,用户定义的类选择符,可以使用任何名称命名类。,里所有的元素都可以定义“类”。,语法如下：,selector.classname,property1:value1,;,property2:value2;,.classname,property1:value1,;,property2:value2;,例5-5.htm,1、 两种定义形式的区别？,2、在标签中使用类选择符样式的使用方式如何？,10,Internet与网页设计CSS样式表,选择符的类别,ID,选择符,应用的形式基本与类选择符类似，定义时用“,#”,替代”,.”,。,因此应用时一般选取其中的一种。见,P120,例子。,虚类和虚元素,在,html,的页面元素中没有这种属性，故称其为虚类，仅在,IE5.0,以上的浏览器版本才支持虚类选择符。,语法如下：,页面元素名：元素虚属性名样式表内容,11,Internet与网页设计CSS样式表,a:link color: #000000,a:visited color: #cccccc,a:hover color: #000000; font-style:italic,a:active color: #aaaaaa,:link color: #000000,:visited color: #cccccc,:hover color: #000000; font-style:italic,:active color: #aaaaaa,例5-6.htm,12,Internet与网页设计CSS样式表,二、CSS与HTML文档的结合方法,HTML与样式表有多种结合方法,内联样式,：在标记符内定义,外联样式,使用标记符链接到外部的样式文件,使用CSS的import标记符来导入样式文件,在HTML标签中直接加入样式表的定义,。,13,Internet与网页设计CSS样式表,二、CSS与HTML文档的结合方法,内联样式：在标记符内定义，在本网页内起作用。,14,Internet与网页设计CSS样式表,二、CSS与HTML文档的结合方法,外联样式：,使用标记符,链接到外部的样式文件，凡链接的网页都起作用,1、定义外部样式文件，用记事本或者Dreamweaver，编辑完后文件扩展名应为”.css”；,2、建立HTML网页文档；,3、在网页文档中使用标签将前面的样式表文档链接到网页中。,hr.css,例5-7.htm,15,Internet与网页设计CSS样式表,二、CSS与HTML文档的结合方法,外联样式：,使用import导入,外部的样式文件，凡在导入该样式表的网页都起作用,1、定义外部样式文件，用记事本或者Dreamweaver，编辑完后文件扩展名应为”.css”；,2、建立HTML网页文档；,3、在网页文档中,import导入,前面的样式表。,hr.css,例5-8.htm,16,Internet与网页设计CSS样式表,二、CSS与HTML文档的结合方法,在HTML标签中直接加入样式表的定义,若在个别标签需要作样式调整，可使用这种方式。,使用标签的“Style”属性来定义样式。,被定义的样式文本在此处。,例5-8.htm,17,Internet与网页设计CSS样式表,三、CSS属性的理解与应用,样式表的,5类常用属性：详见P126,字体属性 P126：字体、字号、行距等。,颜色及背景属性 P127：背景颜色、背景图片等。,文本属性：P128,区块属性 P128：边框粗细等。,分级属性 P128：各组件的字距、行距、缩排等。,鼠标属性 P130：鼠标形状等。,详见帮助文件,CSS属性,18,Internet与网页设计CSS样式表,字体属性,Font-family:指定文字的字体,H1font-family:华文彩云,Font-style：指定文字是否加粗或使用斜体。取值：normal（正常）、oblique（偏斜体）、italic（斜体）,Font-size：指定文字的大小。,Font：上述样式属性的综合表示法。,Pfont: bold 16pt,19,Internet与网页设计CSS样式表,颜色及背景属性,Color:颜色,Background-color：指定背景颜色,H1background-color:#000800,Background-image：指定Html组件的背景图片，值为url或none。,Bodybackground-image:url,(image1.jpg),20,Internet与网页设计CSS样式表,文本属性,Text-decoration：设置底线、顶线、闪烁等文字效果。值为none,underline,overline,line-through,blink.,Text-align：指定文字的对齐方式。值为：left,right,center,justify,21,Internet与网页设计CSS样式表,区块属性,定义边界，取值为：长度|百分比|auto,上边界：margin-top；下边界：margin-bottom,左边界：margin-left：右边界：margin-right,P.narrow margin-right: 50% ,定义边框：,Border-color,Border-width,Border-style,22,Internet与网页设计CSS样式表,分级属性,List-style-type：指定项目符号或编号,允许值：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none,List-style-image：指定项目符号的图形文件名称，值为url或none,LI.square list-style-type: 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. */,23,Internet与网页设计CSS样式表,鼠标属性,让鼠标移到不同对象上面，显示不同形状。,Cursor属性，取值如下,Auto：自动按默认显示,Crosshair：“”,Hand:手形,Text：文本I形,Wait：等待,24,Internet与网页设计CSS样式表,练习：,1、若要在网页上使用使用统一的页面风格：,背景,为浅蓝灰色（#cdcdfe），,文本,为深蓝色（#000066），,所有,网页都不留边(Margin),，,且,列表,项目、,表格,及,段落,文本中的字体均为10.5pt；,颜色,：绿色；,文本对齐,：居中；,字体,：楷体,Times New Roman；,文字格式,：加粗。,25,Internet与网页设计CSS样式表,练习：,2、编辑一个外联样式表，它使所有网页中表格的文本显示为如下风格：,文字大小：10.5pt;,颜色：绿色；,文本对齐：居中；,字体：楷体,文字格式：加下划线,26,Internet与网页设计CSS样式表,练习：,3、在上题中，若有一个网页中的某个表格要采取不同的显示方式：如,颜色：蓝色；,字体：黑体,Arial Black,其他与上题相同，应在该页上使用什么样式表？,27,Internet与网页设计CSS样式表,练习：,4、定义一个类选择符，样式为：,文字大小：12pt;,颜色：绿色；,文本对齐：居中；,字体：楷体，Times New Roman,文字格式：加粗,并在多个页面元素中引用此类样式。,28,Internet与网页设计CSS样式表,练习：,5、定义一个伪类选择符，使超链接具有一下特效：,（1）超链接没有下划线；,（2）当鼠标指向超链接时，文字从10pt变成12pt，文字加粗；,（3）超链接文本在单击前是蓝色，在单击后是灰色，并变成斜体。,29,Internet与网页设计CSS样式表,课堂练习：,定义一个内联样式，使网页中的所有段落显示效果如下：,字的大小：12px,字的颜色：0000ff,对齐方式为居中,背景颜色：gray,30,Internet与网页设计CSS样式表,四、CSS样式的单位,定义长度：符号 数值 单位（P132）,绝对长度单位：cm,mm,in,pt(印刷点数),pc等。,相对长度单位：px（像素）,em,ex。,百分比单位,百分比值总是相对于另一个值来说的，,参照值一般是该元素本身的字体尺寸,。,样式的单位,31,Internet与网页设计CSS样式表,四、CSS样式的单位,定义颜色,rgb函数,：rgb(R,G,B),R、G、B可用百分比值表示，也可用0255的整,数值,表示。,使用十六进制数组,：#RRGGBB,直接使用颜色名,。,color: rgb(100%,0,0),color: rgb(255,0,0),color: #FF0000,color:red,32,Internet与网页设计CSS样式表,五、CSS样式在网页中的应用,1、在网页中创建样式，分别创建下列三种样式,标签选择符,类选择符,ID选择符,2、在网页中导入、链入样式表文件,33,Internet与网页设计CSS样式表,五、CSS样式在网页中的应用,字体、大小、粗细、行高、颜色、修饰等,背景颜色、图像、重复、水平位置等,字间距、对齐方式、缩进等,宽、高、填充、边界等,边框的样式、宽度和颜色等,设置项目符号和编号。,位置的设置。,设置滤镜。,34,Internet与网页设计CSS样式表,六、用CSS样式制作一些特殊效果,1、给文字设置图形背景：利用层,2、文字间的重叠效果：利用两个层,3、首字放大,P:first-letter,例5-10.htm,35,Internet与网页设计CSS样式表,七、样式表的高级应用,1、CSS的滤镜属性 （filter） 的应用,2、应用滤镜制作常见特效,文字特效,鼠标特效,图像特效,3、利用css进行页面布局,滤镜实例,36,Internet与网页设计CSS样式表,1、CSS的滤镜属性 （filter） 的应用,样式表滤镜的构成,标记FILTER : 滤镜名（属性名属性值，属性名属性值，.）;,例如：,p filter : alpha(opacity=80,style=1 ); ,静态滤镜的种类（IE4.0以上版本）,Alpha,让对象呈现,渐变半透明,效果,Blur,让对象产生风吹模糊的效果,DropShadow,让对象有一个,下落式的阴影,Glow,在对象的周围产生,光晕而模糊的效果,37,Internet与网页设计CSS样式表,Chroma,让图像中的,某一颜色变成透明色,FlipH,让HTML对象,水平转换,FlipV,让HTML对象,垂直转换,Wave,让HTML对象产生水平或是垂直方向上的,正弦波形,Shadow,让对象产生,阴影效果,Mask,利用一个HTML对象在另一个对象上产生图像的,遮罩,Light,在HTML元件上放置一个,光影,Gray,把一个彩色的图象变成,灰色调图象,Invert,让对象产生,照片底片的效果,XRay,让对象,轮廓突出显示,1、CSS的滤镜属性 （filter） 的应用,38,Internet与网页设计CSS样式表,（1）,Alpha,让对象呈现,渐变半透明,效果,1、CSS的滤镜属性 （filter） 的应用,p filter:alpha(opacity=80,style=0,starX=2,finishX=4);,filter: alpha(属性=属性值),0表示全图统一同一透明度,应用在层或表格或图片中有效。,39,Internet与网页设计CSS样式表,（2）,Blur,让对象产生模糊的效果, P158,1、CSS的滤镜属性 （filter） 的应用,filter: blur(属性=属性值),p filter:blur(add=1,direction=60,strength=2);,40,Internet与网页设计CSS样式表,（3）,DropShadow,让对象有一个,下落式的阴影,1、CSS的滤镜属性 （filter） 的应用,p filter:dropshadow(color=#ff0080,offX=2,offY=2,positive=0);,color:#00ff11,filter: dropshadow(属性=属性值),41,Internet与网页设计CSS样式表,（4）,Glow,在对象的周围产生,光晕而模糊的效果,参数如下：,COLOR,：指定发光的颜色。,STRENGTH,：发光强度的表现，也指光晕的厚度；其大小可以从,1到255之间,的任何整数来指定这个强度。,例如：,1、CSS的滤镜属性 （filter） 的应用,p filter:glow(color=#880088,strength=3);,42,Internet与网页设计CSS样式表,（5）,Chroma,让,图像,中的,某一颜色变成透明色,参数如下：,COLOR,属性：用来指定要变为透明色的颜色，通过该属性值的设定，我们可以来过滤某图象中的指定颜色。,例如：,（6）,FlipH,让HTML对象,水平转换,（没有参数）,FlipV,让HTML对象,垂直转换,（没有参数）,例如：,1、CSS的滤镜属性 （filter） 的应用,p filter:chroma(color=#0000fe)；,p filter:filph,43,Internet与网页设计CSS样式表,（7）,Wave,让HTML对象产生水平或是垂直方向上的,正弦波形,参数如下：,add,：是一个布尔值，它用来决定是否将原始图象加入最后的效果之中。0：不使用原图；1：使用,freq,：是指波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹。,phase,：用来设置正弦波的偏移量，也就是决定波形的形状，其属性值的取值范围为从0到360度。,lightstrength,：对于波纹增强光影的效果，其取值范围为从0到100。,strength,：用来决定波形振幅的大小。,1、CSS的滤镜属性 （filter） 的应用,44,Internet与网页设计CSS样式表,（8）,Shadow,让对象产生,阴影效果,参数如下：,color,：设置阴影的颜色。,direction,：设置投影的方向，取值范围为度到度，其中0度代表垂直向上，然后每45度为一个单位，该属性的默认值是向左的270度。,例如：,1、CSS的滤镜属性 （filter） 的应用,p filter:shadow(color=#00ff00,direction=45)；,45,Internet与网页设计CSS样式表,（9）,Mask,利用一个对象在另一个对象上产生图像的,遮罩,作用：该滤镜能够利用一个HTML对象在另一个对象上产生图像的遮罩 ，可以为对象建立一个,覆盖于表面的膜,，其效果就象戴者有色眼镜看物体一样，,一般适用于图象对象,。,参数：,color,属性用来指定要被遮罩的颜色。,1、CSS的滤镜属性 （filter） 的应用,46,Internet与网页设计CSS样式表,（10）,Light,在HTML元件上放置一个,光影,（没有参数）,作用：该滤镜能够使html对象产生一种模拟光源的投射效果。一旦为对象定义了light滤镜属性，那么就可以调用它的方法来设置或者改变属性。,light可用的方法有：,MoveLight,移动光源,Changcolor,改变光的颜色,AddAmbient,加入包围的光源,AddPoint,加入点光源,Clear,清除所有的光源,AddCone,加入锥形光源,Changstrength,改变光源的强度,1、CSS的滤镜属性 （filter） 的应用,47,Internet与网页设计CSS样式表,（11）,Gray,把一个彩色的图象变成,灰色调图象,作用,：该滤镜能够使一张彩色的图片转变为灰色调图象，一般适用于图象对象。,参数,：该滤镜没有附带参数。,（12）,Invert,让对象产生,照片底片的效果,作用,：该滤镜能够使图象产生照片底片的效果，一般适用于图象对象。,参数,：该滤镜没有参数。,（13）,XRay,让对象,轮廓突出显示,作用,：该滤镜能够让对象反映出它的轮廓并把这些轮廓加亮显示，一般适用于图象对象。,参数,：该滤镜没有参数。,1、CSS的滤镜属性 （filter） 的应用,48,Internet与网页设计CSS样式表,3、新的滤镜（要结合Javascript脚本）,(1),Blentrans,:混合转换滤镜，提供淡入淡出效果,duration 参数：淡入或淡出的时间，以秒作单位,(2),RevealTran,s :提供了更加多变的转换效果,duration：转换的秒数,transition：转换的类型,1、CSS的滤镜属性 （filter） 的应用,49,Internet与网页设计CSS样式表,blendTrans实例：,5-24bldtrans.html,1、在网页中需要实现淡隐的对象，可插入div标签，并在id栏中输入名字，如div1：,50,Internet与网页设计CSS样式表,2、在div1中编辑内容，输入文字、插入图片，如下图虚线框内所示。,51,Internet与网页设计CSS样式表,3、编辑id样式，样式名即位该层的ID名称，本例中即为div1。,52,Internet与网页设计CSS样式表,4、进入代码视图，在头部插入脚本,/若当前对象没有隐藏,/应用第一个滤镜,/将对象没有隐藏,/播放第一个滤镜,53,Internet与网页设计CSS样式表,选中“单击”,编辑超链接内容为：javascript:fadein(div1),54,Internet与网页设计CSS样式表,5、而后预览！,若无效果，可将div1的样式中添加定位方式为,绝对,即可,55,Internet与网页设计CSS样式表,若要实现淡出，只要再加一个函数：fadeout(obj)即可,而后在设计视图中添加文字，并将该文字的超链接设置成javascript:fadeout(div1),56,Internet与网页设计CSS样式表,revealTrans：,5-25 rvlTrans.html,myText=new Array(4);,myText0=学习网页制作！,myText1=使用DreamWeaver！,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);,57,Internet与网页设计CSS样式表,revealTrans： 5-26 rvlTrans_2.html,58,Internet与网页设计CSS样式表,2、应用滤镜制作常见特效,（1）文字特效,（2）用样式表改变鼠标的显示形状,（3）图像特效略,59,Internet与网页设计CSS样式表,2、应用滤镜制作常见特效汇总,（1）文字特效,用glow滤镜可以做空心字,，方法是将,字体颜色设置为背景色,，再将glow滤镜的,strength的值设置为1或2,即可。,这个效果的代码如下：,滤镜实例,p filter: glow(color=#8C96B5,strength=2) shadow(color=#B4BBCF,direction=135),60,Internet与网页设计CSS样式表,2、应用滤镜制作常见特效汇总,利用Chroma()滤镜做图案文字,例如：,滤镜实例,dreamweaver,61,Internet与网页设计CSS样式表,2、应用滤镜制作常见特效,（2）用样式表改变鼠标的显示形状,用cursor样式，取值如下：,hand手的形状,crosshair十字型,text移动到文本上的那种效果,wait等待的那种效果,default默认效果,help问号,e-size向右的箭头,ne-resize向右上的箭头,n-resize向上的箭头,nw-resize向左上的箭头,w-resize向左的箭头,sw-resize左下的箭头,s-resize向下的箭头,se-resize向右下的箭头,auto由系统自动给出效果,例如：,aa,滤镜实例,62,Internet与网页设计CSS样式表,2、应用滤镜制作常见特效汇总,阴文,阳文,滤镜实例,63,Internet与网页设计CSS样式表,CSS与网页结合应用1、背景的应用,background复合属性,和font一样，可以使用复合属性一次性设置与背景相关的所有属性值,background的属性列表的顺序依次为：,颜色、图像、重复、依附、位置,中间用空格分开，如果某个属性值为空，则用默认值代替,.style1 ,background: lightgrey url(boy1.gif) repeat-y fixed 10,% 20%,64,Internet与网页设计CSS样式表,CSS与网页结合应用背景的应用,在页面上添加纯装饰性的图像，同时又希望将图像从内容重分离出来,创建一个内容为空的div，并将该图像设置为其背景图,创建圆角框,简单的圆角框：,simple-fixed-rounded.htm,高度可变的圆角框：,advanced-fixed-rounded.htm,高度宽度都可变的圆角框：,advanced-flexible-rounded.htm,创建阴影效果,简单的阴影：,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;,65,Internet与网页设计CSS样式表,CSS与网页结合应用 2、CSS中的布局,要掌握的三个最重要的CSS概念是：,框模型,（box model，或盒模型）,定位,（position）,浮动,（float）,这些概念可以控制在页面上安排和显示元素的方式，形成CSS的基本布局,与传统的表格控制布局不同,只有掌握这些概念，CSS开发就会变得容易,这一部份就介绍布局的可视化模型及相关的属性,66,Internet与网页设计CSS样式表,CSS的布局,Box Model,是CSS的基石之一,页面上的每个元素被看作是一个矩形框，这个框由元素的内容、填充、边框和空白边(margin)组成,填充出现在内容区域的周围，如果元素上添加背景，那么背景会应用于由内容和填充组成的区域,添加边框会在填充区域外加一条边线，线条可以有多种样式,空白边是透明的，用来控制元素之间的间隔,67,Internet与网页设计CSS样式表,Box Model中的属性,5-19 boxmoldel.html,填充、边框和空白边都可以设置，默认值均为0,注意：,在CSS的BOX模型中，width和height指的是内容区域的宽度和高度,而IE5和IE6在怪异模式中采用自己的非标准的Box模型，width是内容、填充和边框宽度的总和，height也是如此,68,Internet与网页设计CSS样式表,MARGIN-空白边宽度设置,包括下列属性,MARGIN-LEFT,MARGIN-RIGHT,MARGIN-TOP,MARGIN-BOTTOM,也可以使用复合属性：margin，,按上右下左的顺序,margin : auto,|,length,可以使用,长度值或百分数，也可以是,auto(由浏览器自动调整),#style1 margin-top:100px ,#style2 margin-left:100px ,#style3 margin-right:20%,#style4 margin-bottom:100pt ,Box Model,Ex:,container.htm,69,Internet与网页设计CSS样式表,空白边叠加,当两个,垂直,的空白边相遇时，它们将形成一个空白边，其高度为两个空白边的最大值,当一个元素包含在另一元素中时，它们的顶/底空白边也会发生叠加,内容为空的元素(也没有边框和填充)，这时它的上下空白边就碰到一起，也要发生叠加,70,Internet与网页设计CSS样式表,PADDING设置填充的宽度,使用方法与margin一样,#style1 padding-top:100px ,#style2 padding-left:100px ,#style3 padding-right:10%,#style4 padding-bottom:100pt ,#style5 padding:100pt ,Box Model,71,Internet与网页设计CSS样式表,WIDTH,宽度,可以使用,长度值或百分数，也可以是,auto(由浏览器自动调整或保持该元素的原有大小，如图像),#style1 width:100px ,HEIGHT,高度,设置方法与width一样,#style1 height:100px ,Box Model,72,Internet与网页设计CSS样式表,BORDER对于边界的设置，包括宽度、颜色、线条样式三种，使用方法相同：,border-color :,颜色值列表,设置各个边框的颜色，设置顺序和margin一样,也可以分别用四个属性： border-top-color， border-bottom-color， border-right-color， border-left-color,border-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;,#style2 border-color: blue;,#style3 border-top-color :blue; ,#style4 border-style : dotted;,Box Model,73,Internet与网页设计CSS样式表,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四个属性一次性地设置各个边的宽度、样式和颜色,这四个属性使用方法相同，如：,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 double yellow; ,74,Internet与网页设计CSS样式表,定位与显示,CSS的定位与显示属性可以把一个HTML元素定位在网页中的任何位置,定位与布局密切相关,CSS中有三种基本的定位机制,普通流：显示的位置由元素在HTML文件中的位置决定,浮动：可以左右移动，直到碰到包含框或其它浮动框,绝对定位：可以直接将元素定位在页面上地任何位置,层叠顺序,进行CSS定位时，有可能发生多个元素的重叠,需要设置元素在Z轴上的层叠顺序,与定位相关的属性主要有14个,可参考：,75,Internet与网页设计CSS样式表,普通流定位机制,5-28 relative.thml,按照元素的类型和在HTML源文件中的出现顺序进行定位,就是block元素（如p、h、div）（块级框）从上到下一个接一个的排列,inline元素（如span、strong元素）在行中水平布置,除非特殊的指定，否则所有的框都在普通流中定位,相对定位,相对于元素在普通文本流中的初始位置,如果一个元素进行相对定位，它将以它所在的位置(即,它在普通流中的位置,)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动,使用相对定位时，元素仍然占据原来的空间，因此被看作普通流定位模型的一个特殊情况,另外，移动元素可能导致覆盖其它元素,#style1 ,position: relative;left:20px;top:20px,Ex:,relative.htm,76,Internet与网页设计CSS样式表,绝对定位,5-29 absolute.html,可以把某个元素精确的定位在某个地方,绝对定位使元素的位置与文档流无关，因此不占据普通流中的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样,绝对定位的元素的位置是相对于最近的父元素,而言的,固定定位,是绝对定位的一个特殊情况,与绝对定位相似，唯一不同的是绝对定位是相对于父元素的某一个位置，而固定定位则是固定在浏览器的视框位置,这样当窗口滚动时，固定定位的元素不会随之滚动，总是出现在屏幕的固定位置,#style1 ,position:absolute;left:20px;top:20px,#style1 ,position:fixed;,left:20px;,top:20px,Ex:,absolutePos.htm,77,Internet与网页设计CSS样式表,浮动 5-30float.htm,浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘,当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，,产生文字环绕的效果,Ex:,floating-boxes.htm,Ex: clear/,text-round.htm,78,Internet与网页设计CSS样式表,浮动,浮动框覆盖了普通文本流中块框的部分边框和背景，但行框缩短给浮动框腾出空间,三个box都浮动了，向左浮动直到碰到前一个浮动框,#style1 ,float: left;,79,Internet与网页设计CSS样式表,浮动,如果水平位置没有空间了，则box3会跑到下面去,如果box2的高度没有box1高度大，box1减去box2的高度的部分会把box3拦住,80,Internet与网页设计CSS样式表,浮动框不再处于普通文档流中，会覆盖其它的块框；而浮动框旁的行框则会被缩短，使其环绕浮动框,如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，可以,对其周围的元素,使用清理属性,clear : none | left |right | both,添加了clear属性的元素，通过自动增加空白边，达到留出垂直空间的效果,81,Internet与网页设计CSS样式表,Clear属性,实例：有一图片和一段文字，图片浮动到左侧，文字浮动到右侧，希望将图片和文本包含在另一个具有背景色和边框的元素中,浮动元素不占普通文本流的空间，容器元素成空元素,设置了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-floats.htm,82,Internet与网页设计CSS样式表,CSS定位与显示,POSITION设置,定位方式,属性值：static,|,absolute,|,fixed,|,relative,#style1 position:absolute；,right,:10px;bottom:10px;,#style2 position:relative;,top, left, right, bottom,设置元素位置,以position定义出来的原点为基准，设置元素的位置,83,Internet与网页设计CSS样式表,CSS定位与显示,VISIBILITY设置对象是否可见,定义这个层级是不是要在画面上显示出功能来，最常利用java script来动态控制某个层级的显示状况，进而达到动态的效果,默认值是,visible,，不显示则设定成,hidden,display-设置对象显示方式,display : block,|,none,|,inline,| ,可以各种不同的方式显示对象,display=none;与visibility=hidden;是不一样的,后者为隐藏的对象保留其占据的物理空间，而,前者则不保留,Ex:,display.htm,#style1 visibility:visible ,#style1 visibility:hidden , ,84,Internet与网页设计CSS样式表,CSS定位与显示,Z-INDEX设置层叠顺序,当定位多个元素并将它们相互重叠时，可以使用该属性设置元素在Z轴的层叠顺序,z-index :,number,属性值越大表示在越上层,这边填入的数字没有单位,#style1 z-index:100 ,85,Internet与网页设计CSS样式表,CSS中的布局,使用CSS布局技术可以完成页面整体布局，实现各种布局样式,CSS布局技术都基于三个基本概念：定位、浮动和空白边操纵,基本布局方式有很多,按外观分，有单列布局、两列布局、三列布局等,按实现技术分，有基于自动空白边的布局、浮动布局等,按适应性分，有固定宽度布局、流式布局，弹性布局等,86,Internet与网页设计CSS样式表,居中布局,单列居中设计，是最基础的布局方式,可以使用自动空白边方法，Ex:,centering-auto-margin.htm,可以使用相对定位和负空白边方法，Ex：,centering-negative-margin.htm,#wrapper ,width: 720px;,margin: 0 auto;,text-align: left;,#wrapper ,position: relative;,left: 50%;,width: 720px;,margin-left: -360px;,87,Internet与网页设计CSS样式表,多列浮动布局,两列浮动布局,Ex：,2-col-fixed.htm,三列浮动布局,Ex:,3-col-fixed.htm,content div包含了两个div,clear:both #foot,#branding,#mainNav,#content,88,Internet与网页设计CSS样式表,流式布局和弹性布局,流式布局,宽度用百分数进行设置,使整体布局随浏览器窗口的伸缩而伸缩,Ex:,3-col-liquid.htm,弹性布局,以em为单位设置宽度,在字号增加时，整个布局随之而扩大,Ex:,3-col-elastic.htm,混合布局,可以组合流式布局与弹性布局，以em设置宽度，以百分比设置最大宽度,在极端情况下都可以有较好的整体效果,Ex:,3-col-hybrid.htm,89,Internet与网页设计CSS样式表,伪列(Faux),前面的例子中，导航和次要内容区都有一个浅灰色的背景，但如果正文比较长，导航和次要内容区域没有扩展到整个内容高度，它们的背景也不会拉长,90,Internet与网页设计CSS样式表,伪列(Faux),为了使背景能随正文的大小自动延伸，需要使用伪列技术,固定宽度的伪列,创建背景图案条，然后设置成“,纵向平铺”（repeat-y）,Ex:,faux-3-col-fixed.htm,可变宽度的伪列,要使用背景图像的百分比定位方法,Ex:,faux-3-col-liquid.htm,background: #fff url(images/bg-fixed.gif) repeat-y left top;,23%,23%,91,Internet与网页设计CSS样式表,链接样式,在,CSS样式中，定义链接的各种状态,a:link,没有接触过的链接,用于定义了链接的常规状态。如果希望各种链接都相同，就只需要定义这种链接状态。这种链接状态是基本的,a:visited,访问过的链接,能清楚的判断已经访问过的链接,a:hover,鼠标放在链接上的状态,鼠标放到一个链接上，链接就会产生变化；当鼠标离开这个链接时，这种状态就消失,a:active,在链接上按下鼠标时的状态,注意选择器的顺序：,a:link, a:visited, a:hover, a:active,Ex:比较两种写法，,link.htm,a:link, a:visited text-decoration: none;,a:hover, a:active text-decoration:underline;,a:hover, a:active text-decoration:underline;,a:link, a:visited text-decoration: none;,由于层叠，:link,:visited样式覆盖:hover,:active样式，鼠标停留和激活样式就不起作用了,92,Internet与网页设计CSS样式表,链接特效 5-32;5-33,在链接样式中应用background属性,使用图像创建下划线：,styled-underlines.htm,区别不同类型的链接：,external-links.htm,外部链接、内部链接、邮件链接，AIM即时消息协议等,根据链接的href属性值来区分,创建按钮效果的链接,使用display属性将链接显示为块级元素，然后应用背景，这样点击块中任意位置都会触发链接,Ex:,css-button.htm,，,3DButton.htm,a:link, a:visited ,text-decoration: none;,background: url(images/underline1.gif) repeat-x left bottom;,a:hover, a:active ,background-image: url(images/underline1-hover.gif);,ahref=mailto: ,background: url(images/email.png) no-repeat right top;,93,Internet与网页设计CSS样式表,链接特效,已访问过的链接样式,创建一个背景图像，同时包含两种图样,根据链接状态改变背景图放置的位置，显示出两种不同的效果,Ex:,visited-links.htm,CSS工具提示(tool