本书针对初、中级读者,特别是针对入门级读者。书中包含了经过精心筛选的学习CSS必须要了解和掌握的所有内容。全书共包含60多个练习,加上配套
光盘中提供的完整的练习文件,帮助读者在实践中学习和掌握CSS的原理和技巧。
本书从回顾CSS的基本知识开始,深入讲解如何构建引人注目的导航和页面布局,同时示范如何进行页面排版,如何巧妙地使用颜色、背景和空白。再通过真实的项目让你体验到创建网页的过程。一步一个台阶!
本书面向初级和中级CSS学习者和使用者,也适合广大
网页设计人员和爱好者阅读。
本书配套光盘包含了课堂验证用的练习文件和QuickTime格式的讲座视频及本书附录内容。
译者序
前言
第1章CSS入门
11为什么需要这本书
111本书的读者对象
112本书涵盖的内容
113本书的目标
12CSS是什么
121可以把CSS比作衣服
122虽然简单但很强大
13为什么使用CSS
131标记更容易维护
132网页文件更小
133访问网站的速度更快
134有助于搜索引擎优化
14编写CSS
141纯文本编辑器
142Style Master
143TopStyle
144Dreamweaver
第2章理解CSS
21回顾XTHML
22CSS术语
23练习1向样式表中添加规则
24练习2添加选择符
25练习3应用多个声明
26样式表的类型
261嵌入式样式表
262外部样式表
263内联样式
27练习4嵌入一个样式表
28练习5导入一个外部样式表
29练习6导入多个样式表
210练习7链接到外部样式表
211管理样式表
2111创建一个样式表,将它用于
多个页面
2112使用可组合的样式
2113使用模块化的样式
2114为什么要坚持使用外部
样式表
第3章选择符与层叠
31理解选择符
311元素选择符
312ID选择符
313类选择符
314后代选择符
32练习1使用ID选择符
33练习2使用类选择符
34练习3使用组合选择符
35练习4使用后代选择符
36查找样式的来源
37练习5通过针对性来解决样式
冲突
38练习6使用!important声明
39练习7理解继承
310练习8显示未添加样式的文档
311练习9应用用户样式表
第4章通过CSS影响页面布局
41练习1 CSS盒模型简介
42练习2创建简单的浮动
43练习3使用浮动进行页面布局
44练习4修复分栏下沉
45练习5清除的实质
46练习6包含浮动元素
47练习7显示元素
第5章设置前景和背景属性
51练习1添加前景颜色
52练习2为元素背景添加颜色
53练习3添加背景图像
54练习4重复背景图像
55练习5定位背景图像
56练习6使用简写的背景声明
第6章排版属性
61练习1修改行高
62练习2使用字体系列
63练习3修改字形和粗细
64练习4改变字体大小
65练习5简写的font声明
66练习6水平对齐文本
67练习7垂直对齐文本
68练习8转换文本
69练习9装饰文本
第7章使用外边距和边框创建空白
和间隔
71练习1理解外边距
72练习2添加边框
73练习3应用内边距
74练习4使用负外边距
75练习5折叠外边距
第8章设计表格
81练习1设计表格和表头
82练习2为表格单元添加样式
83练习3通过类为表格列应用样式
84练习4为表格单元中的链接应用
样式
第9章设计打印样式表
91练习1为特定的媒体设计
样式表
92练习2创建打印样式表
93练习3在打印样式表中隐藏
元素
94练习4改进打印样式表设计
95练习5在打印样式表中添加复杂的
样式
96练习6创建页脚
第10章综合
101使用文本片段
102练习1设置全局样式
103练习2定义页眉和导航栏颜色
104练习3布置导航栏
105练习4分栏布局
106练习5设置内容样式
107练习6开始设计侧边栏
108练习7创建侧边栏盒子
109练习8进一步设计侧边栏
1010练习9设计表格样式
1011练习10创建页脚
附录
图书在版编目(CIP)数据
CSS Web站点设计
手册/(美)梅耶尔(Meyer,EA)著;李松峰等译—北京:机械工业出版社,20084
书名原文:CSS Web Site Design
(Web开发
技术系列丛书)ISBN 978-7-111-23644-3
ⅠC…Ⅱ①梅…②李…Ⅲ主页制作-
软件工具,CSS-手册ⅣTP39309262
中国版本图书馆CIP数据核字(2008)第028818号
Lynda Weinman为本书写的序
很多人都会购买
计算机图书自己学习,然而,令人吃惊的是,老师写书很少。令我感到自豪的是,HOT(HandsOn Training,实际操作培训或上机培训)系列图书都是由经验丰富的老师编写的,这些老师对在某一个专业领域中如何培训学生非常熟悉。在本书中,你会发现精心设计的用以帮你学习CSS(Cascading Style Sheets,层叠样式表)的练习——CSS是今天最引人注目的,同时也是一门通用的Web设计语言。
本书面向初级和中级的Web设计者、
编程人员和Web设计师,也适合希望简单快捷地学习基本的CSS属性和Web样式设计的读者。实际操作的最终目的,是使读者通过积极地参与本书内容的学习,加快掌握CSS的进程。阅读样式化文档、标记和原理是一回事,而亲自动手编写这些样式和文档并完成具有一定水准的作品则又是另一回事。我们的座右铭是“看书,跟着练,然后掌握这个主题”。我收到过不计其数的感谢信,而我们的目标就是让每一本HOT系列的图书都能够印证这一座右铭。
本书的初衷不是讲述CSS的方方面面,而是致力于构建一个坚实的
基础,以便读者能够更容易地学习更难掌握的技术。本书作者Eric和我都认为,现在书架上还缺少一本面向过程的
教程,用来教会读者核心的原理、技术以及实用技巧。
我们期待着你将反馈发送到csshot@lyndacom。如果在学习本书的过程中,你遇到了什么问题,请访问技术支持链接wwwlyndacom/books/HOT/css。
Eric和我都希望本书能够全面提升你的CSS和Web设计技能。如果我们的希望被你实现了,则说明我们完成了自己设定的任务!
——Lynda Weinman
关于lyndacom
lyndacom由Lynda Weinman和Bruce Heavin于1996年共同创办,同年,Lynda推出了革命性著作《Designing Web Graphics》。从创立至今,lyndacom已经成为图形和Web专业人员培训领域的领导者,是全世界公认的可以依赖的
教育培训机构。
lyndacom提供范围广泛的HOT系列图书,该系列图书旨在引导用户通过真实的项目,循序渐进的完成学习过程。lyndacom同时还提供种类繁多的视频形式的教程,这些教程通过CD、DVD和lyndacom在线培训资源库(Online Training Library)等形式发布。此外,lyndacom还拥有Flashforward Conference and Film Festival。
要了解与lyndacom有关的更多
信息,请访问wwwlyndacom。要了解有关Flashforward Conference and Film Festival的更多信息,请访问www
flashforwardconferencecom。
本书作者Eric AMeyer简介
Eric AMeyer自1993年起专注于Web领域,是世界最知名的HTML、CSS和Web
标准方面的专家,他写的书受到了读者广泛欢迎。他是Complex Spiral(wwwcomplexspiralcom)公司的创始人,该公司旨在帮助客户通过使用面向标准的Web设计技术节省投入和提高效率,主要客户包括苹果公司、Adobe公司和韦尔斯法戈
银行等。
他是《Eric Meyer on CSS》(New Riders出版社)和《Cascading Style Sheets: The Definitive Guide》(OReilly出版社)的作者,同时也为A List Apart、Vitamin、the OReilly Network、Web Techniques及Web Review撰写了大量文章。 Eric是CSS工作组的成员之一,并为该组织工作长达7年。而且,他还负责协调并创建W3C官方的CSS测试程序CSS Test Suite。 Eric曾受邀到各类组织做过演讲,其中包括美国洛斯阿拉莫斯国家实验室(Los Alamos National Laboratory)、纽约市公共图书馆(the New York Public Library)、康奈尔大学(Cornell University)和北爱荷华大学(University of Northern Iowa)。此外,Eric也经常在各种重要会议上发言或进行技术展示,这些会议包括An Event Apart (他也是该活动的合办者)、IW3C2 WWW系列会议、 Web Design World、the CMP Web系列会议、SXSW、the User Interface系列会议以及The Other Dreamweaver Conference等。
IW3C2,即国际万维网会议委员会,是国际万维网会议(the International Conference of World Wide Web,简称WWW会议)的组织机构。——译者注Eric AMeyer的致谢
我感谢lyndacom的全体成员,感谢他们与我共同完成了这个特殊项目的开发与制作。其中包括(很可能不限于)Garo Green、Tanya Staples、Max Smith、Lauren Harmon、Garrixk Chow、Scott Cullen、Alex Marino,当然还有Lynda Weinman。
说起来可能会令人觉得荒谬(尽管同我一样的作者们会心知肚明),写一本入门级的书对作者而言真是一个不小的挑战。正是因为来自lyndacom每一个人的支持、鼓励和指导,才使我在长时间的努力之后做好了这件事,并且没有偏离做这个项目的初衷。谢谢你们每一个人,也谢谢大家。
我还要感谢Dan Short答应在我写作初稿期间为我提供帮助;感谢Molly Holzschlag开始时为我提供的好建议。
最后,最深的感谢,还要一如既往地送给我的妻子和女儿。
如何使用本书
以下内容包括使用本书的注意事项。
本书结构
本书由几部分构成,包括循序渐进的练习、解说、注释、提示、补充内容以及视频教程。其中,每一个练习都有编号。文件名、文件夹名、代码指令、键盘快捷键以及URL(Uniform Resource Locators,统一资源定位符)都以粗体表示,以利于读者辨别。比如filenamehtm,images文件夹,文件>新建,Ctrl+单击,wwwlyndacom。
屏幕界面截图
本书中的大多数屏幕截图都取自Apple Power Mac G5计算机,因为作者主要是在Mac平台上完成设计、开发和编写工作的。本书也会提到基于
Windows系统的计算机,在涉及两个平台之间有重要差异的内容时,作者会给出提示。
CSS HOT CDROM(随书光盘)中的内容
CSS HOT CDROM中包含很多有用的资源,主要有:练习文件、视频教程和与产品
注册有关的信息。在开始实际练习之前,请先阅读以下内容,以便了解如何使用练习文件和视频教程。
练习文件
练习文件包含在CSS HOT CDROM的exercise_files文件夹中,是完成本书中练习的必要文件。所有练习文件按章进行分类,在开始每章的练习之前,读者应该把该章的文件夹复制到自己计算机的桌面上。例如,在开始学习第5章之前,应该从CSS HOT CDROM的exercise_files文件夹中把05_color文件夹复制到桌面上。
在Windows平台中,操作系统会自动给从CD上复制下来的文件添加写保护,这意味着读者不能修改文件。但是,这个限制很容易解决。要了解完整的操作步骤,请参考下面“在Windows计算机中去掉写保护”中的内容。
视频教程
在本书中,读者会发现一些指向视频教程的引用。视频教程一方面可以巩固并加强读者对书中相关概念的理解。另一方面,还会为读者提供一些有意思而且非常实用的
资料。要观看视频教程,读者必须先在计算机中
安装Apple QuickTime Player播放软件。如果本机中没有,可以到苹果公司网站wwwapplecom/quicktime上下载该播放软件。
在观看视频教程之前,请先从CSS HOT CDROM中把视频文件复制到你的硬盘中。双击想要观看的视频文件,该文件就会自动在QuickTime Player中打开。请检查计算机中的音量设置是否没有处于静音状态,以保证听到声音。
附录
附录内容包括CSS 2属性、疑难解答和技术支持信息、CSS学习资源。
在Windows计算机中去掉写保护
在默认情况下,当从DVD中把文件复制到Windows计算机中时,这些文件会设置为只读(写保护)状态。这样一来,读者将无法编辑和保存其中的练习文件。可以按照下列操作步骤修改文件的只读属性:
1打开CSS HOT CDROM中的exercise_files文件夹,将其中一个子文件夹,如05_color复制到你的桌面上。
2打开复制到你桌面上的05_color文件夹,然后选择“编辑>全选”。
3右键单击选中的文件,然后从弹出的上下文菜单中选择“属性”。
4在“属性”对话框中,单击“常规”选项卡。取消对“只读”选项的选择,以禁用对05_color文件夹中所选文件的只读限制。然后,单击“确定”按钮。
在Windows计算机中查看练习文件的扩展名
在默认情况下,在Windows计算机中看不到文件的扩展名,例如htm、fla、swf、jpg、gif或psd。不过,要想看到这些扩展名也很容易。请按照以下步骤进行设置:
1在你的桌面上,双击“我的
电脑”图标。注意:如果你(或其他人)修改了这个图标的名称,那这个图标的名称可能不是“我的电脑”。2选择“工具>文件夹选项”打开“文件夹选项”对话框。选择“查看”选项卡。
3在“高级设置”中,取消对“隐藏已知文件类型的扩展名”复选框的选定,就可以看到所有文件的扩展名了。
系统要求
Windows或Macintosh
支持CSS的Web浏览器(Internet Explorer、Firefox、Safari、Opera、Mozilla)。
文本编辑软件。
能够上网。
获取软件的演示版
如果读者想体验一下本书用到的软件的演示版,可以通过下列地址下载:
Firefox:wwwgetfirefoxcom
Bare Bones Software公司的BBEdit:wwwbarebonescom/
products/bbedit/indexshtml
CSS是一种Web标准。所以,我想先简单介绍一点与Web标准有关的背景,然后再向读者推荐这本书。
随着CSS和JavaScript的兴盛,
现代Web开发很快达到了高潮。而且,明确地将Web前端(客户端或者说浏览器)开发划分为结构层(XHTML)、行为层(JavaScript)和表现层(CSS),也是近两三年之内的事。里程碑式的事件就是
2003年5月New Riders出版社出版了Jeffrey Zeldman的那本《Designing With Web Standards》。自此以后,