Question

这是一个一般性的问题，但目标是在我的项目中使用最小的css来简洁的html标记，这是长期困扰我的事情。

我经常使用具有固定大小h1链接和背景图像的容器元素（例如：a）。

EG：加价：

<h1 id="branding"><a href="site.com">Brand Name</a></h1>

的CSS：

h1#branding {
     display:block;
     width:200px;
     height:50px
}

h1#branding a {
     display:block;
     width:200px;
     height:50px;
     text-indent:-999em;
     background-image:url(path/to/img.png) no-repeat 0 0;
}

如您所见，我在h1和元素上都包含固定大小。我这样做是因为我以前在某些旧版浏览器中看到了视觉问题，而我没有给出包含元素的宽度和高度值。

我还使用此技术进行<ul><li><a>..</a></li></ul>结构的导航，并且必须为ul，li和a元素添加维度，这使得CSS具有重复性和冗长......

......有更好的方法吗？

Answer 1

如果我理解你的要求，你可以将所有共享属性分配给一个相应元素使用的CSS类：

/* All shared properties */
h1#branding, h1#branding ul, h1#branding li, h1#branding a {
    display:block;
    width:200px;
    height:50px
    background-image:url(path/to/img.png) no-repeat 0 0;
}

/* Individual properties */
h1#branding a {
    text-indent:-999em;
}

Answer 2

为什么要通过CSS中的背景图像加载图像？为什么不简单地使用<img>标签？如果你想使用CSS精灵图像，我可以理解它，但似乎你没有这样做（或者至少你的示例代码没有显示它）。使用<img>代码会使用display:block并指定宽度和高度两次不必要。然后，您只为图像本身指定一次宽度和高度。 E.g：

<a href="site.com" title="Brand Name"><img src="path/to/img.png" width="200" height="50" alt="Brand Name" /></a>

从搜索引擎优化的角度来看，用<h1>标签围绕（我假设的）徽标也不是最佳做法。您应该为页面标题保留<h1>标记，而不是公司或品牌名称。可以做到这一点的唯一页面是主页，但即使在那里我也不会这样做。

如果你想坚持使用CSS背景图片和徽标周围的<h1>标签，那么你的CSS代码确实是正确的。

用于html标记容器的css

2 个答案: