第10章当CSS样式表遇到层

,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2013-10-30,#,单击此处编辑母版标题样式,第,10,章 当,CSS,样式表遇到层,从这一章节开始，我们有必要给,HTML,的概念升级。,W3C,曾规定：“动态,HTML,是一个被某些厂商用来描述可使文档动态性更强的,HTML,、样式表以及脚本的结合物的术语。”动态,HTML,指的便是,DHTML,（,Dynamic HTML,）。对大多数人来说，,DHTML,便是,HTML 4.0,、,CSS,样式表以及,JavaScript,的结合物。,10.1,理解块级的意义,在,Web,设计中，设计者使用,CSS,来修饰页面的内容，而与,CSS,这个名字相关的还有一个名字是,CSS-P,（,Cascading Style Sheets Positioning,）。它是,CSS,的一个扩展，表示如何布局页面内容在浏览窗口中的位置。那么使用样式表是如何工作的呢？,10.2,页面中的层,CSS,样式表可以通过被封在层里这种方式来限制页面所修饰的内容。这就是说，为了使样式表只对页面局部起修饰作用，于是设计者将页面的局部内容定义在某个范围中，这个范围便称之为,CSS-layer,（,CSS,层）。,CSS,层可以通过,HTML,标签来定义，这种使用方法是,Web,设计中的一枚利器。,10.2.1,行,和层,设计者常把,CSS,样式表放在,和,这两个布局页面的标签中，它们的作用是使样式表可以只对标签中的内容元素起作用。这两者的区别是,标签是指行内的对象，而,标签针对的是层内的对象。为了形象说明什么是行标签，这里通过以下代码展示一个简单的案例。,#color color:red;,烬余录,像是一个历尽沧桑的百岁老人所写，,但是当时的张爱玲只有,24,岁。,她对自己的自私和冷酷，有一种抽离。,10.2.1,行,和层,结果如下图所示,。,10.2.2,层的基本定位,通过一些基本的属性可以给层定位在页面中的任何位置，这些主要的属性有方位属性，如层的左、右、上、下；描述大小的属性，如层的宽、高、参照位置。,10.2.2,层的基本定位,left,：相当于窗口左边的位置。,right,：相当于窗口右边的位置。,top,：相当于窗口上边的位置。,bottom,：相当于窗口下边的位置。,width,：表示层的宽度。,height,：表示层的长度。,position,：用来控制采用什么样的方式定位图层。,position,属性的属性值有,absolute,、,relative,和,static,三个。,absolute,表示“层的位置以网页的左上角为基准来设置”；,relative,表示“层的位置以其原始值的位置来设置”；,static,表示为“层的位置以,HTML,默认的位置来设置。”,10.2.3,层的叠加,层不同于表格、框架的最大优势在于层是可以叠加的。这是因为层具有一个“,Z,轴”的特性，,Z,轴好比,3D,坐标中的,Z,轴，是一个上下层级的关系，就是说一个层是可以覆盖在另一个层上面，如下图所示。,10.3,框模型,层的内部便是一个框模型（,box model,），这个概念很重要。在,CSS,广泛应用之前，建立一个出色的页面布局只能通过框架集、表格，大量内嵌表格框架，或者一堆堆的,标签和空格符号。而当有了层的框模型思路布局时，设计者们就找到了最好的选择。有时它完全可以替代框架、表格等。这种方法不仅可以使页面代码精简，而且大大缩短了页面的刷新时间，这样更易于管理代码。,10.3.1,理解框模型,层中内容的外面被很多空间级概念的物质包围，例如空距（,padding,）、边框（,borders,）和边距（,margin,）。空距就是页面内容距离边框的位置，边距就是边框以外的距离。页面中任意一个层中内容的周围理论上是这样被包围的，如图下图所示的框模型。,10.3.1,理解框模型,如图中所示，层实际的高度是“层中页面内容的高度,+,上空距,+,上边框,+,上边距,+,下空距,+,下边框,+,下边距”的值。,第一个层中，如果事先设定的,height,属性值超出层中上下边框之间的距离。,而第二个层设置的高度正好符合上下边框的距离。所以层中文本没有出现多余的空行。,10.3.2,空距,padding,属性,padding,属性又常被称为内边距。,padding,属性可以细分为,padding-top,、,padding-right,、,padding-bottom,和,padding-left,这,4,个属性，通过它们可以控制一个框模型中的每一边空距。例如“,padding-bottom:1.5em;,”。此外为了方便，设计者可以使用快捷的写法，来分别设置,4,条边。,10.3.2,空距,padding,属性,当,padding,只定义一个数值,时,。,例如：,padding:1em,;,当,padding,定义,2,个数值,时。,例如：,padding:1em,2em;,当,padding,定义,3,个数值,时。,例如：,padding:1em,2em 3em;,当,padding,定义,4,个数值,时。,例如：,padding:1em,2em 3em 4em,;,10.3.3,边框,border,的扩展属性,border,是一种使用频率非常高的属性，表格、边框中都有它的身影。对于边框，不仅仅可以改变它的宽度，而且可以指定其格式和颜色。所以，边框的属性具有多样式的扩展，其属性可以细分为,border-width,属性、,border-style,属性和,border-color,属性。,10.3.3,边框,border,的扩展属性,border-width,：表示边框的宽度。,border-style,：属性表示边框的样式，常用的有,solid,、,dotted,、,dashed,等。,borde-color,：表示边框的颜色。,同样，也可以像,padding,属性那样，采用快捷的方式来定义边框，例如：,border:3px dotted red;,或者使用快捷方式定义每一条边框，例如：,border:1em 2em 3em 4em;,10.3.4,边距（,margin,）,margin,属性又称之为外边距，就好像是围绕在边框范围外的一层“空气”。,padding,属性值不能为负值，而,margin,属性值可以为负数，以此对内容进行叠加。,类似于空距和边框，边距属性也可以细分为上下左右,4,条边来分别控制。它们是上边框属性,margin-top,，下边框属性,margin-bottom,，左边框属性,margin-left,和右边框属性,margin-right,。,10.3.5,框模型的溢出,有时候，如果层中的内容太多，以至于超出层的初始设定范围时，,IE,浏览器此时会“自作主张”地帮忙拉伸层的范围。为了改变这种情况，令层的大小不会发生改变，可以使用,overflow,属性。在默认情况下，,overflow,属性值为,visible,，意思是页面内容都是可见的。所以，这是层的大小失去控制的原因。,10.4,定制层的,display,属性,前面已经了解到，层的表现是通过“框”这种结构。框可以是块级对象（,block element,），也可以是行内对象（,inline element,）。那么所谓,display,属性就是用来控制其中的内容是块级还是行级。所以，基本的定义为,block,，表现为块级；或者定义为,inline,，表现为行级。默认情况下是,none,，表现为不显示框，代码写为：,display:block;,10.5 CSS Hack,目前世界上流行着多种浏览器，主要有,IE,浏览器、,Firefox,、,Opera,以及,Google,浏览器，它们基于不同的内核，对,CSS,的解析也就不一样，这直接导致生成的页面效果不同。例如最直接的影响就体现在框模型中对距离的理解，这对设计者来说，是很伤脑筋的一件事。怎样才能够解决浏览器兼容的问题呢？只能针对于不同的浏览器写不同的样式表，这种写法被称之为,CSS Hack,。,10.5 CSS Hack,尽管有许多,Hack,针对不同的浏览器提供了解决方案，例如在解决,IE,浏览器和,Firefox,浏览器中布局不同的问题时，常用的一个是,!important,。由于,!important,不被,IE,支持，而其他浏览器可以支持，使用这个特性可以用来解决很多问题。如有时在定义,padding,对象时，在,IE,浏览器和,Firefox,中有误差，则设计者先制定被非,IE,浏览器能识别的声明，再添加一个,IE,也能识别的声明。其中需要注意,CSS,的先后声明顺序。,10.6,案例：简单的,CSS+DIV,从本章开始，读者应该习惯当谈到页面布局这样的问题时，首先想到的是使用,CSS,和层的配合使用。本节使用前面所学的知识制作一个简单的三栏式布局的页面。相对于本章开始的两栏布局，三栏布局并不仅仅只是多加了一个层。在这个例子中，要留心三栏的布局在数字上的巧妙安排，如果数字排的不够精确，页面也许会变得面目全非。,10.7,小结,本章介绍了,CSS+DIV,布局的入门知识及一些基本的概念型的知识，但是这些基本的知识都很重要。只有了解了这些知识点后，在今后,Web,设计的学习中，即使是自学，也可以很好地融会贯通新知识。,