WonderCSS

在CSS中关于“隐藏”的一些技巧

在做网站建设的工作时,无论是出于页面效果还是处于SEO的要求,我们不可避免在编写代码过程中需要将某些内容“隐藏”掉。比如我们需要让代码 <h1>网站名称</h1> 在浏览器上显示成 logo 图片而不是文字。

在 CSS 中有一些属性可以让一部分内容“隐藏”掉,相关这部分内容结合实际用途我来总结一下:

使用 visibility 不去渲染部分内容

在样式表中 visibility 意味着是否渲染当前对象,默认值是visible,元素是可见的。当 visibility 值为 hidden 时元素是不可见的。

但如果我们使用 visibility:hidden; 来“隐藏”内容时,并非将他真正的隐藏掉。因为visibility是“是否渲染目标”,好比有一行文字:“今天下雨了”。我们将其中的“下雨”两个字赋予样式 visibility:hidden; ,显示出的结果并不是“今天了”,而是“今天    了”

visibility 的实质是“渲染”而不是“隐藏”。

利用 display 隐藏掉部分内容

display 是我们用于隐藏内容使用率最多的 CSS 属性,它决定是否显示当前对象,默认值为 inline 确定显示。当属性值为 display:none; 时则代表不显示当前对象。以上述“今天下雨了”为例,如果我们将“下雨”两个字赋予样式 display:none; ,显示出来的结果则为:“今天了”,
真正达到我们所需要的“隐藏”效果。

但在使用 display:none 时我们需要注意搜索引擎能否将此判断为SEO作弊,虽然搜索引擎有其判断你用意的智能性,但在具体应用上我们还是要避免“任何误解”。比如尽量避免用 display:none 隐藏网站关键字,避免隐藏大段文字等。

在代码编写中尽量写在CSS中,别在 HTML代码 中写 style="display:none;"

用 clip 对内容进行裁剪

clip 算是比较生僻的 CSS 属性,它在网页渲染时起到对对象进行剪切作用,默认值为 auto 不进行剪切。如需剪切其用法为:


clip: rect( number number number number )

括号中的四个数字位置为顺时针方向 上-右-下-左 ,在使用上跟 Photoshop 中的剪切工具(快捷键C)类似。在关于 SEO作弊 中搜索引擎对clip属性没有对display属性那么敏感。

利用首行缩进 text-indent 隐藏文字内容

在文章的起初我们就举过一个例子,如何让网站名称在HTML代码中为“<h1>网站名称</h1>”,通过浏览器渲染出的结果为图片。在CSS中做个效果,几乎都是使用 text-indent 属性来完成的。

text-indent 代表着文字的首行缩进,在中文文本中经常设置在段落 P 中:text-indent:2em; 首行缩进两个字。

如果设置成 text-indent:-9999em; 的话(了解em单位),那么当前文字可能就直接“挤飞”了,以达到将文字隐藏掉的效果。由此我们就能在逻辑上实现,将文字“隐藏”只显示背景图片的效果了。

以上就是我们在编写CSS样式表的时候最长使用的几个相关“隐藏”的属性。如果你还有其他的CSS用法,欢迎留言交流!

By 于湛 发布于 2013.04.16 12,756 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注