Бузочок

Ни для кого не секрет, что таблицами верстают только застрявшие в технологиях 90-х фрики, которые не хотят приложить немного усилий для ознакомления с CSS. Связка XHTML/CSS позволяет творить чудеса, а если добавить ещё и JavaScript — полёт фантазии не ограничен вообще ничем.

Когда я только начинал знакомиться с каскадными таблицами (то бишь с CSS), доводилось самостоятельно, по крупицам собирать необходимые базовые сведения. Специализированные блоги, в основном, рассчитывают на подготовленного верстальщика. Но, что характерно, остаются вопросы, которые уже давно стыдно задавать, но ответы на которые хочется получить. Для таких людей, ну и для того, чтобы систематизировать собственную базу знаний, я подготовил эту статью.

Что же такое CSS? Это мост между программированием и дизайном, и каждый профессиональный веб-разработчик должен быть с ним знаком. Поэтому рекомендую открыть свой любимый текстовый редактор, желательно с подсветкой синтаксиса, и на практике повторять все приведённые примеры в этой статье. Начнём с фундаментальных понятий. Хотя, я рассчитываю на то, что вы в общих чертах уже знаете CSS, чтобы не объяснять с полного нуля, на уровне скобочек и подключения css-файла в html-файл. Также я не буду переводить терминологию, так как она стандартна и нигде никак не переводится. Сегодня мы разберём 3 базовых понятия CSS:

1. Padding и margin
2. Float
3. Выравнивание

1. Padding и margin

Большинство начинающих верстальщиков путают между собой понятия padding и margin, и используют их некорректно. Например, использование padding или margin для установки высоты объекта, при непонимании их природных свойств, часто приводит к ошибкам и несоответствиям между желаемым и действительным. Правильное понимание padding и margin очень важно в использовании CSS. Да? Да!

Padding — это внутреннее пространство элемента, а margin — внешнее.

Чтобы увидеть разницу, установите какой-нибудь цвет фона и границ какому-нибудь элементу. В отличие от padding’а, на margin это никак не повлияет, потому-что он устанавливает как бы объём воздуха вокруг нашего элемента. Чтобы это было проще понять, посмотрите на картинку:

Значения margin и padding указываются по часовой стрелке, начиная с верхней границы.

Практический пример: Вот заголовок ‹h2› между двумя параграфами. Как видите, margin создаёт пустое пространство между ними, а padding как бы распирает сам элемент.

В приведённом выше примере, свойства margin и padding будут такими:

margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

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

margin: 15px 0; /*-- top и bottom = 15px | right и left = 0 --*/
padding: 15px; /*-- top, right, bottom и left = 15px --*/

Вот полный CSS-код нашего заголовка:

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

Полезная подсказочка:
Имейте ввиду, что padding увеличивает общую ширину элемента. Например, если вы рассчитали, что ваш элемент должен занимать 100 пикселей в ширину, и если вы добавили padding слева и справа по 10 пикселей, то итоговая ширина элемента будет 120 пикселей, а не сто. Это надо учитывать в расчётах.

100px (содержимое) + 10px (левый padding) + 10px (правый padding) = 120px (итоговая ширина элемента)

Margin, однако, расширяет поле вокруг объекта, но не влияет непосредственно на сам объект. Надеюсь всё ясно и мы переходим дальше.

2. Float

Float — это ещё один чертовски важный элемент для построения веб-сайтов на CSS и может использоваться для выравнивания изображений, блоков разметки (здесь и дальше я так обзываю понятие layouts), колонок и т.д. Если вы помните как выравнивать элементы по левой и правой стороне в HTML, то сразу же разберётесь как работают float’ы.

Свойство float указывает где будет «плавать» область с фиксированной шириной — слева, или справа, соответственно как именно будет обтекать контент вокруг него (а это официальное определение, я с него мало что понял).

Значение float:left выравнивает элементы по левому краю, используется также для создания контейнера, в котором можно располагать блоки разметки и колонки. Лучше показать это картинкой:

