text-indent应用

最新推荐文章于 2024-11-12 15:47:14 发布

dibengcheng6179

最新推荐文章于 2024-11-12 15:47:14 发布

阅读量82

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/super-zhen/p/3517401.html

版权

text-indent 段落首行文字缩进，可以用来隐藏背景图片上面的文字。比如在LOGO处。很好用

我自己一直以为就是一种效果的实现方法，其实不然。这样做对于SEO是有好处的。

假设一个166×66px的LOGO图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
h1#logo {
    float:left;
    width:166px;
    height:66px;
    background:url(logo.jpg) no-repeat 0 0
}
    /* CSS注释： float设置浮动，并设置CSS宽度和CSS高度 CSS背景 
    为了便于截图我们将CSS代码换行排版 
    */ 
    h1#logo a {
    display:block;
    width:100%;
    height:100%;
    text-indent:-9999px
} 
    /* css注释：display:block是让#logo内A标签成块显示，并以上级100%高度和100%宽度显示 
    text-indent此属性为CSS 缩进样式，我们设置为负值的9999px，也就隐藏了a标签内文字 
    这样一来就显示了h1标签背景图片，隐藏了文字又实现了A锚文本超链接 
    */
</style>
</head>

<body>
<h1 id="logo"> <a href="http://www.divcss5.com/" title="DIVCSS5：DIV CSS学习教程与资源分享平台"> DIV+CSS学习与资源分享平台 </a> </h1>
<!-- html注释：这里便于截图观察，我们将HTML代码换行排版 -->
</body>
</html>

我们让图片作为CSS背景、同时上面放上文字，又让文字隐藏，这个对于SEO来说比较实用。但实际操作时候注意图片大小高宽，在设置对象DIV盒子时候注意高度宽度适合，并使用CSS background背景样式、text-indent、css display等样式单词实现。根据DIVCSS5案例多实例实践即可学会。如果不想用A锚文本隐藏图片上文字，可以将a标签换成span标签、div标签、em标签均可效果相同。

转载于:https://www.cnblogs.com/super-zhen/p/3517401.html