CSS隐藏文字的方法

  h1标签对提高SEO关键词排名的作用想必是个站长都知道,但是h1标签会使文字变大,有时候会在网页中显得格格不入。下面小编来跟大家分享下CSS隐藏文字的方法。


  下面就拿网络教学基地logo部分用CSS隐藏文字来给大家举例:

  我们从h1代码部分看到的其实只是文字描述,但是为了整体美观考虑,我们把h1标签里面的a链接文字用CSS隐藏,并且设置背景图片logo,这样外观看到的就是logo图片

  CSS隐藏文字代码:

  h1 a {

  height: 80px;

  width: 280px;

  float: left;

  text-indent: -9999px;

  background-image: url(http://www.studynb1.com/images/logo.png);

  background-repeat: no-repeat;

  display: block;

  position: relative;

  outline: none; /* 去掉Firefox点击时产生的虚线框 */

  }

  这里我们指定了text-indent: -9999px;让文字在最下层,然后在设置了: background-image:背景图层logo,意思就是让文字在图片下面,这样就简简单单实现了用CSS隐藏文字,最后设置了outline: none;,是为了解决去掉IE和Firefox浏览器点击的时候产生的虚线框。

  以上就是小编给各位网站SEOer们分享的css隐藏文字的方法,注意每个页面只能用一个h1哦,不然风险很大。

 

  本文属网络教学基地原创,转载请注明:http://www.studynb1.com/css/149.html

时间: 2024-10-25 12:11:58

CSS隐藏文字的方法的相关文章

css隐藏文字一些方法总结

有时候,我们会用图片代替文字,最常用的就是用在input按钮上. 以前,我都会用text-indent:-9999px将文字移到页面外面,但这个方法在IE6下有个"bug",不属于块元素的应用此css属性后,此块的内容也会消失,这时候需要将这块内容设置为块元素(display:block;). 最近,我习惯给一些固定长宽的元素使用line-height:999em进行移除文字,但这时候需要给此元素添加一个overflow:hidden进行截断,否则此块就会被line-height:99

CSS隐藏文字的几个方法

简单介绍几种CSS隐藏文字的方法,希望对大家有所帮助. 作为一个web前端开发 为了html语义化 常常要给内容模块加上一些标题来让页面更有意义 当然还有我们的图片按钮 在抛开css裸奔的情况下也能很顺利的汲取到页面信息 通常为了传达更好的视觉效果 我们常用图片替代掉字体 而早前的前端开发常直接不在html中给出内容 用 :(甚至为空) 这样在没有加载到css时就无法知道这个区块究竟是什么内容了 正题开始 通常偏移掉字体的方式是 (1) 使用text-indent:-9999px; 可是他有一个

网页技巧:具有亲和力的CSS隐藏文字方法

css|技巧|网页 一个新的,更加具有亲和力的CSS隐藏文字方法介绍,说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补.实用性一般,但是这个方法挺新颖的. 1.display:none;的缺陷 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略 屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字. 2. visibility: hidden ;的缺陷这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间 3.overflow:hidden;一个比较合

DIV CSS隐藏内容样式方法大全

 DIV CSS网页布局有很多值得学习的地方,这里和大家重点讨论一下DIV CSS隐藏内容样式方法,相信本文介绍一定会让你有所收获.   DIV CSS隐藏内容样式方法   CSS隐藏的用途   1.对文本的隐藏   2.隐藏超链接(另类黑链)   3.对统计代码隐藏   4.隐藏超出图片   5.CSS隐藏滚动条   6.CSS来隐藏DIV层   使用CSS隐藏方法   1.使用display:none;来隐藏所有信息(无空白位占据)推荐,CSSdisplay手册查看   2.使用overfl

CSS隐藏文字的一些方法总结

  作为一个web前端开发 为了html语义化 常常要给内容模块加上一些标题来让页面更有意义 当然还有我们的图片按钮 在抛开css裸奔的情况下也能很顺利的汲取到页面信息 通常为了传达更好的视觉效果 我们常用图片替代掉字体 而早前的前端开发常直接不在html中给出内容 用&nbsp:(甚至为空) 这样在没有加载到css时就无法知道这个区块究竟是什么内容了 正题开始 通常偏移掉字体的方式是 (1) 使用text-indent:-9999px; 可是他有一个局限性 他只适用于块级元素block 而我们

有关在EXCEL中隐藏文字的方法

在excel中会常常会发现不能输入单个0值,其实是被隐藏了,除了0以为,我们可以对各种字符进行隐藏. 0值隐藏都知道吧,在"工具">"选项">"视图">"零值",前面的勾取消即可.但如果被隐藏的是指定值呢?比如大于15的,或者小于-100的,或者文本这个用IF函数当然可以解决,其他也有一些函数可以搞定,但纯技巧的操作该怎么弄呢?条件格式是一种办法,还有一种办法就是:自定义单元格. 操作步骤 1.选取"

用CSS样式表隐藏文字的挺新颖方法

说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补.实用性一般,但是这个方法挺新颖的. 1.display:none;的缺陷 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略 屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字. 2. visibility: hidden ;的缺陷 这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间 3.overflow:hidden;一个比较合理的方法 .texthidden { display:block;/

google裁判隐藏文字作弊的方式

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 内容中的隐藏文字或链接可能导致您的网站被认为不可信赖,因为它向搜索引擎和访问者提供的信息不一样.文字(如过量关键字)可能有多种隐藏方式,包括: 1. 在白色背景上显示白色文字 2. 将文字置于图片后 3. 使用 CSS 隐藏文字 4. 将字体大小设置为 0 隐藏链接的用意是 Googlebot 可抓取但人眼无法识别,原因包括: 链接由隐藏文字

在Word 2007文档中设置和显示隐藏文字

用户在使用Word2007编辑文档时,有时需要将Word文档中的特定文字设置为隐藏文字,以实现保密效果.本篇教程介绍在 Word2007文档中设置和显示隐藏文字的方法. 1.设置隐藏文字 用户可以在Word2007"字体"对话框中将特定文 字内容设置为隐藏文字,操作步骤如下所述: 第1步:打开Word2007文档窗口,选中需要设置为隐藏文字的文字内容.然 后在"开始"功能区的"字体"分组中单击"显示'字体'对话框"按钮,如图2