使用CSS显示徽标的正确方法是什么?

前端之家收集整理的这篇文章主要介绍了使用CSS显示徽标的正确方法是什么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我最近一直在学习CSS,我正在观看的教程系列说明显示徽标图像的最佳方法是将文本包装在H1标签中,然后将该标签的CSS样式设置为背景图像,带有文本缩进-99999或类似的大数字.

这似乎令人难以置信的hackish和不优雅.似乎使用CSS来隐藏文本对于SEO来说是一个很大的禁忌(因为通过CSS隐藏文本是不受欢迎的).

我还读到应该避免使用img,因为徽标本身并不真正满足,所以应该降级到编码的设计方面(即CSS).

目前对此有何共识?

解决方法

显示徽标的正确方法是使用< img>元件.如果您还没有学习过 logos and logotype,那么您可能没有意识到徽标有自己的语义,并且需要以非常具体的方式呈现.它也可能有一个必需的解释,这应该在[alt]属性中使用.

如果所需的解释合法地是页面中的标题,那么将它添加到< h#>中是正确的.元件:

<h1>
    <img src="logo.png" alt="Foo Co.: Where everyone can fizz the buzz" />
</h1>

通常,徽标用作链接,因此通常会看到:

<a href="/">
    <img src="logo.png"... />
</a>

此外,可以强调徽标(可以是或取决于程度):

<strong>
    <a href="/">
        <img src="logo.png" ... />
    </a>
</strong>

理解徽标的语义.如果你引用的是可口可乐公司,那么品牌的标识就不会,如果换掉,或者删除了样式表,就不应该改变.大多数人从语义上理解

不同于

原文链接:https://www.f2er.com/css/216214.html

猜你在找的CSS相关文章