|
《CSS那些事儿——掌握网页样式与CSS布局核心技术(含DVD光盘1张)》
作者：林小志
本书QQ群：82991297
作者邮箱：linxz@qq.com
在china-pub上购买此书
内容简介
本书专注于CSS技巧实例的讲解，由浅入深地分析了CSS样式在布局时所需要理解的原理。放弃到处可见的基础知识、网络中能随意搜索到的hack技巧，侧重原理分析，拓展读者使用CSS布局的思维方式，通过本书的阅读读者将会了解到使用CSS布局的强大功能。
全书以传达CSS布局思维为中心，通过页面中的文字、图片、表格、表单等常见元素的处理及各种页面布局方式的使用，使读者能深入了解到如何在页面中更好地运用CSS布局。尤其是在页面布局的部分中，全面分析了多种布局方式，着重分解了两列等高和三列等高的几种方式，并相应说明了等高布局的优缺点。
随书所附光盘包含多媒体教学及实例源文件。
无论是CSS布局的初学者还是具有一定水准的读者，阅读本书之后将会发现，原来CSS样式居然是这么好玩的东西。本书适合网站开发人员、网页设计人员参考学习，同时也适合作为相关培训机构的教材。
前言
很多人认为学习CSS样式很难，无法彻底掌握，总是在各个浏览器中出现一些异常的现象，从而放弃了继续学习这比较可爱的CSS。在本书为各位读者介绍更多的CSS方面的技巧及实战经验之前，在此呼吁各位读者：耐心地学习CSS，掌握好CSS的本质原理后，你将会发现原来CSS真的很好玩。
寓教于乐这话真的没错，但很遗憾本书无法达到这样的效果，只能将CSS的本质原理进行细致的分析，希望读者能从根本去了解。本书不会像其他书籍一样，使用某一章节介绍关于CSS hack的知识，这类资料只要在网络上搜索“CSS hack”关键词后，将会出现一大片的信息；本书也不会像其他书籍一样将概念性的内容放入太多，因为本书的宗旨是不让一切概念性的资料、网络上随处可见的资料浪费纸张，浪费读者的金钱和时间。
一直以来很喜欢一句话：“授人以鱼不如授人以渔”，对于CSS样式的学习也是如此，让代码浪费纸张不如去看他人网站的源代码，只有掌握了CSS样式的本质，了解CSS样式是如何实现页面布局、如何完成页面中一些比较好玩、比较实用的效果后才能得心应手地使用CSS样式。
读者对象
全书的侧重点在于实例部分，只用了小部分章节介绍CSS基础概念性的内容，因此如果你是还未入门，刚刚接触CSS的新手，在阅读本书时或许会感觉稍微有点吃力，不容易消化。但如果已经掌握了一点点CSS的基础，那么阅读本书之后将会得到一个质的飞跃。
无论你是菜鸟还是老鸟，相信本书中的实例分解都将会为你带来有用的信息，让你的能力得到一定提升。
本书并非是收藏品，更不是字典，只是通过实例分析CSS样式的本质原理，引发思维方式的书籍。如果阅读本书的读者是把本书当作小说来对待的，建议放弃购买本书。
本书主要内容
本书主要分为6个部分，讲解由浅入深，分为入门篇、布局篇、元素篇、应用篇、实战篇及写在最后的话。
入门篇中主要是介绍了CSS样式的基本属性及其工作环境。在CSS样式的基本属性方面不仅介绍了CSS样式中的几种选择符（也称选择器）的使用，并且有详细的说明；在CSS样式的工作环境中主要介绍了如何脱离所见即所得的软件，而使用代码编辑方式，并附带介绍了几种不错的辅助开发工具。
布局篇可谓本书的重点，着重介绍了几种常见的利用浮动和定位布局的结构，并介绍了负边距的利用，还分析了两列等高和三列等高布局结构的实现方式及优、缺点。掌握页面的布局方式将能更好地控制页面，希望读者对于该篇的内容能详细阅读并实践。
元素篇中分别介绍了文字、图片、列表、表格、表单等几个页面中常见元素的处理方式及实现一些特殊效果的方法。针对每个元素不同的功能分别以相关的实例辅助说明，突出介绍该元素在页面中是如何表现的。
应用篇的内容偏向于思维拓展，通过几种常见的网页设计风格及网站内容需求，分别介绍了滤镜、选项卡、怪异导航等实用、好玩的效果。
实战篇中仅以设计花哨的活动页面作为实例详细分解，从中能了解到合理使用CSS样式如何快捷完成一个XHTML结构合理的页面。
写在最后的话主要是分享如何提高编码能力的方法及一些比较不错的网络资源。
书中的内容并不是非常多，但实用性较强，通读本书并掌握相关知识后，读者能够获得全新的理念及CSS布局的方式。
写作约定
本书主要是以实例为主，读者可以跳跃式地阅读，但对于没有CSS基础知识的读者，建议先阅读本书第一部分的内容，循序渐进才是提升能力的最好方法。
鉴于目前国内的浏览器市场分析，书中所有的实例仅以Firefox和Internet Explorer 6/7这3个浏览器为基准，不排除在个别浏览器中会有所差异。因为本书是为提高思维而写的，而不是提供完全可以直接使用的代码而写的。当然，有兴趣的读者也可以在Opera或者Apple Safari等浏览器中查看页面效果，你将会发现原来书中的代码不仅在Firefox和Internet Explorer 6/7这3个浏览器中是正确的，在其他浏览器中也是没问题的。
作为CSS布局实例分解的书籍，大量的XHTML和CSS代码是必不可少的，但由于篇幅有限，不能把书中每个示例的所有代码都放置在书中，因此示例代码基本上只显示两部分：
XHTML结构代码，即网页中<body></body>内的代码；
CSS样式代码，即网页中<style type="text/css"></style>标签内的代码。
致谢
经过几年对CSS的接触，期间有不少朋友的提示和帮助，尤其是北京的PR（彭荣），因为他的影响我才会去学习CSS，更要感谢一直在帮助我、支持我的良师益友：Tyrone（何传烽）、飘飘（谭开拓）、twinsen（梁璟彪）、ghost（张癸鑫）、tommy（范俊豪）、Caspar（张建斌）、果子（司马静）、Jasmin（江思敏）、昔羽（黄锡煜）、一七（朱垒）等，还有默默支持着我的朋友们：颜喆明、小秦、刘敏、陈一飞、温从成、姜日豹、陈洪延，徐声坤，以及鼓励我写完这本书的呆呆虫（朱斌）和追疯一族、内参群的所有成员，在此对你们的支持和帮助表示感谢。
本书的完成少不了样吧（朱印宏）老师的悉心指导和缜密修改，在我最迷茫甚至将要放弃写作时，是朱老师的鼓励和引导让我奋勇前进。同时还要感谢出版社所有付出努力的编辑及其他相关人员。
最后还要感谢家人对我漂泊在深圳打工的支持和鼓励，尤其是我亲爱的老妈。
告诉我们对本书的看法
本书主要是笔者工作中所得到的心得体会，但由于水平认知有限，书中的错误难以避免。希望阅读本书后的读者不吝赐教，提出有关本书的宝贵意见和建议。
目录
第1部分 CSS入门篇
第1章 CSS入门篇 1
CSS文件是一种文本文件，可以使用任何一种文本编辑器对其进行编辑。在任何一个页面中都可以见到CSS的身影，也就是说任何一个页面都离不开CSS，少了CSS的页面将会变得简单。
1.1 第1章 花落知多少——CSS正传 2
视频：光盘\视频\认识CSS
1.1.1 CSS的作用 3
1.1.2 CSS的基本结构 4
1.1.3 CSS中的注释 5
1.1.4 CSS的简写 6
1.2 网页勾魂八技——掌握CSS选择符 10
视频：光盘\视频\掌握选择符
1.2.1 通配符选择符 10
1.2.2 类选择符 11
1.2.3 包含选择符 12
1.2.4 子选择符 13
1.2.5 相邻选择符 14
1.2.6 属性选择符 17
1.2.7 ID选择符 20
1.2.8 选择符的组合关系 21
1.3 莫须有？——伪类与伪对象 23
视频：光盘\视频\伪类与伪对象
1.3.1 伪类 23
1.3.2 伪对象 24
1.4 剪不断理还乱——善处选择符之间的关系 25
视频：光盘\视频\善处选择符之间的关系
1.4.1 选择符的覆盖 25
1.4.2 选择符z的继承 26
1.4.3 选择符的权重值优先级别 27
1.5 英雄救美——让CSS拯救HTML 29
1.5.1 把CSS引入到HTML页面中 30
1.5.2 样式表的规划与维护管理 31
1.6 小结 32
第2章 一亩三分地——CSS的工作环境 33
在对于CSS的兼容性讨论中，永恒的话题就是浏览器的兼容性问题。虽然今天，IE、Firefox、Opera、Safari等主流浏览器都支持CSS，但它们仍在符合标准的程度上出现无数的差异。
2.1 CSS的显示环境——浏览器 34
视频：光盘\视频\浏览器
2.2 CSS的处理环境——编辑器 35
视频：光盘\视频\编辑器
2.2.1 语法高亮 36
2.2.2 公共配置目录 38
2.2.3 模板文件 39
2.2.4 快捷键的设置 40
2.2.5 窗口半透明及窗口置顶 40
2.2.6 代码辅助设置 41
2.2.7 用户工具 41
2.2.8 自动完成 44
2.2.9 剪辑文本窗口 46
2.2.10 对编辑器的小结 48
2.3 CSS的辅助处理——周边插件 48
视频：光盘\视频\辅助插件
2.4 小结 57
第2部分 CSS页面布局篇
第3章 简单也是复杂的——从一个简单页面布局说起 59
好的地基是盖大楼的根本，好的基础是深入学习的前提，掌握CSS页面布局也是学好CSS知识的基础，让我们先从一个简单的布局开始吧！
3.1 盒模型介绍 60
视频：光盘\视频\认识盒模型
3.1.1 认识盒模型 60
3.1.2 什么是DOCTYPE 64
3.1.3 DOCTYPE的类型 64
3.1.4 IE浏览器=邮局的纸盒邮包 67
3.1.5 对盒模型的小结 74
3.2 网页布局的设计原则 75
3.3 最简单的页面 76
视频：光盘\视频\简单的页面
3.3.1 这是一个网页？ 76
3.3.2 容器居中显示 77
3.3.3 容器居中文本居左显示 79
3.3.4 容器居右显示 80
3.4 小结 82
第4章 提纲挈领——两列页面布局 83
两列的布局结构是页面中最常用的结构，尤其在产品展示及新闻内容页面最为常见，需要读者多通过实践去体会。
4.1 两列定宽结构 85
视频：光盘\视频\两列定宽定高的布局
4.2 两列自适应结构 90
视频：光盘\视频\两列自适应的布局
4.3 单列定宽单列自适应结构 94
视频：光盘\视频\单列定宽单列自适应结构
4.4 两列等高 100
视频：光盘\视频\两列等高
4.4.1 背景模拟 100
4.4.2 负边距实现 102
4.4.3 边框模拟 105
4.4.4 其他方式 107
4.5 小结 109
第5章 更大气的三列或多列页面布局 111
多列布局的情况一般比较少见，最常见的是三列布局比，一般出现在门户类型的网站首页，也可以说是一个网站的门脸。
视频：光盘\视频\三列的页面结构
5.1 三列或多列布局与两列布局之间的微妙联系 112
5.2 两列定宽中间自适应结构 114
5.3 左侧定宽右侧及中间自适应结构 118
5.4 三列宽度自适应结构 121
5.5 三列等高 122
5.5.1 背景模拟 122
5.5.2 负边距实现 124
5.5.3 边框模拟 126
5.5.4 其他方式 128
5.6 小结 130
第3部分 CSS页面元素篇
第6章 网页文本润色技法 131
自从HTML诞生以来，其主要的作用是将信息通过页面的形式传达给用户。文本信息作为主要的传达方式之一，由以前的纯文本演变至如今多姿多彩的文本，其主要功劳归功于CSS样式。
6.1 文字基本样式 132
视频：光盘\视频\文字基本样式
6.1.1 字体设置 132
6.1.2 字形改变 135
6.1.3 文字颜色 138
6.2 段落样式 139
视频：光盘\视频\段落样式
6.2.1 首行缩进 139
6.2.2 行高调整 142
6.3 特殊效果 144
视频：光盘\视频\特殊效果
6.3.1 首字下沉 144
6.3.2 首行文字样式 145
6.3.3 文字隐藏截取 146
6.4 文字链接 152
视频：光盘\视频\文字链接
6.4.1 基础链接样式 152
6.4.2 多彩链接样式 154
6.4.3 图文链接样式 155
6.5 实例分解——新闻内容页 156
视频：光盘\视频\实例分解
6.6 小结 162
第7章 淡妆浓抹总相宜——图片的处理与美化 163
网页需要图片来装饰，任何一个页面都少不了漂亮的图片来“打扮”一下。如何合理地使用图片、优化图片将直接影响网页的性能问题。
7.1 背景图优化 164
视频：光盘\视频\背景属性分解
7.1.1 背景属性分解 169
7.1.2 CSS Sprite技巧分解 177
7.2 图文混排处理 183
视频：光盘\视频\图文混排及实例分解
7.3 实例分解——图文新闻内容页 185
7.4 小结 192
第8章 桀骜不驯的浪子——页面中的列表 193
页面制作人员为了能使网页的XHTML结构更加符合语义化，会将列表以各种各样的表现形式体现在网页中，善于合理地使用列表将会增强页面的结构性、语义性。
8.1 列表的种类 194
视频：光盘\视频\列表的种类
8.1.1 无序列表 194
8.1.2 有序列表 197
8.1.3 自定义列表 204
8.2 列表模式的导航 206
视频：光盘\视频\列表模式的导航
8.3 榜上有名，音乐榜单 213
视频：光盘\视频\榜上有名，音乐榜单
8.4 实例分解——二级菜单导航 217
视频：光盘\视频\二级菜单导航
8.5 实例分解——图文列表信息 221
视频：光盘\视频\图文列表信息
8.6 小结 225
第9章 苦乐年华——表单美容二三事儿 227
网页不仅能向用户传达信息，还能与用户“对话”，“对话”的过程主要是通过表单提交信息“告诉”网站所要了解或者想要传达的信息。良好的表单设计能与用户之间进行良好的沟通。
9.1 表单元素的特性说明 228
视频：光盘\视频\表单元素的特性说明
9.2 实例分解——登录框的制作 230
视频：光盘\视频\登录框的制作
9.3 实例分解——搜索框的制作 236
视频：光盘\视频\搜索框的制作
9.4 实例分解——反馈表单的制作 240
视频：光盘\视频\反馈表单的制作
9.5 小结 247
第10章 封闭的巴黎圣母院——走进表格的世界 249
在现实生活中，工作、学习、生活等方面都会使用表格，并且其作用也是相当强大的，它能很清晰简明地表达所需要表达的东西。随着互联网时代的发展，在网络中出现的表格也是越来越多。
10.1 表格的介绍 250
视频：光盘\视频\表格的介绍
10.1.1 以往的表格结构 250
10.1.2 正确的表格结构 252
10.2 细线表格 259
视频：光盘\视频\细线表格
10.3 隔行换色的表格 261
视频：光盘\视频\隔行换色的表格
10.4 实例分解——日历表的制作 268
视频：光盘\视频\日历表的制作
10.5 小结 272
第4部分 CSS应用篇
第11章 闲话CSS滤镜 273
滤镜并不是很新鲜的东西，但却是一个很神奇的东西。通过滤镜可以将其所涉及到的元素改变得“面目全非”，可以把图片模糊、风化等，在网页中可以帮助我们实现很多漂亮的效果。
11.1 透明的图文信息 274
视频：光盘\视频\透明的图文信息
11.1.1 实现透明效果 275
11.1.2 了解透明滤镜 277
11.1.3 解决透明滤镜带来的困惑 278
11.2 IE 6正常显示PNG-24格式的图片 281
视频：光盘\视频\ IE 6正常显示PNG-24格式的图片
11.2.1 在IE 6浏览器中正常显示PNG-24格式的图片 283
11.2.2 深入剖析PNG-24转换滤镜 284
11.3 滤镜的是与非 288
11.4 小结 290
第12章 话说tab选项卡 291
选项卡，我们也称为标签页，通过点击相应的标签名后将内容显示在固定的区域。而在网页中，我们可以以多种不同的形式表现标签页。
视频：光盘\视频\话说tab选项卡
12.1 选项卡曾经的实现方式 292
12.2 如今的选项卡模式 293
12.3 选项卡实现原理分析 294
12.4 选项卡的优化 297
12.5 实现最终的选项卡效果 298
12.6 换个思路思考选项卡 300
12.7 不同XHTML结构选项卡的对比 303
12.8 小结 304
第5部分 CSS实战篇
第13章 秀一把CSS相册 305
一个简单的相册，其中所蕴含的CSS技巧及思维并非十分简单，通过该实例，希望读者能了解如何去挖掘CSS样式的潜在能力，拓展思维，延伸CSS样式的功能。
视频：光盘\视频\秀一把CSS相册
13.1 简易相册实现思路分析 306
13.2 实现简易相册的雏形 309
13.3 简易相册成形之初 311
13.4 美化简易相册 312
13.5 实现最终效果的简易相册 313
13.6 小结 316
第14章 怪异的导航模式 317
任何一个网站不可缺少的就是导航菜单，缺少了导航菜单将会让用户在网站中迷失方向，不知道该如何去浏览网站信息。导航的重要性就犹如航海员在大海中的指南针。
视频：光盘\视频\怪异的导航模式
14.1 怪异导航曾经的实现方法 318
14.2 如今实现怪异导航的方法 319
14.3 实现怪异导航的背景图片 320
14.4 结合CSS样式调用背景图片 321
14.5 怪异导航细节优化 323
14.6 改变思路实现怪异导航 325
14.7 绝对定位方式实现怪异导航 326
14.8 又一种怪异导航模式 328
14.9 小结 330
第15章 时间紧随标题的新闻列表 331
网络提供给广大网民最大的特点某过于信息传达，更多的时候网络中出现的新闻比报纸、新闻联播、广播都要及时。专注新闻信息传达的网站少不了的是新闻列表，所谓新闻列表就是将新闻标题以列表的形式显示在网页中。
视频：光盘\视频\时间紧随标题的新闻列表
15.1 时间紧随标题的新闻列表的由来 332
15.2 时间紧随标题的新闻列表雏形 333
15.3 使用max-width实现效果 335
15.4 原理分析及最终效果 335
15.5 小结 338
第16章 幻灯片的简单模拟 339
在Microsoft PowerPoint软件中，当选择“幻灯片列表区域”中的某个幻灯片时，将会在“幻灯片内容显示区域”改变显示当前选择的幻灯片。在网页中我们可以利用这个功能将多张图片显示在一个位置，根据用户选择的“幻灯片”而变化最终要显示的内容
视频：光盘\视频\幻灯片的简单模拟
16.1 幻灯片原理分析 341
16.2 幻灯片的雏形 344
16.3 简易幻灯片的功能实现 346
16.4 小结 348
第17章 谈谈清除浮动 349
本章我们并非分析实例的运用，而是想通过文字和图片分析的方式一起了解关于清除浮动的点点滴滴。
17.1 浮动的原理 350
视频：光盘\视频\浮动的原理
17.2 清除浮动方式 356
视频：光盘\视频\清除浮动方式
17.3 小结 370
第18章 活动页面布局实现 371
活动页面最大的作用就是在某个时间段内的宣传，因此该页面的“存活”周期很短，而且为了能够吸引用户在浏览网页的时候把目光集中在页面中的重点部分，一般设计师会将页面设计得很漂亮，将采用很多图片之类素材。
视频：光盘\视频\活动页面布局实现
18.1 结构分析 373
18.2 模块分析 375
18.3 图片优化 379
18.4 细节优化调整 383
18.5 小结 386
第6部分 写在最后的话
附录A 怎么提高自身编写代码的能力 387
附录B W3C的CSS验证是什么 393
附录C 网络资源分享 399
在china-pub上购买此书
本文链接：http://www.blueidea.com/news/book/2009/7129.asp 
出处：蓝色理想
责任编辑：bluehearts
|