Значение float:right выравнивает элемент по правому краю с обтеканием вокруг него слева.

Полезная подсказочка: Так как блок обычно занимает 100% ширины своего родительского контейнера, выравнивание элемента по правому краю сбрасывает его на следующую строку. Это также относится и к обычному тексту, который расположен рядом с ним. Как всегда, это проще показать, чем доступно описать.

Можно исправить этот баг/фичу двумя способами:
1. Поменять порядок элементов в HTML-разметке так, чтобы плавающий элемент оказался строкой выше соседнего:

<img src="float-right.gif" style="float: right;" />
<p><!-- Текст какой-нибудь --></p>

2. Явно указать ширину соседнего элемента таким образом, чтобы суммарная ширина оказалась меньше или равнялась ширине родительского контейнера.

<div style="float: left; width: 300px;"><p><!-- Текст какой-нибудь --></p></div>
<img src="float-right.gif" style="float: right;" />

Как всегда, Internet Explorer 6 пытается усложнить нашу жизнь. На этот раз он удваивает margin плавающего элемента. Так что если вы указали margin в 5 пикселей, то в IE6 он будет все 10.

Конечно, со времён официального прекращения поддержки этого недобраузера Майкрософтом, можно забить на все его причуды. Но многие офисы настолько консервативны, что Explorer всё ещё используется в работе и будет на плаву ещё несколько лет точно. А поэтому существует простой трюк, который тычет IE6 мордой в стандарты:

.floated_element {
float: left;
width: 200px;
margin: 5px;
display: inline; /*--Для IE6--*/
}

3. Выравнивание

Дни использования HTML-тега ‹center› давно канули в лету. Давайте разберём различные варианты центрирования элемента.

Горизонтальное выравнивание

Вы можете выравнивать элементы по горизонтали, используя свойство text-align. Это очень просто, но имейте ввиду, что выравнивание inline-элементов, в отличие от обычного текста, требует дополнительный параметр display:block. Это позволяет браузеру определить границы, по которым вычисляется выравнивание.

.center {
text-align: center;
display: block; /*-- Только для inline-элементов--*/
}

Для горизонтального выравнивания нетекстовых элементов, используйте свойство margin.

W3C утверждает, что «если margin-left и margin-right указаны как auto, то их значения одинаковы. Это свойство позволяет выравнивать элемент по горизонтали, относительно краёв контейнера».

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

Для центрирования блока разметки:

.layout_container {
margin: 0 auto;
width: 960px;
}

Для центрирования картинки:

img.center {
margin: 0 auto;
display: block; /*-- img это inline-элемент --*/
}

Вертикальное выравнивание

Можно выровнять по вертикали текстовые элементы, используя свойство line-height (высота линии), которое определяет пространство между строками текста. Это отличный способ для вертикального выравнивания заголовков и других текстовых элементов. Просто сделайте так, чтобы свойства элемента line-height и height совпадали.

h1 {
font-size: 3em;
height: 100px;
line-height: 100px;
}

Для выравнивания нетекстовых элементов используется, так называемое, абсолютное позиционирование (в другом уроке разберём детально что это и как это).

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

Элемент со свойством position:absolute позиционируется относительно своего базового положения (0,0: верхний левый угол). На картинке внизу, красная точка — это точка отсчёта положения элемента до применения отрицательного корректирующего margin’а.

.vertical {
width: 600px; /*-- Ширина блока --*/
height: 300px; /*-- Высота блока --*/
position: absolute; /*-- Абсолютное позиционирование, обязательно --*/
top: 50%; /*-- Координаты сверху ставим на 50% --*/
left: 50%; /*-- Координаты слева тоже на 50% --*/
margin: -150px 0 0 -300px; /*-- Устанавливаем корректирующий отрицательный margin --*/
}

Вот пока и всё. В следующем уроке мы разберём что такое списки, overflow, позиционирование… и может ещё что-нибудь :) Замечания и дополнения жду, как всегда, в комментариях.

UPD: Осваиваем CSS. Часть 2