CSS布局教程

    一希堕神话中有一个Pandora'sBox潘多拉的盒子的传说，说是多拉从天上来到人间，同时也带来了一个盒子，，出于好奇她打开盒子想看个究竟，结果饥荒疾病、、贪婪、嫉妒、悲惨等邪恶一齐从盒子里跑了出来，从此也就开始了人类的灾难。
    1996年，W3C推出了CSS，同时也带来了一个盒子，盒子的名字叫BBox Model（中文译为盒模型），根据这个盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示属性，这就是经典的CSS盒模型。盒模型给网页设计带来了创意和激情，但如潘多拉的盒子一样，也让初学者和不少网页设计师为之愁眉和烦恼。
...

在早期的网页设计中，人们习惯于用html标签控制页面的框架和显示样式，那时候对于class还是比较陌生的，偶尔也使用它来定义标签的样式，如网页字体属性，超链接样式等，习惯于标签加属性的设计方式，对于这个class属性设计师开始持排斥态度，慢慢的设计师发现了它的优点，例如，如果事先定义了一个样式之后，可以利用class属性在不同标签内引用，免除了在不同标签内反复定义同一个样式的烦恼，于是class与网页样式就紧密的联系在一起，那时候的样式还仅仅是一种公共属性的代名词，犹如具有某种样式的网页模版，实际上，关于class最早引人重视得益于编程中类的方法应用，在编程语言中，类是一种抽象而艰深的概念，它表示一种原型。
...

关于id和name这两个属性如何区分和使用时广大初学者最迷惑的地方之一，下面就这个问题与读者一块讨论。
早期的html使用name属性来标识每个元素，很明显name就是名称的意识，可能考虑到名称会存在重复性，所以从html4版本开始就不再使用这个属性了，而建议使用id属性作为元素的唯一标识符，甚至到了xhtml严格类型文中就禁止使用name了。
但由于name属性长期使用，在某些方面还具有根深蒂固的影响，在下面这些方面依然被广泛使用，name的用途是不能代替的
...

span元素与div元素相比就显得清闲许多，但span在网页设计中的作用依然不容忽视，span元素一般被用在文本行中修饰特点文本的显示属性，或者局部辅助div元素完善页面布局，由于span元素是一个内联元素，不会引起换行，也不会改变现有的布局或样式，因此它是最理想的逻辑化容器元素。
如果你在dreamweaber 8中或更高级别的版本中为文本行中局部文本定义颜色，则系统会自动插入一个span元素，并定义一个css的颜色样式类，利用span 元素辅助div元素来调整布局空闲或间距非常方便。
...

网页设计的第一步就是构思，这无论是对于传统表格布局，还是对于目前比较流行的xhtml+css布局都是必须的，不要认为标准网页布局一切都与传统网页布局相左，好的设计一般都需要把页面构思用photoshop或fireworks等图片编辑器把界面布局简单的勾画出来，对于设计师来说，草图应尽可能详细，这对于后期的代码编写会节省很多宝贵的时间，也少走很多弯路，有时为了实现某种必要的显示效果而嵌套很多层，这样网页元素的功能性就会与功能性发生冲突，怎么解决这个冲突，又如何平衡功能与功用的关系？下面就此话题与读者一起讨论div的多层嵌套问题。
...

如果在网上随意浏览一下，铺天盖地的div+css或css+div，似乎div+css就是标准网页布局了，司马迁在史记中曾经说过，众口铄金，积毁销骨，相信很多读者，包括部分网页设计师，一提到div+css就会立即认为它就是网站标准，这大概也正中司马迁的那句话，难怪俗话传久了也会成为真理，有时候看到以div+css或css+div作为标题的网站，且不止一个，实感以讹传讹的无奈。
严格的说把标准网页布局看做div+css是不恰当的，也会影响设计师理性选择用符合语义的元素构建网页框架，正确的称呼应该是xhtml+css，而不是div+css，不知道是谁第一个发明了div+css，但仔细琢磨，div元素在网页布局中的作用是毋庸置疑的，你看现在的标准网页布局，基本上就是div元素毒霸天下。
...

当然样式应用并不是这么简单，一个设计庞杂的文档样式表，可能会出现很多意想不到的情况，这些特殊性该如何面对，例如，假设你扮演一次浏览器的角色，如何解析下面的样式，怎么办，别急，先让我们从零说起，很难想象，css的开发者们具有怎样的思维，他们要在千头万绪的凌乱逻辑中理出一条最简单的思维路线，最终方便用户区理解和使用，这个线索是加法，一个小学生都会的计算。
为了优化排序各种规则的特殊性，css为每个一种特殊选择符都分配一个值，然后，将规则的每个选择符的值加在一起，就可以计算出每个规则的特殊性，即优先级，这如工资一样，积分越多，收入就越多，根据css规则，一个简单的选择符，若h2，具有特殊性1，用我的理解为1分，class选择符具有特殊性10，即10分，id具有100，即100分，这样计算，@header选择符就具有最大优先，因此字体显示为黑色
...

这是一个高级的话题，但是对于一个优秀的标准网页设计师来说，是必须要面临的问题，它是网页布局的一个关键技术，也是一个很实用的技巧
继承：有人把xhtml文档比喻为一课枝繁叶茂的大树，从结构上来说html元素该是他的根了，文档中各种元素大概算是大树的枝叶，那绿的诱人的叶子就是显现在用户面前的网页内容，自然，css也带有数的本性，其中一个重要特征就是继承。
什么是继承，这是一个很好理解的概念，如果称为遗传就更形象了，它允许样式不仅仅可以作用于某个特定元素，而且还可以应用于它的后代元素，继承是非常重要的，实用它可以简化代码，降低css样式的复杂性，但是，如果在网页中所有元素都大量继承样式，那么判断样式的来源就会变得非常困难，所有建议读者，对于字体，文本类属性等设计到网页中通用属性可以使用继承，例如，网页显示字体，字号，颜色，行间距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。
...

css代码可以很灵活的在网页中应用，你可以把css样式作为元素属性的一部分与结构融合一体，也可以使用style元素在xhtml文档中单独定义，或者把css代码保存在单独的样式表文件中，再导入到xhtml文档中。
内联样式，内联样式就利用style属性来设置元素样式，也可以说是嵌入式样式，这与html设置各种描述属性没有本质的区别，因此，在标准网页中不建议使用这种应用样式，但是在某些情况下，可能只需要简单的将一些样式应用于某个独立的元素，而不需要嵌入或者使用外部样式，可以采用这种方式。
...

实际上，设计师应该很熟悉属性选择符，因为id,class选择符从本质上来说其实就是属性选择符，只不过是选择了id,class的值而以，属性选择符是元素后面增加一个中括号，中括号内列出各种属性，或者属性表达式，属性选择符也是限定性选择符，它根据制定属性作为限制条件来定义元素的样式，属性选择符存在7种具体形式、：
存在属性匹配
通过匹配存在的属性来控制元素的样式，一般把要匹配的属性包含在中括号中国，只列举属性名，但不赋值，这是最简单的属性选择符，例如：h1[class]{color:red;}
...