第6章web-div-css.ppt

单击此处编辑母版文本样式,第二级,第三级,第四级,Page,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,单击此处编辑母版标题样式,第六章,CSS,Page,2,本章主要内容,0,、基础知识,1、,CSS,概述,2,、,CSS,基础语法,3,、,CSS,选择器,4,、,CSS,主要属性,5,、,CSS,核心机制,-,盒子模型,6,、,CSS,重点和难点,-,定位,7,、综合示例,基础知识,浏览器,1,首款商业化浏览器,Netscape,发布,(1994,年,10,月,13,日,),2.,微软,IE 6.0,(2001,年,8,月,27,日,),3.Opera,推出首款,Windows,浏览器,Opera 2.1(1997,年,1,月,1,日,),4.,网景创立开源项目,Mozilla(1998,年,2,月,23,日,),5.,苹果,Safari,进军浏览器市场,(2003,年,1,月,7,日,),6.Firefox,2.0,发布（,2006,年,10,月）,7.,谷歌推出,Chrome,浏览器,(2008,年,9,月,2,日,),8.IE 8.0,发布（,2009,年,3,月）,9.IE 9.0,发布,(2010,年,09,年,16),Page,3,基础知识,浏览器模式,当浏览器厂商开始创建于标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种表现形式：标准模式和怪异模式,(quirks mode),。,怪异模式通常模拟老式浏览器（比如,IE6,在标准模式中使用正确的框模型，在怪异模式中使用老式的专有框模型,),Page,4,基础知识,DOCTYPE,切换,浏览器根据,DOCTYPE,是否存在来选择相应的模式，,DOCTYPE,切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的,CSS,如果选择了错误的,DOCTYPE,那么页面就将以怪异模式表现。,因此，一定要在站点的每个页面上包括形式完整的,DOCTYPE,声明。,Page,5,一、,CSS,概述,1,、什么是,CSS,？,CSS,：层叠样式表,(,Cascading Style Sheet,),定义了如何显示,HTML,元素，用来控制网页的样式和布局。,Page,6,Hello!,通过样式表来改变网页外表,欢迎来到,CSS,世界,css,给我们带来丰富多彩的世界,Demo,1,未设计,CSS,的页面,simplewithoutcss.html,h2color:red;font-size:46px;font-family:,宋体,#p1text-indent:10px;background:blue;font-family:,黑体,ptext-indent:20px;background:green;font-family:,黑体,通过样式表来改变网页外表,欢迎来到,CSS,世界,css,给我们带来丰富多彩的世界,Page,7,Demo1,带有,CSS,的页面,Simple.html,Page,8,Page,9,2,、,CSS,作用,第一，简化网页的代码，提高访问速度,外部的,CSS,文件会被浏览器保存在缓存里，加快下载显示的速度，也减少了需要上传的代码数量。,第二，便于维护,(1),便于修改网站样式,:,只要修改,css,文件，就可改变整个网站的风格特色。避免一个个网页的修改，大大减少重复劳动的工作量；,(2),可以重用样式；,第三，页面内容和显示样式分离,Page,10,山经网站的,CSS,文件,Page,11,分析样式表：,Style.css,二、,CSS,基础语法,1,、,CSS,语法由三部分组成：选择器、属性和值,Page,12,selector property:value,selector:,选择器,希望定义样式的,HTML,标签,;,property:,相应标签的属性,;,value:,属性值,;,例如：,p color:,#ff0000,;,font-size:12px,2,、注意事项,1,、多个属性值用分号隔开,最后一个可加也可不加,;,2,、如下写法可读性更好些；,Page,13,p,text-align:center;,color:black;,font-family:arial;,3,、,CSS,对大小写不敏感，但在选择器中对,class,和,id,名称,敏感；,4,、注释符号,/*,注释内容,*,/,3,、如何使用,CSS?,Page,14,1,、外部样式表,:,先建立外部样式表文件,(.,css),，然后在,head,内使用,link,标签,.,链接,(,Linking to a Style Sheet,),title of article ,body font-size:10px;h1 font-size:15px;font-weight:bold;color:maroon h2 font-size:13px;font-weight:bold;color:blue p font-family:Arial;color:black,main.css,如何使用,CSS?-,续,(2),内部样式表：,直接在,标签内插入,.,块对象,.(,Embedding a Style Block,),Page,15,body font-size:10px;h1 font-size:15px;font-weight:bold;color:maroon h2 font-size:13px;font-weight:bold;color:blue p font-family:Arial;color:black,如何使用,CSS?-,续,3,、内联样式：,在标签的,style,属性中定义样式,(,Inline Styles),Page,16,这一行被增加了左右的外补丁,注意：,不推荐使用该方式！将结构与表现混杂在一起,，丧失样式表原有的优势！,注意：应用次序,当同一个,HTML,元素被不止一个样式定义时，会使用哪个样式呢？,Page,17,缺省设置,外部样式表,(,链接的样式表,),内部样式表,(,位于,标签定义的样式）,内联样式（利用标签的,style,属性定义的样式）,内联样式最高优先权，然后,样式,样式,最后是缺省值,三、,CSS,选择器,1,、元素选择器,2,、,ID,选择器；,3,、类选择器；,4,、派生选择器；,5,、其他,Page,18,CSS,选择器,-,续,1,、元素选择器：,以,HTML,标签作为选择器。,Page,19,table line-height:20px;font-size:12px,h1,h2 font-size:14px;width:120px;a text-decoration:none;,2,、,ID,选择器,:,为指定,id,的,HTML,标签应用样式,以,#,来定义,；,#note,width:200px;,height:200px;,background-color:#0000FF;,border:1px dotted#000;,CSS,选择器,-,续,Page,20,3,、类,(class),选择器：,以,.,号定义；,.note,width:200px;,height:200px;,background-color:#0000FF;,border:1px dotted#000;,title1,para1,.center,text-align:center,cssselector.html,CSS,选择器,-,续,4,、派生选择器,:,通过依据元素在其位置的上下文关系来定义样式。,Page,21,第一篇,CSS,第二篇,Javascript,li,span,font-style:italic;,font-weight:,bold,;,font-size:20px;,ahover.html,CSS,选择器,-,续,2001,级新生入学,9,月,10,日至,12,日，我校,2010,级新生顺利入学,.,Page,22,经常将元素、,id,、,class,、后代选择器组合使用也可。,#news,width:200px;height:200px;border:1px solid blue,;,#news span,background-color:#FFFF00;,font-weight:bold;,font-size:20px;,font-family:,黑体,;,text-indent:15px;,CSS,选择器,-,续,Page,23,5,、其他,(1),通用选择器,:,可以匹配所有元素,用,*,号表示,用来对页面上所有元素应用样式；,a:link color:#FF0000/*未访问的链接*/,a:visited color:#00FF00/*已访问的链接*/,a:hover color:#FF00FF/*鼠标移动到链接上*/,a:active color:#0000FF/*选定的链接*/,(2),伪类,:,用于向某些选择器添加特殊的效果,比如链接的状态。,*padding:0px;margin:0px;,注意：书写顺序,link,、,visited,、,hover,、,active,四、主要属性,主要的,CSS,属性包括了字体类、文本类、背景类、定位类、布局类等等。具体参见,CSS2,中文手册,。,Page,24,五、,CSS,核心机制,-,盒子模型,(Box Model),Page,25,1,、盒子模型概述,2,、盒子的四个要素,3,、盒子大小计算,4,、盒子外边距合并,5,、总结,（一）盒子模型概述,盒子模型是,CSS,的基石,指定标签如何显示；,页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容,(,content,),、内边距,(,填充,padding,),、边框,(,border,),和外边距,(,空白边,margin,),组成；,Page,26,盒子模型概述（续）,任何,web,页面都是由很多这样的盒子，通过不同排列组合而成，盒子之间相互影响，要掌握盒子模型需要从以下,2,个方面去理解：,单个盒子的内部结构；,多个盒子之间的相互关系；,Page,27,（二）盒子模型的四个要素,内容,(,Content,),：盒子里面所装的内容,;,内边距,(,填充,padding,):,内容到边界之间的距离；,边框,(,border,),：盒子本身；,外边距,(,空白边,margin,),：与其他盒子之间的距离；,Page,28,-,默认情况下,盒子边框是无,背景色是透明的,所以,看不到盒子,Page,29,margin:,margin-left/margin-right/margin-top/margin-bottom,padding:,padding-left/padding-right/padding-top/padding-bottom,盒子示意图,Demo2,理解盒子模型,Page,30,Box Model,#box,width,:100px;,height:,50px;,padding:,20px;,border:,5px solid red;,background,:teal;,margin:,20px;,Content,的高度与宽度,Demo2,续,Page,31,Content:,元素内容,可以是文本、图像等等。此例是,Box Model,Padding,:,围绕在内容外的边距。此例是,padding,：,20px;,Border:,设置在内边距外的边框，包括大小、颜色；此例是,border:5px solid red;,Margin,:,围绕在边框外的边距大小。此例是,margin:20px;,Width,:,元素内容的宽度。此例是,width:100px;,Height,:,元素内容的高度。此例是,height:50px;,1,、边框,(border),每个标签可以设置,4,个方向的边框。,Page,32,注意,:border-style,必须设置,否则无法显示边框！,边框样式,(border-style)-,必须设置,Page,33,Page,34,Demo3,设置,h1,的边框，上下左为黑色边框，右边为红色,Page,35,h1,border:1px solid black;,border-right-color:red;,注意：,border,和,border-right-color,的书写顺序,2,、内边距,(,填充，,padding),padding,区域在,border,与,content,之间；背景色和背景图像会覆盖,padding,和,content,组成的区域；,Page,36,设置内边距,(,填充,),的大小,Page,37,注意：,padding,不可以为负值,3,、外边距,(margin),外边距,(,margin,),在,border,之外,margin,区域不应用背景,;,CSS,中,margin,默认值为,0,但浏览器会提供预定样式,;,Page,38,设置,margin,的大小,Page,39,注意：,margin,可以为负值，而且,很多情况下需要使用负值。,（三）、盒子大小的计算,Page,40,盒子实际宽度,=,margin-left+border-left+padding-left+,width,+padding-right+border-right+margin-right,盒子大小的计算,-,续,Page,41,盒子实际高度,=,margin-top+border-top+padding-top,+,height,+padding-bottom+border-bottom+margin-bottom,Example2,Page,42,计算在网页占据多大空间？,#box,width:200px;,margin:20px;,padding:20px;,border:solid 1px#000000;,注意：,在,CSS,中，,width,和,height,指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸,但是，,IE5.x,和,IE6,在怪异模式中使用自己的非标准框架模型，这些浏览器的,width,不是内容的宽度，而是：,width=content+padding+border,Page,43,(,四,),、盒子外边距合并,外边距合并是指，当两个垂直外边距相遇时，将形成一个外边距。,合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者,。,存在如下几种情形的外边距的合并：,Page,44,Page,45,合并前,合并后,Page,46,发生嵌套时,若未设父元素的边框和填充,父元素的上下,margin,会和子元素的上下,margin,发生叠加。若父元素的边框或填充不为,0,，不存在叠加的问题。,-,续上页,Page,47,合并前,合并后,经验,:,如果有盒子嵌套，要调整外面盒子和里面盒子之间的距离，一般用,外面盒子的,padding,来调整,不要用里面盒子的,margin,这样可以避免外边距叠加的现象出现。,行内元素之间的水平,margin,不会叠加,Page,48,（五）、盒模型总结,Page,49,关于盒模型，注意一下几点：,1,、边框,border,默认值为,0,，即不显示，而,padding,和,margin,都无法看到，只能看到它们对元素的影响；,2,、,margin,可以设负值，而,padding,不可以；,3,、行内元素如,a,span,img,input,等,高度宽度设置无效的，其宽度就是自身文字或者图片的宽度；,定义上下外边距不影响行高。,4,、大部分,html,元素的,margin,padding,默认值为,0,，但有少数元素的浏览器默认值不为,0,，例如,:,body,p,ul,li,form,标记等，,有,必要先设置为,0,；,盒模型总结,-,续,Page,50,对,padding,margin,等属性值的简写：,盒模型总结,-,续,Page,51,注意：,只有标准文档流中块元素的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。,补充：浏览器的怪异模式与标准模式,quirks,mode,和,strict mode,是浏览器解析,css,的两种模式,1,、历史原因,早期浏览器对,css,解析,时,未遵守,w,3c,标准,此时的浏览器的解析模式称为怪异模式！后来,随着,w3c,标准的重要,浏览器开始依照,w3c,标准解析,Css,称为标准模式！,因此,为了支持早期在怪异模式下开发的站点,浏览器并未放弃怪异模式,所以浏览器当解释页面时,首先得判读,采用哪种模式进行解释！,2,、浏览器如何判断采用哪种模式呢？,采用,doctype,声明！浏览器根据,doctype,是否存在以及是何种,doctype,来确定。,Page,52,怪异模式与标准模式,-,续,3,、两种模式的区别？,最大的不同就是现在对盒模式的解释上,Page,53,标准模式的,Doctype,的声明如下：,Page,54,设置为标准模式后，是不是就没有问题了呢？,标准模式确实会让,IE,对,CSS,的解释合理很多,但事情并没有那么简单。不同浏览器即使同样在标准模式,其对,CSS,的理解仍然有所差异,而差异当中最多只可能有一个是正确的,甚至可能全部都是错误的,!,六、,CSS,重点和难点,-,定位与浮动,Page,55,1,、块元素与行内元素,2,、相对定位,3,、绝对定位,4,、浮动,定位,position:relative/absloute;,浮动,float:left/right;,Page,56,首先，得把浏览器窗口看成一个坐标系统,(,一,),块元素与行元素,块元素,:,Block,element,默认状态下每次都占据一整行，后面内容必须再新起一行显示，可以有效设置其,width,、,height,、,margin,等值,;,.,等,行内元素,:,Inline element(,内联元素,),默认状态下其内容在一行内进行显示，设置其高度和宽度无效；,等；,Page,57,Page,58,1,、每个块元素都独占一行,;,行元素则在一行内显示,;,2,、可以利用元素的,display,属性进行转换；,3,、块元素一般用作容器,可以容纳其他块元素和行元素,而行元素只能容纳文本或者其他行元素,;,4,、行元素的高度宽度设置无效，其宽度就是自身文字或者图片的宽度；,Demo,块元素与行元素,display:inline/block/none;,文档流,(normal document stream),Page,59,不使用其他与排列和定位相关的特殊,css,规则时，各种元素的排列规则，即各元素框的位置由元素在,(X)Html,中的位置决定。,块元素占满整个一行，在页面中竖向排列；,行内元素在同一行内横向排列；,普通流下的盒子排列方式,(,二,),相对定位（,position:relative,）,相对定位,:,对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置,(,left/right/top/bottom,),让这个元素“相对于”它的原始位置进行上下左右移动。,Page,60,注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。,（三）绝对定位,(position:absolute),对元素进行绝对定位，将,position,属性值设为,absolute,。再通过属性,left,/,right,/,top/bottom,决,定将盒子放置在哪里,设置为绝对定位的元素框将从文档流完全删除,文档流中其它元素的布局就像绝对定位的元素不存在一样，相对于其包含块进行位置移动,(,包含块可能是文档中的另一个元素或者是初始包含块,),元素绝对定位后将变成一个,块级框,，而不论原来是块级框还是行内框。,Page,61,绝对定位,Page,62,绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于最初的包含块。最初的包含块可能是,Body,。,相对定位与绝对定位的比较,1,、定位方式：,相对定位是,相对于元素初始位置,进行定位，而绝对定位则是,相对于最近的已定位的父元素,；,2,、文档流：,相对定位后，元素原本,所占的空间仍保留,；而绝对定位后，,元素框从文档流完全删除,，其它元素的布局就像绝对定位的元素不存在一样。,Page,63,（四）浮动,Page,64,如何创建如下所示的文字环绕图片的样式？,浮动本质上是用来干什么的？,Page,65,浮动出现的意义其实只是用来让,文字环绕图片,而已，仅此而已。而我们目前用浮动实现,页面布局,本不是浮动该干的事情。,header bar,Side bar,Main content,Side bar,Footer bar,用浮动实现页面布局其实不是本职工作！,Page,66,浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素或另一个浮动元素的边框为止。,由于浮动元素不在文档的普通流中，所以普通流中的块框表现得就像浮动元素不存在一样,将忽略该元素并填补他原先的空间。,浮动主要用于实现文字环绕图片以及页面布局。,float,：,none/left/right,浮动,-,续,例,1,，框,1,向右浮动,Page,67,框,1,框,2,框,3,不浮动的框,框,1,框,2,框,3,框,1,向右浮动,当把框,1,向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘,Float,示例,例,2,，框,1,向左浮动,Page,68,框,1,框,3,框,1,向左浮动,当框,1,向左浮动，它脱离文档流并且向左移动，直到左边缘碰到,包含框,的左边缘。因为它不再处于文档流中，所以它不占据空间，框,2,向上移动,实际上框,1,覆盖住框,2,，使框,2,从视图中消失。,例,3,，全部向左浮动,Page,69,框,2,框,1,框,3,所有框向左浮动,情形,1,：,如果把所有三个框都向左移动，那么框,1,向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。,例,3,，全部向左浮动,Page,70,框,2,框,1,框,3,框,3,下降,情形,2:,如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。,情形,3:,如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”；,框,2,框,1,框,3,框,3,被框,1”,卡住,”,了,补充：关于文字行和清理,浮动框旁边的文字行被缩短，从而给浮动框留出空间,文字围绕浮动框。因此,创建浮动框可以使文本围绕图像：,Page,71,文字环绕图片,浮动框清理,-,续,要想阻止元素围绕浮动框,需要对该元素应用,clear,属性,。,clear,:l,eft,、,right,、,both,或,none,表示元素框的哪些边不应该挨着浮动框。,clear,属性,主要用于控制浮动元素的后继元素的行为,缺省地,后继元素将向上移动,以填补由于前面元素的浮动而空出的可用空间。,Page,72,Demo-(,文字环绕图片,-,清除浮动,),Page,73,Demo,：,假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。,清理浮动,.news,background-color:gray;,border:solid 1px black;,.news img float:left;,.news p float:right;,some text,Code,：,Page,74,因为浮动元素脱离了文档流，所以包围图片和文本的,div,不占据空间，因此视觉在没有形成包含关系，如何解决？,浮动元素脱离父框,解决：,Page,75,.news,background-color:gray;,border:solid 1px black;,.news img float:left;,.news p float:right;,.clear clear:both;,some text,关于,float,的注意事项：,1,、应该为所有浮动元素,设定宽度,(,除非,img,元素,因其具有隐含宽度,),。如果不设宽度,结果将是不可预知的。,2,、和正常文档流中的元素不同,浮动元素的,垂直边距不会叠加,。,3,、浮动元素只能,浮动至左侧或右侧,没有浮动至中间一说。,4,、一个元素浮动后,会往右或左浮动直至遇到容器边缘。如果向同一方向再浮动一个元素,会浮动直至碰到前一个浮动元素的边缘。如果浮动更多元素,将一个挨一个排列，直至该行已,无法容纳更多浮动元素,换行继续排列,。,Page,76,七、综合示例,实现一个简单的网页布局,Page,77,简单的,3,列的,浮动布局,131,布局,131,布局,2,八、,CSS,注意事项、技巧,1,、不要在属性值与单位之间留有空格。,例如,“,margin-left:,20px”,2,、必须明确定义单位，除非值为,0,；,在,html,中可以写,width,=“100”,但在,CSS,中必须设为,width,=“,100px,”,3,、,class,和,Id,名字,不能用数字开头,且区分大小写；,如,#,aaa,与,#,AAA,是不同的；,4,、可以同时为一个,Html,标签设置多个规则,通常写法,；,同时设置多规则,；,5,、书写正确的链接样式顺序,:link,:visited,:hover,:active,Page,78,注意事项与技巧,-,续,6,、,CSS,最近优先原则,:,如果对一个元素定义多次样式,则以最近优先,最近一级的样式将覆盖其他样式定义；,Page,79,CSS:,pcolor:red,.bluecolor:blue,.yellowcolor:yellow,HTML,此处什么颜色？,此处什么颜色？,此处什么颜色？,此处什么颜色,此处显示何种颜色？,(1),注意样式的几个优先级（递减）,-,元素的,style,属性,head,区,块,外部引用文件,css,(2),优先级不是按访问顺序来设定，而是由,css,中声明顺序来设定的。,注意事项与技巧,-,续,7,、多使用后代选择器，减少,class,和,id,选择器的使用,;,Page,80,#contain,#contain_ul,#contain_li,#contain,#contain ul,#,contain ul,li,具体应用技巧,1,、表格边线的设置,tableborder-collapse:collapse;/,自动合并同类项,tdborder:1px solid black;,2,、平铺图片,background:url(images/info_columntlh2bg.gif)repeated-x left top;,注意,:,(1),不要给路径加引号，部分浏览器容易引起错误,;,(2),背景图片的路径是相对于,当前,CSS,文件,的路径；,Page,81,背景平铺效果,Table,样式效果,关于路径,Page,82,在,Index.html,中引用,xx.css,文件，如下：,在,xx.css,中引用,xxx.gif,，代码如下：,Background:url(./images/xxx.gif),目录结构如下：,3,、表单控件的样式设计,（,1,）图片按钮,（,2,）文本框样式,Page,83,表单各控件样式,附：,CSS,优先权规则,当同一个元素被多个,CSS,选择符选中时，要按照,优先权,取舍不同,CSS,规则。主要就是,CSS,规则的,specificity,(,特殊性,),计算问题。具体规则如下：,Page,84,每个,Id,选择符,(#someid),，加,0,1,0,0,。,每个,class,选择符,(.someclass),、每个属性选择符,(,形如,attr=“”,等,),、每个伪类,(,形如,:hover,等,),，加,0,0,1,0,每个元素,加,0,0,0,1,其他选择符包括全局选择符*，加,0,0,0,0,。相当于没加，不过这也是一种,specificity,。,最终将数字串逐位相加,就得到最终计算得的,specificity,，然后在比较时，,按照从左到右的顺序逐位比较,。,例如：,h1color:red;/*,只有一个普通元素加成，结果是,0,0,0,1*/bodyh1color:green;/*,两个普通元素加成,结果是,0,0,0,2*/,后者胜出,h2.grapecolor:purple;/*,一个普通元素、一个,class,选择符加成,结果是,0,0,1,1*/h2color:silver;/*,一个普通元素，结果是,0,0,0,1*/,前者胜出,Page,85,