CSS教程

在多年的表格布局与标准布局之争后，以XHTML+CSS为标准的布局不断得到多数设计师的认可。标准布局的优势不言而喻，但我们依然能够在网上看见不同的声音和非议。XHTML+CSS被误解是可以理解的，想到初学者要驾驭个性各异的浏览器，同时在冰冷的代码环境中，需要极高的热情和极大的想象力来编写这些如同账目似的样式代码，确实存在不小的难度。但不可否认，时下Web布局技术的快速普及，每位设计师都可以用CSS或半CSS技术进行网页布局。网页设计师常常套用现成的CSS布局代码，而对其内在的原理却是一知半解或囫囵吞枣，所实现的CSS布局犹如一个不透明的黑盒子，虽然也能够实现预期效果，但最终阻碍了设计师对CSS本质的探究和认识。6.1关于CSS布局很多设计师对于CSS的认识和实践仅停留在技巧层面上，对于CSS布局的核心是什么，实现XHTML结构的逻辑体系是什么，如此深奥的理论好像只有系统开发师才去思考，读者还需要认真思考与理解吗？实际上要想驾驭CSS网页布局技术，这些问题应该想一想，抽象的理论对于思路的梳理具有重要作用，甚至能够引导你勇闯智慧的迷宫。所有CSS布局技术都应建立在这4个最基本的概念之上：盒模型、流动、浮动和定位。千变万化的技巧应用其实都是这些基本概念在舞动，而且如果理解了核心概念的真谛，那么创建CSS布局实际上就是按图索骥了。6.1.1从网友的求帖说起一天在网上看到这样一个求救帖子：--------------------------------------------------------------------------------------------------------------------------哪位高手能指点下或给小弟一点div+css中的布局、定位的心得？？一开始做的时候，我把所有的div都用float属性定位起来布局，就连header、content、footer这样的部分也是，（这样做合理吗？）可是后来发现CSS中使用float很多时会很烦琐，所以后来就很少用到一些定位的属性，只是需要的时候才用，可是问题又来了。有时候用到float的时候，明明加了clear了还是显示不对……，现在都对定位迷糊了……--------------------------------------------------------------------------------------------------------------------------浏览下面的跟帖，热心人还真不少，但真正能够点到要害的很少，甚至没有。网友们多从头疼医头、脚痛治脚的方法给予答复，有些也能够止痛，但不能根治。在论坛中，我们会经常看到这样的帖子。有些网友主观上是热情、乐于助人的，但客观上由于自己的认识偏颇，使很多以讹传讹的观点、信息在网上飞速传播，着实令人担忧。因为初学者是没有免疫力的，只要觉得有点止痛，就一概吸收，结果阻碍了对真正滋补营养的汲取。例如，下面列出两则上面问题的跟帖。跟帖一：--------------------------------------------------------------------------------------------------------------------------根据你的页面内容的逻辑关系来结构化你的html代码，定位不是必须的，通常情况下只有个别元素需要特别的定位方式。--------------------------------------------------------------------------------------------------------------------------问题：空洞说理，没有正面提出解决问题的方法，等于没有说。跟帖二：--------------------------------------------------------------------------------------------------------------------------呵呵，float是指把容器当作流来看待了，如果一行可以同时显示多个div，那么后面的div就会贴上去。占用前面那一个div未占据的空间了。默认的情况下是divdisplay:block显示为块，它会占据一行内所有可以占用的空间。如果定义了高度就占用制定高度的空间了。clear就是用来清除左边或右边的流的了。至于布局就老老实实用1000x600这样划分一个布局出来就是了。不要想这么多，呵呵，把问题简化。--------------------------------------------------------------------------------------------------------------------------问题：把float看作流是对CSS布局的误解。流是什么？流是网页文档自然流动而衍生出来的一种布局模式，float虽然也可以流动，但它的本质是浮动，浮动犹如空中漂浮的白云，而流动更像地面上依势而下的流水，不能简单地把流动与浮动混淆起来，否则布局非出问题不可。6.1.2关于盒模型补充在深入学习CSS布局之前，读者必须透彻理解什么是盒模型。关于盒模型基础，我们在第4章中曾做过专题研究，依然比较模糊的读者可以返回再阅读一下。下面就几个容易模糊或误解的地方再强调一下。lmargin总是透明的，padding也是透明的，但padding受背景影响，能够显示背景色或背景图像，所以部分初学者会误认为补白不透明。lborder不透明，这是因为实线边框的遮盖。当你定义虚线或点线边框时，在部分浏览器中可以看到被边框遮盖的背景。盒模型背景可以深入到padding和border区域，但部分浏览器不支持border区域背景显示，如IE和Netscape浏览器。lmargin可以定义负值，但border和padding不支持负值。lmargin、border和padding都是可选的，它们默认值为0。我们可以单独定义一边或统一定义盒子四边的属性值。l如果需要，每一条可见边框都可以定义不同的宽度，但前提是要定义border-style属性为可见样式。l每一个盒子所占页面区域的宽度和高度等于margin外沿的宽度和高度。盒子的大小并不总是内容区域的大小。l浏览器窗口是所有元素的根元素，也就是说html是最大的盒子，也有浏览器把body看作最大的盒子。6.1.3盒模型的类型CSS把盒模型分为两种基本形态：Block（块状）和Inline（内联，也有翻译为“行内”）。在默认状态下，块状元素的宽度为100％，而且后面隐藏附带有换行符，使块状元素始终占据一行。符合标准的常用块状元素如下表：块状元素说明address表示特定信息，如地址、签名、作者、文档信息。一般显示为斜体效果blockquote表示文本中的一段引用语。一般为缩进显示div表示通用包含块，没有明确的语义dl表示定义列表fieldset表示字段集，显示为一个方框，用来包含文本和其他元素form说明所包含的控件是某个表单的组成部分h1-h6表示标题，其中h1表示一级标题，字号最大，h6表示最小级别标题，字号最小hr画一条横线noframes包含对于那些不支持FrameSet元素的浏览器使用的HTMLnoscript指定在不支持脚本的浏览器中显示的HTMLol编制有序列表p表示一个段落pre以固定宽度字体显示文本，保留代码中的空格和回车table表示所含内容组织成含有行和列的表格形式ul表示不排序的项目列表li表示列表中的一个项目legend在FieldSet元素绘制的方框内插入一个标题内联元素没有高度和宽度，因此也就没有固定的形状，定义它的width和height属性无效。内联元素可以在行内自由流动，但它会遵循盒模型基本规则，如可以定义边界、补白和边框，可以定义背景。它的最小内容单元也会呈现矩形形状，但它显示的高度和宽度只能根据所包含内容的高度和宽度来确定。有人把块状元素比作硬木盒子，而把内联元素比作随意变形的皮纸袋子，这还是挺形象的。符合标准的常用内联元素如下：内联元素说明a表示超链接abbr标注内部文本为缩写，用title属性标示缩写的全称，在非IE浏览器中会以下点划线显示，IE不支持acronym表示取首字母的缩写词，一般显示为粗体，部分浏览器支持b指定文本以粗体显示bdo用于控制包含文本的阅读顺序，如bdodir=rtlthisfragmentisinenglish/bdo，浏览器会从右到左显示文本big指定所含文本要以比当前字体稍大的字体显示续表内联元素说明br插入一个换行符button指定一个容器，可以包含文本，显示为一个按钮cite表示引文，以斜体显示code表示代码范例，以等宽字体显示dfn表示术语，以斜体显示em表示强调文本，以斜体显示i指定文本以斜体显示img插入图像或视频片断input创建各种表单输入控件kbd以定宽字体显示文本label为页面上的其他元素指定标签map包含客户端图像映射的坐标数据object插入对象q分离文本中的引语samp表示代码范例script指定由脚本引擎解释的页面中的脚本select表示一个列表框或者一个下拉框small指定内含文本要以比当前字体稍小的字体显示span指定内嵌文本容器strike带删除线显示文本strong以粗体显示文本sub说明内含文本要以下标的形式显示，比当前字体稍小sup说明内含文本要以上标的形式显示，比当前字体稍小textarea多行文本输入控件tt以固定宽度字体显示文本var定义程序变量，通常以斜体显示盒模型的显示类型可以使用display属性来显式定义。任何元素都可以通过display属性改变默认显示类型，因此也会改变该元素所对应的网页布局结构。display属性共有18个选项值，详细说明如下：lblock：块状显示，在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。lnone：隐藏显示，这与visibility:hidden;声明不同，display:none;声明不会为被隐藏的元素保留位置。linline：内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。linline-block：内联显示，但是元素的内容以块状显示，行内其他内联元素还会显示在同一行内。lcompact：紧凑的块状显示，或基于内容之上的内联显示。lmarker：在容器对象之前或之后显示，该属性值必须与:after和:before伪元素一起使用。linline-table：具有内联特征的表格显示。llist-item：具有块状特征的列表项目显示，并可以添加可选项目标志。lrun-in：块状显示或基于内容之上的内联显示。ltable：具有块状特征的表格显示。ltable-caption：表格标题显示。ltable-cell：表格单元格显示ltable-column：表格列显示。ltable-column-group：表格列组显示。ltable-header-group：表格标题组显示。ltable-footer-group：表格页脚组显示。ltable-row：表格行显示。ltable-row-group：表格行组显示。更详细说明可以参考CSS参考手册。如果单从布局角度来分析，这些显示类型都可以划归为block和inline两种基本显示形态，其他类型都是这两种类型的特殊显示。其中真正能够应用并获得所有浏览器支持的取值只有4个：block、none、inline、list-item。none属性值表示隐藏并取消盒模型，这样元素所包含的内容就不会被浏览器解析和显示，同样这个盒子所包含的任何元素都会被浏览器忽略，不管它们是否被声明为其他属性。list-item属性值表示列表项目，其实质上也是块状显示，不过是一种特殊的块状类型，它增加了缩进和项目符号。另外，还有一些比较有用的显示类型，如table、table-cell、in