当前位置：一起CSS
日期：2008-09-5 分类：CSS
以下内容摘自《CSS禅意花园》一书。
2003年3月，Douglas Bowman在他的网站Stopdesign上发布了一个技巧（www.stopdesign.com/articles/replace_text)，让设计师能够用一张背景图像替代某元素中的文字，以期显出更美观的字体。为了表示对发明者Todd Fahrner的尊重，这个技巧随后也被叫做“Fahrner图像替换（Fahrner Image Replacement，FIR）”。该技巧实现非常简单：用span将元素中的文本包围起来，然后通过应用CSS样式隐藏这个span中的文本，最后将背景图像应用到该元素之上即可。例如，对于下面的这一段HTML标记：
<h1 id="pageHeader"><span>css Zen Garden</span></h1>
我们可以使用下面的这段CSS容易地实现图像替换：
#pageHeader{
background:url(lemonfresh.gif) top left no-repeat;
width:400px;
height:20px;
}
#pageHeader span{
display:none;
}
通过使用CSS的display:none或visibility:hidden，所有在#pageHeader元素中的span元素都被隐藏起来。Hellsing同时使用了上述两种CSS设定——但它们的效果确实一致的。图像替换技术非常强大且很快开始流行——若是没有它，我们甚至都无法建立禅意花园。该技术可以说是实现复杂、灵活CSS布局的一块最为重要基石。
点击这里查看其他图像替换方案。
查看：389 评论：没有评论 标签：图像替换
日期：2008-09-5 分类：CSS
图像替换就是隐藏元素中的文本，用一副生动的图象替换。如果没有图像替换，那么网页就不可能这么美观、漂亮。《CSS禅意花园》中说：
图像替换技术非常强大且很快开始流行——若是没有它，我们甚至都无法建立禅意花园。该技术可以说是实现复杂、灵活CSS布局的一块最为重要基石。
由此可以见图像替换的重要。
也许你会说直接放一副图片或加上背景不行吗？为什么要写上文本有把文本隐藏呢？这不是多此一举吗？这样做确实能达到一样的视觉效果，但对搜索引擎是不利的。因为搜索引擎不能从这块地方的到任何内容，它就不知道这块地方要表达什么意思。而使用图像替换技术对搜索引擎就很友好。在引用《CSS禅意花园》中的一段：
图像替换技术使用display:none的本意并不只是想要替换文本，这样做还有一些更深层次的理由。实际上，若是没有任何提示或帮助，计算机就无法认出或读取图像中包含的文字。例如HTML中img元素，若是没有了alt属性，那么对于google等搜索引擎，以及辅助浏览设备（例如，屏幕阅读器即可阅读页面内容，并以声音的形式告诉浏览者）之类无法呈现图像的客户端来说，将变的豪无意义。而图像替换技术则保留了被替换元素中的原有文本，因此无论对任何客户而言，理解页面内容都不成问题。
直接使用图像或背景是传统表格布局使用的方法，而图像替换是CSS布局使用的方法。这又一次证明了CSS布局的网站更有优点。
《CSS禅意花园》中提了4种图像替换技术的方法，现在一一摘抄下来，和没有阅读此书的朋友分享：
1、Fahrner的方案
2、Leahy和Langridge的方案
3、Rundle的方案
4、Levin的方案
查看：390 评论：没有评论 标签：图像替换
日期：2008-09-5 分类：CSS
现在的网站都在向web标准进军，大到门户，小到个人博客。这是因为符合web标准的css网站优点多多，这里着重说说符合web标准的css网站对SEO的影响（下面内容转载自互联网）。
CSS DIV设计的网站是按照W3C标准的，如果一个站点完全是CSS+div制作的，那么你网站的SEO（搜索引擎优化）工作已经完成了30%！为什么会这么说？SEO其他方面在哪？好，请接着我的思路往下看：
符合web标准的css网站相当做了30%的SEO工作
1、css div网站遵循“网页结构、表现、行为分离，互不干涉抢功”理念
且不说SEO，其实按照这个理念建设起来的网站，网页打开速度会明显的加快。因为按照这个理念，网页将会分成html、css、js三种类型的文件，而css、js又是可以缓存的，所以浏览一个这样的网页其实就是下载html代码就行了，速度当然变快。
我们先看看SEO都做些什么：
a.网页META标签会添加的比较齐全，如keywords、description、robots；
b.被搜引擎抓取的内容，代码比较精简，非内容代码大大减少，文件小；
c.文本会比较靠前。几乎都在200字内就可以搜索到正文，重要内容；
d.不会出现表格那样多层嵌套的问题。 阅读全文 >
查看：260 评论：没有评论 标签：web标准
日期：2008-09-2 分类：CSS
CSS中英文双语导航菜单已经不新鲜了，但下面这种方法我觉得比较有意思，思路比较特别，所以拿出来分享一下：
首先看具体代码：
XHTML代码：
<ul id="nav">
<li><a href="#">Home<span>首 页</span></a></li>
<li><a href="#">About us<span>关于我们</span></a></li>
<li><a href="#">Products<span>产品展示</span></a></li>
<li><a href="#">Services<span>售后服务</span></a></li>
<li><a href="#">Contact<span>联系我们</span></a></li>
</ul>
<div id="navbar"></div>
CSS代码：
* {
margin:0;
padding:0;
}
#nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif,宋体;
margin: 1em 0 0;
list-style:none;
}
#nav li{
float: left;
margin-right: 1px;
}
#nav li a,#nav li a:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
overflow:hidden;
}
#nav li a span{
display:none;
}
#nav a:hover{
position: relative;
}
#nav a:hover span{
display:block;
position:absolute;
top: 0;
left: 0;
cursor: pointer;
padding-top:2px;
}
#nav li a:hover,#nav li a:hover span{
color: #FFFFFF;
background: #DC4E1B;
}
#navbar{
background: #DC4E1B;
height: 8px;
overflow: hidden;
clear: both;
}
你可以点击这里查看效果。
查看：390 评论：没有评论
日期：2008-09-2 分类：WordPress
你有一些文章（比如隐私或广告）不想在Wordpress首页显示吗？如果有的话那你就要用到这个插件了：Front Page Excluded Categories（点击链接即可到官方下载）。 官方的描述是：
A basic plugin that excludes posts in one or more categories from appearing on the front page. This is especially useful if you use an automated posting system, like the del.icio.us bookmark blog posting feature, that updates your blog regularly. In such a case, you can assign these posts to an excluded category so they don't appear on the front page, but do appear in a category page.
意思就是让你指定的一个或多个分类的文章不在首页显示。 使用方法：
- 下载，并上传到：wp-content/plugins目录下
- 登陆后台，插件-启用
- 打开所下载的front_page_excluded_cats.php文件，找到$cats_to_exclude（约第14行），将后面的数字改为你希望不在首页显示的分类的ID，如果有多个的话用英文的逗号割开
保存后在首页就看不到你指定的分类的文章了，不过其他地方还是可以看到的，比如日志分类或直接输入地址又或者搜索，不过我觉得这样已经达到我们的目的了。
需要注意的是：要把该日志的 所有分类（如果有）的 ID 及标签的 ID 都写上，漏了一个都不行。
查看：1,218 评论：6 标签：WordPress
