Main CSS设计彻底研究

CSS设计彻底研究

0 / 0
How much do you like this book?
What’s the quality of the file?
Download the book for quality assessment
What’s the quality of the downloaded files?
Year:
2010
Publisher:
人民邮电出版社
Language:
chinese
ISBN:
B008QM12BK
File:
EPUB, 14.19 MB
Download (epub, 14.19 MB)

Most frequently terms

 
0 comments
 

To post a review, please sign in or sign up
You can write a book review and share your experiences. Other readers will always be interested in your opinion of the books you've read. Whether you've loved the book or not, if you give your honest and detailed thoughts then people will find new books that are right for them.
1

Pencak Silat Daerah Bali

Year:
1985
Language:
indonesian
File:
PDF, 4.57 MB
0 / 0
目录

前言

第1章 (X)HTML与CSS核心基础 1.1 HTML与XHTML 1.1.1 追根溯源

1.1.2 DOCTYPE(文档类型)的含义与选择

1.1.3 XHTML与HTML的重要区别



1.2 (X)HTML与CSS 1.2.1 CSS标准简介

1.2.2 在HTML中引入CSS的方法



1.3 基本CSS选择器 1.3.1 标记选择器

1.3.2 类别选择器

1.3.3 ID选择器



1.4 复合选择器 1.4.1 “交集”选择器

1.4.2 “并集”选择器

1.4.3 后代选择器



1.5 CSS的继承特性 1.5.1 继承关系

1.5.2 CSS继承的运用



1.6 CSS的层叠特性

1.7 本章小结



第2章 “CSS禅意花园”作品鉴赏 2.1 “CSS禅意花园”简介

2.2 郊野——两列布局

2.3 像素画——三列布局

2.4 百合池塘——三列布局变体

2.5 郁金香——多列布局

2.6 日与夜——包含圆角的设计

2.7 Si6——包含倾斜的设计

2.8 清茶时光——装饰性设计

2.9 爱之空气——流体布局

2.10 谷香——食品主题设计

2.11 城市——建筑主题设计

2.12 “卡通版”禅意花园——特色效果

2.13 收音机——特色效果

2.14 杀手风格——特色效果

2.15 海底世界——特色效果

2.16 博物馆——特色设计

2.17 剧院效果——特色效果

2.18 本章小结



第3章 深入理解盒子模型 3.1 盒子的内部结构

3.2 边框(border) 3.2.1 实验1——border-style

3.2.2 属性值的简写形式

3.2.3 实验2——属性的缩写形式

3.2.4 实验3——边框与背景



3.3 内边距(padding)

3.4 外边距(margin)

3.5 盒子之间的关系 3.5.1 HTML与DOM

3.5.2 标准文档流

3.5.3 <div>标记与<span>标记



3.6 盒子在标准流中的定位原则 3.6.1 实验1——行内元素之间的水平margin

3.6.2 实验2——块级元素之间的竖直margin

3.6.3 实验3——嵌套盒子之间的margin

3.6.4 实验4——将margin设置为负值



3.7 CSS中的几何题

3.8 本章小结



第4章 盒子的浮动与定位 4.1 盒子的浮动 4.1.1 准备代码

4.1.2 实验1——设置第1个浮动的div

4.1.3 实验2——设置第2个浮动的div

4.1.4 实验3——设置第3个浮动的div

4.1.5 实验4——改变浮动的方向

4.1.6 实验5——再次改变浮动的方向

4.1.7 实验6——全部向左浮动

4.1.8 实验7——使用clear属性清除浮动的影响

4.1.9 实验8——扩展盒子的高度



4.2 盒子的定位 4.2.1 static(静态定位)

4.2.2 relative(相对定位)

4.2.3 absolute(绝对定位)

4.2.4 fixed(固定定位)



4.3 z-index空间位置

4.4 盒子的display属性

4.5 本章小结



第5章 文字与图像 5.1 CSS文字样式 5.1.1 准备网页

5.1.2 设置字体

5.1.3 文字大小

5.1.4 行高

5.1.5 文字颜色与背景颜色

5.1.6 文字加粗、倾斜与大小写

5.1.7 文字的装饰效果

5.1.8 文字的水平对齐方式与段首缩进设置

5.1.9 文字布局

5.1.10 段落的垂直对齐方式



5.2 CSS图像样式 5.2.1 基本设置

5.2.2 背景图像

5.2.3 标题的图像替换

5.2.4 为图像增加投影效果



5.3 本章小结



第6章 链接与导航 6.1 丰富的超链接特效 6.1.1 动态超链接

6.1.2 按钮式超链接

6.1.3 CSS控制鼠标指针

6.1.4 浮雕背景超链接

6.1.5 让下划线动起来



6.2 项目列表 6.2.1 列表的符号

6.2.2 图片符号



6.3 简单的导航菜单 6.3.1 简单的竖直排列菜单

6.3.2 横竖自由转换菜单



6.4 本章小结



第7章 竖直排列的导航菜单 7.1 双竖线菜单 7.1.1 HTML框架

7.1.2 设置容器的CSS样式

7.1.3 设置菜单项的CSS样式

7.1.4 解决出现的问题



7.2 双斜角横线菜单 7.2.1 基本设置

7.2.2 菜单项设置



7.3 立体菜单 7.3.1 基本设置

7.3.2 菜单项设置



7.4 箭头菜单 7.4.1 基本; 思路

7.4.2 基本设置

7.4.3 设置箭头效果



7.5 带说明信息的菜单 7.5.1 基本思路

7.5.2 设置方法



7.6 本章小结



第8章 水平导航菜单 8.1 自适应的水平菜单

8.2 自适应的斜角水平菜单 8.2.1 基本思路

8.2.2 基本设置

8.2.3 设置斜角效果

8.2.4 设置鼠标经过效果



8.3 应用滑动门技术的玻璃效果菜单 8.3.1 基本思路

8.3.2 设置菜单整体效果

8.3.3 使用“滑动门”技术设置玻璃材质背景

8.3.4 进一步解决的问题



8.4 三状态玻璃效果菜单(双层滑动门应用) 8.4.1 设置菜单整体效果

8.4.2 设置第一层滑动门

8.4.3 设置第二层滑动门

8.4.4 设置表示当前页面的菜单项

8.4.5 进一步解决的问题



8.5 不使用图像的圆角菜单 8.5.1 实现圆角效果

8.5.2 用列表进行改造

8.5.3 设置鼠标响应效果



8.6 会跳起的多彩菜单 8.6.1 实现跳起效果

8.6.2 实现多彩效果

8.6.3 本案例的完整代码

8.6.4 实现向下弹出效果



8.7 本章小结



第9章 下拉菜单 9.1 HTML中的dl、dt和dd标记

9.2 菜单的HTML结构

9.3 对整体进行设置

9.4 对dl进行设置

9.5 对主菜单项(dt)进行设置

9.6 对子菜单项(dd)进行设置

9.7 对鼠标响应进行设置

9.8 实现主菜单项的不同颜色

9.9 IE 6兼容

9.10 本章小结



第10章 表格也精彩 10.1 控制表格 10.1.1 表格中的标记

10.1.2 表格的边框

10.1.3 表格宽度的确定

10.1.4 其他与表格相关的标记



10.2 美化表格 10.2.1 搭建HTML结构

10.2.2 整体设置

10.2.3 设置单元格样式

10.2.4 隔行变色

10.2.5 设置列样式



10.3 鼠标指针经过时整行变色提示的表格 10.3.1 搭建HTML结构

10.3.2 在Firefox和lE 7中实现鼠标指针经过时整行变色

10.3.3 在lE 6中实现鼠标指针经过时整行变色



10.4 Excel方式二维变色提示的表格 10.4.1 改造CSS代码

10.4.2 改造JavaScript代码



10.5 多视图模式日历案例概述

10.6 制作中视图模式 10.6.1 搭建HTML结构

10.6.2 设置整体样式和表头样式

10.6.3 设置日历单元格样式

10.6.4 总结经验



10.7 制作小视图模式 10.7.1 整体设置

10.7.2 为IE 7和Firefox制作鼠标指针经过时10.7.2弹出的信息框

10.7.3 为lE 6制作鼠标指针经过时弹出的信息框



10.8 制作大视图模式 10.8.1 通过display属性改变盒子的类型

10.8.2 设置日程安排项目



10.9 本章小结



第11章 圆角设计 11.1 圆角框的作用

11.2 固定宽度圆角框 11.2.1 两背景图像法

11.2.2 使用透明背景图

11.2.3 带边框的固定宽度圆角框

11.2.4 单背景图像的带边框固定宽度圆角框



11.3 不固定宽度的圆角框 11.3.1 不固定宽度圆角框的含义

11.3.2 “4图像”单色不固定宽度圆角框

11.3.3 “4图像滑动门”单色不固定宽度圆角框



11.4 “5图像”二维滑动门经典圆角框 11.4.1 准备图像

11.4.2 搭建HTML结构

11.4.3 放置背景图像

11.4.4 设置样式并修复缺口

11.4.5 在整体页面中使用圆角框

11.4.6 实现网页换肤



11.5 本章小结



第12章 应用Spry制作高级网页组件 12.1 Tab菜单与Tab面板简介

12.2 Tab菜单 12.2.1 搭建HTML结构

12.2.2 设置整体的样式

12.2.3 设置Tab的样式

12.2.4 设置当前页的Tab样式



12.3 借助于Spry实现Tab面板 12.3.1 建立基本的Tab面板

12.3.2 准备背景图片

12.3.3 设置整体的CSS样式

12.3.4 设置单个Tab的CSS样式

12.3.5 设置单个Tab的滑动门背景

12.3.6 设置鼠标经过效果

12.3.7 设置当前页效果

12.3.8 设置Tab页内容的CSS样式

12.3.9 鼠标经过时换页



12.4 折叠面板 12.4.1 建立基本的折叠面板

12.4.2 准备背景图片

12.4.3 整体设置

12.4.4 设置折叠面板的标题

12.4.5 设置折叠面板的初始状态

12.4.6 设置展开状态的标题背景

12.4.7 设置鼠标指针经过时的标题背景



12.5 伸缩面板 12.5.1 建立基本的伸缩面板

12.5.2 设置标题的样式

12.5.3 对最上面的标题进行特殊处理



12.6 本章小结



第13章 固定宽度布局剖析与制作 13.1 CSS排版观念 13.1.1 MSN的首页

13.1.2 Yahoo.com

13.1.3 Times.com

13.1.4 CNN.com

13.1.5 163.com



13.2 单列布局 13.2.1 放置第一个圆角框

13.2.2 设置圆角框的CSS样式

13.2.3 放置其他圆角框



13.3 “1-2-1”固定宽度布局 13.3.1 准备工作

13.3.2 绝对定位法

13.3.3 浮动法



13.4 “1-3-1”固定宽度布局

13.5 “1-((1-2)+1)-1”固定宽度布局

13.6 魔术布局 13.6.1 制作步骤

13.6.2 修正缺陷



13.7 本章小结



第14章 变宽度网页布局剖析与制作 14.1 “1-2-1”变宽度网页布局 14.1.1 “1-2-1”等比例变宽布局

14.1.2 “1-2-1”单列变宽布局



14.2 “1-3-1”宽度适应布局 14.2.1 “1-3-1”三列宽度等比例布局

14.2.2 “1-3-1”单侧列宽度固定的变宽布局

14.2.3 “1-3-1”中间列宽度固定的变宽布局

14.2.4 进一步的思考

14.2.5 “1-3-1”双侧列宽度固定的变宽布局

14.2.6 “1-3-1”中列和侧列宽度固定的变宽布局



14.3 变宽布局方法总结

14.4 分列布局背景色问题 14.4.1 固定宽度布局的列背景色设置

14.4.2 特殊宽度变化布局的列背景色设置

14.4.3 单列宽度变化布局的列背景色设置

14.4.4 多列等比例宽度变化布局的列背景色设置



14.5 CSS排版与传统的表格方式排版的分析

14.6 本章小结



第15章 “CSS禅意花园”作品研究 15.1 “禅意花园”页面HTML结构分析

15.2 亲自动手 15.2.1 结构分析

15.2.2 整体设置

15.2.3 设置页头

15.2.4 设置supportingText部分和linkList部分



15.3 禅意花园作品的赏析与借鉴方法指导 15.3.1 191号作品分析

15.3.2 026号作品

15.3.3 175号作品



15.4 本章小结



第16章 综合案例研究 16.1 《简约夕阳》(158号作品)布局方法剖析 16.1.1 设置渐变的页面背景

16.1.2 设置整体结构

16.1.3 设置linkList

16.1.4 设置各个部分的标题

16.1.5 设置footer

16.1.6 本案例的总结



16.2 《日记》(191号作品)布局方法剖析 16.2.1 准备图片

16.2.2 设置页头

16.2.3 设置supportingText部分

16.2.4 设置linkList部分

16.2.5 本案例总结



16.3 本章小结



第17章 从学习到创作 17.1 拍摄素材照片

17.2 在图像软件中设计方案

17.3 整体的结构分析

17.4 CSS样式设计与编码

17.5 修改新页面方案

17.6 本章小结



附录 CSS英文小字典

附录1





图书在版编目(CIP)数据

CSS设计彻底研究/温谦编著.——北京:人民邮电出版社,2008.2

ISBN 978-7-115-17296-9

Ⅰ. C… Ⅱ.温… Ⅲ.主页制作——软件工具,CSS Ⅳ.TP393.092

中国版本图书馆CIP数据核字(2007)第188430号

CSS设计彻底研究

◆编著 前沿科技 温谦

责任编辑 杨璐

◆人民邮电出版社出版发行

北京市崇文区夕照寺街14号

邮编 100061

电子函件 315@ptpress.com.cn

网址 http://www.ptpress.com.cn

北京隆昌伟业印刷有限公司印刷

新华书店总店北京发行所经销

◆开本:787×1092 1/16

印张:29.5

彩插:4

字数:736千字

2008年2月第1版

印数:1–5 000册

2008年2月北京第1次印刷

ISBN 978-7-115-17296-9/TP

定价:69.00元(附光盘)

读者服务热线:(010)67132692

印装质量热线:(010)67129223

反盗版热线:(010)67171154





内容提要


本书是一本深入研究和揭示CSS设计技术的书籍。本书在透彻地讲解CSS核心技术的基础上,深入到各个实际应用领域中,充分向读者演示了如何使用CSS的各项技术,实现令人眩目的网页布局和效果。

本书详细介绍了CSS核心基础、盒子模型等知识,力求把道理和方法讲清楚,采用了“探索式”的讲解方法,对于一个问题,例如标准流、浮动、定位等规律,均通过一系列动手实验,使读者自己就能够非常自然地得出结论,使读者不但知其然,而且还知其所以然。

在本书中对设计中常用的网页元素和布局方式都给出详细的分类和归纳,并讲解了完整的解决方法,主要包括各种导航菜单(水平的、竖直的、固定宽度的、自适应宽度的、下拉的等),Tab面板、伸缩面板和折叠面板,以及各种形式的分列布局(固定宽度的、变化宽度的、固定宽度与变化宽度结合的),等等。这样读者在理解了方法的基础上,可以直接将案例用在自己的设计中的,只需要按照所需进行修改即可。

本书适合需要使用CSS的Web设计人员和开发人员阅读,最好具备一定的HTML和网页设计制作基础。





前言



爱上CSS


CSS是一种崭新的“老技术”。在互联网领域,任何一种诞生于10年前的技术都称得上是“老技术”,但是CSS是一个特例,它是一种崭新的老技术,因为在几乎诞生10年以后,它才闪耀出真正动人心魄的魅力。

学习和研究一项技术的动机有两种,一种是工作,另一种是兴趣。CSS不但可以用来工作谋生,更值得爱上这项技术,是因为它提供了无限的创造空间。

本书将像一位导游那样,带领读者深入CSS的核心,深入剖析CSS的机制和原理,并把这些原理应用到一个个实际的案例之中。

希望读者在读完本书以后,也能爱上CSS。





面向读者


阅读本书的读者最好具有一定的网页制作基础,并对HTML的基本元素有所了解。

(1)对HTML和网页设计有初步的基础。

(2)具有钻研的精神和热情。

其中第1点的权重占10%,第2点权重占90%。

本书适合每一个需要使用CSS的Web设计人员和开发人员阅读。





本书特点


1. 深入探索


本书以独特的探索式方式对CSS设计技术的原理和方法进行讲解,符合自学者的认知特点。这样,读者就可以不但知其然,而且知其所以然。学习任何东西,明白了道理之后,应用起来才能游刃有余。





2. 得出结论,总结经验


本书带领大家深入探索,通过一系列的动手实验,使读者自己就能够非常自然地得出结论。对各种设计中常用的网页元素和布局方式的设计都给出了完整的思路和制作方案,对学习和工作过程中遇到的沟沟坎坎也给出了解决方法。





3. 指导应用


对各种网页元素和布局方式,包括各种导航菜单(水平的、竖直的、固定宽度的、自适应宽度的、下拉的等),Tab面板、伸缩面板和折叠面板,以及各种形式的分列布局(固定宽度的、变化宽度的、固定宽度与变化宽度结合的),等等,都给出了详细的分类和归纳,便于读者在理解的基础上,直接修改后使用。





4. 综合实践


我们与“CSS禅意花园”的创建者Dave Shea取得了联系,获得了使用禅意花园作品的授权。本书会结合禅意花园网站中的一些精彩案例,给出分析和说明。最后将综合前面所学,从创意、拍摄素材到实际完成的全过程,实际制作自己的“禅意花园”作品,培养读者的综合实践能力。





本书内容安排


本书共分为17章。

第1章:介绍(X)HTML和CSS相关的核心基础知识。

第2章:向读者展示CSS能够给网页设计带来的效果。

第3章:深入讲解CSS的核心机制——盒子模型。

第4章:讲解CSS布局的重点和难点——浮动和定位。

第5章:介绍文字和图像的排版。其中为图像增加阴影这个案例难度比较大。

第6章:介绍链接和导航相关的设置方法。

第7章:制作比较简单的竖直排列的导航菜单。

第8章:制作复杂的水平排列的导航菜单。

第9章:制作两级的下拉菜单。

第10章:介绍表格样式的设置方法。

第11章:深入讲解制作圆角框的多种方法,深入分析了不同方法的特点和使用范围。

第12章:介绍在近年来出现的一些新的网页元素的制作方法,例如Tab面板、折叠面板和伸缩面板等。

第13和14章:全面地归纳和总结不同形式布局的设计方法,并给出全面的案例。这两章是全书技术难度最大的两章。

第15至17章:以CSS禅意花园的作品为例,在研究成功作品的基础上,制作自己的“CSS禅意花园”作品,从而综合实践整体页面的布局方法。





光盘内容


本书光盘收录了精心编排并制作的多媒体视频教学课程,辅助读者学习CSS。视频教程分为两个部分。

(1)共计6小时针对本书内容的视频讲解,对书中的内容进行说明、演示和必要的补充,建议读者在学习时,将本书和视频教程配合使用,相信对技术的理解会非常有帮助。

(2)为没有任何HTML基础和网页制作基础的读者准备的基础内容,对于有基础的读者可以跳过。

光盘中还包括了本书所有案例的源代码、素材和最终效果文件。





学习方法建议


1. 务必重视对基础的掌握


CSS和HTML的区别在于HTML基本上不涉及逻辑,学习起来非常容易,而CSS涉及了相对比较复杂的逻辑过程,理解起来就复杂得多。因此,读者不要只关心某一个效果的最终结果,更重要的是理解其中的核心原理。





2. 记熟本书中出现的英文单词


很多初学者感到CSS学起来比较困难,很重要的一个原因是,CSS的属性名称众多,这一点对于母语是英语的人来说,几乎不存在困难,因为这些属性名称本身就是一些常用的单词。这里建议读者先把遇到的英语单词集中背一次,就像学英语课文先学单词一样,扫清单词障碍,学起来就会容易很多了。

为此,我们总结了本书中比较频繁出现的160个英文单词,并给出了中文解释,将其放在本书的附录中,读者在学习遇到困难时可以查一查,或者索性把这160个单词先背下来。





3. 在理解的基础上一定要多练习、多实践


“纸上得来终觉浅,绝知此事要躬行。”希望读者能够在自己探索和研究的基础上学习本书,而不要把直接使用本书的例子作为目的。只有经过了自己的思考和消化,才能真正掌握技术。





4. 利用好本书的光盘


本书的光盘中包含的视频教程可以帮助理解书中的一些难点和重点,读者可以充分利用光盘中的视频,提高学习效率。





5. 下载并安装Firefox浏览器


本书介绍的案例均可以在IE 6、IE 7和Firefox这3种最流行的浏览器中正确显示(除个别有特殊说明的案例),而其中Firefox浏览器对CSS和Web标准支持最完善,因此在调试时,建议读者同时用Firefox和IE浏览器测试。下载Firefox浏览器的官方网址是http://www.moziIIa.org.cn 。





6. 利用支持网站的内容辅助学习


除了与本书配套的视频课程,读者还可以访问前沿科技建立的“前沿视频教室网站”,网址是http://www.artech.cn ,里面除了本书相关的内容,还有更多的关于CSS以及其他Web设计与开发相关的内容,供读者学习。

建议那些有更高要求的读者,按照本书中给出的一些扩展内容的网址,做进一步的阅读和学习。读者可以访问http://learning.artech.cn/20071220.css-link-list.html ,其中列出了所有的链接地址,以使读者免去输入网址的麻烦,它们大都是一些非常经典的CSS专家的技术文章。





获取更新内容


本书由前沿科技的温谦主要编写,参与编写工作的还有王璐、郝雯、温颜、吕岩岩、张金辉、韩军、温鸿钧、白玉成、王斌、刘璐、陈宾、刘军、黄欢、刘艳茹、曾顺、梁万强、谢伟、黄世明、陈宾、张晓静、武智涛、彭启、蔡庆武、孙琳等。如果读者在学习过程中,遇到有关书中的问题,或有任何建议,请与我们联系,E-mail是luyang@ptpress.com.cn。请登录网站http://learning.artech.cn ,我们会及时更新与本书相关的信息和内容。

我们衷心希望本书能给广大读者提供一些真正的帮助,如果您有任何建议或者意见,欢迎和我们联系。





Chapter 1




第1章 (X)HTML与CSS核心基础


本书假设读者已经对HTML有所掌握,如果读者了解以下HTML标记中大多数标记的含义,就可以开始学习本书。

<html>、<head>、<title>、<body>、<p>、<img>、<a>、<div>、<ul>、<ol>、<li>、<style>、<table>、<tr>、<td>、<form>、<input>、<br>、<hr>。

如果读者还不清楚上面这些标记的含义,请先跟随本书所附光盘中的“基础知识视频教程”文件夹中的教学视频,学习一下最基础的知识,然后再开始学习本书。

此外,本书将不再占用篇幅抽象地讲解使用CSS布局所具有的优势,相信大部分读者对此已经有所了解。如果对这个问题感兴趣,可登录http://learning.artech.cn/category/css-div-web-design/cartoon-css-div 来学习。其内容为1个小时生动有趣的视频课程,清晰地阐述了从传统布局方式到CSS布局的来龙去脉,并给出比较深入的分析。

本章将就一些在工作中,会遇到的实际问题进行讲解,作为学习CSS设计的必备基础。





