天空下的雨

根据一些CSS写作经验，如何提高渲染效率及所占用消耗的资源，我们来浅谈一下CSS的渲染效率，书写高效的CSS。

1、十六进制的颜色值对位数与大小写　　

      编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
　　* 不赞成 - color:#f3a;
　　* 建议用 - color:#FF33AA;
2、display与visibility的差异

　　他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。
　　* 不赞成 - visibility:hidden;
　　* 建议用 - display:none;
3、border:none;与border:0;的区别

　　和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
　　* 不赞成 - border:0;
　　* 建议用 - border:none; 阅读全文>>

2008北京奥运即将到来，大家可能都发现：

一些网站头部会突出关于奥运的信息，很多人不知道怎么弄，其实大部分就是修改了CSS样式来实现。

下面就是body的代码

body {background:url(图片地址) top center no-repeat;padding-top:50px;}

 //  top center no-repeat    图片顶端居中，不重复显示
//  padding-top:50px   头部下移50像素

CSS为网页设计者们提供了丰富而灵活的页面元素表现形式的控制手段。但是，或许你可能注意到了，对于下划线，CSS提供的可选操作却不是很多。一般情况下，人们看到的下划线基本上都是横直线，缺少生气和灵动。不过，路并不是死的，通过一些绝妙的改造，我们还是可以做出富有创意的下划线来使页面更为美观。
　　这是一个自定义下划线的例子：自定义的下划线 。是不是很酷呢？除了能让你的网页呈现出一个与众不同的风格之外，它还能对于文档中不同的文字类型给与不同的视觉外观，起到提醒或者着重的作用。
　　下面我们就来一起学习如何自定义与众不同的下划线。
　　首先，我们得先准备一幅作为下划线的图片。你可以利用先成的，也可以自己动手绘制。需要提醒注意的是，你所准备的图片应该适合水平方向上的重复，最好还能使透明的GIF格式，这样能够确保背景不被遮挡。
　　另外，如果你所准备的下划线图片在高度（粗细）上占用比较多的像素，那么，应当增加该行文本和下行文本之间的行距（line-height）空间，可以这么设定：
 

p { line-height: 1.5; }

接下来要做的事情是取消原来默认的下划线，这样我们才能把自定义的下划线应用到指定文本，使用如下的CSS设定（它的含义是让超链接文字没有任何修饰）：
 

a { text-decoration: none; }

好了，现在可以来创建自定义的下划线了，这里，我们用准备的图片设定为超链接元素的背景图片，如下：
 

a { background-image: url(underline.gif); }

当然，文字的长度未必和原图的长度相等，这就需要考虑图片重复的问题，也就是说，应当把重复限定在水平方向的X轴上，可以如下设定：
 

a { background-repeat: repeat-x; }

还有个必须考虑的问题，就是字的大小改变怎么办？要让下划线的图片始终显示在超链接文字的下方，而不必理会文字大小的话，我们应当使用CSS中的背景位置（background-position）属性来定位图片位于超链接元素色底部。而对于如箭头这样的下划线图片，还得考虑超链接的文本边缘和图片边对齐。 下面的这个例子将下划线背景图片的位置限定在右下角：
 

a { background-position: 100% 100%; }

如何控制自定义的下划线图片和文字之间的空白呢？这个可以通过增加填充（padding）来做到。下划线图片相对于超链接文本基线（baseline）的确切位置以来与所用的字的大小。建议你一开始将底部填充（bottom-padding）的大小设定同下划线图片的高度相等，然后再慢慢调整到合适位置（下面这个CSS设定超链接的底部填充为4像素）：
 

a { padding-bottom: 4px; }

因为下划线的图片被定位在超链接元素的底部，所以需要确保所用的超链接文本没有跨行，否则，只有处在最下面的超链接文本会出现自定义的下划线了。怎么解决呢，那就是阻止超链接文本跨行产生，可以通过CSS的white-space属性来完成：
 

a { white-space: nowrap; }

好了，把上面提到的这些超链接标记的CSS设定合并起来，结果如下:
 

a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}

还记得有些超链接文本没有下划线，但是当鼠标移到它的上面的时候，下划线就浮现出来的情况么？自定义的下划线也可以做到这个效果，那就在:hover上设定超链接背景，而不是在超链接标记a上设定，如下：
 

a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}

怎么样，是不是很简单呢？在来看看一些例子和它们对应的CSS设定：
静态下划线:
 

a#example3a {
text-decoration: none;
background: url(’/pic/200542191630940.gif’) repeat-x 100% 100%;
}

浮动效果下划线
 

a#example3b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 2px;
}
a#example3b:hover {
background: url('http://tech.tom.com/images/computer/2004/02/04/diagonal.gif') repeat-x 100% 100%;
}

静态下划线
 

a#example4a {
text-decoration: none;
background: url('http://tech.tom.com/images/computer/2004/02/04/flower.gif') repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 10px
}

刚才在制作网页的时候，遇到个辣手问题，一段文字在不使用换行符排版的情况下自动换行，右端的部分总是不能整齐换行，不是多出几个空格就是少了几个。其实一段CSS代码就能很好的解决此类问题，兼容 IE 和 其他浏览器 的换行 CSS 推荐样式

在需要换行的地方加入 word-wrap:break-word; overflow:hidden;

例如：

<style>
div { word-wrap:break-word; overflow:hidden; }
</style>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

语法说明：

word-wrap是控制换行的，使用break-word（内容将在边界内换行）时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。所以再使用overflow:hidden来加以控制。这也是为什么不用word-wrap:break-word; word-break:break-all; 的原因。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－

       国务院发出公告，将2008年5月19日至21日定为全国哀悼日，以表达全国各族人民对四川汶川大地震遇难同胞的深切哀悼。各网站为了表示这个悲惨的日子，特将网站色调统一变成黑白色。

      今天访问好多网站包括百度，网易等网站都变成了黑白色界面，体现大家对于四川地震的深切哀悼，但有好多站长不一定知道是什么方法，还以为是大量改版，对于任何人都不是很轻松的事。特将此方法告诉大家，让大家联合起来。

其实很简单，只要在网页样式中加入

body { filter:gray }    或

HTML {
FILTER: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) }

试试看，是不是整体页面就成灰色了 参数：filter:gray

如：body { filter:gray }