在掌握了丰富而强大的css选择符之后，就具备了将css样式根据需要应用到网页中任何元素的能力。能够应用规则了，接下来就需要熟练掌握规则的制定方法——什么样的属性组合能够实现什么样的效果。一般的颜色、字体、字号、行高等的设置比较容易掌握，而初学者在应用css的时候，主要头疼的还是如何用css实现复杂的网页布局，从两栏布局、三栏布局，到表单设计等。在布局的时候，实际上主要是借助元素的宽、高、定位、浮动、边距、边框、间距、背景颜色、背景图片的组合来实现的。而所有这些，都要基于对css盒模型的理解。网上对盒模型的论述很多（推荐阅读《彻底理解css盒子模式》），我这里想从实用的角度来谈谈。
以前我接受了网上不少博文的说法，一直认为学习css的三大最重要问题是：盒模型、定位、浮动。因为这三块的内容决定了css布局的能力。但是通过上一篇日志的分析，xhtml要实现和css的解耦，就要尽量不依赖于css（或者说不要纯粹为了给css预留接口而添加不必要的class和id），那么，在用css布局之前，其实就有一个更紧迫的任务摆在我们的面前——如何将css规则准确应用到目标元素。于是，css选择符的地位在这个前提下就空前的提高了。所以，在开始学习盒模型、浮动、定位之前，有必要回顾一下选择符。
虽然CSS在表现方面天生具有很多优势，但是如果不是web标准化的盛行，估计CSS不会达到今天这样的热门。所以要说CSS，肯定要从web标准化说起。实际上，对CSS的理解越深，才能越好地理解和使用CSS。
很多人对于web标准化的理解就是“DIV+CSS”，或者“IE、FF、Chrome、Opera、Safari测试无错”，或者就是“通过w3c校验”。实际上，这些都只是web标准化以后附带的一些好处或者说一些表现。web标准化的精髓并不是为了抛弃表格，或者浏览器兼容，或者通过w3c校验。有时候，标准化了的网页未必一定能达到上述这些特征。
绝大部分现代浏览器支持 css 中的 :hover 伪类选择器，可以用于所有 html 元素。这很酷，因为这使你可以仅通过 css 来对表格行(<tr>)应用鼠标滑过事件(mouseover)时的特殊效果。然而，万恶的IE，对 :hover 伪类顶多只提供了有限的支持，具体支持的程度要取决于你的IE浏览器的具体版本。
Whatever:hover 是一个小小的脚本，它可以迅速、自动地为IE6，IE7，IE8添加标准的 :hover、:active 和 :focus 伪类支持。第三版引入了 ajax 支持，意味着通过 javascript 动态添加到文档中的任意html元素也同样可以在IE中响应 :hover、:active 和 :focus 样式。
结合JavaScript的下拉菜单，纯CSS的下拉菜单我也写过很多了。不过在微软 Microsoft Expression Web 的相关站点上看到这个纯CSS下拉菜单的时候，我还是觉得很赞赏。这应该是最精简、最干净的纯CSS下拉菜单了。
最近很长一段时间没有读书，主要是Asp.net自身更新太快，买了几本书都买了没多久就过时了。所以除了参考MSDN和cnblog以外，就基本上靠google来解决问题了。但是还是时常上china-pub去看看，了解一下最新计算机图书的情况。
这次发现一本书，国内作者撰写的。书名叫《别具光芒：DIV+CSS网页布局与美化》。
Web2.0时代，制作符合w3c标准的网页、采用div+css布局已经成为网页制作人员、Web开发人员不能不掌握的技术。css本身就像xhtml一样简单易学。但是真要用好，也还是需要大量的模仿和练习的。尤其是现在客户端浏览器种类繁多，各自对标准和css的支持情况各异。尤其是龙头老大——Internet Explorer（微软的IE），更是给网页设计人员带来了巨大的麻烦。以前Opera和Mozila这些产品还不成气候的时候，还可以忽略，现在Firefox人气急升，IE7.0也开始支持w3c的标准规范，则浏览器兼容性已经成了不能忽视的问题。
这本书并不是学习css的最佳选择，学习css最好的当然是O’Reilly 出版《css权威指南》，还有一本电子参考手册《Css2.0中文手册》，就完全足够了。
但是学习完css之后，在网页设计中具体运用还是需要实践的。而且还会遇到各种各样的问题，在上述的经典教程中是没有解答的。这时候《别具光芒：DIV+CSS网页布局与美化》就成了帮助你把掌握的css知识运用到实际的网页设计中来的最佳实践指南。
该书没有像一般的网页设计图书一样，先用大量篇幅“概述”网页设计，然后再用大量篇幅“简介”html、xhtml等等，作者开门见山，简单讲解了CSS语法后，直接进入读者最关注的div+css布局。以一个两页的简单站点开始，从网站设计图的分解、图片的切割和输出、网页的组装、浏览器兼容性的处理、css代码的组合和优化。全程详解从设计图到网页成品的完整过程。不仅对掌握div+css布局的入门者非常有帮助，而且对于学习网页制作的菜鸟也是不可多得的教程。
之后作者继续采用这种实例详解的办法，引入更多、更复杂的各种不同情况下的网页设计详解。最后以一个综合性门户网站的页面设计实现，让读者经历一次div+css布局能力的全面复习和检阅。读者已经完全掌握了div+css布局的全部技能、技巧和解决问题的能力。
div+css布局其实不难，难在灵活运用和针对一些特殊需求进行实现，难在需要熟悉不同浏览器软件和版本之间的差异和掌握解决办法。很多此类图书把大量重点放在了css本身的讲解上。而css本身并不是一个很难学的东西。以至于读者读完之后，基本知识已经掌握但是一投入实战还是感觉晕头转向。这本书的作者显然很了解初学者和因为设计中遇到问题所以购买此类图书寻求解决的网页设计人员的需求。
强烈推荐学习网页设计的入门者、正在采用div+css设计网页布局但是并未熟练掌握得网页设计人员阅读学习。
睡觉前，NT给我发了两个网址，是老外的，那个家伙暴强，居然用纯CSS在页面上画出房子来，平面的、3D的，都画出来了。
看了一下他的CSS代码，一开始以为是这样用：
.class{
width:100px;
width:60px;
height:200px;
height:160px;
}
后来发现其实一些特殊图形的绘制跟上面的这个怪异的用法没关系，而是用边框来实现的，比如：
这三个形状除了Div，没有任何其它的元素或者文本，更不用说图形了。这是充分利用了border的显示特性。因为当我们同时设置四个方向的border时，浏览器自动会把交叉的部分叠加或者相互剪除。当border足够大的时候，我们就看到了上面这样的特殊效果。谁能想象到这是4个200像素的边框形成的效果呢？
代码如下：
<div style="BORDER-RIGHT: #ff0 50px ridge; BORDER-TOP: #f00 50px ridge; FLOAT: left; MARGIN: 10px; BORDER-LEFT: #0f0 50px ridge; WIDTH: 1px; BORDER-BOTTOM: #00f 50px ridge; HEIGHT: 1px"> </div>
<div style="BORDER-RIGHT: #ff0 50px groove; BORDER-TOP: #f00 50px groove; FLOAT: left; MARGIN: 10px; BORDER-LEFT: #0f0 50px groove; WIDTH: 1px; BORDER-BOTTOM: #00f 50px groove; HEIGHT: 1px"> </div>
<div style="BORDER-RIGHT: #ff0 50px double; BORDER-TOP: #f00 50px double; FLOAT: left; MARGIN: 10px; BORDER-LEFT: #0f0 50px double; WIDTH: 1px; BORDER-BOTTOM: #00f 50px double; HEIGHT: 1px"> </div>
最新评论