1.1 HTML与XHTML


HTML与XHTML是一种语言还是两种语言?基本上可以认为,它们是一种语言的不同阶段,有点类似于文言文和白话文之间的关系。因此它们也经常被写作(X)HTML。下面首先从它们的渊源和区别开始本书的讲解。





1.1.1 追根溯源


(X)HTML是所有上网的人每天都离不开的基础,所有网页都是使用(X)HTML编写的。随着网络技术日新月异的发展,HTML也经历了不断的改进。可以认为XHTML是HTML的“严谨版”。

HTML在初期,为了它更广泛地被接受,大幅度放宽了标准的严格性,例如标记可以不封闭,属性可以加引号,也可以不加引号,等等,导致出现了很多混乱和不规范的代码。这显然不符合标准化的发展趋势,影响了互联网的进一步发展。

为此,相关规范的制订者——W3C组织,一直在不断地努力,逐步推出新的版本规范。从HTML到XHTML,大致经历了以下几个版本。

HTML 2.0:于1995年11月发布。

HTML 3.2:于1996年1月14日发布。

HTML 4.0:于1997年12月18日发布。

HTML 4.01(微小改进):于1999年12月24日发布。

XHTML 1.0:于2000年1月发布,后又经过修订于2002年8月1日重新发布。

XHTML 1.1:于2001年5月31日发布。

XHTML 2.0:正在制定中。



在正式的标准序列中,没有HTML 1.0版,这是因为在最初阶段,各个机构都推出了自己的方案,没有形成统一的标准。因此,W3C组织发布的HTML 2.0是形成标准以后的第一个正式规范。

这些规范实际上主要是为浏览器的开发者阅读的,因为他们必须了解这些规范的所有细节。而对于网页设计师来说,并不需要了解规范之间的细微差别,这与实际工作并不十分相关。因此,网页设计师通常只要知道一些大的原则就可以了。而且这些规范的文字也都比较晦涩,并不易阅读。当然,如果设计师真的能够花一些时间把HTML和CSS的规范仔细通读一遍,将会有巨大的收获。因为这些规范是所有设计师的“圣经”。


知识: W3C组织就是World Wide Web Consortium(全球万维网联盟)的简称。W3C组织创建于1994年,研究Web规范和指导方针,致力于推动Web发展,保证各种Web技术能很好地协同工作。W3C的主要职责是确定未来万维网的发展方向,并且制定相关的建议(Recommendation,由于W3C是一个民间组织,没有约束性,因此只提供建议)。HTML 4.01规范建议(HTML 4.01 Specification Recommendation)就是由W3C所制定的。它还负责制定CSS、XML、XHTML和MathML等其他网络语言规范。





1.1.2 DOCTYPE(文档类型)的含义与选择


从Dreamweaver MX 2004版开始,在使用Dreamweaver新建一个网页文档的时候,默认情况下生成的基本网页代码是这样的:

<!DOCTYPE html PUBLIC ">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http>equiv="Content>Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> </body> </html>

可以看到最上面有两行关于“DOCTYPE”(文档类型)的声明,它就是告诉浏览器,使用哪种规范来解释这个文档中的代码。

设计师可以在新建文档的时候选择使用哪种文档类型。在Dreamweaver的新建文档对话框中,在右下方有一个文档类型下拉框,如图1.1所示。



图1.1 在Dreamweaver中选择文档类型

对于HTML 4.01和XHTML 1.0分别对应于一种严格(Strict)类型和一种过渡(Transitional)类型。过渡类型兼容以前版本定义的,而在新版本已经废弃的标记和属性。严格类型则不兼容已经废弃的标记和属性。


注意

目前,建议读者使用XHTML 1.0transitional(XHTML 1.0过渡类型),这样设计师可以按照XHTML的标准书写符合Web标准的网页代码,同时在一些特殊情况下还可以使用传统的做法。





1.1.3 XHTML与HTML的重要区别


尽管目前浏览器都兼容HTML,但是为了使网页能够符合标准,设计师应该尽量使用XHTML规范来编写代码,需要注意以下事项。





1. 在XHTML中标记名称必须小写


在HTML中,标记名称可以大写或者小写。例如,下面的代码在HTML中是正确的。

<BODY> <P>这是一个文字段落</P> </BODY>

但是在XHTML中,则必须写为:

<body> <p>这是一个文字段落</p> </body>





2. 在XHTML中属性名称必须小写


HTML属性的名称也必须是小写的。例如,在XHTML中下面的代码的写法是错误的。

<IMG SRC="image.gif" WIDTH="200" HEIGHT="100" BORDER="0">

正确的写法应该是:

<img src="image.gif" width="200" height="100" border="0"/>





3. 在XHTML中标记必须严格嵌套


HTML中对标记的嵌套没有严格的规定。例如,下面的代码在HTML中是正确的。

<b><i>这行文字以粗体倾斜显示</b></i>

然而在XHTML中,必须改为:

<i><b>这行文字以粗体倾斜显示</b></i>

此外,经常被忽略的是对列表标记的嵌套写法。例如,下面的写法在HTML中是错误的。

<ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> <li>牛奶</li> </ul>

正确的写法是:

<ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>牛奶</li> </ul>





4. 在XHTML中标记必须封闭


在HTML规范中,下列代码是正确的。

<p> text line 1 <p> text line 2

上述代码中,第2个<p>标记就意味着前一个<p>标记的结束,但是在XHTML中,这是不允许的,而必须严格地使标记封闭,正确写法如下所示。

<p> text line 1</p> <p> text line 2</p>





5. 在XHTML中,即使是空元素的标记也必须封闭


这里说的空元素的标记,就是指那些<img>、<br>等不成对的标记,它们也必须封闭,例如下面的写法是错误的。

换行<br> 水平线<hr> 图像<img src="happy.gif" alt="Happy face">

正确的写法应该是:

换行<br/> 水平线<hr/> 图像<img src="happy.gif" alt="Happy face"/>





6. 在XHTML中属性值用双引号括起来


在HTML中,属性可以不必使用双引号,例如:

<p class=heading>

而在XHTML中,必须严格写作:

<p class="heading">





7. 在XHTML中属性值必须使用完整形式


在HTML中,一些属性经常使用简写方式设定属性值,例如:

<input disabled>

而在XHTML中,必须完整地写作:

<input disabled="true">





8. 在XHTML中,应该区分“内容标记”与“结构标记”


例如<p>标记是一个内容标记,而<table>标记是结构标记,因此不允许将<table>标记置于<p>内部。而如果将<p>标记置于<td></td>之间,则是完全正确的。

有时这种错误不容易被注意到,在Dreamweaver中也得不到提示,但是在微软公司新推出的网页制作软件Expression Web中,则会给出明确的提示,如图1.2所示。



图1.2 在Expression Web中提示错误

在<table>标记的下方出现红色波浪线,表示存在错误。将鼠标指针移动到<table>标记上,则会出现提示文字“在XHTML 1.0 Transitional中,标记<p>不能包含标记<table>”。有兴趣的读者可以尝试一下这个新的网页设计软件。





1.2 (X)HTML与CSS


(X)HTML与CSS的关系就是“内容”与“形式”的关系,由(X)HTML确定网页的内容,而通过CSS来决定页面的表现形式。





1.2.1 CSS标准简介


和HTML类似,CSS也是由W3C组织负责制定和发布的。1996年12月,发布了CSS 1.0规范;1998年5月,发布了CSS 2.0规范。目前有两个新版本正在处于工作状态,即CSS 2.1版和CSS 3.0版。

图1.3所示的是2007年7月19日CSS 2.1发布的待批准的推荐版,读者可以到http://www.w3.org/TR/ 下载。



图1.3 WC组织发布的CSS 2.1规范工作稿

然而W3C并没有任何强制力要求软件厂商的产品必须符合规范,因此目前流行的浏览器都没有完全符合CSS的规范,这也就给设计师设计网页带来了一些难题。

但是随着技术的发展,各种浏览器都会逐渐在这方面做更多的努力,相信情况会越来越好。目前,最主流的3种浏览器是IE 6.0、IE 7.0和Firefox,它们在中国的使用率总和超过了99%,而以这3种浏览器为目标,已经完全可以做出显示非常一致的CSS布局页面。

在了解了XHTML与HTML之间的关系以后,为了便于讲解,本书在后面的讲解中都不再使用XHTML这个名词,而统一使用HTML,其含义为(X)HTML。





1.2.2 在HTML中引入CSS的方法


HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须通过一些方法,将CSS与HTML挂接在一起,才能正常工作。

在HTML中,引入CSS的方法主要有行内式、内嵌式、导入式和链接式4种。





1. 行内式


行内式即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用。





2. 嵌入式


嵌入式则将对页面中各种元素的设置集中写在<head>和</head>之间,对于单一的网页,这种方式很方便。但是对于一个包含很多页面的网站,如果每个页面都以内嵌方式设置各自的样式,就失去了CSS带来的巨大优点,因此一个网站通常都是编写一个独立的CSS样式表文件,使用以下两种方式中的一种,引入HTML文档中。





3. 导入式与链接式


导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件,二者的区别不大。这里给出一个比较深入的介绍,因为很多读者对此都有疑问。

事实上,二者最大的区别在于链接式使用HTML的标记引入外部CSS文件,而使用导入式则是使用CSS的规则引入外部CSS文件。因此它们的语法也不同。

如果使用链接式,需要使用如下语句引入外部CSS文件。

<link href="mystyle.css" rel="stylesheet" type="text/css" />

如果使用导入式,则需要使用如下语句。

<style type="text/css"> @import"mystyle.css"; </style>

此外,采用这两种方式后的显示效果也略有区别。使用链接方式时,会在装载页面主体部分之前装载CSS文件,这样显示出来的网页从一开始就是带有样式效果的,而使用导入式时,会在整个页面装载完成后再装载CSS文件,对于有的浏览器来说,在一些情况下,如果网页文件的体积比较大,则会出现先显示无样式的页面,闪烁一下之后再出现设置样式后的效果。从浏览者的感受来说,这是使用导入式的一个缺陷。

对于一些比较大的网站,为了便于维护,可能会希望把所有的CSS样式分类别放到几个CSS文件中,这样如果使用链接式引入,就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类,就需要同时调整HTML文件。这对于维护工作来说,是一个缺陷。如果使用导入式,则可以只引进一个总的CSS文件,在这个文件中再导入其他独立的CSS文件;而链接则不具备这个特性。

因此这里给大家的建议是,如果仅需要引入一个CSS文件,则使用链接方式;如果需要引入多个CSS文件,则首先用链接方式引入一个“目录”CSS文件,这个“目录”CSS文件中再使用导入式引入其他CSS文件。

但是如果希望通过JavaScript来动态决定引入哪个CSS文件,则必须使用链接方式才能实现。

这里给出一个完整的例子,演示各种导入方式的具体写法。为了在本书后面的章节中便于讲解,大多数情况使用内嵌式来完成,因为所举的例子通常就是一个独立的页面。

假设有如下页面代码。

<!DOCTYPE html PUBLIC ">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http>equiv="Content>Type" content="text/html; charset=utf>8" /> <title>Text Demo</title> </head> <body> <h1 style="color:white;background>color:blue"> This is a line of Text. </body> </html>

代码中使用的是行内式,也就是直接在h1标记的style属性中设置CSS样式。这里将文字颜色设置为白色,背景颜色设置为蓝色,浏览器中的效果如图1.4所示。



图1.4 使用行内样式设置CSS

这种方式仅对这一个h1标题产生效果,因此如果希望页面中的所有h1标记都使用这种样式,就可以将代码改造为内嵌式。方法是把样式从行内移动到head部分,具体的代码如下。

<!DOCTYPE html PUBLIC ">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http>equiv="Content>Type" content="text/html; charset=utf>8" /> <title>Text Demo</title> <style type="text/css"> h1{ color:white; background>color:blue } </style> </head> <body> <h1>This is a line of Text. <h1>This is another line of Text. </body> </html>

在head部分,这里的h1就称为“选择器”,即选中了网页中的某些特定的元素,后面的样式规则和前面的行内规则的写法相同。


注意

每一条规则都要以分号结束,最后一条则不必以分号结束。



这样,页面中所有的h1标题都会按照这种效果显示,如图1.5所示。



图1.5 使用内嵌方式设置CSS

如果希望把CSS的规则都写到一个外部独立的文件中,然后引入HTML,应再单独写一个文件,文件名的后缀为.css,内容如下:

h1{ color:white;background>color:blue }

然后将HTML文档中的<style></style>部分改为:

<style type="text/css"> @import"mystyle.css"; </style>


注意

这里需要指定正确的CSS文件路径。



这样显示效果与上面的例子完全相同。如果要使用链接式引入这个CSS文件,可将上面的<style></style>部分删除,然后在head部分加入如下语句:

<link href="mystyle.css" rel="stylesheet" type="text/css" />

显示效果也是完全相同的。本节代码读者请参考本书附带光盘中的“第1章”中的01.htm至04.htm。





1.3 基本CSS选择器


选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果。

为了理解选择器的概念,可以用“地图”作为类比。在地图上都可以看到一些“图例”,比如河流用蓝色的线表示,某公路用红色的线表示,省会城市用黑色圆点表示,等等。本质上,这就是一种“内容”与“表现形式”对应关系。在网页上,也同样存在着这样的对应关系,例如h1标题用蓝色文字表示,h2标题用红色文字表示。因此为了使CSS规则与HTML元素对应起来,就必须定义一套完整的规则,实现CSS对HTML的“选择”。这就是叫做“选择器”的原因。

在CSS中,有几种不同类型的选择,本节先来介绍“基本”选择器。所谓“基本”,是相对于下一节中要介绍的“复合”选择器而言的。也就是说“复合”选择器是通过对基本选择器进行组合而构成的。

基本选择器有标记选择器、类别选择器和ID选择器3种,下面详细介绍。





1.3.1 标记选择器


一个HTML页面由很多不同的标记组成,CSS标记选择器用来声明哪些标记采用哪种CSS样式。因此,每一种HTML标记的名称都可以作为相应的标记选择器的名称。例如,p选择器就是用于声明页面中所有<p>标记的样式风格。同样可以通过h1选择器来声明页面中所有的<h1>标记的CSS风格,如下所示:

<style> h1{ color: red; font>size: 25px; } </style>

以上这段CSS代码声明了HTML页面中所有的<h1>标记。文字的颜色都采用红色,大小都为25px。每一个CSS选择器都包含选择器本身、属性和值,其中属性和值可以设置多个,从而实现对同一个标记声明多种样式风格,如图1.6所示。



图1.6 CSS标记选择器

如果希望所有<h1>标记不再采用红色,而是蓝色,这时仅仅需要将属性color的值修改为blue,即可全部生效。


注意

CSS语言对于所有属性和值都有相对严格的要求,如果声明的属性在CSS规范中不存在,或者某个属性的值不符合该属性的要求,都不能使该CSS语句生效。下面是一些典型的错误语句:

Head>height: 48px; /* 非法属性*/ color: ultraviolet;/* 非法值*/

