Работа с фоном. Фоновый цвет на практике
Раздел: HTML 04-12-2004 FAQ оптимизатору на форуме ZenBroker
Автор -
Михаил Дубаков
На практике применять все гораздо интереснее, чем читать нудные руководства, инструкции и рекомендации. Ясно дело, когда видишь результат своего труда, на душе становится веселей. Мы с вами сейчас узнаем, как использовать свойства фона по назначению.
Очевидно, чаще всего кодеры задают цвет фона, используя свойство background-image или же просто background. Вот с него-то мы и начнем.
Замечание
Для тех кто не знает, свойство background является сокращенной формой записи всех возможных свойств фона. Так, например, цвет фона можно записать так background-color: #FFF, а можно и так background: #FFF. Места экономит порядочно, особенно если свойств несколько.
Как задают цвет фона для всей страницы? Правильно, с помощью атрибута BGCOLOR тега BODY. Так вот меняйте свои привычки, чтобы не засорять тег BODY всякой гадостью. Вообще каскадные таблицы стилей конкретно помогают сделать код чище. Итак, вместо
<BODY BGCOLOR=#FFFFFF>
Надо написать в стилях
BODY {background: #FFF}
После чего безжалостно убрать все атрибуты BGOLOR из всех тегов BODY всех страниц сайта. Экономия и чистота кода складывается из мелочей подобного рода, так что не стоит ими пренебрегать.
Однако со строками и ячейками таблиц ситуация не такая однозначная. Здесь бывают разные ситуации. Первая. Вы верстаете сайт в три колонки, применяя табличную верстку. Левая колонка должна быть серой. Нет особого смысла делать для этого отдельный класс, в котором прописывать цвет фона для этой колонки. Вставлять BGCOLOR=#CCCCCC в этом случае легче, чем запоминать название класса и вставлять CLASS=left-col. Естественно, здесь еще присутствует проблема обновляемости. То есть, если вдруг понадобиться изменить цвет с серого на белый, придется перелопатить все странички/шаблоны. Однако в большинстве случаев такие глобальные изменения на сайте не делаются, разве что при редизайне, но тогда все перекодируется с нуля.
Вторая ситуация. У вас есть таблица, в которой чередуются светло-серые и серые строки. Тогда вы пишете так:
<TR BGCOLOR=#EEEEEE><TD>контент</TD></TR>
<TR BGCOLOR=#DDDDDD><TD>контент</TD></TR>
...
Для сокращения кода можно ввести два новых класса. Например, eee и ddd. Тогда код станет вот таким:
.ddd {background: #DDD}
.eee {background: #EEE}
...
<TR class=eee><TD>контент</TD></TR>
<TR class=ddd><TD>контент</TD></TR>
...
Собственно говоря, у каскадных таблиц стилей всегда есть один глобальный плюс: при их использовании поддержка сайта однозначно упрощается.
Рекомендация
Легко сообразить, что использование классов особенно полезно в тех случаях, когда они будут использоваться часто. Так что, если класс появится на странице один раз, особого смысла его вводить нет.
Очень часто дизайнеры любят выделять всякие заголовки разделов фоном. То есть брать и класть в фотошопе на цветную плашечку текст. Вот так.
У неопытного кодера при этом возникают определенные проблемы. Допустим, это у нас блок новостей. Замечательно. Мы создаем класс таких блоков и с чистым сердцем называем его news, что вполне логично. Класс и блок будут, например, такими:
.news {color: #000; font-size: 12px; width: 200px}
...
<DIV class=news>
Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.
</DIV>
На практике блок будет выглядеть так:
Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.
Надо бы сделать вначале блока красненькую плашечку, ширина которой соответствовала бы слову НОВОСТИ (учитывая тот факт, что дизайнер, по всей видимости, одной плашечкой под новости не ограничился, хотелось бы универсальности, то есть чтобы ширина плашечки соответствовала ширине контента. Короче, чтобы изменялась при изменении слова). Смело колбасим класс title и пихаем его в начало блока:
.title {color: #FFF; background: #E50D0D; font: bold 14px Arial}
...
<DIV class=news>
<DIV class=title>НОВОСТИ</DIV>
Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.
</DIV>
Вот что видим:
НОВОСТИ
Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.
Оказывается, наш блок с названием растянулся на всю доступную ему ширину, то есть на 200 пикселей. Как нам согласовать ширину блока с шириной контента? А вот тяжело, потому что элемент DIV образует блоки структурные, а нам нужен блок строчный. То есть, если использовать DIV, то надо ему прописать display: inline, но многие браузеры (в частности IE5) это объявление не понимают. Выход очевиден, надо использовать элемент строкового уровня, например тот же SPAN.
<DIV class=news>
<SPAN class=title>НОВОСТИ</SPAN><BR>
Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.
</DIV>
НОВОСТИ
Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.
Еще один прием. Маловероятно, что внутри новостной колонки будут использоваться еще какие-либо теги SPAN. Поэтому можно применить контекстный селектор — убрать класс title и вместо него повесить стили на элементы SPAN, которые находятся внутри элемента с классом news. Делается это так:
.news {color: #000; font-size: 12px; width: 200px}
.news SPAN {color: #FFF; background: #E50D0D; font: bold 14px Arial}
...
<DIV class=news>
<SPAN>НОВОСТИ</SPAN><BR>
Самый настоящий блок новостей. Вы не подумайте ничего плохого, обычная новостная колонка.
</DIV>
Код слегка сократился, что приятно само по себе...
