CSS для HTML-разметки контейнера для

Question

Это немного общий вопрос, но я стремлюсь к краткой разметке html с минимальным css в моих проектах, и это то, что беспокоило меня долгое время.

Я часто использую элемент контейнера (например,: 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 и указание ширины и высоты вдвое ненужным.Затем вы только указываете ширину и высоту для самого изображения.Например:

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

Размещение логотипа (как я полагаю) с тегом <h1> также не является наилучшей практикой с точки зрения SEO.Вам следует зарезервировать тег <h1> для заголовка страницы, а не для названия компании или бренда.Единственная страница, где это можно сделать, - это домашняя страница, но даже там я бы этого не сделал.

Если вы хотите использовать фоновые изображения CSS и тег <h1> вокруг логотипа, тогда ваш код CSSдействительно правильно.