对于上面提到的这些错误,通常情况下可以直接利用CSS编辑器(如Dreamweaver或Expression Web)的语法提示功能避免,但某些时候还需要查阅CSS手册,或者直接登录W3C的官方网站(http://www.w3.org/ )来查阅CSS的详细规格说明。





1.3.2 类别选择器


在1.3.1小节中提到的标记选择器一旦声明,那么页面中所有的该标记都会相应地产生变化。例如当声明了<p>标记为红色时,页面中所有的<p>标记都将显示为红色。但是如果希望其中的某一个<p>标记不是红色,而是蓝色,仅依靠标记选择器是不够的,还需要引入类别(class)选择器。

类别选择器的名称可以由用户自定义,属性和值跟标记选择器一样,也必须符合CSS规范,如图1.7所示。



图1.7 类别选择器

例如,当页面中同时出现3个<p>标记时,如果想让它们的颜色各不相同,就可以通过设置不同的class选择器来实现。一个完整的案例如下所示,实例文件位于光盘中的“第1章\05.htm”。

<html> <head> <title>class选择器</title> <style type="text/css"> .red{ color:red; /* 红色*/ font>size:18px; /* 文字大小*/ } .green{ color:green; /* 绿色*/ font>size:20px; /* 文字大小*/ } </style> </head> <body> <p class="red">class选择器1</p> <p class="green">class选择器2</p> <h3 class="green">h3同样适用</h3> </body> </html>

其显示效果如图1.8所示。从图中可以看到两个<p>标记分别呈现出了不同的颜色和字体大小,而且任何一个class选择器都适用于所有HTML标记,只需要用HTML标记的class属性声明即可,例如<h3>标记同样使用了.green这个类别。



图1.8 类别选择器示例

在上例中仔细观察还会发现,最后一行<h3>标记显示效果为粗体字,而也使用了.two选择器的第2个<p>标记却没有变成粗体。这是因为在.two类别中没有定义字体的粗细属性,各个HTML标记都采用了其自身默认的显示方式,<p>默认为正常粗细,而<h3>默认为粗体字。

再例如,很多时候页面中几乎所有的<p>标记都使用相同的样式风格,只有1~2个特殊的<p>标记需要使用不同的风格来突出,这时可以通过class选择器与1.3.1小节提到的标记选择器配合来实现。如下代码所示,示例文件位于光盘中“第1章\06.htm”。

<html> <head> <title>class选择器与标记选择器</title> <style type="text/css"> p{ /* 标记选择器*/ color:blue; font>size:18px; } .special{ /* 类别选择器*/ color:red; /* 红色*/ font>size:23px; /* 文字大小*/ } </style> </head> <body> <p>class选择器与标记选择器1</p> <p>class选择器与标记选择器2</p> <p>class选择器与标记选择器3</p> <p class="special">class选择器与标记选择器4</p> <p>class选择器与标记选择器5</p> <p>class选择器与标记选择器6</p> </body> </html>

首先通过标记选择器定义<p>标记的全局显示方案,然后再通过一个class选择器对需要突出的<p>标记进行单独设置,这样大大提高了代码的编写效率,其显示效果如图1.9所示。



图1.9 两种选择器配合

在HTML的标记中,还可以同时给一个标记运用多个class类别选择器,从而将两个类别的样式风格同时运用到一个标记中。这在实际制作网站时往往会很有用,可以适当减少代码的长度,如下例所示,示例文件位于光盘中“第1章\07.htm”。

<html> <head> <title>同时使用两个class</title> <style type="text/css"> .one{ color:blue; /* 颜色*/ } .two{ font>size:22px; /* 字体大小*/ } </style> </head> <body> <h4>一种都不使用</h4> <h4 class="one">同时使用两种class,只使用第一种</h4> <h4 class="two">同时使用两种class,只使用第二种</h4> <h4 class="one two">同时使用两种class,同时使用</h4> <h4>一种都不使用</h4> </body> </html>

显示效果如图1.10所示,可以看到使用第1种class的第2行显示为蓝色,而第3行则仍为黑色,但由于使用了.two,因此字体变大。第4行通过“class="one two"”将两个样式同时加入,得到蓝色大字体。第1行和第5行没有使用任何样式,仅作为对比时的参考。



图1.10 同时使用两种CSS风格





1.3.3 ID选择器


ID选择器的使用方法与class选择器基本相同;不同之处在于ID选择器只能在HTML页面中使用一次,因此其针对性更强。在HTML的标记中只需要利用id属性,就可以直接调用CSS中的ID选择器,其格式如图1.11所示。



图1.11 ID选择器

下面举一个实际案例,示例文件位于光盘中“第1章\08.htm”。

<html> <head> <title>ID选择器</title> <style type="text/css"> #one{ font>weight:bold; /* 粗体*/ } #two{ font>size:30px; /* 字体大小*/ color:#009900; /* 颜色*/ } </style> </head> <body> <p id="one">ID选择器1</p> <p id="two">ID选择器2</p> <p id="two">ID选择器3</p> <p id="one two">ID选择器3</p> </body> </html>

显示效果如图1.12所示,第2行与第3行都显示了CSS的方案。可以看出,在很多浏览器下,ID选择器可以用于多个标记,即每个标记定义的id不只是CSS可以调用,JavaScript等其他脚本语言同样也可以调用。因为这个特性,所以不要将ID选择器用于多个标记,否则会出现意想不到的错误。如果一个HTML中有两个相同id的标记,那么将会导致JavaScript在查找id时出错,例如函数getElementById()。

正因为JavaScript等脚本语言也能调用HTML中设置的id,所以ID选择器一直被广泛地使用。网站建设者在编写CSS代码时,应该养成良好的编写习惯,一个id最多只能赋予一个HTML标记。

另外从图1.12中还可以看到,最后一行没有任何CSS样式风格显示,这意味着ID选择器不支持像class选择器那样的多风格同时使用,类似“id="one two"”这样的写法是完全错误的语法。



图1.12 ID选择器示例





1.4 复合选择器


1.3节介绍了3种基本的选择器,以这3种基本选择器为基础,通过组合,还可以产生更多种类的选择器,实现更强、更方便的选择功能,复合选择器就是基本选择器通过不同的连接方式构成的。

复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器。





1.4.1 “交集”选择器


“交集”复合选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格,必须连续书写,形式如图1.13所示。



图1.13 标记类别选择器

这种方式构成的选择器,将选中同时满足前后二者定义的元素,也就是前者所定义的标记类型,并且指定了后者的类别或者id的元素,因此被称为“交集”选择器。

例如,声明了p、.special、p.special这3种选择器,它们的选择范围如图1.14所示。



图1.14 交集选择器示意图

下面举一个实际案例,示例文件位于光盘中“第1章\09.htm”。

<!DOCTYPE html PUBLIC ">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>选择器.class</title> <style type="text/css"> p{                  /* 标记选择器*/ color:blue; } p.special{            /* 标记.类别选择器*/ color:red;            /* 红色*/ } .special{            /* 类别选择器*/ color:green; } </style> </head> <body> <p> 普通段落文本</p> <h3> 普通标题文本</h3> <p class="special">指定了.special类别的段落文本</p> <h3 class="special">指定了.special类别的标题文本</h3> </body> </html>

上面的代码中定义了<p>标记的样式,也定义“.special”类别的样式,此外还单独定义了p.special,用于特殊的控制,而在这个p.special中定义的风格样式仅仅适用于<p class="special">标记,而不会影响使用了.special的其他标记,显示效果如图1.15所示。



图1.15 标记.类别选择器示例





1.4.2 “并集”选择器


与交集选择器相对应,还有一种“并集”选择器,它的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器(包括标记选择器、class类别选择器、ID选择器等)都可以作为并集选择器的一部分。

并集选择器是多个选择器通过逗号连接而成的,在声明各种CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以利用并集选择器同时声明风格相同的CSS选择器。其效果如图1.16所示。



图1.16 并集选择器示意图

下面举一个实际案例,示例文件位于光盘中“第1章\10.htm”。

<html> <head> <title> 并集选择器</title> <style type="text/css"> h1, h2, h3, h4, h5, p{ /*并集选择器*/ color:purple; /* 文字颜色*/ font>size:15px; /* 字体大小*/ } h2.special, .special, #one{ /* 集体声明*/ text>decoration:underline; /* 下划线*/ } </style> </head> <body> <h1> 示例文字h1 <h2 class="special">示例文字h2</h2> <h3> 示例文字h3</h3> <h4> 示例文字h4</h4> <h5> 示例文字h5</h5> <p> 示例文字p1</p> <p class="special">示例文字p2</p> <p id="one">示例文字p3</p> </body> </html>

其显示效果如图1.17所示,可以看到所有行的颜色都是紫色,而且字体大小均为15px。这种集体声明的效果与单独声明的效果完全相同,h2.special、.special和#one的声明并不影响前一个集体声明,第2行和最后两行在紫色和大小为15px的前提下使用了下划线进行突出。



图1.17 集体声明

另外,对于实际网站中的一些页面,例如弹出的小对话框和上传附件的小窗口等,希望这些页面中所有的标记都使用同一种CSS样式,但又不希望逐个来声明的情况,可以利用全局选择器“*”,如下例所示,示例文件位于光盘中“第1章\11.htm”。

<html> <head> <title> 全局声明</title> <style type="text/css"> *{ /* 全局声明*/ color:purple; /* 文字颜色*/ font>size:15px; /* 字体大小*/ } h2.special, .special, #one{ /* 集体声明*/ text>decoration:underline; /* 下划线*/ } </style> </head> <body> <h1> 全局声明h1 <h2 class="special">全局声明h2</h2> <h3> 全局声明h3</h3> <h4> 全局声明h4</h4> <h5> 全局声明h5</h5> <p> 全局声明p1</p> <p class="special">全局声明p2</p> <p id="one">全局声明p3</p> </body> </html>

其效果如图1.18所示,与前面案例的效果完全相同,代码却大大缩减了。



图1.18 全局声明





1.4.3 后代选择器


在CSS选择器中,还可以通过嵌套的方式,对特殊位置的HTML标记进行声明,例如当<p>与之间包含<span></span>标记时,就可以使用后代选择器进行相应的控制。后代选择器的写法就是把外层的标记写在前面,内层的标记写在后面,之间用空格分隔。当标记发生嵌套时,内层的标记就成为外层标记的后代。

例如,假设有下面的代码:

<p>这是最外层的文字,<span>这是中间层的文字,<b>这是最内层的文字,</b></span></p>

最外层是<p>标记,里面嵌套了<span>标记,<span>标记中又嵌套了<b>标记,则称span是p的子元素,b是span的子元素。

下面举一个完整的例子,具体代码如下所示,示例文件位于光盘中“第1章\12.htm”。

<html> <head> <title> 后代选择器</title> <style type="text/css"> p span{ /* 嵌套声明*/ color:red; /* 颜色*/ } span{ color:blue; /* 颜色*/ } </style> </head> <body> <p> 嵌套使<span>用CSS</span>标记的方法</p> 嵌套之外的<span>标记</span>不生效 </body> </html>

通过将span选择器嵌套在p选择器中进行声明,显示效果只适用于<p>和之间的<span>标记,而其外的<span>标记并不产生任何效果,如图1.19所示,只有第1行中<span>和</span>之间的文字变成了红色,而第2行文字中<span>和</span>之间的文字的颜色则是按照第2条CSS样式规则设置的,即为蓝色。



图1.19 嵌套选择器

后代选择器的使用非常广泛,不仅标记选择器可以以这种方式组合,类别选择器和ID选择器都可以进行嵌套。下面是一些典型的语句:

.special i{ color: red; } /* 使用了属性specia的l标记里面包含的<i>*/ #one li{ padding>left:5px; } /* ID为one的标记里面包含的<li> */ td.top .top1 strong{ font>size: 16px;} /* 多层嵌套,同样实用 */

上面的第3行使用了3层嵌套,实际上更多层的嵌套在语法上都是允许的。上面的这个3层嵌套表示的就是使用了.top类别的<td>标记中包含的.top1类别的标记,其中又包含了<strong>标记,一种可能的相对应的HTML为:

<td class="top"> <p class="top1"> 其他内容<strong>CSS控制的部分</strong>其他内容 </p> </td>


经验

选择器的嵌套在CSS的编写中可以大大减少对class和id的声明。因此在构建页面HTML框架时通常只给外层标记(父标记)定义class或者id,内层标记(子标记)能通过嵌套表示的则利用嵌套的方式,而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时,才单独进行声明,例如一个<ul>标记中包含多个<li>标记,而需要对其中某个<li>单独设置CSS样式时才赋给该<li>一个单独id或者类别,而其他<li>同样采用“ul li{}”的嵌套方式来设置。



需要注意的是,后代选择器产生的影响不仅限于元素的“直接后代”,而且会影响到它的“各级后代”。

例如,有如下的HTML结构:

<p>这是最外层的文字,<span>这是中间层的文字,<b>这是最内层的文字,</b></span></p>

如果设置了如下CSS样式:

p span{ color:blue; }

那么“这是最外层的文字”这几个字将以黑色显示,即没有设置样式的颜色;后面的“这是中间层的文字”和“这是最内层的文字”,都属于它的后代,因此都会变成蓝色。

因此在CSS 2中,规范的制定者还规定了一种复合选择器,称为“子选择器”,也就是只对直接后代有影响的选择器,而对“孙子”以及多个层的后代不产生作用。

子选择器和后代选择的语法区别是,使用大于号连接。例如,将上面的CSS设置为:

p>span{ color:blue; }

则结果是仅有“这是中间层的文字”这几个字变为蓝色,因为span是p的直接后代,或者叫做“儿子”,b是p的“孙子”,不在选中的范围内。

而IE 6中,不支持子选择器,仅支持后代选择。IE 7和Firefox都既支持后代选择器,也支持子选择器。





1.5 CSS的继承特性


在本节中,对后代选择器的应用再一步作一些讲解,因为它将会贯穿在所有的设计中。学习过面向对象语言的读者,对于继承(Inheritance)的概念一定不会陌生。在CSS语言中的继承并没有像在C++和Java等语言中的那么复杂,简单的说就是将各个HTML标记看作一个个容器,其中被包含的小容器会继承包含它的大容器的风格样式。本节从页面各个标记的父子关系出发,来详细地讲解CSS的继承。





1.5.1 继承关系


所有的CSS语句都是基于各个标记之间的继承关系的,为了更好地理解继承关系,首先从HTML文件的组织结构入手,如下例所示,示例文件位于光盘中“第1章\13.htm”。

<html> <head> <title>继承关系</title> </head> <body> <h1><em> 前沿</em> 教室 <p> 欢迎来到前沿教室,这里为您提供丰富的学习内容。</p> <ul> <li>在这里,你可以学习到: <ul> <li>HTML</li> <li>CSS <ul> <li>CSS初级</li> <li>CSS中级</li> <li>CSS高级</li> </ul> </li> <li>Javascript</li> </ul> </li> <li>你还可以学习到: <ol> <li>Flash</li> <li>Dreamweaver</li> <li>Photoshop</li> </ol> </li> </ul> <p> 如果您有任何问题,欢迎联系我们</p> </body> </html>

相应的页面效果如图1.20所示。



图1.20 包含多层列表的页面

可以看到这个页面中,标题的前两个文字使用了<em>(强调)标记,在浏览器中显示为斜体。后面使用了列表结构,其中最深的部分使用了三级列表。

这里着重从“继承”的角度来考虑各个标记之间的“树”型关系,如图1.21所示。在这个树型关系中,处于最上端的<html>标记称之为“根(root)”,它是所有标记的源头,往下层层包含。在每一个分支中,称上层标记为其下层标记的“父”标记;相应地,下层标记称为上层标记的“子”标记。例如<h1>标记是<body>标记的子标记,同时它也是<em>的父标记。



图1.21 继承关系树型图





1.5.2 CSS继承的运用


通过1.5.1节的讲解,已经对各个标记间的父子关系有了认识,下面进一步了解CSS继承的运用。CSS继承指的是子标记会继承父标记的所有样式风格,并可以在父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式风格完全不会影响父标记。

例如在前面的案例中加入如下CSS代码,即将h1标记设置为蓝色,加上下划线,并将em标记设置为红色,示例文件位于光盘中“第1章\14.htm”。

<style> h1{ color:blue; /* 颜色*/ text>decoration:underline; /* 下划线*/ } em{ color:red; /* 颜色*/ } </style>

显示效果如图1.22所示,可以看到其子标记em也显示出下划线,说明对父标记的设置也对子标记产生效果,而em文字显示为红色,h1标题中其他文字仍为蓝色,说明对子标记的设置不会对其父标记产生作用。



图1.22 父子关系示例

CSS的继承贯穿整个CSS设计的始终,每个标记都遵循着CSS继承的概念。可以利用这种巧妙的继承关系,大大缩减代码的编写量,并提高可读性,尤其是在页面内容很多且关系复杂的情况下。

例如,现在如果要嵌套最深的第3级列表的文字显示为绿色,那么增加如下样式设置:

li{ color:green; font>weight:bold; }

效果将如图1.23所示,所有列表项目的文字都变成了绿色。要仅使“CSS”项下的最深的3个项目显示为绿色,其他项目仍显示为黑色,该怎么设置呢?



图1.23 各级列表均变成绿色

一种方法是设置单独的类别,比如定义一个“.green”类别,然后将该类别赋予需要变为绿色的项目,但是这样设置显然很麻烦。

可以利用继承的特性,使用前面介绍的“后代选择器”,这样不需要设置性的类别,即可完成同样的任务,效果如图1.24所示,示例文件位于光盘中“第1章\15.htm”。

ul li ul li ul li{ color:green; font>weight:bold; }



图1.24 正确效果

实际上,对上面的选择器,还可以化简,比如化简为:

li li li{ color:green ; font>weight:bold; }

效果也是完全相同的。最后给读者出一个选择题,请读者思考,如果设置改为:

li li { color:green ; font>weight:bold; }

那么在最终的效果中,绿色显示的文字一共有几行,备选答案为:

(A)3行

(B)6行

(C)8行

(D)9行

(E)10行

请读者一定要亲自在浏览器中实验一下,看一看结果如何,很可能和你想象的不同。如果和判断的结果不同,再仔细思考一下其中的原因。





1.6 CSS的层叠特性


作为本章的最后一节,这里主要讲解CSS的层叠属性。CSS的全名叫做“层叠样式表”,读者有没有考虑过,这里的“层叠”是什么意思?为什么这个词如此重要,以至于要出现在它的名称里。

CSS的层叠特性确实很重要,但是要注意,千万不要和前面介绍的“继承”相混淆,二者有着本质的区别。实际上,层叠可以简单地理解为“冲突”的解决方案。

例如有如下一段代码,示例文件位于光盘中“第1章\15.htm”。

<html> <head> <title> 层叠特性</title> <style type="text/css"> p{ color:green; } .red{ color:red; } .purple{ color:purple; } #line3{ color:blue; } </style> </head> <body> <p>这是第1行文本</p> <p class="red">这是第2行文本</p> <p id="line3" class="red">这是第3行文本</p> <p style="color:orange;" id="line3">这是第4行文本</p> <p class="purple red">这是第5行文本</p> </body> </html>

代码中一共有5组p标记定义的文本,并在head部分声明了4个选择器,声明为不同颜色。下面的任务是确定每一行文本的颜色。

●第1行文本没有使用类别样式和ID样式,因此这行文本显示为标记选择器p中定义的绿色。

●第2行文本使用了类别样式,因此这时已经产生了“冲突”。那么,是按照标记选择器p中定义的绿色显示,还是按照类别选择器中定义的红色显示呢?答案是类别选择器的优先级高于标记选择器,因此显示为类别选择器中定义的红色。

●第3行文本同时使用了类别样式和ID样式,这又产生了“冲突”。那么,是按照类别选择器中定义的红色显示,还是按照ID选择器中定义的蓝色显示呢?答案是ID选择器的优先级高于类别选择器,因此显示为ID选择器中定义的蓝色。

●第4行文本同时使用了行内样式和ID样式,那么这时又以哪一个为准呢?答案是行内样式的优先级高于ID样式的优先级,因此显示为行内样式定义的橙色。

●第5行文本中,使用了两个类别样式,应以哪个为准呢?答案是两个类别选择器的优先级相同,此时以前者为准,“.purple”定义在“.red”的前面,因此显示为“.purple”中定义的紫色。

因此,综上所述,上面这段代码的显示效果如图1.25所示。



图1.25 层叠特性示意图


总结

优先级规则可以表述为:

行内样式>ID样式>类别样式>标记样式



在复杂的页面中,某一个元素有可能会从很多地方获得样式,例如一个网站的某一级标题整体设置为使用绿色,而对某个特殊栏目需要使用蓝色,这样在该栏目中就需要覆盖通用的样式设置。在很简单的页面中,这样的特殊需求实现起来不会很难,但是如果网站的结构很复杂,就完全有可能使代码变得非常混乱,可能出现无法找到某一个元素的样式来自于哪条规则的情况。因此,必须要充分理解CSS中“层叠”的原理。


注意

计算冲突样式的优先级是一个比较复杂的过程,并不仅仅是上面这个简单的优先级规则可以完全描述的。但是读者可以把握一个大的原则,就是“越特殊的样式,优先级越高”。

例如,行内样式仅对指定的一个元素产生影响,因此它非常特殊;使用了类别的某种元素,一定是所有该种元素中的一部分,因此它也一定比标记样式特殊;以此类推,ID是针对某一个元素的,因此它一定比应用于多个元素的类别样式特殊。特殊性越高的元素,优先级就越高。



最后再次提醒读者,千万不要混淆了层叠与继承,二者完全不同。





1.7 本章小结


本章重点介绍了4个方面的问题。先介绍了HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及其各自的使用方法,最后重点说明了CSS的继承与层叠特性,以及它们的作用。

作为CSS设计的核心基础,请读者务必真正搞懂这些最基础和核心的基本原理。





Chapter 2




第2章 “CSS禅意花园”作品鉴赏


在网站设计,特别是在CSS设计领域,有一个世界范围都非常著名的网站——CSS Zen Garden,中文名称为“CSS禅意花园”。这个网站以最有效、最优美的方式展示了CSS的最高境界。

任何一个学习CSS的人都不应该错过对CSS禅意花园的研究。本章将从禅意花园网站上的近千个作品中精选16个作品进行介绍,它们的HTML结构和内容是完全相同的,通过不同的CSS设置,就做出了完全不同的效果。





2.1 “CSS禅意花园”简介


CSS禅意花园是一位加拿大设计师Dave Shea创建的,他在网站设计的实际工作中逐渐认识到CSS的巨大潜力远远没有被发掘出来。为了推动CSS设计的发展,他在2003年建立了“CSS禅意花园”这个网站(网址是http://www.csszengarden.com )。他知道仅仅依靠自己的力量是无法发掘出CSS的全部潜力的,因此采用了征集作品的方式,通过大家的努力来展现CSS的魅力。

首先Dave Shea精心设计了一个网页,把这个网页的HTML结构和内容固定下来,为这个网页设计了5个完全不同主题风格的CSS样式,然后通过网站的发布,邀请全世界的广大设计师参与CSS禅意花园的作品设计,征集作品。

对征集的作品要求是必须完全使用他提供的这个HTML结构和内容,不能做改动,要保证通过调用设计师提供的CSS文件来展现作品。

读者在网址http://www.zengarden.com 的后面加上编号,就可以查看相应的作品,例如要查看005号作品,输入网址http://www.zengarden.com/?cssfile=005/005.css 即可。





1. 网站作品简介


Dave Shea自己制作的是001~005号作品。其中001号作品名为“Tranquille”(安静),这个作品几年来一直被作为CSS Zen Garden网站的首页,如图2.1所示。



图2.1 001号禅意花园作品

002号作品名为“Salmon Cream Cheese”(鲑鱼奶油奶酪),如图2.2所示。



图2.2 002号禅意花园作品

003号作品名为“Stormweather”(暴风雪),如图2.3所示。



图2.3 003号禅意花园作品

004号作品名为“arch4.20”(拱门),如图2.4所示。



图2.4 004号禅意花园作品

005号作品名为“Blood Lust”(血色欲望),如图2.5所示。



图2.5 005号禅意花园作品

从006号开始,都是世界各地的设计师的作品。目前在csszengarden.com上收录了1000多个作品,它们都充分体现了设计师的丰富的创意,给无数学习CSS的人带来了启发。


注意

在禅意花园目前收录的1000多个作品中,有202个被作为“官方作品”保存在禅意花园的网站上,其余的作品以链接的方式链接到禅意花园的网页目录上。每个“官方作品”都有编号,其他的作品没有编号。




注意

2005年,Dave和一位美国的设计师Molly合作,对CSS禅意花园网站中的若干作品进行介绍、分析和评论,出版了一本书《the Zen of CSS design》,介绍了CSS设计的理念和指导思想。这本书已经被翻译成了十多个国家的文字出版,2007年这本书的中文版也出版了,有兴趣的读者可以参考,中文版书名为《CSS禅意花园》。





2. 为何选择CSS禅意花园


在编写本书时,我们想到如果能够从CSS禅意花园的作品中挑选出典型作品案例,分析并介绍它们的设计思路和制作方法给广大读者,对读者的帮助将会是很大的,这样读者可以学习这些特定案例的设计方法,更重要的是能够熟悉并掌握设计思路,可以从其他数百个作品中寻找并获得灵感。

我们与Dave Shea取得联系之后,他非常高兴地同意我们使用CSS禅意花园中的作品作为本书中的案例进行分析。

在本书中,共安排了4章内容与禅意花园相关,分别是本章和全书的最后3章。

本章中将介绍一些各具特色的作品,为大家解读CSS禅意花园的作品设计方法,使大家通过这些作品更好地了解CSS的巨大潜力。这些作品的设计师来自欧美近10个国家,在每个作品中都附有创作者的个人网站信息,读者如果有兴趣,可以进一步了解他们的工作和生活。

本书的最后一章将挑选其中的典型作品,进行深入的分析,在学习完本书之后,禅意花园中的绝大部分作品读者都应该可以自己制作出来。希望读者在学习完本书之后,能够设计出自己的“禅意花园”作品,甚至被收录为禅意花园的“官方作品”(目前亚洲还只有新加坡和日本等国家的设计师的很少的几个作品被收录)。





2.2 郊野——两列布局


两列布局是所有网站中最常见的布局形式,也是禅意花园的作品中最常见到的。这种布局结构清晰,对访问者的引导性非常好。《郊野》是这类作品的代表,由意大利设计师Mario Carboni设计。在这个作品中,页面划分合理,并且颜色搭配平和而协调,如图2.6所示。



图2.6 149号禅意花园作品

访问这个作品的网址是http://www.csszengarden.com/?cssfile=149/149.css ,设计师的个人网站是http://www.mariocarboni.com/ 。





2.3 像素画——三列布局


这是193号作品,如图2.7所示,由英国设计师Jon Tan设计。这是一个很典型的三列布局设计,设计师专门制作了精致的像素画,作为页面的标题图像,效果相当吸引人。



图2.7 193号禅意花园作品

三列布局也是一种非常常见的布局形式,通常一个宽列放置主要内容,两个窄列放置导航链接等内容。访问这个作品的网址是http://www.csszengarden.com/?cssfile=193/193.css ,设计师的个人网站是http://www.gr0w.com/ 。





2.4 百合池塘——三列布局变体


这是201号作品,如图2.8所示,由澳大利亚设计师Rose Thorogood设计。这是一个三列布局的变体形式,在顶部和底部,相邻的两列进行了合并。



图2.8 201号禅意花园作品

访问这个作品的网址是http://www.csszengarden.com/?cssfile=201/201.css ,设计师的个人网站是http://tulips4rose.com 。





2.5 郁金香——多列布局


禅意花园征集作品要求使用固定的HTML,这个限制使大多数设计方案都采用两列或三列布局,而实际上也可以制作出非常好的多列效果。在收录的作品中,也有一些非常优秀的多列布局作品,088号作品就是典型代表,如图2.9所示,由美国设计师Eric Shepherd设计。图中没有显示完整的页面,实际页面中右侧还有其他列内容。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=088/088.css ,设计师的个人网站是http://arkitrave.com/log 。



图2.9 088号禅意花园作品





2.6 日与夜——包含圆角的设计


CSS的框模型限制,使得在使用CSS设计页面的初期,大多数作品都是方形的,缺少圆形和曲线的配合,显得比较呆板。实际上,使用CSS同样可以设计出完美的圆形图形元素的作品。这里展示的这个作品就使用了包含圆角的设计,由比利时设计师Colas Schretter设计,效果如图2.10所示。



图2.10 禅意花园作品

访问这个作品的网址是http://homepages.vub.ac.be/~cschrett/zengarden/dayandnight ,设计师的个人网站是http://homepages.vub.ac.be/~cschrett 。





2.7 Si6——包含倾斜的设计


绝大多数网页的布局都是横平竖直的,而禅意花园网站中可以看到一些包含了倾斜元素的设计作品,不但没有破坏页面的整体平衡感,而且还为页面增添了独特的气质,使访问者感到耳目一新。比较典型的倾斜设计作品是044号作品,效果如图2.11所示,它是由美国设计师Shaun Inman设计的。



图2.11 044号禅意花园作品

访问这个作品的网址是http://www.csszengarden.com/?cssfile=044/044.css ,设计师的个人网站是http://www.shauninman.com 。





2.8 清茶时光——装饰性设计


再好的设计如果忽视了对细节的把握,也会大打折扣的。使用CSS不但能够布局,还可以为网页添加很多装饰性的元素,使页面看起来非常精致,细节更加突出。这里展示的124号作品是由奥地利设计师Michaela Maria Sampl设计的,她通过使用一系列协调的装饰性元素,使页面的效果和谐而美观,充分体现女性设计师作品的柔美风格,效果如图2.12所示。



图2.12 124号禅意花园作品

访问这个作品的网址是http://www.csszengarden.com/?cssfile=124/124.css ,设计师的个人网站是http://www.frausampl.at 。





2.9 爱之空气——流体布局


目前,绝大多数网站,尤其是正规的商业网站,都使用固定宽度的布局,CSS禅意花园的作品也是如此,但是仍有一部分适应宽度的作品,或者称为“流体布局”。例如这里展示的170号作品,是由德国设计师Nele Goetz设计的,效果如图2.13所示,页面分为两列,总的宽度会撑满整个页面,左列宽度会随浏览器宽度而变化,右列宽度固定。



图2.13 170号禅意花园作品

访问这个作品的网址是http://www.csszengarden.com/?cssfile=170/170.css ,设计师的个人网站是http://www.april-design.de 。





2.10 谷香——食品主题设计


在禅意花园的作品中,还有一些是围绕某一个主题进行设计的。例如这里展示的057号作品就是以食品为主体的设计,效果如图2.14所示,它是由美国设计师Shaun Inman设计的。通过精致的食品照片,是不是能勾起访问者的食欲呢?



图2.14 057号禅意花园作品

此外,这个设计中还设计了非常漂亮的弹出菜单,但是这个效果在Firefox中可以正常显示,而在IE 6和IE 7中都无法显示菜单的效果。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=057/057.css ,设计师的个人网站是http://www.shauninman.com/ 。





2.11 城市——建筑主题设计


与上个案例类似,本案例围绕建筑这个主题进行设计,采用了建筑的不同透视角度,并组织在一个页面中,具有很强的空间感,效果如图2.15所示。它是由加拿大设计师Matt Kim和Nicole设计的。



图2.15 禅意花园作品

访问这个作品的网址是http://www.csszengarden.com/?cssfile=146/146.css 。





2.12 “卡通版”禅意花园——特色效果


099号作品完全不使用通常网页采用的形式,而使用卡通连环画的表现形式,别具匠心。完整作品分为若干页,图2.16所示的是第1页。它由澳大利亚设计师Joseph Pearson设计的。该作品的网址是http://www.csszengarden.com/?cssfile=099/099.css 。



图2.16 099号禅意花园作品

设计师的个人网站是http://www.make-believe.org 。





2.13 收音机——特色效果


059号作品的特色在于它不是采用常见的竖直延伸的布局方式,而采用横向分列,更有趣的是,在拖动浏览器下侧的滚动条时,页面上侧的指针会移动,就好像在为收音机调台一样,这个创意非常独特,效果如图2.17所示。该作品的网址是http://www.csszengarden.com/? cssfile=059/059.css 。



图2.17 059号禅意花园作品

它是由荷兰设计师Marc LA van den Heuvel设计的。设计师的个人网站是http://www.mlavdh.nl 。





2.14 杀手风格——特色效果


这里展示的是一个非官方作品,效果如图2.18所示。这个作品初看上去风格有些另类,但是如果拖动一下浏览器的滚动条,就会发现它很有趣。





图2.18 禅意花园作品

在图中可以看,有一把刀把页面“切”开了一个豁口,当访问者拖动浏览器的滚动条继续向下浏览时,这把刀会把页面整个切开。这个创意令人叫绝!

需要注意的是,这个效果只有在Firefox和IE 7中可以正确显示,在IE 6中无效。

该作品的访问网址是http://adjustafresh.com/zen ,由美国设计师Scott Kiekbusch设计,他的个人网站是http://www.adjustafresh.com 。





2.15 海底世界——特色效果


这件作品在CSS Zen Garden近千件作品中,可以称得上是最“神奇”的作品。效果如图2.19所示,它表现了一个精致的海底世界,页面很长,浏览器窗口中只能显示很小的一部分。无论如何拖动浏览器的滚动条,页面中的“潜水员”都会在相同的地方,也就是说“潜水员”会在“海水中”上浮或下潜。页面上部的背景比较浅,这意味着在海面附近,越往下“海洋”的背景颜色就会越深,意味着潜水员在不断地下潜。最神奇的是,“潜水员”手中的探照灯竟然可以随着下潜的深度不断变亮。当浏览器页面滚动到海底时,会冒出气泡,还有小螃蟹会跑出来。图中仅为示意,无法表现出完整的变化过程,读者如果有兴趣,可以实际在网上访问一下这个作品。



图2.19 禅意花园作品

需要注意,这个网页在FireFox中的效果最好,在IE 7中虽然可以看出探照灯光的变化,但是由于这个页面使用了特殊技术,背景颜色显示不如在FireFox中自然。在IE 6中,没有任何效果。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css ,由德国设计师Kai Laborenz设计,他的个人网站是http://www.css-praxis.de 。





2.16 博物馆——特色设计


148号作品也是一个很有意思的设计,由比利时设计师Samuel Marin设计。他把整个页面设计为一个博物馆大楼的剖面图,可以看到很多楼层的藏品,而每一个藏品正好就是页面中的一项内容,这个构思非常巧妙。页面效果如图2.20所示。



图2.20 148号禅意花园作品

访问这个作品的网址是http://www.csszengarden.com/?cssfile=148/148.css ,设计师的个人网站是http://www.info.fundp.ac.be/~sma/ 。





2.17 剧院效果——特色效果


202号作品由法国设计师Eric Rogé设计。作品的剧院效果非常有趣,当拖动浏览器的滚动条时,网页内容就像电影“银幕”上的文字一样向上滚动,极富创意,效果生动。页面效果如图2.21所示。



图2.21 202号禅意花园作品

需要注意,这个效果只有在Firefox和IE 7中可以正确显示,在IE 6中无效。

访问这个作品的网址是http://www.csszengarden.com/?cssfile=202/202.css ,设计师的个人网站是http://space-sheeps.info 。





2.18 本章小结


在本章中,读者可以欣赏到20多个非常精彩的“CSS禅意花园”网站中的作品。同一个HTML文件,仅仅通过不同的CSS设置,就产生了如此丰富多彩的页面效果,可见CSS对于网页设计的重要性,因此它是网页设计师手中最得力的一个武器。在本书后面的章节中,将深入CSS设计的方方面面,希望读者在学习完本书以后,不但能够制作出本章介绍的这些页面效果,更可以设计和创造出更精彩的网页。





Chapter 3




第3章 深入理解盒子模型


盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法,才能真正地控制好页面中的各个元素。本章主要介绍盒子模型的基本概念,并讲解CSS定位的基本方法。

所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容大。换句话说,可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小。

一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构,二是理解多个盒子之间的相互关系。

在本章中首先讲解独立的盒子相关的性质,然后将介绍在普通情况下盒子的排列关系。在下一章中,将更深入地讲解浮动和定位的相关内容。





3.1 盒子的内部结构


在学习盒子模型之前,先来看一个例子。假设在墙上有4幅画,整齐地排列着,如图3.1所示。对于每幅画来说,都有一个“边框”,在英文中称为“border”;每个画框中,画和边框通常都会有一定的距离,这个距离称为“内边距”,在英文中称为“padding”;各幅画之间通常也不会紧贴着,它们之间的距离称为“外边距”,在英文中称为“margin”。



图3.1 画框示意图

这种形式实际上存在于我们生活中的各个地方,如电视机、显示器和窗户等,都是这样的。因此,padding-border-margin模型是一个极其通用的描述矩形对象布局形式的方法。这些矩形对象可以被统称为“盒子”,英文为“Box”。

了解了盒子之后,还需要理解“模型”这个概念。所谓模型就是对某种事物的本质特性的抽象。

模型的种类很多,例如物理上有“物理模型”,科学家牛顿提出了著名的F=ma公式,就是对物体运动的本质特性进行抽象后的精确描述。类似地,创办企业也有其“商业模型”,它是对企业运作和盈利过程的本质进行抽象后,对它的描述。

同样,在网页布局中,为了能够使纷繁复杂的各个部分合理地进行组织,这个领域的一些有识之士对它的本质进行充分的研究后,总结出了一套完整的、行之有效的原则和规范。这就是“盒子模型”的由来。

在CSS中,一个独立的盒子模型由content(内容)、border(边框)、padding(内边距)和margin(外边距)4个部分组成,如图3.2所示。



图3.2 盒子模型

可以看到,与前面的图3.1非常相似,盒子的概念是非常容易理解的。但是如果需要精确地排版,有的时候1个像素都不能差,这就需要非常精确地理解其中的计算方法。

一个盒子实际所占有的宽度(或高度)是由“内容+内边距+边框+外边距”组成的。在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小,并且对于任何一个盒子,都可以分别设定4条边各自的border、padding和margin。因此只要利用好这些属性,就能够实现各种各样的排版效果。


注意

并不仅仅是用div定义的网页元素才是一个盒子,事实上所有的网页元素本质上都是以盒子的形式存在的。在人的眼中,一个网页上有各种内容,包括文本、图像等,而在浏览器看来,就是许多盒子排列在一起或者相互嵌套。



图3.2中有一个从上面开始顺时针旋转的箭头,它表示需要读者特别记住的原则,当使用CSS这些部分设置宽度时,是按照顺时针方向确定对应关系的,下一节会详细介绍。

当然还有很多具体的特殊情况,并不能用很简单的规则覆盖全部的计算方法,因此在这一章中,将深入盒子模型的内部,把一般原则和特殊情况都尽可能地阐述清楚。





3.2 边框(border)


border一般用于分隔不同元素,border的外围即为元素的最外围,因此计算元素实际的宽和高时,就要将border纳入。换句话说,border会占据空间,所以在计算精细的版面时,一定要把border的影响考虑进去。如图3.3所示,黑色的虚线框即为border。



图3.3 border

border的属性主要有3个,分别是color(颜色)、width(粗细)和style(样式)。在设置border时常常需要将这3个属性很好地配合起来,才能达到良好的效果。在使用CSS设置边框的时候,可以分别使用border-color、border-width和border-style设置它们。

●border-color指定border的颜色,它的设置方法与文字的color属性完全一样,一共可以有2563种颜色。通常情况下设置为十六进制的值,例如红色为“#FF0000”。


经验

对于形如“#336699”这样十六进制值,可以缩写为“#369”,当然也可以使用颜色的名称,例如red、green等。



●border-width用来指定border的粗细程度,可以设为thin、medium、thick和<length>。其中<length>表示具体的数值,例如5px和0.1in等。width的默认值为“medium”,一般的浏览器都将其解析为2px宽。

●这里需要重点讲解的是style属性,它可以设为none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等,其中none和hidden都不显示border,二者效果完全相同,只是运用在表格中时,hidden可以用来解决边框冲突的问题。





3.2.1 实验1——border-style


为了了解各种边框样式的具体表现形式,编写如下网页,示例文件位于本书光盘“第3章\01.htm”。

<html> <head> <title>border>style</title> <style type="text/css"> div{ border>width:6px; border>color:#000000; margin:20px; padding:5px; background>color:#FFFFCC; } </style> </head> <body> <div style="border>style:dashed">The border>style of dashed.</div> <div style="border>style:dotted">The border>style of dotted.</div> <div style="border>style:double">The border>style of double.</div> <div style="border>style:groove">The border>style of groove.</div> <div style="border>style:inset">The border>style of inset.</div> <div style="border>style:outset">The border>style of outset.</div> <div style="border>style:ridge">The border>style of ridge.</div> <div style="border>style:solid">The border>style of solid.</div> </body> </html>

其执行结果在IE和Firefox中略有区别,如图3.4所示。可以看到,对于groove、inset、outset和ridge这几种值,IE都支持得不够理想。



图3.4 border-style


注意

IE浏览器不支持的border-style效果,在实际制作网页的时候,不推荐使用。





3.2.2 属性值的简写形式


1. 对不同的边框设置不同的属性值


3.2.1节的实验代码中,分别设置了border-color、border-width和border-style这3个属性,其效果是对上下左右4个边框同时产生作用。在实际使用CSS时,除了采用这种方式,还可以分别对4条边框设置不同的属性值。

方法是按照规定的顺序,给出2个、3个或者4个属性值,它们的含义将有所区别,具体含义如下:

如果给出2个属性值,前者表示上下边框的属性,后者表示左右边框的属性;

如果给出3个属性值,前者表示上边框的属性,中间的数值表示左右边框的属性,后者表示下边框的属性;

如果给出4个属性值,依次表示上、右、下、左边框的属性,即顺时针排序。



例如,下面这段代码:

border>color: red green border>width:1px 2px 3px; border>style: dott、deadshed、solid、double;

其含义是,上下边框为红色,左右边框为绿色;上边框宽度为1像素,下边框宽度为2像素,左右边框宽度为3像素;从上边框开始,顺时针方向,4个边框的样式分别为点线、虚线、实线和双线。





2. 对一条边框设置与其他边框不同的属性


还可以单独对某一条边框在一条CSS规则中设置属性例如:

border: 2px green dashed border>left: 1px red solid

第1行表示将4条边框设置为2像素的绿色虚线,第2行表示将左边框设置为1像素的红色实线。这样,就不需要使用4条CSS规则分别设置4条变框的样式了,仅使用2条规则即可。

3.对一条边框设置与其他边框不同的属性通过缩写形式可以灵活地设置各种边框。而如果要单独地设置某一条边框的某一个属性,例如要设置左边框的颜色为红色,可以写作:

border>left>color:red


注意

当有多条规则作用于同一个边框时,会产生冲突,后面的设置会覆盖前面的设置。





3.2.3 实验2——属性的缩写形式


请读者对照属性缩写形式的规则,分析下面这段代码执行后,4条边框最终的宽度、颜色和样式。示例文件位于本书光盘“第3章\01.htm”。

<html> <head> <style type="text/css"> #outerBox{ width:200px; height:100px; border:2px black solid; border>left:4px green dashed; border>color:red gray orange blue; /*上右下左*/ border>right>color:purple; } </style> </head> <body> <div id="outerBox"> </div> </body>

在这个例子关于边框的4条CSS规则中,首先把4条边框设置为2像素的黑色实线,然后把左边框设置为4像素绿色虚线,接着又依次设置了边框的颜色,最后把右侧边框的颜色设置为紫色。最终的效果如图3.5所示。



图3.5 设置边框属性





3.2.4 实验3——边框与背景


在设置边框时,还有一点值得注意,在给元素设置background-color背景色时,IE作用的区域为content+padding,而Firefox则是content+padding+border。这在border设置为粗虚线时表现得特别明显,请看如下的实验代码。

这里设置一个div,并将其宽度设置为10像素,使效果非常明显。示例文件位于本书光盘“第3章\03.htm”。

<style type="text/css"> #outerBox{ width:128px; height:128px; border:10px black dashed; background:silver; } </style> <body> <div id="outerBox"></div> </body>

在两种浏览器中的执行结果如图3.6所示,左边是IE中的效果,右边是Firefox中的效果,读者可以通过图中窗口左上角的图标区分浏览器。可看到IE并没有对border的背景上色,而Firefox的边框中显示出了背景色。



图3.6 IE与Firefox对待背景色的不同处理

虽然这个差别非常细微,但是在设计一些要求很高的页面时,还是需要注意的。


注意

不要因为上面这个例子,就误认为差别是因为IE和Firefox设置背景的基准点不同。实际上它们都是以padding为设置背景的基准点的。要验证这一点,可以把上面例子中的背景设置为一幅图像,这时二者效果如图3.7所示。



图3.7 IE与Firefox对待背景图像的不同处理

可以看出,二者的背景图像位置是完全相同的,区别只在于边框所占据的面积中,IE并不显示背景图像的内容,Firefox则显示背景图像的内容。因为边框是介于内边距和外边距之间的,当边框设置为虚线时,在IE中,虚线空白的地方露出来的是padding部分的背景,而在Firefox中,虚线空白的地方露出来的是margin部分的背景。





3.3 内边距(padding)


padding,又称为内边距,用于控制内容与边框之间的距离。和前面介绍的边框类似, padding属性可以设置1、2、3或4个属性值,分别如下:

设置1个属性值时,表示上下左右4个padding均为该值;

设置2个属性值时,前者为上下padding的值,后者为左右padding的值;

设置3个属性值时,第1个为上padding的值,第2个为左右padding的值,第3个为下padding的值;

设置4个属性值时,按照顺时针方向,依次为上、右、下、左padding的值。



如果需要专门设置某一个方向的padding,可以使用padding-left、padding-right、padding-top或者padding-bottom来设置。例如有如下代码。

<style type="text/css"> #outerBox{ width:128px; height:128px; padding:20px 20px 10px; /*上左右下*/ padding>left:10px; border:10px gray dashed; } <body> <div id="outerBox"><img src="image.gif"></img></div> </body>

其结果是上侧和右侧的padding为20像素,下侧和左侧的padding为10像素,如图3.8所示。



图3.8 设置padding后的效果


经验

当一个盒子设置了背景图像后,默认情况下背景图像覆盖的范围是padding和内容组成的范围,并以padding的左上角为基准点平铺背景图像。





3.4 外边距(margin)


margin指的是元素与元素之间的距离。观察上面的图3.7,可以看到边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器窗口的边框。这是因为body本身也是一个盒子,在默认情况下,body会有一个若干像素的margin,具体数值各个浏览器不尽相同。因此在body中的其他盒子,就不会紧贴着浏览器窗口的边框了。为了验证这一点,可以给body这个盒子也加一个边框,代码如下。

body{ border:1px black solid; background:#cc0; }

在body设置了边框和背景色以后,效果如图3.9所示。可以看到,在细黑线外面的部分,就是body的margin。



图3.9 margin的效果


注意

body是一个特殊的盒子,它的背景色会延伸到margin的部分,而其他盒子的背景色只会覆盖“padding+内容”部分(IE浏览器中),或者“border+padding+内容”部分(Firefox浏览器中)。



下面再给div盒子的margin增加20像素,这时效果如图3.10所示。可以看到div的粗边框与body的细边框之间的20像素距离就是margin的范围。右侧的距离很大,这是因为目前body这个盒子的宽度不是由其内部的内容决定的,而是由浏览器窗口决定的,相关的原理本章后面还会深入分析。



图3.10 margin的范围

margin属性值的设置方法与padding一样,也可以设置不同的数值个数,代表相应的含义,这里就不再赘述了。

从直观上而言,margin用于控制块与块之间的距离。倘若将盒子模型比作展览馆里展出的一幅幅画,那么content就是画面本身,padding就是画面与画框之间的留白,border就是画框,而margin就是画与画之间的距离。





3.5 盒子之间的关系


读者要理解前几节的内容并不困难,因为都只涉及一个盒子内部的关系。而实际网页往往是很复杂的,一个网页可能存在着大量的盒子,并且它们以各种关系相互影响着。

要把一个盒子与外部的其他盒子之间的关系理解清楚,并不是简单的事情。在很多CSS资料中大都通过简单的分类,就CSS本身的介绍来说明这个问题,往往只是就事论事。如果不能从站得更高的角度来理解这个问题,那么想真正搞懂它是很困难的,因此这里尝试从更深入的角度来介绍CSS与HTML的关系,希望对读者的理解有所帮助。

为了能够方便地组织各种盒子有序的排列和布局,CSS规范的制定者进行了深入细致的考虑,使得这种方式既有足够的灵活性,以适应各种排版要求,又能使规则尽可能简单,让浏览器的开发者和网页设计师都能够相对容易地实现。

CSS规范的思路是,首先确定一种标准的排版模式,这样可以保证设置的简单化,各种网页元素构成的盒子按照这种标准的方式排列布局。这种方式就是接下来要详细介绍的“标准流”方式。

但是仅通过标准流方式,很多版式是无法实现的,限制了布局的灵活性,因此CSS规范中,又给出了另外若干种对盒子进行布局的手段,包括“浮动”属性和“定位”属性等,这些内容将在下一章中详细介绍。

需要特别提醒读者注意的是,CSS的这些不同的布局方式设计得非常精巧,环环相扣,在后面所有章节中,都是以这些基本的方法和原理为基础的,因此即使是对CSS有一些了解的读者,也应该尽可能仔细地阅读第3章和第4章的内容,把里面的所有实验案例都亲自动手调试一下,这对于深刻理解其中的原理,将会大有益处。





3.5.1 HTML与DOM


这里首先介绍DOM的概念。DOM是Document Object Model的缩写,即“文档对象模型”。一个网页的所有元素组织在一起,就构成了一棵“DOM树”。

假设有一个HTML文档,其中的CSS样式部分省略了,这里只关心它的HTML结构。这个网页的结构非常简单,代码如下,示例文件位于本书光盘“第3章\04.htm”。

<!DOCTYPE html PUBliC ">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http>equiv="Content>Type" content="text/html; charset=gb2312" /> <title>盒子模型的演示</title> <style type="text/css"> 省略 </style> </head> <body> <ul> <li>第1个列表的第1个项目内容</li> <li class="withborder">第1个列表的第2个项目内容,内容更长一些,目的是演示自动折行的效果。</li> </ul> <ul> <li>第2个列表的第1个项目内容</li> <li class="withborder2">第个列表的第2个项目内容,内容更长一些,目的是演示自动折行的效果。</li> </ul> </body> </html>

这个HTML在IE和Firefox浏览器中的显示效果是一样的,如图3.11所示。



图3.11 在IE与Firefox中的显示效果

为了使读者能够直观地理解什么是“DOM树”,请读者使用Firefox浏览器打开这个网页,然后选择菜单命令“工具→DOM查看器”,这时会打开一个新窗口,如图3.12所示。



图3.12 打开新窗口

窗口左侧列表中的“#document”是整个文档的根节点,双击这个项目,就会打开或关闭它的下级节点,每一个节点都可以打开它的下级节点,直到该节点本身没有下级节点为止。

图3.12中显示的是所有节点都打开的效果。这里使用了一棵“树”的形式把一个HTML文档的内容组织起来,形成了严格的层次结构。例如在本例中,body是浏览器窗口中显示的所有对象的根节点,即ul、li等对象都是body的下级节点。同理,li又是ul的下级节点。在这棵“DOM树”上的各个节点,都对应于网页上的一个区域,例如用鼠标在“DOM查看器”上单击一li节点,立即可以在浏览器窗口中看到一个红色的矩形框,闪烁若干次,如图3.12所示,表示该节点在浏览器窗口中所占的区域,这正是前面所说的CSS“盒子”。

到这里,我们已经和CSS“盒子”联系起来了。读者务必要理解,一个HTML文档并不是一个简单的文本文件,而是一个具有层次结构的逻辑文档,每一个HTML元素(例如p、ul、li等)都作为这个层次结构中的一个节点存在。每个节点反映在浏览器上会具有不同的表现形式,具体的表现形式正是由CSS来决定的。

到这里又印证了一个几乎所有CSS资料中都会提及的一句话:“CSS的目的是使网页的表现形式与内容结构分离,CSS控制网页的表现形式,HTML控制网页的内容结构”,现在读者应该可以更深刻地理解这个原则了。

接下来,就需要理解CSS如何为各种处于层次结构中的元素设置表现形式。





3.5.2 标准文档流


这里又出现了一个新的概念——“标准文档流”,或简称“标准流”。所谓标准流,就是指在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。

仍然以3.5.1节的网页为例,只观察从body开始的这一部分,其内容是body中有两个列表(ul),每个列表中各有两个列表项目(li)。一共有4层结构,顶层为body,第2层为ul,第3层为li,第4层为li中的文本。这4种元素又可以分为以下两类。





1. 块级元素(block level)


li占据着一个矩形的区域,并且和相邻的li依次竖直排列,不会排在同一行中。ul也具有同样的性质,占据着一个矩形的区域,并且和相邻的ul依次竖直排列,不会排在同一行中。因此,这类元素称为“块级元素”(block level),即它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。





2. 行内元素(inline)


对于文字这类元素,各个字母之间横向排列,到最右端自动折行,这就是另一种元素,称为“行内元素”(inline)。

比如<strong></strong>标记,就是一个典型的行内元素,这个标记本身不占有独立的区域,仅仅是在其他元素的基础上指出了一定的范围。再比如,最常用的<a>标记,也是一个行内元素。


注意

行内元素在DOM树中同样是一个节点。从DOM的角度来看,块级元素和行内元素是没有区别的,都是树上的一个节点;而从CSS的角度来看,二者有很大的区别,块级元素拥有自己的区域,行内元素则没有。



标准流就是CSS规定的默认的块级元素和行内元素的排列方式。那么具体是如何排列的呢?这里读者不妨把自己想象成一名浏览器的开发者,来考虑一下对一段HTML,应该如何放置这些内容。

<body> <ul> <li>第1个列表的第1个目内容</li> <li class="withborder">第1个列表的第2个项目内容,内容更长一些,目的是演示自动折行的效果。</li> </ul> <ul> <li>第2个列表的第1个项目内容</li> <li class="withborder">第2个列表的第2个项目内容,内容更长一些,目的是演示自动折行的效果。</li> </ul> </body>

(1)第一步

从body标记开始,body元素就是一个最大的块级元素,应该包含所有的子元素,依次把其中的子元素放到适当的位置。例如上面这段代码中,body包含了两个ul,就把这两个块级元素竖直排列。至此第一步完成。

(2)第二步

分别进入每一个ul中,查看它的下级元素,这里是两个li,因此又为它们分别分配了一定的矩形区域。至此第二步完成。

(3)第三步

再进入li内部,这里面是一行文本,因此按照行内元素的方式,排列这些文字。

如果一个HTML更为复杂,层次更多,那么依然是不断地重复这个过程,直至所有的元素都被检查一遍,该分配区域的分配区域,该设置颜色的设置颜色,等等。伴随着扫描的过程,样式也就被赋予到每个元素上了。

在这个过程,一个一个盒子自然地形成一个序列,同级别的兄弟盒子依次排列在父级盒子中,同级父级盒子又依次排列在它们的父级盒子中,就像一条河流有干流和支流一样,这就是被称为“流”的原因。

当然实际的浏览器程序的计算过程要复杂得多,但是大致的过程是这样的,因为我们并不打算自己开发一个浏览器,所以不必掌握所有的细节,但是一定要深入理解这些概念。





3.5.3 <div>标记与<span>标记


为了能够更好地理解“块级元素”和“行内元素”,这里重点介绍在CSS排版的页面中经常使用的<div>和<span>标记。利用这两个标记,加上CSS对其样式的控制,可以很方便地实现各种效果。本节从二者的基本概念出发,介绍两个标记,并且深入探讨两种元素的区别。

<div>标记早在HTML 3.0时代就已经出现,但那时并不常用,直到CSS的普及,才逐渐发挥出它的优势。<span>标记在HTML 4.0时才被引入,它是专门针对样式表而设计的标记。

<div>(division)简单而言是一个区块容器标记,即<div>与</div>之间相当于一个容器,可以容纳段落、标题、表格、图片,乃至章节、摘要和备注等各种HTML元素。可以把<div>与</div>中的内容视为一个独立的对象,用于CSS的控制。声明时只需要对<div>进行相应的控制,其中的各标记元素都会随之改变。

一个ul是一个块级元素,同样div也是一个块级元素,二者的不同在于ul是一个具有特殊含义的块级元素,具有一定的逻辑语义,而div是一个通用的块级元素,用它可以容纳各种元素,从而方便排版。

下面举一个简单的例子,示例文件位于本书光盘“第3章\05.htm”。

<html> <head> <title>div标记范例</title> <style type="text/css"> div{ font>size:18px; /* 字号大小*/ font>weight:bold; /* 字体粗细*/ font>family:Arial; /* 字体*/ color:#FFFF00; /* 颜色*/ background>color:#0000FF; /* 背景颜色*/ text>align:center; /* 对齐方式*/ width:300px; /* 块宽度*/ height:100px; /* 块高度*/ } </style> </head> <body> <div> 这是一个div标记 </div> </body> </html>

通过CSS对<div>块的控制,制作了一个宽300像素、高100像素的黄色区块,并进行了文字效果的相应设置,在IE中的执行结果如图3.13所示。



图3.13 div块示例

<span>标记与<div>标记一样,作为容器标记而被广泛应用在HTML语言中。在<span>与</span>中间同样可以容纳各种HTML元素,从而形成独立的对象。如果把“<div>”替换成“<span>”,样式表中把“div”替换成“span”,执行后就会发现效果完全一样。可以说<div>与<span>这两个标记起到的作用都是独立出各个区块,在这个意义上说二者没有不同。

<div>与<span>的区别在于,<div>是一个块级元素,它包围的元素会自动换行。而<span>仅仅是一个行内元素(inline elements),在它的前后不会换行。<span>没有结构上的意义,纯粹是应用样式,当其他行内元素都不合适时,就可以使用<span>元素。

例如有如下代码。

<html> <head> <title>div与span的区别</title> </head> <body> <p>div标记不同行:</p> <div><img src="building.jpg" border="0"></div> <div><img src="building.jpg" border="0"></div> <div><img src="building.jpg" border="0"></div> <p>span标记同一行:</p> <span><img src="building.jpg" border="0"></span> <span><img src="building.jpg" border="0"></span> <span><img src="building.jpg" border="0"></span> </body> </html>

其执行的结果如图3.14所示。<div>标记的3幅图片被分在了3行中,而<span>标记的图片没有换行。



图3.14 <div>与<span>标记的区别

此外,<span>标记可以包含于<div>标记中,成为它的子元素,而反过来则不成立,即<span>标记不能包含<div>标记。从div和span之间的区别和联系,就可以更深刻地理解块级元素和行内元素的区别了。





3.6 盒子在标准流中的定位原则


在了解了标准流的基本原理后,来具体制作一些案例,掌握盒子在标准流中的定位原则。

如果要精确地控制盒子的位置,就必须对margin有更深入的了解。padding只存在于一个盒子内部,所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。margin则用于调整不同的盒子之间的位置关系,因此必须要对margin在不同情况下的性质有非常深入的了解。





3.6.1 实验1——行内元素之间的水平margin


这里来看两个块并排的情况,如图3.15所示。



图3.15 行内元素之间的margin

当两个行内元素紧邻时,它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left,代码如下所示,示例文件位于本书光盘“第3章\06.htm”。

<html> <head> <title> 两个行内元素的margin</title> <style type="text/css"> span{ background>color:#a2d2ff; text>align:center; font>family:Arial, Helvetica, sans>serif; font>size:12px; padding:10px; } span.left{ margin>right:30px; background>color:#a9d6ff; } span.right{ margin>left:40px; background>color:#eeb0b0; } </style> </head> <body> <span class="left">行内元素1</span><span class"right行">内元素2</span> </body> </html>

执行结果如图3.16所示,可以看到两个块之间的距离为30+40=70px。



图3.16 行内元素之间的margin





3.6.2 实验2——块级元素之间的竖直margin


通过3.6.1节的实验了解了行内元素的情况,但如果不是行内元素,而是竖直排列的块级元素,情况就会有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和,而是两者中的较大者,如图3.17所示。这个现象称为margin的“塌陷”现象,意思是说较小的margin塌陷到了较大的margin中。



图3.17 块元素之间的margin

这里看一个实验案例,代码如下,示例文件位于本书光盘“第3章\07.htm”。

<html> <head> <title> 两个块级元素的margin</title> <style type="text/css"> div{ background>color:#a2d2ff; text>align:center; font>family:Arial, Helvetica, sans>serif; font>size:12px; padding:10px; } </style> </head> <body> <div style="margin>bottom:50px;">块元素1</div> <div style="margin>top:30px;">块元素2</div> </body> </html>

执行结果如图3.18所示。倘若将块元素2的margin-top修改为40px,就会发现执行结果没有任何的变化。若再修改其值为60px,就会发现块元素2向下移动了10个像素。



图3.18 块级元素的margin


经验

margin-top和margin-bottom的这些特点在实际制作网页时要特别的注意,否则常常会被增加了margin-top或者margin-bottom值时发现块“没有移动”的假象所迷惑。





3.6.3 实验3——嵌套盒子之间的margin


除了上面提到的行内元素间隔和块级元素间隔这两种关系外,还有一种位置关系,它的margin值对CSS排版也有重要的作用,这就是父子关系。当一个<div>块包含在另一个<div>块中时,便形成了典型的父子关系。其中子块的margin将以父块的content为参考,如图3.19所示。



图3.19 父子块的margin

这里有一个实验案例,代码如下,示例文件位于本书光盘“第3章\08.htm”。

<head> <title> 父子块的margin</title> <style type="text/css"> div.father{ /* 父div */ background>color:#fffebb; text>align:center; font>family:Arial, Helvetica, sans>serif; font>size:12px; padding:10px; border:1px solid #000000; } div.son{ /* 子div */ background>color:#a2d2ff; margin>top:30px; margin>bottom:0px; padding:15px; border:1px dashed #004993; } </style> </head> <body> <div class="father"> <div class="son">子div</div> </div> </body>

执行的结果如图3.20所示。可以看到子div距离父div上边为40px(30px margin+10px padding),其余3条边都是padding的10px。



图3.20 父子块的margin

另外需要注意IE与Firefox在margin的细节处理上有所区别。倘若设定了父元素的高度height值,如果此时子元素的高度超过了该height值,二者的显示结果就完全不同。下面进行实验,编写如下代码,示例文件位于本书光盘“第3章\09.htm”。

<head> <title> 设置父块的高度</title> <style type="text/css"> div.father{ /* 父div */ background>color:#fffebb; text>align:center; font>family:Arial, Helvetica, sans>serif; font>size:12px; padding:10px; border:1px solid #000000; height:40px; /* 设置父div的高度*/ } div.son{ /* 子div */ background>color:#a2d2ff; margin>top:30px; margin>bottom:0px; padding:15px; border:1px dashed #004993; } </style> </head> <body> <div class="father"> <div class="son">子div</div> </div> </body>

上面代码中设定的父div的高度值小于子块的高度加上margin的值,此时IE浏览器会自动扩大,保持子元素的margin-bottom的空间以及父元素自身的padding-bottom。而Firefox就不会,它会保证父元素的height高度的完全吻合,而这时子元素将超过父元素的范围,如图3.21所示。



图3.21 IE与Firefox对待父height的不同处理

从CSS的标准规范来说,IE的这种处理方法是不合规范的。它这种方式,本应该由min-height(最小高度)属性承担。

CSS规范中有4个相关属性min-height、max-heght、min-width、max-width,分别用于设置最大、最小宽度和高度,IE没有实现对这4个属性的支持,而Firefox可以非常好地支持它们。本书后面的复杂案例中还会用到相关的内容。





3.6.4 实验4——将margin设置为负值


上面提及margin的时候,它的值都是正数。其实margin的值也可以设置为负数,而且有关的巧妙运用方法也非常多,在后面的章节中都会陆续体现出来。这里先分析margin设为负数时产生的排版效果。

当margin设为负数时,会使被设为负数的块向相反的方向移动,甚至覆盖在另外的块上。在前面例子的基础上,编写代码如下,示例文件位于本书光盘“第3章\10.htm”。

<head> <title>margin设置为负数</title> <style type="text/css"> span{ text>align:center; font>family:Arial, Helvetica, sans>serif; font>size:12px; padding:10px; border:1px dashed #000000; } span.left{ margin>right:30px; background>color:#a9d6ff; } span.right{ margin>left:>53px; /* 设置为负数*/ background>color:#eeb0b0; } </style> </head> <body> <span class="left">行内元素1</span><span class="right">行内元素2</span> </body>

执行效果如图3.22所示,右边的块移动到了左边的块上方,形成了重叠的位置关系。



图3.22 margin设置为负数

当块之间是父子关系时,通过设置子块的margin参数为负数,可以将子块从父块中“分离”出来,其示意图如图3.23所示。关于它的应用在后面的章节中还会有更详细的介绍。



图3.23 父子块设置margin为负数





3.7 CSS中的几何题


经过前面的学习,对标准流中的盒子排列方式应该已经很清楚了。下面来做一个习题,假设有一个网页,其显示结果如图3.24所示,现在要读者精确地回答出从字母a到x对应的宽度是多少个像素。习题文件位于本书光盘“第3章\04.htm”。



图3.24 计算图中各个字母代表的宽度(高度)是多少像素

网页的完整代码如下:

<!DOCTYPE html PUBliC ">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http>equiv="Content>Type" content="text/html; charset=gb2312" /> <title>盒子模型的演示</title> <style type="text/css"> body{ margin:0 0 0 0; font>family: 宋体; font>size:12px; } ul { background: #ddd; margin: 15px 15px 15px 15px; padding: 5px 5px 5px 5px; /* 没有设置边框*/ } li { color: black; 黑色文本 *//* background: #aaa; /*浅灰色背景 */ margin: 20px 20px 20px 20px; /* 左侧外边距为0,其余为20像素*/ padding: 10px 0px 10px 10px; /* 右侧内边距为0,其余10像素*/ list>style: none /* 取消项目符号 */ /* 未设置边框*/ } li.withborder { border>style: dashed; border>width: 5px; /* 设置边框为2像素*/ border>color: black; margin>top:20;px } </style> </head> <body> <ul> <li>第1个列表的第1个目内容</li> <li class="withborder">第1个列表的第2个项目内容,内容更长一些,目的是演示自动折行的效果。</li> </ul> <ul> <li>第2个列表的第1个项目内容</li> <li class="withborder">第2个列表的第2个项目内容,内容更长一些,目的是演示自动折行的效果。</li> </ul> </body> </html>

下面是具体的计算过程和答案。

先来计算水平方向的宽度,计算过程如下。

①a:由于body的magin设置为0,因此a的值为ul的左margin,即15像素。

②b:ul的左padding加li的左margin,即25像素。

③c:第2个li的border,即5像素。

④d:li的左padding,即10像素。

⑤e:计算完其他项目后再计算这个宽度,注意这里文字和右边框之间没有间隔,因为右padding为0。

⑥f:第2个li的border,即5像素。

⑦g:ul的右padding加上li的右margin,即25像素。

⑧h:ul的右margin,即15像素。

现在来计算e的宽度。把水平方向除e之外的各项加起来,等于100像素,因此e的宽度为浏览器窗口的宽度减去100像素。

然后计算竖直方向的宽度。

①i:由于body的magin设置为0,因此i的值为ul的上margin,即15像素。

②j:ul的上padding加上li的上margin,即25像素。

③k:li的上下margin加上文本高度,即34像素。

④l:两个li相邻,因此上面的li的下margin和下面的li的上margin相遇,发生“塌陷”现象,因此l的值为二者中较大者,二者现在相同,因此l的值为20像素。

⑤m:第2个li的border,即5像素。

⑥n:li的上下padding就是上两行文字的高度,即48像素。

⑦o:第2个li的border,即5像素。

⑧p:ul的下padding加上li的下margin,即25像素。

⑨q:两个ul相邻,因此上面的ul的下margin和下面的ul的上margin相遇,发生“塌陷”现象,因此q的值为二者中较大者,二者现在相同,因此q的值为15像素。

接下来,从r开始就前面的相同了,这里不再赘述。

最后,对于盒子的宽度再强调说明一下,上面的这个例子中所有的盒子都没有设置width属性,在没有设置widh属性时,盒子会自动向右伸展,直到不能伸展为止。如果某个盒子设置了width属性,那么盒子的宽度就以该值为准。而盒子实际占据的宽度是width+padding+boarder+margin的总宽度,如图3.25所示。



图3.25 盒子的宽度


注意

在IE 6/7和Firefox中都遵循上述原则,但是低版本的IE对于宽度的计算与此不同,不过现在使用低于IE 6的浏览器的人已经非常少了,一般不用考虑,这里就不做细致讲解了。如果读者希望了解,可以到互联网上搜索一下,相关内容有很多。





3.8 本章小结


盒子模型是CSS控制页面的基础。学习本章之后,读者应该能够清楚在这里“盒子”的含义是什么,以及盒子的组成。

此外,应该理解DOM的基本概念,以及DOM树是如何与一个HTML文档对应的,在此基础上充分理解“标准流”的概念。只有先明白在“标准流”中盒子的布局行为,才能更容易地学习在下一章中将讲解的浮动和定位等相关知识。





Chapter 4




第4章 盒子的浮动与定位


理解了第3章介绍的独立的盒子模型,以及在标准流情况下的盒子的相互关系之后,读者也会发现一个重要的问题,如果仅仅按照标准流的方式进行排版,就只能按照仅有的几种可能性进行排版,限制太大了。

在第2章“禅意花园”中的丰富效果是如何实现的呢?CSS的制定者也想到了排版限制的问题,因此又给出了若干不同的手段,实现各种排版需要。

要涉及的最重要的就是CSS中的float和position两个属性。下面就详细介绍它们的应用。





4.1 盒子的浮动


在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界;而在竖直方向和兄弟元素依次排列,不能并排。使用“浮动”方式后,块级元素的表现就会有所不同。

CSS中有一个float属性,默认为none,也就是标准流通常的情况。如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来确定。





4.1.1 准备代码


浮动的性质比较复杂,这里先制作一个基础的页面,代码如下,文件位于本书光盘中“第4章\01.htm”。后面一系列的实验将基于这个文件进行。

<!DOCTYPE html PUBliC ">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>float属性</title> <style type="text/css"> body{ margin:15px; font>family:Arial; font>size:12px; } .father{ background>color:#ffff99; border:1px solid #111111; padding:5px; } .father div{ padding:10px; margin:15px; border:1px dashed #111111; background>color:#90baff; } .father p{ border:1px dashed #111111; background>color:#ff90ba; } .son1{ /* 这里设置son1的浮动方式*/ } .son2{ /* 这里设置son1的浮动方式*/ } .son3{ /* 这里设置son3的浮动方式*/ } </style> </head> <body> <div class="father"> <div class="son1">Box>1</div> <div class="son2">Box>2</div> <div class="son3">Box>3</div> <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字。</p> </div> </body> </html>

文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.

上面的代码定义了4个<div>块,其中一个父块,另外3个是它的子块。为了便于观察,将各个块都加上了边框以及背景颜色,并且让<body>标记以及各个div有一定的margin值。

如果3个子div都没有设置任何浮动属性,就为标准流中的盒子状态。在父盒子中,4个盒子各自向右伸展,竖直方向依次排列,效果如图4.1所示。



图4.1 没有设置浮动时的效果

下面开始在这个基础上做实验,通过一系列的实验,就可以充分体会到浮动盒子具有哪些性质了。





4.1.2 实验1——设置第1个浮动的div


在上面的代码中找到:

.son1{ /* 这里设置son1的浮动方式*/ }

将.son1盒子设置为向左浮动,代码为:

.son1{ /* 这里设置son1的浮动方式*/ float:left; }

这时效果如图4.2所示,相应的文件位于本书光盘中“第4章\02.htm”。可以看到,标准流中的Box-2的文字在围绕着Box-1排列,而此时Box-1的宽度不再伸展,而是能容纳下内容的最小宽度。



图4.2 设置第1个div浮动时的效果

请读者思考,此时Box-2这个盒子的范围是如何确定的,也就是它的左边框在哪里。答案是与Box-1的左边框重合,因为此时Box-1已经脱离标准流,标准流中的Box-2会顶到原来Box-1的位置,而文字会围绕着Box-1排列。





4.1.3 实验2——设置第2个浮动的div


将Box-2的float属性设置为left,此时效果如图4.3所示。可以看到Box-2也变为根据内容确定宽度,并使Box-3的文字围绕Box-2排列。

相应的文件位于本书光盘中“第4章\03.htm”。

从图中可以更清晰地看出,Box-3的左边框仍在Box-1的左边框下面。否则Box-1和Box-2之间的空白不会是深色,这个深色实际上是Box-3的背景色,Box-1和Box-2之间的空白是由二者的margin构成的。



图4.3 设置前两个div浮动时的效果





4.1.4 实验3——设置第3个浮动的div


接下来,把Box-3也设置为向左浮动。这时效果如图4.4所示,相应的文件位于本书光盘中“第4章\04.htm”。可以清楚地看到,文字所在的盒子的范围,以及文字会围绕浮动的盒子排列。



图4.4 设置第3个div浮动时的效果





4.1.5 实验4——改变浮动的方向


将Box-3改为向右浮动,即float:right。这时效果如图4.5所示,相应的文件位于本书光盘中“第4章\05.htm”。可以看到Box-3移动到了最右端,文字段落盒子的范围没有改变,但文字变成了夹在Box-2和Box-3之间。



图4.5 改变浮动方向后的效果

这时,如果把浏览器窗口慢慢调整变窄,Box-2和Box-3之间的距离就会越来越小,直到二者相接触。如果继续把浏览器窗口调整变窄,浏览器窗口就无法在一行中容纳Box-1到Box-3,Box-3会被挤到下一行中,但仍保持向右浮动,这时文字会自动布满空间,如图4.6所示。



图4.6 div被挤到下一行时的效果





4.1.6 实验5——再次改变浮动的方向


将Box-2改为向右浮动,Box-3改为向左浮动。这时效果如图4.7所示,相应的文件位于本书光盘中“第4章\06.htm”。可以看到,布局没有变化,但是Box-2和Box-3交换了位置。



图4.7 交换div位置时的效果


分析:

这里给我们提供了一个很有用的启示,通过使用CSS布局,可以实现在HTML不做任何改动的情况下,调换盒子的显示位置。这个应用非常重要,这样我们就可以在写HTML的时候,通过CSS来确定内容的显示位置;而在HTML中确定内容的逻辑位置,可以把内容最重要的放在前面,相对次要的放在后面。

这样做的好处是,在访问网页的时候,重要的内容先显示出来,虽然这可能只是几秒钟的事情,但是对于一个网站来说,却是很宝贵的几秒钟。研究表明,一个访问者对一个页面的印象往往是由最开始的几秒钟决定的。

此外,搜索引擎是不管CSS的,它只根据网页内容的价值来确定页面的排名,而对于一个HTML文档,越靠前的内容,搜索引擎会赋予越高的权重,因此把页面中最重要的内容放在前面,对于提高网站在搜索引擎的排名是很有意义的。



现在,回到实验中,把浏览器窗口慢慢变窄,当浏览器窗口无法在一行中容纳Box1到Box-3时,和上一个实验一样会有一个Box被挤到下一行。那么被挤到下一行的是哪一个呢?答案是在HTML中,写在后面的,也就是Box-3会被挤到下一行中,但仍保持向左浮动,会到下一行的左端,这时文字仍然会自动排列,如图4.8所示。



图4.8 div被挤到下一行的效果





4.1.7 实验6——全部向左浮动


下面把页面修改为如图4.9所示的样子,方法是把3个Box都设置为向左浮动,然后在Box-1中增加一行,使它的高度比原来高一些。



图4.9 设置3个div浮动时的效果

请读者思考,如果此时把浏览器窗口调整变窄,结果将会如何?Box-3会被挤到下一行,那么它会在Box-1的下面,还是在Box-2的下面呢?答案如图4.10所示。



图4.10 div挤到下一行被卡住时的效果

在图4.10中绘制了3条示意的虚线,这是Box-2和Box-3的实际分割线。Box-3被挤到下一行,并向左移动,到了这个拐角的地方就会被卡住,而停留在Box-2的下面。

到这里,关于浮动的性质读者应该已经理解了。接下来,很自然地会想到,如何在排版中实现某个盒子浮动,但使它后面的标准流中的盒子不受它的影响。这就需要一个与float属性配合的属性clear,它的作用正是为了消除浮动的盒子对其他盒子的影响。





4.1.8 实验7——使用clear属性清除浮动的影响


参考图4.11所示,修改代码,以使文字的左右两侧同时围绕着浮动的盒子。



图4.11 设置浮动后文字环绕的效果

如果不希望文字围绕浮动的盒子,又该怎么办呢?首先找到代码中的如下4行。

.father p{ border:1px dashed #111111; background>color:#ff90ba; }

然后增加一行对clear属性的设置,这里先将它设为左清除,也就是这个段落的左侧不再围绕着浮动框排列,代码如下,相应的文件位于本书光盘中“第4章\07.htm”。

.father p{ border:1px dashed #111111; background>color:#ff90ba; clear:left; }

这时效果如图4.12所示,段落的上边界向下移动,直到文字不受左边的两个盒子影响为止,但仍然受Box-3的影响。



图4.12 清除浮动对左侧影响后的效果

接着,将clear属性设置为right,效果如图4.13所示。由于Box-3比较高,因此清除了右边的影响,自然左边就更不会受影响了。



图4.13 清除浮动对右侧影响后的效果

关于clear属性有两点要说明。

clear属性除了可以设置为了left或right之外,还可以设置为both,表示同时消除左右两边的影响。

要特别注意,对clear属性的设置要放到文字所在的盒子里,例如一个p段落的CSS设置中,而不要放到对浮动盒子的设置里面。经常有初学者没有搞懂原理,误以为在对某个盒子设置了float属性以后,要消除它对外面的文字的影响,就要在它的CSS样式中增加一条clear,其实这是没有用的。





4.1.9 实验8——扩展盒子的高度


关于clear的作用,这里再给出一个例子。在4.1.8节的例子中,将文字所在的段落删除,这时在父div里面只有3个浮动的盒子,它们都不在标准流中,这时观察浏览器中的效果,如图4.14所示。



图4.14 包含浮动div的容器将不会适应高度

可以看到,文字段落被删除以后,父div的范围缩成一条,是由padding和border构成的,也就是说,一个div的范围是由它里面的标准流内容决定的,与里面的浮动内容无关。如果要使父div的范围包含这3个浮动盒子,如图4.15所示,那么该怎么办呢?



图4.15 希望实现的效果

实现这个效果的方法有几种,但都不完美,都会带来一些不“优雅”的副作用。其中一种方法是在3个div的后面再增加一个div,HTML代码如下:

<body> <div class="father"> <div class="son1">Box>1</div> <div class="son2">Box>2</div> <div class="son3">Box>3<br /> Box>3<br /> Box>3<br /> Box>3</div> <div class="clear"></div> </div> </body>

然后为这个div设置样式,注意这里必须要指定其父div,并覆盖原来对margin、padding和border的设置。

.father .clear{ margin:0; padding:0; border:0; clear:both; }

这时效果如图4.15所示,相应的文件位于本书光盘中“第4章\08.htm”。





4.2 盒子的定位


本小节的标题是盒子的定位,实际上对于使用CSS对网页布局这个大主题来说,“定位”这个词本身有两种含义。

广义的“定位”:要将某个元素放到某个位置的时候,这个动作可以称为定位操作,可以使用任何CSS规则来实现,这就是泛指的一个网页排版中的定位操作,使用传统的表格排版时,同样存在定位的问题。

狭义的“定位”:在CSS中有一个非常重要的属性position,这个单词翻译为中文也是定位的意思,然而要使用CSS进行定位操作并不仅仅通过这个属性来实现,因此不要把二者混淆。

首先,对position属性的使用方法做一个概述,后面再具体举例子说明。position属性可以设置为4个属性值之一。



static:这是默认的属性值,也就是该盒子按照标准流(包括浮动方式)进行布局。

relative:称为相对定位,使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它。

absolute:绝对定位,盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样。

fixed:称为固定定位,它和绝对定位类似,只是以浏览器窗口为基准进行定位,也就是当拖动浏览器窗口的滚动条时,依然保持对象位置不变。



读者可能会觉得这4条属性值不太易于理解,这一节的任务就是彻底搞懂它们的含义。

position定位与float一样,也是CSS排版中非常重要的概念。position从字面意思上看就是指定块的位置,即块相对于其父块的位置和相对于它自身应该在的位置。





4.2.1 static(静态定位)


static为默认值,它表示块保持在原本应该在的位置上,即该值没有任何移动的效果。因此,前面的所有例子实际上都是static方式的结构,这里就不再介绍了。

为了讲解清楚后面的其他比较复杂的定位方式,也像上一节一样,使用一系列实验的方法,目标是通过实验的方法找出规律。

这里首先给出最基础的代码,也就是没有设置任何position属性,相当于使用static方式的页面。相应的文件位于本书光盘中“第4章\09.htm”。

<!DOCTYPE html PUBliC ">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>position属性</title> <style type="text/css"> body{ margin:20px; font :Arial 12px; } #father{ background>color:#a0c8ff; border:1px dashed #000000; padding:15px; } #block1{ background>color:#fff0ac; border:1px dashed #000000; padding:10px; } </style> </head> <body> <div id="father"> <div id="block1">Box>1</div> </div> </body> </html>

这个页面的效果如图4.16所示,这是一个很简单的标准流方式的两层的盒子。



图4.16 没有设置position属性时的状态





4.2.2 relative(相对定位)


使用relative,即相对定位,除了将position属性设置为relative之外,还需要指定一定的偏移量,水平方向通过left或者right属性来指定,竖直方向通过top和bottom来指定。下面还是通过实验的方式找到其中的规律。





1. 实验1——一个子块的情况


下面在CSS样式代码中的Box-1处,将position属性设置为relative,并设置偏移距离,代码如下。

#block1{ background>color:#fff0ac; border:1px dashed #000000; padding:10px; position:relative; /* relative相对定位*/ left:30px; top:30px; }

效果如图4.17所示,相应的文件位于本书光盘中“第4章\10.htm”。图中显示了Box-1原来的位置和新位置的比较。可以看出,它向右和向下分别移动了30像素,也就是说,“left:30px”的作用就是使Box-1的新位置在它原来位置的左边框右侧30像素的地方,“top:30px”的作用就是使Box-1的新位置在原来位置的上边框下侧30像素的地方。



图4.17 一个div设置为相对定定位后的效果

这里用到了top和left这两个CSS属性,实际上在CSS中一共有4个配合position属性使用的定位属性,除top和left之外,还有right和bottom。

这4个属性只有当position属性设置为absolute、relative或fixed时才有效。而且,在position属性取值不同时,它们的含义也不同。当position设置为relative时,它们表示各个边界与原来位置的距离。

top、right、bottom和left这4个属性除了可以设置为绝对的像素数,还可以设置为百分数。此时,可以看到子块的宽度依然是未移动前的宽度,撑满未移动前父块的内容。只是向右移动了,右边框超出了父块。因此,还可以得出另一个结论,当子块使用相对定位以后,它发生了偏移,即使移动到了父盒子的外面,父盒子也不会变大,就好像子盒子没有变化一样。

类似地,如果将偏移的数值设置为:

right:30px; bottom:30px;

效果如图4.18所示。



图4.18 以右侧和下侧为基准设置相对定位

对于父块来说,同样没有任何影响,就好像子块没有发生过任何改变一样。因此可以总结出以下两条结论。

使用相对定位的盒子,会相对于它原本的位置,通过偏移指定的距离,到达新的位置。

使用相对定位的盒子仍在标准流中,它对父块没有任何影响。





2. 实验2——两个子块的情况


下面讨论两个子块的情况。把上面的网页稍加改造,在父div中放两个div。首先对它们都不设置任何偏移,代码如下。

<!DOCTYPE html PUBliC ">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http>equiv="Content>Language" content="zh>cn" /> <title>position属性</title> <style type="text/css"> body{ margin:20px; font>family:Arial; font>size:12px; } #father{ background>color:#a0c8ff; border:1px dashed #000000; padding:15px; } #father div{ background>color:#fff0ac; border:1px dashed #000000; padding:10px; } #block1{ } #block2{ } </style> </head> <body> <div id="father"> <div id="block1">Box>1</div> <div id="block2">Box>2</div> </div> </body> </html>

这时效果如图4.19所示,相应的文件位于本书光盘中“第4章\11.htm”。



图4.19 设置为相对定位前的效果

在代码中可以看到,现在对两个子块的设置都还空着。下面首先将Box-1盒子的CSS设置为:

#block1{ position:relative; bottom:30px; right:30px; }

将子块1的position属性设置成了relative,子块2还没有设置任何与定位相关的属性。此时的效果如图4.20所示,与前面的图4.19对比,可以看到子块1的位置以自身为基准向上和向左各偏移了30像素。而子块2和前面的图4.19所示的相比没有任何变化,就好像子块1还在原来的位置上。



图4.20 两个兄弟div的情况下,其中一个设置为相对定位后的效果

这又一次验证了前面实验1中总结出的两条结论,并且需要把第2条结论再稍稍改进。因为,使用相对定位的盒子不仅对父块没有任何影响,对兄弟盒子也没有任何影响。至此,可以总结出,对于相对定位的规律是:

使用相对定位的盒子,会相对于它原本的位置,通过偏移指定的距离,到达新的位置。

使用相对定位的盒子仍在标准流中,它对父亲和兄弟盒子都没有任何影响。



如果同时设置两个子块的position属性都为relative,情况又会如何呢?现在把子块2也进行相应的设置,代码如下。

#block2{ position:relative; top:30px; left:30px; }

这时的效果如图4.21所示,相应的文件位于本书光盘中“第4章\12.htm”。



图4.21 两个兄弟div都设置为相对定位后的效果





3. 结论


这继续验证了上面总结的两条结论,请读者记清楚关于“相对定位”的定位原则:

使用相对定位的盒子,会相对于它在原本的位置,通过偏移指定的距离,到达新的位置。

使用相对定位的盒子仍在标准流中,它对父块和兄弟盒子没有任何影响。



需要指出的是,上面的实验是针对标准流方式进行的,实际上,对浮动的盒子使用相对定位也是一样的,例如图4.22中显示的是3个浮动的盒子,它们都向左浮动排在一行中,如果对其中的一个盒子使用相对定位,它也同样相对于它在原本的位置,通过偏移指定的距离,到达新的位置,它旁边的Box-3仍然“以为”它还在原来的位置。



图4.22 在浮动方式下,使用相对定位





4.2.3 absolute(绝对定位)


了解了相对定位以后,下面开始分析absolute定位方式,它表示绝对定位。通过上面的学习,可以了解到各种position属性都需要通过配合偏移一定的距离来实现定位,而其中核心的问题就是以什么作为偏移的基准。

对于相对定位,就是以盒子本身在标准流中或者浮动时原本的位置作为偏移基准的,那么绝对定位以什么作为定位基准呢?





1. 准备网页代码


下面仍然以一个标准流方式的页面为基础,进行一系列的实验,总结出它的规律。先准备如下代码。

<!DOCTYPE html PUBliC ">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>absolute属性</title> <style type="text/css"> body{ margin:20px; font>family:Arial; font>size:12px; } #father{ background>color:#a0c8ff; border:1px dashed #000000; padding:15px; } #father div{ background>color:#fff0ac; border:1px dashed #000000; padding:10px; } #block2{ } </style> </head> <body> <div id="father"> <div >Box>1</div> <div id="block2">Box>2</div> <div >Box>3</div> </div> </body> </html>

效果如图4.23所示。可以看到,一个父div里面有3个div,都是标准流方式排列。相应的文件位于本书光盘中“第4章\13.htm”。



图4.23 设置绝对定位前的效果





2. 实验——使用绝对定位


下面尝试使用绝对定位,代码中找到对#block2的CSS设置位置,目前它是空白的,下面把它改为:

#block2{ position:absolute; top:0; right:0; }

这里将Box-2的定位方式从默认的static改为absolute,此时的效果如图4.24所示。这时是以浏览器窗口作为定位基准的。此外,该div会彻底脱离标准流,Box-3会紧贴Box-1,就好像没有Box-2这个div存在一样。相应的文件位于本书光盘中“第4章\13.htm”



图4.24 将中间的div设置为绝对定位后的效果

下面将设置改为:

#block2{ position:absolute; top:30px; right:30px; }

这时的效果如图4.25所示,以浏览器窗口为基准,从左上角开始向下和向左各移动30像素,得到图中的效果。



图4.25 设置偏移量后的效果

是不是所有的绝对定位都以浏览器窗口为基准来定位呢?答案是否定的。接下来对上面的代码做一处修改,为父div增加一个定位样式,代码如下。

#father{ background>color:#a0c8ff; border:1px dashed #000000; padding:15px; position:relative; }

这时效果就变化了,如图4.26所示。偏移的距离没有变化,但是偏移的基准不再是浏览器窗口,而是它的父div了。



图4.26 将父块设置为“包含块”后的效果

对于绝对定位的正确描述如下。

使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。

绝对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样。



在上述第一条原则中,有3个带引号的定语,需要进行一些解释。

(1)所谓“已经定位”元素的含义是,position属性被设置,并且被设置为不是static的任意一种方式,那么该元素就被定义为“已经定位”的元素。

(2)关于“祖先”元素,如果结合本章最前面介绍的“DOM树”的知识,就可以理解了。从任意节点开始,走到根节点,经过的所有节点都是它的祖先,其中直接上级节点是它的父亲,以此类推。

(3)关于“最近”,在一个节点的所有祖先节点中,找出所有“已经定位”的元素,其中距离该节点最近的一个节点,父亲比祖父近,祖父比增祖父近,以此类推,“最近”的就是要找的定位基准。

回到这个实际的例子中,在父div没有设置position属性时,Box-2这个div的所有祖先都不符合“已经定位”的要求,因此它会以浏览器窗口为基准来定位。而当父div将position属性设置为relative以后,它就符合“已经定位”的要求了,它又是所有祖先中惟一一个已经定位的,也就满足“最近”这个要求,因此就会以它为基准进行定位了。本书以后将绝对定位的基准称为“包含块”。

到这里绝对定位已经基本介绍清楚了,最后需要补充说明的是关于IE 6中的一个错误,上面这个例子在IE 6中显示的效果如图4.27所示。



图4.27 在右侧时,IE 6中显示正确

这个效果是正确的,注意现在是用右边框来定位的,如果换成用左边框来定位,效果就会如图4.28所示。



图4.28 在左侧时,IE 6中显示错误

错误的位置和正确的位置相差了父div的padding的宽度,这是IE 6中的固有错误,解决方法是给父div(定位的基准盒子)增加一条CSS样式,代码如下:

height:1%;

这时效果如图4.29所示,可以看到位置已经正确了。



图4.29 解决在IE 6中的错误


注意

这种办法通常被称为“CSS hack”,这里的hack不是“黑客”的意思,而是指一些说得清或者说不清道理,但总之很有效的解决办法,就像我们生活中的“偏方”。





3. 浏览器的Bug与Hack


对于这种存在于程序中的小错误,英文中称为“Bug”。任何程序和软件都很难做到清除掉所有Bug,特别是浏览器,加之对于规范的解释不统一,因此类似的错误一直存在。

因此应运而生了许多Hack方法,来解决一些特定的Bug。有的CSS书籍或资料中很喜欢介绍各种“CSS hack”,很多读者也为此花费了大量的精力,其实不需要在这些技巧上投入过多。在实际工作中,这些问题并不常见,而且绝大部分hack技巧都是为了解决IE 5.5及以下版本的错误的,目前除非要制作非常特殊的网站,否则不必考虑IE 5.5的访问者。图4.30所示的是以本书作者的一个网站为例,使用Google提供的网站分析工具对其进行统计,得出的数据,从最近约1万名访问者使用的浏览器状况来看。IE 6/IE 7和Firefox已经占有了绝对统治性的份额。

图4.30左图所示的是访问者中使用各种浏览器的比例,右图所示的则是在使用IE浏览器的访问者中使用不同版本的分布比例。



图4.30 使用各种浏览器的人数比例,以及使用不同版本IE的人数比例

根据这两张图中的数据计算,如果网站能够确保在IE 6/7和Firefox中显示正常,则可以保证99.13%的访问者正常浏览网页。相对来说,满足这3个浏览器要比兼容IE 5.5/5.0等容易得多,基本上不需要太多额外的方法就可以做出兼容性很好的网站。





4. 绝对定位的特殊性质


对于绝对定位,还有一个特殊的性质需要介绍。在有的网页中必须利用这个性质才能实现需要的效果。本书后面章节的案例中,也几次使用到这个性质。

假设有如下的代码:

<!DOCTYPE html PUBLIC ">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body{ margin:0; } #outerBox{ width:200px; height:100px; margin:10px auto; background:silver } #innerBox{ position:absolute; top:70px; width:100px; height:50px; background:orange } </style> </head> <body> <div id="outerBox"> <div id="innerBox"></div> </div> </body> </html>

代码中,外面的盒子没有设置position属性,内部的盒子设置了绝对定位,但是只在竖直方向指定了偏移量,没有指定水平方向的偏移量,此时内部的盒子将如何定位呢?

在浏览器中的效果如图4.31所示。可以看到,因为内部的盒子设置了绝对定位属性,而外层的div没有设置position属性,所以它的定位基准是浏览器窗口。但是由于在水平方向上没有设置偏移属性,因此在水平方向它仍然会保持原来应该在的位置,它的左侧与外层盒子的左侧对齐。因为在竖直方向上设置了“top:70px”,所以距离浏览器窗口顶部为70像素。



图4.31 使用绝对定位但是不设置偏移属性时的效果

因此,通过这个实验可知,如果设置了绝对定位,而没有设置偏移属性,那么它仍将保持在原来的位置。这个性质可以用于需要使某个元素脱离标准流,而仍然希望它保持在原来的位置的情况。请读者在本书第10章学习到“小视图模式日历”这个案例的时候,再仔细体会其中的用处。





4.2.4 fixed(固定定位)


position属性的第4个取值是fixed,即固定定位。它与绝对定位有些类似,区别在于定位的基准不是祖先元素,而是浏览器窗口或者其他显示设备的窗口。也就是当访问者拖动浏览器窗口滚动条时,固定定位的元素将保持相对于浏览器窗口不变的位置。目前还没有被IE 6浏览器支持,因此这里就不再介绍了。

如果读者有兴趣,可以研究一下本书第2章最后列举的几个很有特色的禅意花园作品,它们就是充分利用固定定位的方式实现的。





4.3 z-index空间位置


z-index属性用于调整定位时重叠块的上下位置,与它的名称一样,想象页面为x-y轴,垂直于页面的方向为z轴,z-index值大的页面位于其值小的上方,如图4.32所示。



图4.32 z-index轴

z-index属性的值为整数,可以是正数也可以是负数。当块被设置了position属性时,该值便可设置各块之间的重叠高低关系。默认的z-index值为0,当两个块的z-index值一样时,将保持原有的高低覆盖关系。





4.4 盒子的display属性


通过前面的讲解,读者已经知道盒子有两种类型,一种是div这样的块级元素,还有一种是span这样的行内元素。

事实上,对于盒子有一个专门的属性,用以确定盒子的类型,这就是display属性。

假设有如下HTML结构:

<body> <div>Box>1</div> <div>Box>2</div> <div>Box>3</div> <span>Box>4</span> <span>Box>5</span> <span>Box>6</span> <div>Box>7</div> <span>Box>7</span> </body>



图4.33 浏览器默认的显示效果

这时的效果如图4.33所示,Box-4、Box-5、Box-6是span,因此它们在一行中,其余的都各占一行。

下面把前3个div的display属性设置为inline,即“行内”;接着把中间3个span的display属性设置为block,即块级;再把最后一个div和一个span的display属性设置为“none”,即“无”。具体的代码如下:

<body> <div style="display:inline">Box>1</div> <div style="display:inline">Box>2</div> <div style="display:inline">Box>3</div> <span style="display:block">Box>4</span> <span style="display:block">Box>5</span> <span style="display:block">Box>6</span> <div style="display:none">Box>7</div> <span style="display:none">Box>8</span> </body>

这时效果如图4.34所示。可以看到,原本应该是块级元素的div变成了行内元素,原本应该是行内元素的span变成了块级元素,并且设置为none的两个盒子消失了。



图4.34 强制改变盒子类型后的显示效果

从这个例子可以看出,通过设置display属性,可以改变某个标记本来的元素类型,或者把某个元素隐藏起来。这个性质在后面的案例中,将发挥巨大的作用。





4.5 本章小结


本章的重点和难点是深刻地理解“浮动”和“定位”这两个重要的性质,它们对于复杂页面的排版至关重要。因此,尽管本章的案例都很小,也很朴素,但是如果读者不能真正深刻地理解蕴含在其中的道路,后面的复杂案例效果是无法完成的。





Chapter 5




第5章 文字与图像


文字和图像是传达信息的基础,是网页设计永远不可缺少的元素,各种各样的文字和图像效果在整个互联网中无处不在。本章从基础的文字设置开始,详细讲解CSS设置各种文字效果的方法,然后再进一步讲解关于图像的几个重要的应用领域。





5.1 CSS文字样式


使用过任何文字处理软件的用户对文字排版都不会陌生。例如在Word软件中可以对文字的字体、大小和颜色等各种属性进行设置。CSS同样可以对HTML页面中的文字进行全面的设置。





5.1.1 准备网页


为了便于讲解和实践,首先准备一个非常简单的页面,HTML代码如下。

<!DOCTYPE html PUBLIC ">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http>equiv="Content>Type" content="text/html; charset=utf>8" /> <title>Head Line</title> <style type="text/css"> /*这里填写CSS样式代码*/ </style> </head> <body> <h1>Head Line</h1> <p class="p1">The Internet Society mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. </p> <p class="p2">The Internet Society's mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. 这里省略其余文字 </p> </body> </html>

这个非常简单的网页,由一个h1标题和两个p段落构成。为了对两段文本段落分别进行设置,给它们各自设置了一个类别选择器,p1和p2。在没有设置任何样式时,效果如图5.1所示。该文件请参考本书光盘中的“第5章/文字/basic.htm”。



图5.1 准备好的基本页面效果





5.1.2 设置字体


在HTML语言中,文字的字体是通过<font face="字体名称">来设置的,而在CSS中字体是通过font-family属性来控制的。例如针对上面准备好的网页,在样式部分增加如下对p标记的样式设置。

<style type="text/css"> p{ font>family: Arial, "Times New Roman"; } </style>

以上语句声明了HTML页面中p标记的字体名称,并且同时声明了两个字体名称,分别是Arial字体和Times New Roman字体,其含义是告诉浏览器首先在访问者的计算机中寻找Arial字体。如果该访问者的计算机中没有Arial字体,就寻找Times New Roman;如果这两种字体都没有,则使用浏览器的默认字体显示。

font-family属性可以同时声明多种字体,字体之间用逗号分隔开。另外,一些字体的名称中间会出现空格,例如上面的Times New Roman,这时需要用双引号将其引起来,使浏览器知道这是一种字体的名称。


注意

不要输入中文(全角)的双引号,而要使用英文(半角)的双引号。



这时在浏览器中的效果如图5.2所示。可以看到,两个正文段落中的字体都发生了变化。该文件请参考本书光盘中的“第5章/文字/font-family.htm”。



图5.2 设置正文字体


注意

很多设计者喜欢使用各种各样的字体来给页面添彩,但这些字体在大多数用户的机器上都没有安装,因此一定要设置多个备选字体,避免浏览器直接替换成默认的字体。最直接的解决方法是将使用了生僻字体的部分,用图形软件制作成小的图片,再加载到页面中。





5.1.3 文字大小


在网页中通过文字的大小来突出主题是很常用的方法,CSS是通过font-size属性来控制文字大小的,该属性的值可以使用很多种长度单位,这里分别进行介绍。





1. 长度单位px


仍以上面的网页为例子,增加对font-size属性的设置,将其设置为12像素,代码如下。

p{ font>family: Arial, "Times New Roman"; font>size:12px; }

这时在浏览器中的效果如图5.3所示。可以看到,此时两个正文段落中的文字都变小了。该文件请参考本书光盘中的“第5章/文字/font-size.htm”。



图5.3 设置了正文文字的大小为12像素

代码中的px是一个长度单位,表示在浏览器上1个像素的大小。因为不同访问者的显示器的分辨率不同,而且每个像素的实际大小也不相同,所以px被称为相对单位,也就是相对于1个像素的比例。

在CSS中,除了可以使用px作为长度单位,还可以使用以下5种单位设置大小(包括文字、div的高度和宽度等),这5种单位都被称为绝对长度单位,它们不会随显示器的变化而变化。各个单位的含义如表5.1所示。

表5.1 绝对单位及其含义





2. 长度单位em和ex


此外还有两个比较特殊的长度单位:em和ex。它们与px类似,也是相对长度单位。1em表示的长度是其父元素中字母m的标准宽度,1ex则表示字母x的标准高度。当父元素的文字大小变化时,使用这两个单位的子元素的大小会同比例变化。

例如,在文字排版时,有时会要求第一个字母比其他字母大很多,并下沉显示,就可以使用这个单位。方法是先在上面的HTML中,把第2段文字的第1个字母“T”放入一对<span></span>标记中,并对它设置一个CSS类别,“.firstLetter”。

<p class="p2"><span class=".firstLetter">T</span>he

然后设置它的样式,将font-size设置为2em,并使它向左浮动,代码如下:

.firstLetter{ font>size:3em; float:left; }

这时在浏览器中的效果如图5.4所示。此时第2段的首字母就变为标准大小的3倍,并因设置了向左浮动而实现下沉显示。该文件请参考本书光盘中的“第5章/文字/first-letter.htm”。



图5.4 设置段首的字母放大并下沉显示





3. 长度单位%


最后一种单位是使用百分比作为单位,例如“font-size:200%”,表示文字的大小为原来的两倍。





5.1.4 行高


在CSS中,还可以设置一个段落中各行文本的高度,这是通过line-height属性设置的。在CSS中line-height的值表示的是两行文字之间基线的距离,也就是每行文字的高度。如果给文字加上下划线,下划线的位置就是文字的基线。

line-height属性的值与CSS中所有设定具体数值的属性一样,可以设定为相对数值,也可以设定为绝对数值。在静态页面中,文字大小固定时常常使用绝对数值,达到统一的效果。而对于论坛和博客这些可以由用户自定义字体大小的页面,通常设定为相对数值,可以随着用户自定义的字体大小而改变相应的行距。

例如,对上面的例子的p标记设置如下CSS规则:

line>height:18px;

这时在浏览器中的效果如图5.5所示。每行的高度比原来增大了一些。该文件请参考本书光盘中的“第5章/文字/line-height-1.htm”。



图5.5 设置正文的行高

除了可以使用像素等作为行高的单位,也可以不加任何单位,此时行高应写成与字体大小的比值。例如,字体大小是12像素,有下面这行代码:

line>height:1.5;

它所产生的行高效果,与下面的代码的行高效果是相同的。

line>height:18px;

下面请读者仔细对比一下图5.4与图5.5,可以发现在设置了“line-height:18px”之后,图5.4中下沉显示的段首字母“T”,不再以下沉的方式显示了。如果此时将行高由绝对高度18像素改为相对高度1.5,就会发现字母“T”又下沉显示了,如图5.6所示。该文件请参考本书光盘中的“第5章/文字/line-height-2.htm”。



图5.6 使用相对高度后的效果


分析

12像素的1.5倍正是18像素,行高也没有变化,为什么会影响到前面的字母“T”的位置呢?

读者可以好好思考一下这个问题。这里考验的是读者是否已经充分理解了CSS的基本性质。答案是这样的,在本书第1章中曾经重点介绍过CSS的样式具有继承的性质。当p的样式中,将line-height设置为18像素时,字母“T”所在的span是p元素的子元素,因此它继承了这个样式,它的行高也是18像素。这样,尽管它的文字高度变大了,但是它的盒子高度仍然被限制为18像素,旁边的文字围绕它排版的时候是以盒子为界限的,因此效果就如图5.5所示了。(此时,字母“T”已经超出了盒子的范围,请读者试验一下,在IE和Firefox中的不同处理方式。)

当把p的line-height设置为1.5时,这个样式同样被字母“T”所在的span元素继承了,因此当它的文字变为3倍大的时候,行高也随之变大,就会产生如图5.6所示的效果了。



从这个小例子可以看出,在学习和实际工作过程中有时会遇到一些很细小的地方,其中蕴藏着很深的道理,都值得把它探究清楚。

下面还需要说明两点。

(1)上面介绍了设置文字的3个最基本的属性,即字体、大小和行高。在CSS中,还可以把它们组合在一条CSS规则中。例如:

font:12px/18px Arial;

这行代码表示使用Arial字体,大小为12像素,行高18像素。注意在字体和行高之间要用斜线隔开。

也可以以相对比例作为行高的数值,例如:

font:12px/1.5 Arial;

(2)line-height属性可以设置在文本元素中,例如上面的例子就是这样,对p元素设置行高,就是确定了段落中每一行的高度。line-height属性也可以设置在容器元素中,例如对一个div设置line-height属性,那么它里面的文字都将使用这个行高值。





5.1.5 文字颜色与背景颜色


在HTML页面中,颜色统一采用RGB格式,也就是通常人们所说的“红绿蓝”三原色模式。每种颜色都由这3种颜色的不同比重组成,分为0~255档。当红绿蓝3个分量都设置为255时就是白色,例如rgb(100%,100%,100%)和#FFFFFF都指白色,其中“#FFFFFF”为十六进制的表示方法,前两位为红色分量,中间两位是绿色分量,最后两位是蓝色分量。“FF”即为十进制中的255。

当RGB的3个分量都为0时,就显示为黑色,即rgb(0%,0%,0%)和#000000都表示黑色。同理,当红、绿分量都为255,而蓝色分量为0时,则显示为黄色,即rgb(100%,100%,0)和#FFFF00都表示黄色。

文字的各种颜色配合其他页面元素组成了整个五彩缤纷的页面。在CSS中文字颜色是通过color属性设置的。下面的几种方法都可将文字设置为蓝色。

h3{ color: blue; } h3{ color: #0000ff; } h3{ color: #00f; } h3{ color: rgb(0,0,255); } h3{ color: rgb(0%,0%,100%); }

第1种方式使用颜色的英文名称作为属性值。

第2种方式是最常用的十六进制数值表示。

第3种方式是第2种方式的简写方式,形如#aabbcc的颜色值,就可以简写为#abc。

第4种方式是分别给出红绿蓝3个颜色分量的十进制数值。

第5种方式是分别给出红绿蓝3个颜色分量的百分比。


注意

如果读者对颜色的表示方法还不熟悉,或者希望了解各种颜色的具体名称,请参考网页http://learning.artech.cn/20061130.color-definition.html 。



在CSS中,除了可以设置文字的颜色,还可以设置背景的颜色,使用的属性是background-color。例如继续设置上面的页面,设置h1标题的样式为:

h1{ background:#678; color:white; }

将背景色设置为#678,也就是#667788,并将文字颜色设置为白色,这时页面效果如图5.7所示。该文件请参考本书光盘中的“第5章/文字/color.htm”。



图5.7 设置标题的字体颜色和背景颜色





5.1.6 文字加粗、倾斜与大小写


在HTML语言中可以通过添加<b>标记或者<strong>标记将文字设置为粗体。在CSS中,是使用font-weight属性控制文字的粗细的,可以将文字的粗细进行细致的划分,更重要的是CSS还可以将本身是粗体的文字变为正常粗细。

但是目前CSS的规范中设置了相应的属性值,但是实际上在大多数操作系统和浏览器上,还不能很好地实现非常精细的文字加粗设置,通常只能设置“正常”和“加粗”两种粗细,分别如下:

font>weight:normal /*正常*/ font>weight:bold /*加粗*/

倾斜和粗体也有类似之处。大多数人对于字体倾斜的认识都是来自于Word等文字处理软件,例如图5.8左图所示的是一个Time New Roman字体的字母a,中间的图是它的常见的倾斜形式。


注意

文字的倾斜并不是真的通过把文字“拉斜”实现的,例如图5.8左图所示的正常的字体无论怎么倾斜,也不会产生中间图中的字形。倾斜的字体本身是一种独立存在的字体,对应于操作系统中的某一个字库文件。



严格来说,在英文中,字体的倾斜有以下两种。

(1)italic,即意大利体。我们平常说的倾斜都是指“意大利体”,这也就是为什么在各种文字处理软件上,实现字体倾斜的按钮大都使用字母“I”来表示的原因。

(2)oblique,即真正的倾斜,就是把一个字母向右边倾斜一定角度产生的效果,类似于图5.8右图显示的效果。这里说“类似于”是因为Windows操作系统中并没有实现oblique方式的字体,所以这里找了一个接近它的字体来示意。



图5.8 正常字体与“意大利体”、“倾斜体”的对比

CSS中的font-style属性正是用来控制字体倾斜的,它可以设置为“正常”、“意大利体”和“倾斜”3种样式,分别如下:

font>style:normal; font>style:oblique; font>style:italic;


注意

在Windows上,并不能区分oblique和italic,它们都是按照italic方式来显示的。这不是浏览器的问题,而是操作系统不够完善所造成的。




经验

对于中文字体来说,并不存在这么多情况。另外,中文字体的倾斜效果并不好看,因此网页上很少使用中文字体的倾斜效果。



除了加粗和倾斜之外,英文字母的大小写转换是CSS提供的很实用的功能之一,用户只需要设定英文段落的text-transform属性,就能很轻松地实现大小写的转换。

例如,下面3个文字段落分别可以实现单词的首字母大写、所有字母大写和所有字母小写。

p.one{ text>transform:capitalize; /}* 单词首字大写*/ p.two{ text>transform:uppercase; } /* 全部大写*/ p.three{ text>transform:lowercase; / *} 全部小写*/

这里需要补充说明的是,由于西文字母数量很少,因此对于字母的样式还有很多非常复杂的属性,在CSS 2的规范中有很大篇幅的内容是关于字体属性的定义的。对于普通的设计师而言,不必研究得太深,只要把上面介绍的几点了解清楚,日常工作中基本就够用了。





5.1.7 文字的装饰效果


给文字加上下划线、顶划线和删除线的功能在文档编辑中的使用频率是很高的,在网页中尤其突出。CSS通过设置文字的text-decoration属性来实现这些特殊效果。

例如,下面的代码分别给文本设置了下划线、顶划线、删除线和文字闪烁效果。

p.one{ text>decoration:underline; } /* 下划线*/ p.two{ text>decoration:overline; } /* 顶划线*/ p.three{ text>decoration:line>through; }/* 删除线*/ p.four{ text>decoration:blink; } /* 闪烁*/


注意

需要注意的是,闪烁效果在IE中无效,在Firefox有效。



如果希望文字不仅有下划线,同时还有顶划线或者删除线,就可以将underline和overline的值同时赋给text-decoration,并用空格分开,如下所示。

p{ text>decoration:underline overline line>through; } /* 三种同时*/





5.1.8 文字的水平对齐方式与段首缩进设置


在CSS中,段落的水平对齐是通过属性text-align来控制的,它的值可以设置为左、中、右和两端对齐等。控制段落文字的对齐方式就像在Word中一样方便。

例如,下面的代码将使h1标题的文字居中对齐。

h1{text>align:center;}

要左对齐或者右对齐,只需将text-align属性设置为left或者right即可。如果要设置两端对齐,就将text-align属性设置为justify。


经验

中文排版的习惯中,在每一个段落的开头都应该空两格(英文排版没有这个习惯)。因此,段首的缩进控制对中文网页特别有用。



在CSS中,段首缩进是通过text-indent属性设置的,直接将缩进距离作为数值即可。对于中文网页,设置为“2em”即可,如下所示。

p{text>indent:2em;}





5.1.9 文字布局


前面几节分别介绍了文字的一些样式属性,此外文本还可以和上一章中的盒子模型以及定位属性相结合来实现布局效果。

例如,将前面的页面稍加改进,就可以制作出如图5.9所示的效果。该文件请参考本书光盘中的“第5章/文字/float-layout.htm”。



图5.9 设置了布局属性的页面

读者可以把这个例子作为对上一章内容的复习,自己来实践一下。这个页面中一共有两个段落,短的是p1,长的是p2。首先要给p1设置边框线和背景色,然后将p2段落的文字环绕p1段落,显然需要将p1段落设置为浮动。为了使p1和p2的文字都距离边框有一定的空间,需要设置p1的padding和margin。完整的CSS代码如下。

h1{ background:#678; color:white; texta>align:center; } p{ font>family:Arial; font>size:12px; line>height:1.5; /*上面3条规则可以简写为一条font:12px/1.5 Arial */ } .firstLetter{ font>size:3em; float:left; } .p1{ width:200px; float:left; margin:10px; margin>left:0; padding:10px; border:1px gray double; background:#9BD; }





5.1.10 段落的垂直对齐方式


上面介绍了文字的水平对齐方式,读者自然会想到竖直方向又该如何对齐呢?下面通过实例来进行讲解。将上面例子中的p1段落的高度设置为150像素,效果如图5.10所示。



图5.10 将p1的高度设置为固定值

如果要使方框中的文字竖直方向居中对齐,应该如何实现呢?在CSS中有一个用于竖直方向对齐的属性——vertical-align。在目前的浏览器中,只能用表格单元格中的对象竖直方向的对齐设置,而对于一般的块级元素,例如div等,都是不起作用的。

也就是说,当文字在一个表格的单元格中时,如果对该单元格使用vertical-align:middle,那么该单元格中的内容会竖直方向居中对齐。如果文字放在一个div中,那么对这个div使用vertical-align:middle将不会有任何效果。

那么这个问题有解决办法吗?

如果文字内容只有一行,则可以使用line-height与height相同的办法使文字竖直居中。例如,假设有如下HTML代码:

<div class="middle"> Here is ONE line of text </div>

相应的CSS设置为:

.middle{ height:100px; line>height:100px; boeder:1px #666 solid; }

效果如图5.11所示,这里将行高设置为与高度相同的值,就可以保证文字竖直居中了。该文件请参考本书光盘中的“第5章/文字/sigle-vertical.htm”。



图5.11 单行文字的情况可以正确竖直居中对齐

但是对于超过一行的文本,例如增加文本的长度,或者是浏览器窗口变窄,是文本需要折行显示,这种方法就无效了,效果将如图5.12所示。



图5.12 两行文字的情况无法正确竖直居中对齐

因此上面的方法不是通用的解决方法。实际上解决这个问题的方法并不简单,必须要通过一定的非常规手段才能实现。严格来说,应该实现如下目标:

(1)div容器的高度固定;

(2)内部需要居中对齐的内容高度不固定,例如是服务器动态产生的数据;

(3)不使用表格。

捷克的设计师Dušan Janovský和aka 给出一个比较完善的解决方案,其中的逻辑比较复杂,需要对不同的浏览器,使用不同的代码,然后合并在一起。这里仅给出一个最终的代码,供读者直接使用在自己的网页中,如果读者有兴趣深入研究其中原理,请访问网址

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

以下代码引用自Dušan Janovský发表在互联网上的文章。

<!DOCTYPE html PUBLIC ">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Universal vertical center with CSS</title> <style> #outer {height: 100px; overflow: hidden; position: relative;} #outer[id] {display: table; position: static;} #middle {position: absolute; top: 50%;} /* for explorer only*/ #middle[id] {display: table>cell; vertical>align: middle; position: static;} #inner {position: relative; top: >50%} /* for explorer only */ /* optional: #inner[id] {position: static;} */ .withBorder{ border:1px green solid; } </style> </head> <body> <div id="outer" class="withBorder"> <div id="middle"> <div id="inner"> any text any height any content, everything is vertically centered. </div> </div> </div> </body> </html>

该页面的效果如图5.13所示,浏览器窗口宽度变化、文字折行都不会影响文字的竖直居中效果。该文件请参考本书光盘中的“第5章/文字/multi-vertical.htm”。



图5.13 多行文字实现在块级容器中竖直居中

这种方法需要使用嵌套的3层div才可以实现。如果读者需要使用这种方法,只需要将相应的高度换成需要的高度,其余的结构和CSS样式都不用修改,直接使用即可。





5.2 CSS图像样式


在五彩缤纷的网络世界中,各种各样的图片组成了丰富多彩的页面,能够让人更直观地感受网页所要传达给浏览者的信息。本节将介绍CSS设置图片风格样式的方法,包括图片的边框、对齐方式和图文混排等,并通过实例综合掌握文字和图片的各种运用。





5.2.1 基本设置


作为单独的图片,虽然它本身的很多属性都可以直接在HTML中进行调整,但是通过CSS统一管理,不但可以更加精确地调整图片的各种属性,还可以实现很多特殊的效果。本节主要讲解用CSS设置图片基本属性的方法,为进一步深入探讨打下基础。

图像的基本设置包括设置图像的边框、内外边距和大小等。在HTML中可以直接通过<img>标记的border属性值为图片添加边框,控制边框的粗细,border="1"表示边框为1像素粗细,当设置该值为0时,则显示为没有边框。

在HTML中,可以设置的样式很少而且很单调,而使用CSS的border属性则可以设置丰富得多的样式效果。

设置图像的边框,与设置其他元素的边框的方法完全相同。

例如,在前一节的基础上,把第一个文字段落换为一个<img>,即图像元素,然后设置如下CSS样式:

img{ border:1px gray dashed; margin:10px 10px 10px 0; padding:5px; float:left; }

效果如图5.14所示,可以看到设置图像的边框样式、内边距、外边距和浮动等基本属性,与设置其他元素的基本属性的方法是完全一致的。也可以看出,CSS的盒子模型所起的巨大作用。在CSS中,任何一个对象本身都是一个盒子,对于一个图像而言,图像本身就是盒子的内容,因此边框、内外边距等部分就都是顺理成章的了。



图5.14 对图像元素设置CSS样式

该文件请参考本书光盘中的“第5章/图像/basic.htm”。

在CSS中,也可以设置图像的高度和宽度,同样是使用盒子模型中统一的height和width属性。设置时可以使用具体的长度,例如“100px”,也可以使用相对比例,例如“70%”。





5.2.2 背景图像


在CSS中,图像经常以背景的形式出现,而且用途极为广泛。本书后面的章节中,读者还将学习到通过使用背景图像的方法,实现很多特殊的效果。





1. 设置背景图像


在前面已经介绍了使用background-color属性给元素设置背景颜色。在CSS中,还可以使用图像作为某个元素的背景,例如整个页面的背景使用背景图像来设置。设置背景图像要使用background-image属性。

仍然以上面的实例为基础,在CSS样式部分增加如下样式代码。

body{ background>image:url(bg.gif); }

然后准备一个图像文件,如图5.15所示。



图5.15 准备一个图像文件

这个图片的左上部分为灰色,右下部分为白色。为了使页面上的文字不至于和背景混在一起,可以把p标记的背景色设置为白色,这时的效果如图5.16所示。



图5.16 页面的body元素设置了背景图像后的效果

可以看到,用这种方式设置背景图像以后,图像会自动沿着水平和竖直两个方向平铺。

其他元素也同样可以使用背景图像,例如将实例中的h1标记的背景由原来的背景色,改为使用图像作为背景,效果如图5.17所示。该文件请参考本书光盘中的“第5章/图像/backgroud.htm”。



图5.17 h1标题使用背景图像的效果





2. 控制图像平铺方向


在默认情况下,图像会自动向水平和竖直两个方向平铺。如果不希望平铺,或者只希望沿着一个方向平铺,可以使用background-repeat属性来控制。该属性可以设置为4种平铺方式。

repeat:沿水平和竖直两个方向平铺。

no-repeat:不平铺,即只显示一次。

repeat-x:只沿水平方向平铺。

repeat-y:只沿竖直方向平铺。



例如,先准备一个如图5.18所示的图像。



图5.18 渐变色构成的背景图像

然后,对body元素设置如下CSS样式,并去除刚才对h1标题的背景图像的设置。

body{ background>image:url(bg>grad.gif); background>repeat:repeat>x; }

这时效果如图5.19所示,可以看到,背景图像只是沿着水平方向平铺了。



图5.19 水平方向平铺背景图像的效果





3. 同时设置背景图像和背景颜色


在CSS中还可以同时设置背景图像和背景颜色,这样背景图像覆盖的地方就显示背景图像,背景图像没有覆盖到地方就按照设置的背景颜色显示。例如,在上面的body元素CSS设置中,增加一条规则:

background>color:#3399FF;

这时效果将如图5.20所示。该文件请参考本书光盘中的“第5章/图像/repeat-image.htm”。

这个技巧非常有用,大家看到图5.20中的背景色的过渡非常自然,这是因为背景颜色正好设置为背景图像中最下面一排像素的颜色,这样可以制作出非常自然的渐变色背景。而且可以保证,无论页面多高,颜色都可以一直延伸到页面的最下端。

如图5.21所示的是CSS禅意花园网站的第158号作品,可以看到这个非常漂亮的网页的背景色,正是使用这种方法制作出来的。



图5.20 同时设置背景图像和背景颜色



图5.21 CSS禅意花园的158号作品效果图

其上部使用一个水平方向平铺的图像背景,下面则是整体一致的背景颜色,如图5.22所示。



图5.22 隐藏页面其他内容后的效果





4. 背景样式属性的简写


就如同font、border等属性在CSS中可以简写一样,背景样式的CSS属性也可以简写。例如下面这段样式,使用了3条CSS规则。

body{ background>image:url(bg>grad.gif); background>repeat:repeat>x; background>color:#3399FF; }

它完全等价于下面这条CSS规则。

body{ background: #3399FF url(bg>grad.gif) repeat>x; }


注意

属性之间用空格分隔。本书后面的章节中将主要使用这种简写的形式。





5.2.3 标题的图像替换


上一节中曾经讲到,由于文字的显示字体依赖于访问者的计算机系统情况,因此在使用字体的时候要特别谨慎,防止使用大多数浏览者都没有的字体。这给网页设计带来了很大限制,特别是对于中文网页的设计。英文字母的数量很少,一般的计算机操作系统中都配置有大量英文字库,所以字体很丰富。而中文的汉字数量很大,每一种字体的字库文件大小都远远大于英文字库文件,导致在一般人的计算机上中文字体非常有限,仅有很基本的宋体、黑体等几种字体。





1. 标题的图像替换


对于正文字体,通常在几种基本的字体中选择即可,而对于标题文字,如果仍然使用这几种最基本的字体,就会影响网页的美观。因此,设计师通常使用图像代替文本的方法来设置标题。

为了美观的要求,需要使用图像来代替文本,然而从另外的角度考虑,为了便于搜索引擎理解和收录网页,也为了以后维护的考虑,把图像直接以<img>标记的方式嵌入到网页中,也不是一个好办法。

因此,一些CSS设计师发明了“图像替换”的方法来解决这个问题。其核心思想是使HTML中的文字仍以文本形式存在,便于维持页面的内容和结构完整性,然后通过CSS使文字不显示在页面上,而使图片以背景图像的形式出现,这样访问者看到的就是美观的图像了。

如图5.23所示的是CSS禅意花园中的198号作品,可以看到这里的标题显然用文本是不可能制作出来的,只有用图像才能产生这样的效果。



图5.23 CSS禅意花园的198号作品

其中的每一个标题,都对应一个图像文件,如图5.24所示。



图5.24 标题对应的图像

下面就来实际演示一下图像替换的具体方法。仍以图5.19所示的网页为基础,通过使用图像替换的方法,使标题看起来更美观,而且不依赖于访问者的字体文件。

①首先准备标题图像,基于刚才的渐变色的背景,制作如图5.25所示的图像,这个图像的高度是60像素。



图5.25 制作一个标题背景图像

②在HTML代码中的h1标题内部加入一对<span></span>标记。

<h1><span>Head Line</span></h1>

③设置h1的CSS属性,将上面制作好的图像作为h1的背景图像,并设置为不平铺,并给出高度60像素。

h1{ background:url(bg>h1.gif) no>repeat; height:60px; }

④将span元素通过display属性,设置为不显示,目的是把原来文本显示的文字隐藏起来。

h1 span{ display:none; }

这时效果如图5.26所示。这时可以看到原先的文字已经由图像代替了。该文件请参考本书光盘中的“第5章/图像/header-image-1.htm”。



图5.26 图像替换的效果





2. 标题图像与背景融合


如果仔细观察图中框线圈起来的部分,可以发现这个标题图像并没有非常好地与背景融合。如果页面的背景是单一的颜色,就不会出现这个问题,因为标题的背景图像使用同样的背景色,可以保证标题的图像融合于页面的背景之中,而这里的页面背景是渐变色,如果页面背景的渐变色和h1标题图像的渐变色在竖直方向的位置没有完全匹配,就会出现图中的这个问题。

解决这个问题的方法是,在图像处理软件(如Fireworks)中,先把标题图像的背景色设置为单一颜色,这种颜色是介于渐变色两端的中间色,如图5.27左图所示。然后再导出为透明的GIF格式图像,而图像中与背景色接触的位置,因消除锯齿,会保留一点点蓝色的痕迹,如图5.27右图所示。



图5.27 改进背景图像

这时,用新的标题背景图像替换原来的标题背景图像,代码不需要修改,效果如图5.28所示。



图5.28 改进后的效果

这时就不存在刚才的生硬的颜色边界了。这种方法是经常用到的,例如在禅意花园的158号作品中使用了如图5.29所示的一些标题图像。



图5.29 禅意花园的158号作品中用到的标题背景图像

可以看到,它们的周围都带有一些“毛刺”,这就是为了使图像与背景融合而产生的背景透明的图像。





3. 标题的对齐方式


如果希望标题能够居中或者右对齐,那么该怎么办呢?这时可以使用background-position属性。

例如,希望标题右对齐,可以在h1的CSS中增加如下设置。

background>position:right;

这样,背景图像就从h1标题的最右端开始放置了,如图5.30所示。该文件请参考本书光盘中的“第5章/图像/header-image-2.htm”。



图5.30 使标题图像靠右放置

background-position的值可以为left、right、top、bottom和center,分别表示左、右、上、下和中间。

background-position属性可以设置为一个或者两个属性值。如果设置为两个属性值,它们分别用于确定水平位置和竖直位置。例如下面这段代码,表示从元素的右下角开始放置背景图像。

background>position: right bottom;

如果只设置一个值,那么缺省的那个值为center。例如下面这段代码,就表示水平方向为right,竖直方向为center。

background>position: right;

而下面的代码表示竖直方向为top,水平方向为center。

background>position: top;

此外,background-position属性也与平铺相关。它实际上指定的是平铺的起点。假设有如下CSS代码:

body{ background: white url("pendant.gif"); background>repeat: repeat>y; background>position: center; }

效果如图5.31所示,背景图像将以background-position属性确定的位置作为起点,然后按照background-repeat属性确定的平铺方式进行平铺。



图5.31 背景图像位置与平铺效果示意图

上面案例中使用的这种图像替换方法称为“FIR”(Fahrner Image Replacement)法,是由美国设计师Todd Fahrner和英国设计师C.Z. Robertson开创的。这是最早也是最容易理解的一种方法。然而由于这种方法是通过display属性把文字隐藏起来的,因此会导致非屏幕浏览器的设备无法正确表现相应的内容。这里说的“非屏幕浏览器”包括为盲人设计的阅读器,它可以通过发声的方式表现网页内容,这样被隐藏起来文字就无法正确地被读出来。

目前国内对这方面的要求还不是太高,通常不会遇到太多问题。但是国内相关的软件和设备也开始出现和应用于一些特定的人群中,因此设计师也应该对此有所了解。





4. Phark图像替换方法


除了FIR法之外,还有一种常用的图像替换方法“Phark”法,它是由Mike Rundle发明的,做法是将标题的text-indent属性设置为一个非常大的负值,例如-10000,这样这个文字实际上仍然在网页上,但是不会显示出来,其余部分和FIR法相同。这样做的好处就是,通过屏幕朗读器或软件,仍然可以正确地读出相关的文字。





5. 改进的图像替换法


但是FIR法和Phark法都存在一个缺陷,就是如果一个浏览器不支持或关闭了CSS,那么这些文字就不能显示出来了。为此,TomGlider和Levin Alexander共同发明了另一种改进的图像替换方法。这种方法的核心思想是标题标记内部,加入一对空的<span></span>标记,例如:

<h1><span> </span> Head Line </h1>

这对<span></span>标记没有实际的语义作用,仅作为一个CSS“钩子”,用于设置背景图像。然后通过对span元素使用绝对定位,将图像覆盖在文字的上面,这样即使关闭了CSS,仍然可以看到文本标题。这个方法的缺陷是,标题图像不能使用透明的图像,否则会露出现文字,因此上面制作的实例就不能使用这种方法实现。

事实上,“图像替换”的方法还有很多,读者如果有兴趣,可以到互联网上寻找更多的相关学习资料,在这里就不再进一步深入讲解了。





5.2.4 为图像增加投影效果


在图像处理软件中,为图像添加阴影效果是非常容易实现的功能。为图像添加阴影可以使图像看起来精致很多。但是如果一个网站上需要放置很多图像,每个图像都要先在图像处理软件中增加阴影,就会很费时费力,而且如果以后要去掉阴影效果,又要重新处理图像。因此,如果能够不改变图像本身,而通过CSS实现阴影效果,将是非常实用的一个技术,以后需要调整样式时不用改动图像,也很方便。图5.32中所示的就是一个图像的阴影效果。



图5.32 给图像增加阴影效果

这里介绍的制作阴影的方法是基于墨西哥设计师Sergio Villarreal在2004年2月和4月发表在电子杂志A List Apart 172期和178期上的两篇文章形成的。如果读者有兴趣,可以到A List Apart网站查阅相关的资料。





1. 基本方法


显然我们的目标不是针对某个固定大小的图像增加阴影,而是可以对不同大小的图像都适用。制作阴影效果的基本方法如下。

①首先制作一个如图5.33所示的图像,命名为bottom-right.gif。



图5.33 准备一个比较大的阴影图像


经验

这个图像的大小可以随意确定,但是如果图像大小大于这个阴影图像的大小,阴影就不能完全显示。因此,这个图像应该比将来要设置的图像大一些。



②在HTML代码中的img元素外面增加一个div元素,并设置该div的CSS类别为shadow。

<div class="shadow"><img src="cup.gif"/></div>

③在shadow中设置背景图像,并把原来放在图像中设置的浮动属性移动到div中。

.shadow{ background: url(images/bottom>right.gif) no>repeat bottom right; float:left; }

④由于div设置为向左浮动,因此它的大小会自动与里面的图像一样大,这样阴影就被图像遮盖住了。可以通过设置margin,将图像向左和向上各移动6像素,这正是阴影的宽度。

img{ border:1px #000 solid; padding: 4px; margin:>6px 6px 6px >6px; }

⑤这时效果如图5.34所示。可以看到,这个带有阴影的图像就产生了。该文件请参考本书光盘中的“第5章/图像/shaow-1.htm”。



图5.34 最简单的办法实现的阴影效果

这种方法非常简单,但读者要注意,图5.34中使用的是Firefox浏览器。如果用IE 6,效果就如图5.35所示。



图5.35 在IE中的错误显示效果

可以看到,图像中左上部分超出div盒子的部分被剪裁掉了,因此这种方法在IE 6中是不适用的。





2. 使用滑动门技术


可以使用滑动门技术来解决这个问题。具体的方法如下。

①现在再准备一个部分透明的GIF格式图像,图像的上面和下面各有6像素的白色不透明区域,其余区域均为透明色,如图5.36所示,命名为top-left.gif。



图5.36 准备另一个背景图像

②改造HTML代码,在图像标记的外面套一层<div>标记。

<div class="shadow"> <div><img src="cup.gif"/></div> </div>


注意

写代码的时候<div>与<img>标记之间不要有空格和换行,否则IE浏览器会为空格字符设置空白的空间。



③分别将两个图像设置为两个div的背景图像,外面的div用原来的背景图像,从右下角对齐,代码如下:

.shadow { float:left; background: url(images/bottom>right.gif) no>repeat bottom right; }

④里面的div使用新的背景图像,从左上角对齐,代码如下:

.shadow div { background: url(images/top>left.gif) no>repeat; padding: 0 6px 6px 0; }

⑤然后设置图像的基本属性,代码如下:

.shadow img { border: 1px solid #000; padding: 4px; }

这时在IE中的效果如图5.37所示,就可以得到希望的效果了。在Firefox中当然也同样可以得到正确的效果。该文件请参考本书光盘中的“第5章/图像/shaow-2.htm”。



图5.37 使用新的方法在IE中也可以正确显示

对于这种方法的原理,请读者参考如图5.38所示的示意图。



图5.38 原理示意图

图5.38中一共有3个矩形,分别代表两个div和一个图像内容。实际上两个div的大小是一样的,它们的背景图像重叠在一起,上面的div的背景图像中不透明的白色部分遮住阴影的一部分,就产生了最终的效果。

之所以这种方法叫做“滑动门”技术,是因为两个重叠的背景图像共同组成最终的效果,对于不同大小的图像,这种方法可以自动适应(在不超过最大面积的前提下),如图5.39所示。在本书后面的章节中,还会多次遇到滑动门技术,它可以解决很多使用其他常规方法不容易解决的问题。



图5.39 滑动门的含义示意图





3. 柔边阴影效果


到这里,阴影效果已经比较完善了,但是还有可以改进的地方,仔细观察图5.40中阴影端点处的效果,显然左图的效果要比右图柔和、自然得多。而前面介绍的方法,只能制作出右图中的效果。



图5.40 柔边的阴影与硬边阴影

如果把左图放大观察,效果如图5.41所示。



图5.41 放大观察柔边效果

下面讲解如何实现图5.41中的柔边效果。要实现图中左图的效果,需要重新准备图像,替换刚才的top-left.gif文件。

刚才使用的是GIF格式的图像,由于这种格式是很多年前制定的标准,因此不支持半透明的效果,即Gif图像中的像素,或者完全透明,或者完全不透明,不能实现半透明效果。

因此,必须要使用新的图像文件格式——PNG格式,它支持半透明效果,又称为“alpha”透明。具体的操作步骤如下。

①在Fireworks或者Photoshop中,先把画布设置为一种深颜色,这样便于制作时看清楚渐变的效果。然后制作出如图5.42左图所示的效果,上面和左面各有一条白色羽化边界的横条和竖条,注意过渡要均匀。然后把画布的颜色设置为无色,在软件中看到效果应该如图5.41右图所示,也就是上边和左边是不透明的白色,然后柔和地过渡到完全透明。



图5.42 制作半透明的PNG格式图像

②导出为PNG格式的图像。注意在导出时,除了要选择PNG格式之外,还要选择正确的透明模式,应选择“Alpha透明度”选项,如图5.43所示。不要选择“索引色透明”,索引色透明就是GIF的透明方式。



图5.43 在Fireworks中导出为Alpha透明的PNG格式

③导出为top-left.png文件以后,把CSS中原来的top-left.gif改为top-left.png就可以了。注意要用Firefox或者IE 7来查看效果。效果应该如图5.40左图所示。该文件请参考本书光盘中的“第5章/图像/shaow-3.htm”。





4. IE 6兼容的方案


遗憾的是,IE 6并不支持PNG格式的Alpha透明,直到IE 7才支持。那么应该如何让IE 6实现所需的效果呢?这里给出两种解决方案。

(1)方案一

首先介绍第一种方案,它比较省事但效果不如第2种方法。该文件请参考本书光盘中的“第5章/图像/shaow-4.htm”。还是以上面这个例子来讲解。已经准备好了top-left.gif和top-left.png这两个文件,修改如下内层div的样式:

shadow div { background: url(images/top>left.gif) no>repeat; padding: 0 6px 6px 0; }

改为:

shadow div { background: url(images/top>left.png) no>repeat !important; background: url(images/top>left.gif) no>repeat; padding: 0 6px 6px 0; }

在代码中出现了两条对background属性的设置规则,前一条使用PNG格式的图像,后一条使用GIF格式的图像。在前一条规则的最后加了一个“!important”指令,它的含义是提升这条规则的优先级。按照默认的优先级规则,如果两条CSS规则的特殊性相同,那么后面的设置覆盖前面的设置,而这里加上“!important”指令以后,它就不会被后面设置覆盖了。

在Firefox等对CSS规范支持完善的浏览器中,都支持这条指令,因此都会使用PNG格式的图像作为背景。IE 6不支持这条指令,因此在IE 6中后一条设置会覆盖前一条设置,就会用GIF格式图像作为背景图像了。

这样使用IE 6的访问者会看到硬边阴影效果,而使用IE 7和Firefox的浏览者看到的则是柔边的阴影效果。

(2)方案二

如果要在IE 6中也显示出柔边的阴影效果,就需要用到IE专用的一套CSS滤镜了。这些滤镜都不是CSS规范中定义的,只是IE 6自己扩展的,因此一般情况下,做网页都不使用它们。但是在这里,可以用它来解决上面的问题。该文件请参考本书光盘中的“第5章/图像/shaow-5.htm”。

具体方法是,保留前面设置的样式,然后在<style></style>的后面再增加一段样式,代码如下:

<!>>[if gte ie 6]> <style type="text/css"> .shadow div { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src="images/top>left> 2.png",sizingMethod=’crop’); background:none; /*如果必要时可以增加这条规则:width:1px;*/ } </style> <![endif]>>>

可以看到,<style></style>前后各有一个语句,它们称为“条件注释”,其作用是当浏览器是IE,并且在IE 6以上,里面内容就会有效。也就是说,增加的这段样式只有在IE 6以上版本才有效,其他浏览器都会忽略掉这段代码,因此这段代码不会影响在Firefox中的显示。

在IE 6中,将使用这段代码中的样式,其中共有两条CSS规则。第一条的作用是使用IE专有的滤镜,装入Alpha透明的PNG图像;第二条的作用是把前面设置的背景图像隐藏。


经验

理论上说,这样修改代码以后,在IE中就应该可以出现柔边效果的阴影了。但是本书测试的结果发现仅这样做,还是无法显示出正确的效果,PNG图像并不会显示出来。经过多次试验以后,发现有两个地方会导致上述方法失效,需要读者特别注意。

(1)PNG格式本身包括不同的类型,有8位的、24位的和32位的3种。在前面制作Alpha透明的PNG时,通常为了减小文件体积,使用8位的PNG格式,然而IE 6的滤镜必须使用32位的PNG图像,才能实现透明的效果。因此导出时,一定要选择32位的PNG格式(24位的PNG格式不支持透明)。

(2)如果放置半透明PNG图像的div没有给出明确的高度或宽度中的一个,有可能不会显示该图像。

因此,读者在操作时,如果发现不显示Alpha透明PNG,就可以将上面的代码中增加下面这条样式,这样就可以正确显示了。

width:1px;

以上两条结论是本书作者自己实验得出的结果,没有在相关资料中查到有关的说明。如果读者有进一步的结论,欢迎进一步讨论。



实际上,Alpha透明的用处是很大的。例如上面的网页中,页面背景为白色,如果将页面背景换成其他颜色,GIF格式阴影图像的效果就差,而如果使用Alpha透明的PNG格式阴影图像,无论页面背景是什么颜色,都可以很好地显示阴影效果。





5.3 本章小结


本章针对文字和图像的样式进行了比较深入的讲解。读者应该在实际制作的过程中把握两方面的要点。一个是不同样式属性的设置方法,例如关于字体的各种属性,读者都需要把这些属性的名称记熟;另一点是在设置每一个属性的时候,都要把样式放在整体布局的大环境之中,充分理解盒子模型、浮动和定位等重要布局原理。





Chapter 6




第6章 链接与导航


在掌握了CSS布局的基本方法和原理之后,接下来的几章将针对页面中非常重要的部分“链接与导航”进行专门的介绍。本章对链接本身以及通常用于网页导航的HTML结构进行介绍。在后面的章节中再分专题分别讲解。





6.1 丰富的超链接特效


超链接是网页上最普通不过的元素,通过超链接能够实现页面的跳转、功能的激活等,因此超链接也是与用户打交道最多的元素之一。本节主要介绍超链接的各种效果,包括超链接的各种状态、伪类和按钮特效等。





6.1.1 动态超链接


在HTML语言中,超链接是通过标记<a>来实现的,链接的具体地址则是利用<a>标记的href属性,代码如下所示:

<a href="http://www.artech.cn">链接文本</a>

在默认的浏览器浏览方式下,超链接统一为蓝色并且有下划线,被点击过的超链接则为紫色并且也有下划线,如图6.1所示。



图6.1 普通的超链接

这种最基本的超链接样式现在已经无法满足广大设计师的需求。通过CSS可以设置超链接的各种属性,而且通过伪类别还可以制作很多动态效果。首先用最简单的方法去掉超链接的下划线,代码如下所示:

a{               /* 超链接的样式*/ text>decoration:none;/* 去掉下划线*/ }

此时的页面效果如图6.2所示。无论是超链接本身,还是点击过的超链接,下划线都被去掉了,除了颜色以外,与普通的文字没有多大区别。



图6.2 没有下划线的超链接

仅仅通过设置标记<a>的样式来改变超链接,并没有太多动态的效果,下面来介绍利用CSS的伪类别(Anchor Pseudo Classes)来制作动态效果的方法,具体属性设置如表6.1所示。

表6.1 可制作动态效果的CSS伪类别属性




注意

CSS就是通过以上4个伪类别,再配合各种属性风格制作出千变万化的动态超链接的。这里必须指出几点要特别注意的问题。

(1)对于这4个伪类别,要注意它们的声明顺序。例如,为了使平常状态超级链接取消下划线,而在鼠标指针经过时出现下划线,可以如下设置:

a:link, a:visited {text>decoration:none;} a:hover, a:active {text>decoration:underline;}

但是如果交换上面两行代码的顺序,对鼠标指针经过时的设置将不会产生效果。这是由于前面讲过的“层叠”的原因,上面的这些CSS规则具有同样的特殊性,因此后面的规则将覆盖前面的规则,要按照上面的顺序来进行设置。

(2)a:link与a设置的都是链接在没有鼠标指针经过时的效果,那么它们是否完全等效呢?通常情况下二者是没有区别的,但是严格来说,在个别情况下二者有所区别,在一个a标记没有设置跳转地址(即href属性)时,如果设置a:link则无效,而设置a则仍然有效。在实际工作中,经常使用:

a, a:visited {text>decoration:none;}

而不用:

a:link, a:visited {text>decoration:none;}

(3)当前激活状态“a:active”一般被显示的情况非常少,因此很少使用。因为当浏览者单击一个超链接后,焦点很容易就会从这个链接上转移到其他地方,例如新打开的窗口等,此时该超链接就不再是“当前激活”状态了。因此,通常无需设置a:active的样式。





6.1.2 按钮式超链接


除了简单的文字颜色、下划线之外,对链接还可以设置各种属性,产生丰富多彩的效果。例如很多网页上的超链接都制作成各种按钮的效果,这些效果大都采用了各种图片。本节仅通过CSS的普通属性来模拟按钮的效果,如图6.3所示。

本案例文件位于本书光盘“第6章\01\button-style.htm”。



图6.3 按钮式超链接

①首先建立最简单的菜单结构,本例直接采用<a>标记排列的形式,代码如下所示:

<body> <a href="#"> Home </a> <a href="#"> Contact Us</a> <a href="#"> Web Dev</a> <a href="#"> Web Design</a> <a href="#"> Map </a> </body>

此时页面的效果如图6.4所示,仅是几个普通的超链接堆砌。



图6.4 普通超链接

②然后对<a>标记进行整体控制,同时加入CSS的3个伪属性。对于普通超链接和点击过的超链接采用相同的样式,并且利用边框的样式模拟按钮效果。而对于鼠标指针经过时的超链接,相应地改变文字颜色、背景色、位置和边框,从而模拟出按钮“按下去”的特效,样式代码如下:

<style> a{ /* 统一设置所有样式*/ font>family: Arial; font>size: .8em; text>align:center; margin:3px; } a:link, a:visited{ /* 超链接正常状态、被访问过的样式*/ color: #A62020; padding:4px 10px 4px 10px; background>color: #ecd8db; text>decoration: none; border>top: 1px solid #EEEEEE; /* 边框实现阴影效果*/ border>left: 1px solid #EEEEEE; border>bottom: 1px solid #717171; border>right: 1px solid #717171; } a:hover{ /* 鼠标经过时的超链接*/ color:#821818; /* 改变文字颜色*/ padding:5px 8px 3px 12px; /* 改变文字位置*/ background>color:#e2c4c9; /* 改变背景色*/ border>top: 1px solid #717171; /* 边框变换,实现“按下去”的效果*/ border>left: 1px solid #717171; border>bottom: 1px solid #EEEEEE; border>right: 1px solid #EEEEEE; } </style>

上面的样式代码中首先设置了<a>标记的整体样式,即超链接所有状态下通用的样式,然后通过对3个伪属性的颜色、背景色和边框的修改,模拟了按钮的特效。最终显示效果如图6.5所示。



图6.5 最终效果





6.1.3 CSS控制鼠标指针


在浏览网页时,通常看到的鼠标指针的形状有箭头、手形和I字形,而在Windows环境下实际看到的鼠标指针种类要比这个多得多。CSS弥补了HTML语言在这方面的不足,通过cursor属性可以设置各式各样的鼠标指针样式。

cursor属性可以在任何标记里使用,从而可以改变各种页面元素的鼠标指针效果,代码如下所示:

body{ cursor:pointer; }

pointer是一个很特殊的鼠标指针值,它表示将鼠标设置为被激活的状态,即鼠标指针经过超链接时,该浏览器默认的鼠标指针样式在Windows中通常显示为手的形状。如果在一个网页中添加了以上语句,页面中任何位置的鼠标指针都将呈现手的形状。除了pointer之外, cursor还有很多定制好了的鼠标指针效果,如表6.2所示。

表6.2 cursor定制的鼠标指针效果




经验

表6.2中的鼠标指针样式,在不同的机器或者操作系统显示时可能存在差异,读者可以根据需要适当选用。很多时候,浏览器调用的是操作系统的鼠标指针效果,因此同一用户浏览器之间的差别很小,但不同操作系统的用户之间还是存在差异的。





6.1.4 浮雕背景超链接


除了背景颜色和边框等传统CSS样式外,如果将背景图片也加入到超链接的伪属性中,就可以制作出更多绚丽的效果。本例通过超链接背景图片的变换,实现浮雕的效果,如图6.6所示