CSS隐藏文字的方法
作者:荆棘鸟 来源:荆棘鸟's Blog 发布时间:2008-10-03 12:08:00
我在一篇文章所说,首页的“站点名称”最好用h1标签来定义,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义。
在CSS中如何以图代字,找了一下CSS隐藏文字的方法,有以下几条:
1、display: none;
这个大家普遍说法是,搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,不为隐藏的对象保留物理占位空间。GG也搜CSS文件?不过如果用这个方法,<h1>如何设计,也是难题。
2、visibility: hidden;
和display:none; 相对应,为隐藏的对象保留物理占位空间。
3、overflow: hidden;
这是网上用的最多的方法,但是我认为对于隐藏h1标签的“站点名称”文字,不太合适,原因我在最后说。
.texthidden {
display: block;
overflow: hidden;
width: 0;
height: 0;
}
4、positon: absolute;
用绝对定位将其推出可视区,不过虽然可视性不存在,但仍占据物理空间,与隐藏文字的宗旨相背,另外我个人不喜欢用绝对坐标定位magin这个属性,margin在不同浏览器中总是带来不可预料的Bug。
.texthidden {
positon: absolute;
margin-top: -9999px;
margin-left:- 9999px;
}
5、text-indent: -9999px;
把h1作为一个块来显示(display: block;),指定长宽(和图片一样大小),然后指定h1的背景图片,也就是将我们需要的图片作为h1这个标签的背景。而h1标签中插入的,仍然是作为字符形式出现的博客标题,然后用text-indent: -9999px;将文字甩到屏幕看不到的地方,9999px应该是足够了,谁的屏幕也没那么大吧。
h1 a {
height: 30px;
width: 165px;
float: left;
text-indent: -9999px;
background-image: url(images/logo.gif);
background-repeat: no-repeat;
display: block;
position: relative;
}
<h1> <a href=http://www.zfnn.com/>荆棘鸟</a> </h1>
总结一下:
如果不考虑搜索引擎的因素,方案一无疑最佳的,适合内网站点使用,并不是一无是处。
方案二,可以用在特殊的占位场合,了解一下,没坏处。
方案三,网上都说好,如果不是h1标签,还真可以用它。
方案四,嗯,前面说我不喜欢。
方案五,在h1使用上语义明确,符合语义化定义。text-indent就是首行缩进,大家都在中文段落,首行空两格用过它。这里通过负值缩进,使文字超出可视区,而这时h1下的背景就显示出来了,h1中包含的<a>标签又不影响使用,对于隐藏文字“站点名称”应该是最佳方案了。但对于多段文字的隐藏这个方法就不适合了。
这里还有个问题,就是点击<h1><a>链接时,会产生一个虚线框,对于IE还好,没什么问题,虚线框只是在背影图片大小。但是Firefox就有些麻烦,它把缩进的文字范围也包含进来了,这样不是很美观。
于是需要屏掉点击时产生的虚线框,IE和FF屏虚线框方法不一样。IE采用的遍历方法(HTC,css表达式)有些耗系统资源,正好我们只需要隐藏FF下的虚线框就行了,IE就不管了,说一下Firefox如何去掉链接的虚线框的方法。
a {
outline: none; /* 去掉Firefox点击时产生的虚线框 */
}


猜你喜欢
- 好了,看看我们的代码吧:upload.htm' 上传页面<html> <body>&nb
- 之前在使用Pandas处理csv文件时,发现如果文件名为中文,则会报错:OSError: Initializing from file fa
- 准备1.电脑系统:win102.手机:安卓(没钱买苹果)3.需要的工具可以从官网下载https://appium.io/https://ww
- Python内置函数1. classmethod、staticmethod、property 。上述三个内置函数在文章(Python进阶——
- 一,设计背景 由于所在公司ORACLE数据库较多,传统人工监控表空间的方式较耗时,且无法记录历史表空间数据,无法判断每日表空间增长
- SQL中的单记录函数 1.ASCII 返回与指定的字符对应的十进制数; SQL> select ascii('A')
- 大致介绍好久没有写博客了,正好今天有时间把前几天写的利用python定时发送QQ邮件记录一下1、首先利用request库去请求数据,天气预报
- asp连接mysql的问题ASP连接Mysql数据库的问题。下了一个MySql 的ODBC驱动。做了个小测试。顺利通过。先记录下来,中间还有
- 本文实例讲述了JS生成一维码(条形码)功能的方法。分享给大家供大家参考,具体如下:1、js代码:(function() { if (!exp
- MySQL内外连接表的连接分为内连接和外连接。内连接内连接内连接的SQL如下:SELECT ... FROM t1 INNER JOIN t
- 将来电脑的大显示屏会越来越普及,并且从现在web设计作品中能观察到两点趋势:页面布局普遍更宽;页面内容文字普遍更大。使用1280×800和1
- 前言当我们需要对列表(list)、元组(tuple)、字典(dictionary)和集合(set)的元素进行遍历时,其实Python内部都是
- 这些天安装 PyTorch,遇到了一些坑,特此总结一下,以免忘记。分享给大家。首先,安装环境是:操作系统 Win10,已经预先暗转了 Ana
- 五、XML带来的好处 (1)更有意义的搜索 数据可被XML唯一的标识。没有XML,搜索软件必须了解每个数据库是如何构建的。这实际上是不可能的
- 引言:2020年12月20python宣布适配苹果m1芯片,这意味着python3.9.0可以不经过rosetta转化,以原生的方式运行在最
- Oracle9i中提供强大的迁移功能,可以从多种数据库向Oracle迁移数据。Oracle新发行的迁移工具提供了从Access2
- Python中将列表转换成为数据框有两种情况:第一种是两个不同列表转换成一个数据框,第二种是一个包含不同子列表的列表转换成为数据框。第一种:
- 简介:psutil(进程和系统实用程序)是一个跨平台库,用于检索Python中运行进程和系统利用率(CPU、内存、磁盘、网络、传感器)的信息
- 以下面这个例子作为教程,实现功能是element-wise add;(pytorch中想调用cuda模块,还是用另外使用C编写接口脚本)第一
- 什么是迭代(iteration)呢?给定一个list或者tuple,通过for循环来遍历这个list或者tuple、这种遍历就是迭代(ite