《CSS基础知识.ppt》由会员分享，可在线阅读，更多相关《CSS基础知识.ppt（86页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、收集整理收集整理Page 2主要内容0 0、基础知识、基础知识1 1、CSSCSS概述概述2 2、CSSCSS基础语法基础语法3 3、CSSCSS选择器选择器4 4、CSSCSS主要属性主要属性5 5、CSSCSS核心机制核心机制-盒子模型盒子模型6 6、CSSCSS重点和难点重点和难点-定位定位7 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.苹
2、果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)(quirks mode)。怪异模式通常模
3、拟老式浏览器（比如怪异模式通常模拟老式浏览器（比如IE6,IE6,在标准模式中在标准模式中使用正确的框模型，在怪异模式中使用老式的专有框使用正确的框模型，在怪异模式中使用老式的专有框模型模型)Page 4基础知识DOCTYPEDOCTYPE切换切换 浏览器根据浏览器根据DOCTYPEDOCTYPE是否存在来选择相应的模式，是否存在来选择相应的模式，DOCTYPEDOCTYPE切换是浏览器用来区分遗留文档和符合标准切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的的文档的手段。无论是否编写了有效的CSS,CSS,如果选择如果选择了错误的了错误的DOCTYPE,DOCTYPE
4、,那么页面就将以怪异模式表现。那么页面就将以怪异模式表现。因此，一定要在站点的每个页面上包括形式完整的因此，一定要在站点的每个页面上包括形式完整的DOCTYPEDOCTYPE声明。声明。!DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0 transitional.dtdPage 5一、CSS概述1 1、什么是、什么是CSSCSS？CSS：层叠样式表：层叠样式表(CascadingStyleSheet),),定义了如定义了如何显示何显示HTML元素，用来控制网页的样式和布局。元素，用来控制网页的样式和布局。Page 6 Hello!通过样式表来改变网页外表通过样式表来
5、改变网页外表 欢迎来到欢迎来到CSS世界世界 css给我们带来丰富多彩的世界给我们带来丰富多彩的世界 Demo1 未设计未设计CSS的页面的页面simplewithoutcss.htmlh2color:red;font-size:46px;font-family:宋体宋体#p1text-indent:10px;background:blue;font-family:黑体黑体ptext-indent:20px;background:green;font-family:黑体黑体通通过样过样式表来改式表来改变变网网页页外表外表欢欢迎来到迎来到CSS世界世界css给给我我们带们带来丰富多彩的世界来丰富
6、多彩的世界Page 7Demo1 带有带有CSS的页面的页面Simple.htmlPage 8Page 92、CSS作用第一，简化网页的代码，提高访问速度第一，简化网页的代码，提高访问速度 外部的外部的CSS文件会被浏览器保存在缓存里，加快下载文件会被浏览器保存在缓存里，加快下载显示的速度，也减少了需要上传的代码数量。显示的速度，也减少了需要上传的代码数量。第二，便于维护第二，便于维护 (1)(1)便于修改网站样式便于修改网站样式:只要修改只要修改csscss文件，就可改变整文件，就可改变整个网站的风格特色。避免一个个网页的修改，大大减少个网站的风格特色。避免一个个网页的修改，大大减少重复劳动
7、的工作量；重复劳动的工作量；(2)(2)可以重用样式；可以重用样式；第三，页面内容和显示样式分离第三，页面内容和显示样式分离 Page 10山经网站的CSS文件Page 11二、CSS基础语法1 1、CSSCSS语法由三部分组成：选择器、属性和值语法由三部分组成：选择器、属性和值Page 12selector property:value selector:选择器选择器,希望定义样式的希望定义样式的HTML标签标签;property:相应标签的属性相应标签的属性;value:属性值属性值;例如：例如：pcolor:#ff0000;font-size:12px2、注意事项1 1、多个属性值用分号
8、隔开、多个属性值用分号隔开,最后一个可加也可不加最后一个可加也可不加;2 2、如下写法可读性更好些；、如下写法可读性更好些；Page 13ptext-align:center;color:black;font-family:arial;3、CSS对大小写不敏感，但在选择器中对class和id名称敏感；4、注释符号/*注释内容 */3、如何使用CSS?Page 141 1、外部样式表、外部样式表:先建立外部样式表文件先建立外部样式表文件(.(.css)，然后在，然后在head内使用内使用link标签标签.链接链接(LinkingtoaStyleSheet)titleofarticlebodyfo
9、nt-size:10px;h1font-size:15px;font-weight:bold;color:maroonh2font-size:13px;font-weight:bold;color:bluepfont-family:Arial;color:blackmain.css如何使用CSS?-续(2)(2)内部样式表：内部样式表：直接在直接在 标签内插入标签内插入.块对象块对象.(.(EmbeddingaStyleBlock)Page 15bodyfont-size:10px;h1font-size:15px;font-weight:bold;color:maroonh2font-siz
10、e:13px;font-weight:bold;color:bluepfont-family:Arial;color:black如何使用CSS?-续3 3、内联样式：、内联样式：在标签的在标签的style属性中定义样式属性中定义样式(InlineStyles)Page 16这这一行被增加了左右的外一行被增加了左右的外补补丁丁注意：不推荐使用该方式！将结构与表现混杂在一起，丧失样式表原有的优势！注意：应用次序当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？Page 17缺省设置缺省设置外部样式表外部样式表(链接的样式表链接的样式表)内部样式表内部样式表(位于位于 标签定义的样式）
11、标签定义的样式）内联样式（利用标签的内联样式（利用标签的stylestyle属性定义的样式）属性定义的样式）内联样式最高优先权，然后样式,样式,最后是缺省值三、CSS选择器1 1、元素选择器、元素选择器2 2、IDID选择器；选择器；3 3、类选择器；、类选择器；4 4、派生选择器；、派生选择器；5 5、其他、其他Page 18CSS选择器-续1 1、元素选择器：、元素选择器：以以HTMLHTML标签作为选择器标签作为选择器 。Page 19tableline-height:20px;font-size:12pxh1,h2font-size:14px;width:120px;atext-dec
12、oration:none;2、ID选择器:为指定 id 的 HTML 标签应用样式,以以#来来定义定义；#notewidth:200px;height:200px;background-color:#0000FF;border:1pxdotted#000;CSS选择器-续Page 203 3、类、类(class)(class)选择器：选择器：以以.号定义；号定义；.notewidth:200px;height:200px;background-color:#0000FF;border:1pxdotted#000;title1para1.centertext-align:centercsssel
13、ector.htmlCSS选择器-续4 4、派生选择器、派生选择器:通过依据元素在其位置的上下文关系通过依据元素在其位置的上下文关系来定义样式。来定义样式。Page 21第一篇第一篇CSS第二篇第二篇Javascriptlispanfont-style:italic;font-weight:bold;font-size:20px;ahover.htmlCSS选择器-续 2001级新生入学级新生入学/9月月1010日至日至1212日，我校日，我校20102010级新生顺利入学级新生顺利入学.Page 22经常将元素、经常将元素、id、class、后代选择器组合使用也可。、后代选择器组合使用也可。
14、#newswidth:200px;height:200px;border:1pxsolidblue;#newsspanbackground-color:#FFFF00;font-weight:bold;font-size:20px;font-family:黑体黑体;text-indent:15px;CSS选择器-续Page 235、其他、其他(1)通用选择器通用选择器:可以匹配所有元素可以匹配所有元素,用用*号表示号表示,用来对页用来对页面上所有元素应用样式；面上所有元素应用样式；a:link color:#FF0000/*a:link color:#FF0000/*未访问的链接未访问的链接*
15、/a:visited color:#00FF00/*a:visited color:#00FF00/*已访问的链接已访问的链接*/a:hover color:#FF00FF/*a:hover color:#FF00FF/*鼠标移动到链接上鼠标移动到链接上*/a:active color:#0000FF/*a:active color:#0000FF/*选定的链接选定的链接*/(2)伪类伪类:用于向某些选择器添加特殊的效果用于向某些选择器添加特殊的效果,比如链接的比如链接的状态。状态。*padding:0px;margin:0px;注意：书写顺序注意：书写顺序link、visited、hover
16、、active四、主要属性 主要的主要的CSSCSS属性包括了字体类、文本类、背景类、定属性包括了字体类、文本类、背景类、定位类、布局类等等。具体参见位类、布局类等等。具体参见CSS2CSS2中文手册中文手册。Page 24五、CSS核心机制-盒子模型(Box Model)Page 251 1、盒子模型概述、盒子模型概述2 2、盒子的四个要素、盒子的四个要素3 3、盒子大小计算、盒子大小计算4 4、盒子外边距合并、盒子外边距合并5 5、总结、总结（一）盒子模型概述盒子模型是盒子模型是CSS的基石的基石,指定标签如何显示；指定标签如何显示；页面上的每个元素都被当成一个矩形盒子页面上的每个元素都被
17、当成一个矩形盒子,占据一定的页占据一定的页面空间面空间,这个盒子由内容这个盒子由内容(content)、内边距、内边距(填充填充,padding)、边框、边框(border)和外边距和外边距(空白边空白边,margin)组组成；成；Page 26盒子模型概述（续）任何任何web页面都是由很多这样的盒子，通过不同排列组页面都是由很多这样的盒子，通过不同排列组合而成，盒子之间相互影响，要掌握盒子模型需要从以合而成，盒子之间相互影响，要掌握盒子模型需要从以下下2 2个方面去理解：个方面去理解：单个盒子的内部结构；单个盒子的内部结构；多个盒子之间的相互关系；多个盒子之间的相互关系；Page 27（二）
18、盒子模型的四个要素内容内容(Content)：盒子里面所装的内容：盒子里面所装的内容;内边距内边距(填充填充,padding):):内容到边界之间的距离；内容到边界之间的距离；边框边框(border)：盒子本身；：盒子本身；外边距外边距(空白边空白边,margin)：与其他盒子之间的距离；：与其他盒子之间的距离；Page 28-默认情况下,盒子边框是无,背景色是透明的,所以,看不到盒子Page 29margin:margin-left/margin-right/margin-top/margin-bottompadding:padding-left/padding-right/padding-
19、top/padding-bottom盒子示意图Demo2 理解盒子模型Page 30BoxModel#boxwidth:100px;height:50px;padding:20px;border:5px solid red;background:teal;margin:20px;Content的高度与宽度的高度与宽度Demo2 续Page 31Content:元素内容元素内容,可以是文本、可以是文本、图图像等等。此例是像等等。此例是BoxModelPadding:围绕围绕在内容外的在内容外的边边距。此例是距。此例是padding：20px;Border:设设置在内置在内边边距外的距外的边边框，
20、包括大小、框，包括大小、颜颜色；此例是色；此例是border:5pxsolidred;Margin:围绕围绕在在边边框外的框外的边边距大小。此例是距大小。此例是margin:20px;Width:元素内容的元素内容的宽宽度。此例是度。此例是width:100px;Height:元素内容的高度。此例是元素内容的高度。此例是height:50px;1、边框(border)每个标签可以设置每个标签可以设置4 4个方向的边框。个方向的边框。Page 32注意:border-style必须设置,否则无法显示边框！边框样式(border-style)-必须设置Page 33Page 34Demo3 设置设
21、置h1h1的边框，上下左为黑色边框，右边为红色的边框，上下左为黑色边框，右边为红色Page 35h1 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)外边距外边
22、距(margin)在在border之外之外,margin区域不应用背景区域不应用背景;CSS中中margin默认值为默认值为0,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+bord
23、er-top+padding-top+width+padding-bottom+border-bottom+margin-bottomExample2Page 42计算在网页占据多大空间？计算在网页占据多大空间？#box width:200px;margin:20px;padding:20px;border:solid 1px#000000;注意：在在 CSS 中，中，width 和和 height 指的是内容区域的宽度和指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸尺寸，但是会增加元素框的总
24、尺寸但是，但是，IE5.xIE5.x和和IE6IE6在怪异模式中使用自己的非标准框架在怪异模式中使用自己的非标准框架模型，这些浏览器的模型，这些浏览器的widthwidth不是内容的宽度，而是：不是内容的宽度，而是：width=content+padding+borderPage 43(四)、盒子外边距合并外边距合并是指，当两个垂直外边距相遇时，将形成外边距合并是指，当两个垂直外边距相遇时，将形成一个外边距。合并后的外边距的高度等于两个发生合并一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。的外边距的高度中的较大者。存在如下几种情形的外边距的合并：存在如下几种情形的外
25、边距的合并：Page 44Page 45合并前合并前合并后合并后Page 46发生嵌套时发生嵌套时,若未设父元素的边框和填充若未设父元素的边框和填充,父元素的上下父元素的上下margin会和子元素的上下会和子元素的上下margin发生叠加。若父元素的发生叠加。若父元素的边框或填充不为边框或填充不为0 0，不存在叠加的问题。，不存在叠加的问题。-续上页Page 47合并前合并前合并后合并后经验经验:如果有盒子嵌套，要调整外面盒子和里面盒子之间如果有盒子嵌套，要调整外面盒子和里面盒子之间的距离，一般用的距离，一般用外面盒子的外面盒子的padding来调整来调整,不要用里面不要用里面盒子的盒子的ma
26、rgin,这样可以避免外边距叠加的现象出现这样可以避免外边距叠加的现象出现 。行内元素之间的水平行内元素之间的水平marginmargin不会叠加不会叠加Page 48（五）、盒模型总结Page 49关于盒模型，注意一下几点：1 1、边框、边框border默认值为默认值为0 0，即不显示，而，即不显示，而padding和和margin都无法看到，只能看到它们对元素的影响；都无法看到，只能看到它们对元素的影响；2 2、margin可以设负值，而可以设负值，而padding不可以；不可以；3 3、行内元素如、行内元素如a,span,img,input等等,高度宽度设置无效的，高度宽度设置无效的，其
27、宽度就是自身文字或者图片的宽度；其宽度就是自身文字或者图片的宽度；定义上下外边距定义上下外边距不影响行高。不影响行高。4 4、大部分、大部分html元素的元素的margin,padding默认值为默认值为0 0，但有，但有少数元素的浏览器默认值不为少数元素的浏览器默认值不为0 0，例如，例如:body,p,ul,li,form标记等，标记等，有有必要先设置为必要先设置为0 0；盒模型总结-续Page 50对对padding,margin等属性值的简写：等属性值的简写：盒模型总结-续Page 51注意：只有标准文档流中块元素的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会
28、合并。补充：浏览器的怪异模式与标准模式quirks mode和和strictmode是浏览器解析是浏览器解析css的两种模式的两种模式1 1、历史原因、历史原因 早期浏览器对早期浏览器对css解析解析时时,未遵守未遵守ww3c标准标准,此时的浏览器此时的浏览器的解析模式称为怪异模式！后来的解析模式称为怪异模式！后来,随着随着w3cw3c标准的重要标准的重要,浏浏览器开始依照览器开始依照w3c标准解析标准解析Css,称为标准模式！称为标准模式！因此因此,为了支持早期在怪异模式下开发的站点为了支持早期在怪异模式下开发的站点,浏览器浏览器并未放弃怪异模式并未放弃怪异模式,所以浏览器当解释页面时所以浏
29、览器当解释页面时,首先得判读首先得判读采用哪种模式进行解释！采用哪种模式进行解释！2 2、浏览器如何判断采用哪种模式呢？、浏览器如何判断采用哪种模式呢？采用采用doctype声明！浏览器根据声明！浏览器根据doctype是否存在以及是否存在以及是何种是何种doctype来确定。来确定。Page 52怪异模式与标准模式-续3 3、两种模式的区别？、两种模式的区别？最大的不同就是提现在对盒模式的解释上最大的不同就是提现在对盒模式的解释上Page 53 标准模式的Doctype的声明如下：Page 54设置为标准模式后，是不是就没有问题了呢？标准模式确实会让标准模式确实会让IE对对CSS的解释合理很
30、多的解释合理很多,但事情但事情并没有那么简单。不同浏览器即使同样在标准模式并没有那么简单。不同浏览器即使同样在标准模式,其对其对CSS的理解仍然有所差异的理解仍然有所差异,而差异当中最多只可能有一个而差异当中最多只可能有一个是正确的是正确的,甚至可能全部都是错误的甚至可能全部都是错误的!六、CSS重点和难点-定位与浮动Page 551、块元素与行内元素、块元素与行内元素2、相对定位、相对定位3、绝对定位、绝对定位4、浮动、浮动定位定位position:relative/absloute;浮浮动动float:left/right;Page 56首先，得把浏览器窗口看成一个坐标系统(一)块元素与行
31、元素块元素块元素:Block element,默认状态下每次都占据一整行，默认状态下每次都占据一整行，后面内容必须再新起一行显示，可以有效设置其后面内容必须再新起一行显示，可以有效设置其width、height、margin等值等值;,.,等等行内元素行内元素:Inlineelement(内内联联元素元素),默认状态下其内容默认状态下其内容在一行内进行显示，设置其高度和宽度无效；在一行内进行显示，设置其高度和宽度无效；,等；等；Page 57Page 581、每个块元素都独占一行、每个块元素都独占一行;行元素则在一行内显示行元素则在一行内显示;2、可以利用元素的、可以利用元素的display属
32、性进行转换；属性进行转换；3、块元素一般用作容器、块元素一般用作容器,可以容纳其他块元素和行元素可以容纳其他块元素和行元素,而行元素只能容纳文本或者其他行元素而行元素只能容纳文本或者其他行元素;4、行元素的高度宽度设置无效，其宽度就是自身文字、行元素的高度宽度设置无效，其宽度就是自身文字或者图片的宽度；或者图片的宽度；Demo块元素与行元素display:inline/block/none;文档流(normal document stream)Page 59 不使用其他与排列和定位相关的特殊不使用其他与排列和定位相关的特殊csscss规则时，各规则时，各种元素的排列规则，即各元素框的位置由元素
33、在种元素的排列规则，即各元素框的位置由元素在(X)HtmlX)Html中的位置决定。中的位置决定。p块元素占满整个一行，在页面中竖向排列；块元素占满整个一行，在页面中竖向排列；p行内元素在同一行内横向排列；行内元素在同一行内横向排列；普通流下的盒子排列方式普通流下的盒子排列方式(二)相对定位（position:relative）相对定位相对定位:对一个元素进行相对定位，它将出现在它所在对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置的位置上。然后，可以通过设置垂直或水平位置(left/right/top/bottom),),让这个元素让这个元素“相对于相对于”
34、它的原它的原始位置进行上下左右移动。始位置进行上下左右移动。Page 60注意：在使用相对定位时，无论是否进行移动，元素仍然占据原注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。来的空间。因此，移动元素会导致它覆盖其它框。（三）绝对定位(position:absolute)对元素进行绝对定位，将对元素进行绝对定位，将position属性值设为属性值设为absolute。再通过属性再通过属性left/right/top/bottom决决定将盒子放置在哪里定将盒子放置在哪里设置为绝对定位的元素框将从文档流完全删除设置为绝对定位的元素框将从文档流完
35、全删除,文档流文档流中其它元素的布局就像绝对定位的元素不存在一样，相中其它元素的布局就像绝对定位的元素不存在一样，相对于其包含块进行位置移动对于其包含块进行位置移动(包含块可能是文档中的另一包含块可能是文档中的另一个元素或者是初始包含块个元素或者是初始包含块)元素绝对定位后将变成一个元素绝对定位后将变成一个块级框块级框，而不论原来是块级，而不论原来是块级框还是行内框。框还是行内框。Page 61绝对定位Page 62绝对定位的元素的位置相对于最近的已定位父元素，如果元素没绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于最初的包含块。最初的有已定位的父
36、元素，那么它的位置相对于最初的包含块。最初的包含块可能是包含块可能是Body。相对定位与绝对定位的比较1、定位方式：相对定位是相对于元素初始位置进行定相对定位是相对于元素初始位置进行定位，而绝对定位则是相对于最近的已定位的父元素；位，而绝对定位则是相对于最近的已定位的父元素；2、文档流：相对定位后，元素原本所占的空间仍保留；相对定位后，元素原本所占的空间仍保留；而绝对定位后，元素框从文档流完全删除，其它元素的而绝对定位后，元素框从文档流完全删除，其它元素的布局就像绝对定位的元素不存在一样。布局就像绝对定位的元素不存在一样。Page 63（四）浮动Page 64如何创建如下所示的文字环绕图片的样
37、式？浮动本质上是用来干什么的？Page 65浮动出现的意义其实只是用来让浮动出现的意义其实只是用来让文字环绕图片文字环绕图片而已，仅而已，仅此而已。而我们目前用浮动实现此而已。而我们目前用浮动实现页面布局页面布局本不是浮动该本不是浮动该干的事情。干的事情。header bar Side barMain contentSide barFooter bar用浮动实现页面布局其实不是本职工作！用浮动实现页面布局其实不是本职工作！Page 66浮动的元素可以向左或向右移动，直到它的外边缘碰到浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素或另一个浮动元素的边框为止。包含元素或另一个浮动元素的边
38、框为止。由于浮动元素不在文档的普通流中，所以普通流中的块由于浮动元素不在文档的普通流中，所以普通流中的块框表现得就像浮动元素不存在一样框表现得就像浮动元素不存在一样,将忽略该元素并填补将忽略该元素并填补他原先的空间。他原先的空间。浮动主要用于实现文字环绕图片以及页面布局。浮动主要用于实现文字环绕图片以及页面布局。float：none/left/right浮动-续例1，框1向右浮动Page 67框框1框框2框框3不浮动的框不浮动的框框框1框框2框框3框框1向右浮动向右浮动当把框当把框 1 向右浮动时，它脱离文档流并且向右移动，直向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边
39、缘到它的右边缘碰到包含框的右边缘Float示例示例例2，框1向左浮动Page 68框框1框框3框框1向左浮动向左浮动当框当框 1 1 向左浮动，它脱离文档流并且向左移动，直到左向左浮动，它脱离文档流并且向左移动，直到左边缘碰到包含框的左边缘。因为它不再处于文档流中，边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，框所以它不占据空间，框2 2向上移动向上移动,实际上框实际上框1 1覆盖住框覆盖住框 2 2，使框，使框 2 2 从视图中消失。从视图中消失。例3，全部向左浮动Page 69框框2框框1框框3所有框向左浮动所有框向左浮动情形情形1 1：如果把所有三个框都向左移动，那么
40、框如果把所有三个框都向左移动，那么框 1 1 向左向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。一个浮动框。例3，全部向左浮动Page 70框框2框框1框框3框框3下降下降 情形情形2:如果包含框太窄，无法容纳水平排列的三个浮如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。动元素，那么其它浮动块向下移动，直到有足够的空间。情形情形3:如果浮动元素的高度不同，那么当它们向下移如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素动时可能被其它浮动元素“卡住卡住”；框框2框框1框框3
41、框框3被框被框1”卡住卡住”了了补充：关于文字行和清理浮动框旁边的文字行被缩短，从而给浮动框留出空间浮动框旁边的文字行被缩短，从而给浮动框留出空间,文字围绕浮动框。因此文字围绕浮动框。因此,创建浮动框可以使文本围绕图像：创建浮动框可以使文本围绕图像：Page 71文字环绕图片文字环绕图片浮动框清理-续要想阻止元素围绕浮动框要想阻止元素围绕浮动框,需要对该元素应用需要对该元素应用 clear 属性属性。clear:l left、right、both 或或 none,表示元素框的哪些表示元素框的哪些边不应该挨着浮动框。边不应该挨着浮动框。clear属性属性主要用于控制浮动元素的后继元素的行为主要用
42、于控制浮动元素的后继元素的行为,缺省地缺省地,后继元素将向上移动后继元素将向上移动,以填补由于前面元素的浮动以填补由于前面元素的浮动而空出的可用空间。而空出的可用空间。Page 72Demo-(文字环绕图片-清除浮动)Page 73Demo：假设希望让一个图片浮动到文本块的左边，并且希望假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元这幅图片和文本包含在另一个具有背景颜色和边框的元素中。素中。清理浮动.newsbackground-color:gray;border:solid1pxblack;.newsimgfloat:left;.newspfl
43、oat:right;sometextCode：Page 74因为浮动元素脱离了文档流，所以包围图片和文本的因为浮动元素脱离了文档流，所以包围图片和文本的 div 不不占据空间，因此视觉在没有形成包含关系，如何解决？占据空间，因此视觉在没有形成包含关系，如何解决？浮动元素脱离父框解决：Page 75.newsbackground-color:gray;border:solid1pxblack;.newsimgfloat:left;.newspfloat:right;.clearclear:both;sometext关于float的注意事项：1 1、应该为所有浮动元素设定宽度、应该为所有浮动元素设
44、定宽度(除非除非img元素元素,因其因其具有隐含宽度具有隐含宽度)。如果不设宽度。如果不设宽度,结果将是不可预知的。结果将是不可预知的。2 2、和正常文档流中的元素不同、和正常文档流中的元素不同,浮动元素的垂直边距不会浮动元素的垂直边距不会叠加。叠加。3 3、浮动元素只能浮动至左侧或右侧、浮动元素只能浮动至左侧或右侧,没有浮动至中间一说。没有浮动至中间一说。4 4、一个元素浮动后、一个元素浮动后,会往右或左浮动直至遇到容器边缘。会往右或左浮动直至遇到容器边缘。如果向同一方向再浮动一个元素如果向同一方向再浮动一个元素,会浮动直至碰到前一个会浮动直至碰到前一个浮动元素的边缘。如果浮动更多元素浮动元
45、素的边缘。如果浮动更多元素,将一个挨一个排列，将一个挨一个排列，直至该行已无法容纳更多浮动元素直至该行已无法容纳更多浮动元素,换行继续排列。换行继续排列。Page 76七、综合示例实现一个简单的网页布局实现一个简单的网页布局Page 77简单的3列的浮动布局131布局布局131布局布局2八、CSS注意事项、技巧1 1、不要在属性值与单位之间留有空格。、不要在属性值与单位之间留有空格。例如例如,“,“margin-left:20px”2 2、必须明确定义单位，除非值为、必须明确定义单位，除非值为0 0；在在html中可以写中可以写width=“100”,=“100”,但在但在CSS中必须设为中必
46、须设为width=“=“100px”3 3、class和和Id名字名字不能用数字开头不能用数字开头,且区分大小写；且区分大小写；如如,#,#aaa与与#AAA是不同的；是不同的；4 4、可以同时为一个、可以同时为一个Html标签设置多个规则标签设置多个规则通常写法通常写法；同时设置多规则同时设置多规则；5、书书写正确的写正确的链链接接样样式式顺顺序序:link,:visited,:hover,:activePage 78注意事项与技巧-续6、CSS最近优先原则最近优先原则:如果对一个元素定义多次样式如果对一个元素定义多次样式,则以则以最近优先最近优先,最近一级的样式将覆盖其他样式定义；最近一级
47、的样式将覆盖其他样式定义；Page 79CSS:pcolor:red.bluecolor:blue.yellowcolor:yellowHTML此此处处什么什么颜颜色？色？此此处处什么什么颜颜色？色？此此处处什么什么颜颜色？色？此此处处什么什么颜颜色色此处显示何种颜色？此处显示何种颜色？(1)注意样式的几个优先级（递减）-元素的style属性head区块外部引用文件css(2)优先级不是按访问顺序来设定，而是由css中声明顺序来设定的。注意事项与技巧-续7 7、多使用后代选择器，减少、多使用后代选择器，减少classclass和和idid选择器的使用选择器的使用;Page 80#contain
48、#contain_ul#contain_li#contain#containul#containulli具体应用技巧1 1、表格边线的设置、表格边线的设置tableborder-collapse:collapse;/自动合并同类项自动合并同类项 tdborder:1pxsolidblack;2 2、平铺图片、平铺图片background:url(images/info_columntlh2bg.gif)repeated-xlefttop;注意:(1)不要不要给给路径加引号，部分路径加引号，部分浏览浏览器容易引起器容易引起错误错误;(2)背景背景图图片的路径是相片的路径是相对对于于当前当前CSS
49、文件文件的路径；的路径；Page 81背景平铺效果Table样式效果关于路径Page 82在在Index.html中引用中引用xx.css文件，如下：文件，如下：在在xx.css中引用中引用xxx.gif，代码如下：，代码如下：Background:url(./images/xxx.gif)目录结构如下：目录结构如下：3 3、表单控件的样式设计、表单控件的样式设计（1 1）图片按钮）图片按钮（2 2）文本框样式）文本框样式Page 83表单各控件样式附：CSS优先权规则 当同一个元素被多个当同一个元素被多个CSS选择符选中时，要按照选择符选中时，要按照优先优先权权取舍不同取舍不同CSS规则。主
50、要就是规则。主要就是CSS规则的规则的specificity(特特殊性殊性)计算问题。具体规则如下：计算问题。具体规则如下：Page 84u每个Id选择符(#someid)，加0,1,0,0。u每个class选择符(.someclass)、每个属性选择符(形如attr=“”等)、每个伪类(形如:hover等)，加0,0,1,0u每个元素,加0,0,0,1u其他选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity。u最终将数字串逐位相加,就得到最终计算得的specificity，然后在比较时，按照从左到右的顺序逐位比较。例如：h1color:red;/*只有