前端开发 HTML和CSS:深入了解text-indent

微信h5页面 前端开发|前端开发 大牛知乎|主流前端开发工具

css中可以使用text-indent属性来定义段落的首行缩进。在之前“css单位”这一节中,我们学习了关于text-indent的一个技巧:使用“text-indent:2em;”来实现段落的首行缩进。在这一节,我们来深入学习text-indent的另外一个技巧。
有过开发经验的小伙伴们,或多或少会见过“text-indent:-9999px;”这种写法。“text-indent:-9999px;”一般用于LOGO部分。在搜索引擎优化中,h1是非常重要的标签。一般情况下,我们都是把网站的LOGO图片放到h1标签中。不过我们都知道,搜索引擎是无法识别图片,只能识别文字。为了更好地优化SEO,那该怎么做呢?
有一个很好的解决方法就是:指定h1元素的长宽与LOGO图片的长宽一样,然后定义h1的背景图片(background-image)为LOGO图片。也就是说,我们使用LOGO图片作为h1标签的背景图片,然后使用“text-indent:-9999px;”来隐藏h1的文字内容。
举例:
html 代码

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title>前端扫二维码登录怎么开发</title>
    <style type=”text/css”>
        h1 {
            width: 300px;
            height: 100px;
            background-image: url(“images/logo.jpg”);
            text-indent: -9999px;
        }
    </style>
</head>
<body>
    <h1>前端开发者</h1>
</body>
</html>

分析:
在这个例子中,使用“text-indent:-9999px;”隐藏了h1的内容。如果我们没有使用“text-indent:-9999px;”;

有些小伙伴可能会说,除了“text-indent:-9999px;”,我们还可以使用“display:none;”来隐藏文字,以便达到预期效果,实现代码如下:
html 代码

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title>怎么写前端开发文档</title>
    <style type=”text/css”>
        h1 {
            width: 300px;
            height: 100px;
            background-image: url(“images/logo.jpg”);
        }
        h1 span {
            display: none;
        }
    </style>
</head>
<body>
    <h1>
        <span>前端开发要会的技术</span>
    </h1>
</body>
</html>

分析:
其实页面效果是达到了,但是搜索引擎却不吃这一套!为什么呢?对于使用“display:none;”来隐藏的文字,搜索引擎一般都把这些文字当做垃圾信息而被忽略,此时h1的权重会丢失。所以我们不建议使用这种方式。
对于“text-indent:-9999px”这个技巧,大家可以去查看一下绿叶学习网、w3cschool首页以及其他网站LOGO部分的源代码。实际上,这个技巧几乎在所有网站中都能用到,大家一定要认真掌握。
当然大家想要更好地理解这个技巧,也需要一定搜索引擎优化的知识。搜索引擎优化(即SEO),也是前端工程师必备知识之一。

【疑问】:
1、为什么定义text-indent为-9999px,而不是-999px、-99px呢?
一般电脑屏幕宽度有为1024px、1366px等,之所以定义为-9999px,那是为了让文字的缩进足够大,就算是大分辨率电脑下也看不到文字,因为没有哪台电脑的屏幕宽度大于9999px。如果你定义text-indent为-999px或者-99px,那么缩进的文字还是有可能会出现在浏览器窗口内。

2018前端开发怎么样|有缘网前端开发怎么样|微信公众号前端方面怎样开发

» 本文来自:前端开发者 » 《前端开发 HTML和CSS:深入了解text-indent》
» 本文链接地址:https://www.rokub.com/4779.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!