Десять приемов CSS, о которых вы возможно не знали

1. Сокращенные правила CSS для шрифта

Определить стиль шрифта в CSS можно например так:

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-family: verdana,serif

Однако в этом нет необходимости, поскольку можно использовать следующий сокращенный вариант :

font: 1em/1.5em bold italic small-caps verdana,serif

Уже лучше. НО! Такая сокращенная форма записи будет работать только в том случае, если явно заданы font-size и font-family. Если же не задать такие свойства, как font-weight, font-style или font-variant, то им будут присвоены значения по умолчанию, т.е. normal, имейте это ввиду.

2. Два класса сразу

Как правило, для тэга задается только один класс одновременно, однако это не значит, что нельзя задать больше. В действительности можно задать столько классов, сколько захочется, например:

<p class="text side">...</p>

Использование этих двух классов вместе (разделенных пробелом, а не запятой) означает, что при верстке используются правила, заданные как в text, так и в side. Если какие-то правила разных классов перекрываются, то приоритет имеет тот класс, который задан позже других в таблице стилей.

3. Значение толщины рамки в CSS по умолчанию

При написании правила CSS для рамки, как правило, устанавливаются цвет, ширина и стиль (не обязательно в таком порядке :). Например, border: 3px solid #000 даст вам черную рамку, окрашенную в сплошной черный цвет толщиной в три пикселя.

Если бы вы просто задали: border: solid, то для определения остальных параметров были бы использованы параметры по умолчанию. А они следующие: толщина имеет значение medium, т.е. где-то 3-4 пикселя, а цвет задается цветом текста внутри рамки. Если же эти параметры как раз те, которые вам нужны, вы можете не определять их явным образом!

4. Игнорируемое IE свойство !important

Для правил CSS характерно следующее поведение: сколько бы их не было, наивысший приоритет имеет последнее. Однако если использовать !important после команды, то эта команда CSS будет иметь наивысший приоритет вне зависимости от того, что находится после нее. Это справедливо для всех браузеров, кроме IE. Например:

margin-top: 3.5em !important; margin-top: 2em

В этом случае отступ будет равен 3,5em для всех браузеров, кроме IE, для которого величина отступа будет равна 2em.

(Остерегайтесь также элемента CSS child selector, содержание которого IE также игнорирует).

5. Методика замены нестандартных шрифтов изображениями

Для разметки с точки зрения скорости загрузки и преимуществ доступа (копирование и т.п.) предпочтительно использовать чистый текст, а не изображения. Однако если вы обязательно использовать именно какой-то определенный шрифт, который может быть не установлен у посетителя, то у вас нет выбора.

Например, вам нужно, чтобы в заголовке каждой страницы была надпись "Купить виджет". А поскольку вы именно ими и торгуете, то вам нужно, чтобы эта фраза находилась поисковой машиной. И поскольку вы хотите использовать нестандартный шрифт, то вы вставляете изображение:

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

Решение само по себе нормальное, однако надо учесть, что поисковые машины не уделяют столько внимания альтернативному тексту для изобржений, сколько обычному тексту (потому что вебмастера имеют привычку писать в альтернативный текст всякую ерунду). Поэтому альтернативой будет такой способ:

<h1><span>Buy widgets</span></h1>

Однако здесь уже не используется ваш нестандартный шрифт. Чтобы выйти из этой ситуации, поместите следующие команды в документ CSS:

h1
{
background: url(widget-image.gif) no-repeat;
}

h1 span
{
position: absolute;
left:-2000px
} 

Картинка с надписью нужным вам шрифтом будет отображена стандартным шрифтом, который будет безопасно расположен на расстоянии 2000 пикселей слева от документа и не будет виден.

NB! в комментах yнашось хорошее альтернативное решение от Aaron Eldreth (TheCollective4.com, His Articles), основанное на использовании вместо left:-2000px свойств visible: hidden или display: none:

