作者:empty 页数:291 出版社:empty |
前言很难相信,从我写本书第1版到现在已经过了3年。在此期间,我又参与了大量网站的开发并调整了使用CSS的方式。我原计划对本书第2版进行一些小的调整, 涵盖IE 7并从整体上使内容与时代同步。但是,最终我却对前3章进行了大量改进,并且完全重写了书中剩余的内容。因此,也使原计划几周的工作量用了将近一年才完成。我所做的修改反映了任何经常使用CSS的开发人员在技术上的进步, 而且这些修改也更深人地涉及所有程序员都需要掌握的两种技能:避免重写以前曾经写过的代码和掌握以最经济的方法编写代码的方法。在新版本中,介绍了实现这两个有价值的目标的各种方式。重用和DRY
第一个目标是代码重用,它是我们在好几章中都会涉及的一个主题。书中展示了创建功能性构建块的技术,无论是页面布局的框架结构,还是应用样式的美观的链接列表,将它们保存为可以迅速添加到标记中的CSS类, 设计者能够对其进行个性化地修改。本书已经将这些构建块添加到一个名为Sty ib的代码库中, 其中包含各种界面元素并以CSS代码及其相关XHTML标记的形式组织。这个库及本书的示例代码也放在了网站www.stylinwithess.com中。虽然Stylib库还不算成熟,但已经包含了很多有用的组件,这些组件曾为我节省了很多时间—但愿对你也同样适用。今后,我还要不断完善这个库并将它们放到网站上供读者下载。另一个目标是代码节约,它是贯穿本书的另一个主题。举例来说,为文档层次中最高层的元素应用一个样式, 该样式就能够影响到其他众多元素。我经常看到别人的CSS样式表中包含为每个标题和段落声明的相同的fontfamily规则, 而通过把fontfamily属性应用给顶层的body标签则意味着只需在一个地方编写和维护该属性。代码节约的底层理念是一句编程名言,叫做DRY, 意思是Don't Repeat Yourself(不要重复自己) 。在本书前面几章中, 我们会展示很多类似的例子。
掌握关键技术我认为只要真正理解了少数重要的CSS技术, 就能够使一名新手变成能够独当一面的CSS熟手。这些技术包括正确地使用定位和disp1ay属性, 以及理解浮动和清除的工作原理。在本书第4章中, 将专门介绍这些CSS中的重点技术, 并通过简单的例子示范如何在实践中运用它们。任何对CSS感兴趣并希望把自己的技能提升到一个新水平的读者, 都会发现第4章非常具呈现的页面, 在Netscape中也应该得到几乎相同的结果。因此, 如果基于以上4种浏览器测试和调整页面并取得满意的结果,就可以确保页面在几乎任何用户的浏览器中都能够得到体现设计意图的呈现。这里,我们甚至不会提到在IE5.5中测试;因为它当前只有不到0.5%的使用率,而任何使用一个具有8年历史的老浏览器的用户,恐怕都会有比呈现我们的网页更大的技术问题。我的建议是绝对不要使用IE 6作为开发浏览器, 而要使用前面3个SCB中的一种, 在SCB中已经能得到满意的页面后再在IE 6中测试并调整。实际上, 更进一步讲, 我会强烈建议你在开发期间使用Firefox来预览页面。之所以作此推荐, 是因为我发现Firefox是所有SCB中最符合标准的一种浏览器。此外, 在Firefox中安装WebDeveloper Toolbar(Web开发者工具条) , 就可以方便地验证XHTML和CSS而无需上传到服务器, 启用和禁用CSS, 查看页面中XHTML元素的轮廓以便实际地确定元素是否按照计划进行布局, 以及使用其他一些有用而且节省时间的工具。假如不安装WebDeveloper Toolbar, 那么大量开发时间就会白白浪费掉。而且, 还可以为Firefox安装Firebug调试工具, 有了这个附加软件, 差不多就具有了进行Web开发的专业级环境。Firefox和这两种附加软件都可以通过www.getfirefox.com免费下载。请下载代码,别再自己敲了尽管本书在出版之前进行了认真的编辑和审校,但错误仍然在所难免。我会及时修改书中代码存在的问题,并更新到本书网站(www.stylinwithcss.com)上。如果读者要试验本书的示例代码,请直接到本书站点下载。这样,不仅可以节省手工录人的时间,而且可以得到修正后的代码。
别忘了给我写信站中。同时,我也希望看到读者的评论和建议,因此在你购买本书后要记着花几分钟给我写封信。我会尽最大努力回复每一封读者的来信,也会尽量回答读者遇到的任何问题。不过,假如如果你发现了错误,请到本书网站上发电子邮件告诉我,我会在确认之后把勘误公布到网你真的想把CSS代码发送给我看, 请把它嵌人到XHTML文档的头部, 并将页面中的图像指向你的服务器的绝对URL; 然后, 将XHTML文档通过电子邮件发送给我。这样, 只要打开页面,我就能看到相应的效果。最后,感谢你购买这本书。希望它能够给你带来非常大的帮助。
XHTML:为内容定义结构
时至今日, 仍然会提到ID WIM IE
内容、结构和表现
过去的方式·
未来刚刚开始
文档流——块级元素和行内元素-
文档层次:认识XHTML家族
内联样式
嵌入样式·
链接样式
使用上下文选择符
使用子选择符·
添加类和ID
ID简介
ID和类之间的区别
特殊的选择符
选择符小结
1.1.2
时代在改变
1.2.1
1.2.2
XHTML及编写规则
1.3.1 XHTML——规则
1.3.2XHTML模板
1.3.3标记内容
1.3.4
1.3.5
第2章CSS的工作原理
2.1为文档应用样式的3种方式.
2.2CSS规则剖析·
2.3编写CSS规则
2.4在文档层次中对准标签
锚链接的伪类
其他有用的伪类
样式的来源
层叠规则
数字值
颜色值
字体和文本样式
在CSS中指定字体·
探索字体系列
3.2.1
3.2.2
设置字体大小
3.4字体属性
3.5
3.6使用字体和文本属性
使用嵌入样式(仅现在)
为整个页面设置字体系列
font-sty1e属性
font-weight属性
font-variant属性
字体属性的简写方式
text-indent属性
1etter-spacing属性
word-spacing属性
text-decoration属性
text-align属性
1ine-height属性
text-transform属性
verti ca 1-a1ign属性
定位元素
盒子的边框
盒子的内边距
盒子的外边距
折叠外边距
盒子到底有多大
浮动和清除
4.3.1float属性
4.3.2c1ear属性
position属性
4.4.1静态(static) 定位
4.4.2相对(relative) 定位
4.4.3绝对(absolute) 定位
4.4.4固定(fixed) 定位
4.4.5定位环境
disp1ay属性
使用positiondisp1ay属性的例子
有代表性的多栏布局
本书CSS库——Styli b简介
宽度问题
浮动布局与绝对定位布局
5.4.1简单的两栏式固定宽度布局
5.4.2
5.4.3
5.4.4按照需要为内部div添加样式
5.4.5
简单的两栏流动式布局
5.5.