CSS布局教程

基于web标准的网站设计指南

css盒模型简介

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

关于id和class

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

关于id和name

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

使用span元素和id元素

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

使用div元素

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

通用元素div和span

如果在网上随意浏览一下,铺天盖地的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为每个一种特殊选择符都分配一个值,然后,将规则的每个选择符的值加在一起,就可以计算出每个规则的特殊性,即优先级,这如工资一样,积分越多,收入就越多,根据css规则,一个简单的选择符,若h2,具有特殊性1,用我的理解为1分,class选择符具有特殊性10,即10分,id具有100,即100分,这样计算,@header选择符就具有最大优先,因此字体显示为黑色
...

css的继承和层叠

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

在网页中应用css

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

属性选择符

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

分页:[«][4][5][6][7][8][9][10][11]12[13][14][15][16][17][18][»]

日历

<< 2010-8 >>

Sun

Mon

Tue

Wed

Thu

Fri

Sat

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Powered By Z-Blog 1.8 Arwen Build 90619

Copyright www.zxh6655.cn. Some Rights Reserved.黑ICP备09093629号