h1 span
{
/* Note: Either will work. Take your pick, though NS uses a different attribute for the visible property */
display: none;
visible: hidden;

6. Альтернатива box model hack в IE

Box model hack используется для устранения проблемы в браузерах младше 6-ой версии IE, где рамка и набивка включены в ширину элемента, а не добавляются. Например, при задании размеров контейнера можно использовать следующее правило:

#box
{
width: 100px;
border: 5px;
padding: 20px;
} 

Правило CSS применяется тогда следующим образом:

<div id="box">...</div>

Это обозначает, что полная ширина бокса равна 150 пикселей (100 пикселей непосредственно ширина + по 5 пикселей каждая рамка + по 20 пикселей набивка с обеих сторон) во всех браузерах, кроме младших 6-го IE. В этих браузерах полная ширина будет равна 100 пикселей, причем набивка и толщина рамки уже включены в ширину. Модель позволяет исправить такое поведение, но это не самый хороший способ.

Простым решением будет использование следующей таблицы стилей:

#box
{
width: 150px;
}

#box div {
border: 5px;
padding: 20px;
} 

А новый код HTML будет тогда таким:

<div id="box"><div>...</div></div>

Теперь ширина бокса всегда будет 150 пикселей, вне зависимости от браузера.

7. Выравнивание блочных элементов по центру

Ну вот захотелось вам, чтобы у вас был сайт с постоянной шириной, содержимое которого находилось бы посередине экрана. Это можно сделать например так:

#content
{
width: 700px;
margin: 0 auto;
}

Затем каждый элемент заключается в <div id="content"> в теле HTML документа, и получает автоматический отступ слева и справа, обеспечивая постоянное расположение элемента в центре экрана. Просто, но есть один нюанс - есть ведь еще и браузеры, которые не центрируют элементы при использовании этой команды. Для этого придется немного изменить правило:

body
{
text-align: center;
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto;
} 

Таким образом мы отцентрируем основное содержимое, однако и текст будет выравниваться по середине. Для изменения последнего мы задаем свойство align: left в элементе div.

8. Вертикальное выравнивание с помощью CSS

Реализовать вертикальное выравнивание в таблицах проще простого. Для того, чтобы выровнять содержание по середине (высоты ячейки), можно использовать конструкцию vertical-align: middle. Допустим, у вас есть пункт в меню навигации, чья высота равняется 2em, и вы вставляете команду вертикального выравнивания в правило CSS. Однако текст все равно останется наверху.

Хм, странное поведение... Вот решение. Установите высоту линии такой же, как и высота самого бокса в CSS. В частности, для нашего примера бокс высотой 2em, поэтому нужно вставить в правило CSS line-height: 2em, и текст теперь будет находиться посередине бокса!

9. Позиционирование внутри контейнера

Одним из неоспоримых преимуществ CSS является то, что с их помощью мы можем поместить объект в любом месте документа. Также можно (а иногда и желательно) расположить объекты в контейнере. Это тоже делается просто. Просто создайте следующее правило CSS для контейнера:

#container
{
position: relative
}

Теперь любой элемент, который находится в этом контейнере, будет располагаться относительно него. Допустим, у нас есть такой HTML-код:

<div id="container"><div id="navigation">...</div></div>

Для того, чтобы поместить меню на расстоянии точно 30 пикселей слева и 5 сверху от границы контейнера, можно использовать следующее правило CSS:

#navigation
{
position: absolute;
left: 30px;
top: 5px
} 

В этом примере можно было также использовать правило margin: 5px 0 0 30px, , но есть некоторые случаи, когда предпочтительно использовать именно позиционирование.

10. Распространяем фоновый цвет ячейки до нижнего края страницы

Одним из недостатков таблиц стилей является невозможность контролировать положение по высоте, в отличие от табличной верстки. Допустим, вам нужно получить слева колонку с навигацией по сайту. И вы хотите, чтобы ее фон был голубым, в то время, как фон страницы белый. Для этого применятся простое правило:

#navigation
{
background: blue;
width: 150px;
} 

Но здесь есть одна загвоздка: так как высота меню меньше высоты экрана, то под ней внизу до конца экрана будет виден белый фон страницы. Это сильно портит дизайн страницы. И что нам с этим делать?

К сожалению, единственным решением является обман - т.е. задание телу документа фоновой картинки того же цвета и той же ширины, что и наша колонка. Сделаем это так:

body
{
background: url(blue-image.gif) 0 0 repeat-y;
}

Ширина картинки, которую вы зададите в качестве фоновой, должна быть ровно 150 пикселей, соответственно, и ее цвет должен быть тем же, что и фоновый цвет левой колонки. Недостатком такого способа является то, что вы не можете задать ширину колонки в em, т.е. невозможно сделать "резиновую" страницу.

На момент написания статьи этот способ был единственным решением проблемы левой колонки. Будем надеяться, что CSS3 предоставит-таки кошерный способ ее решения.