Бузочок

На прошлом занятии мы разобрали три прикольные пипки CSS — padding/margin, float и выравнивание. Сегодня разберём ещё 4. Кстати, это не последняя статья из цикла «Осваиваем CSS». Надо ещё разобраться с бэкграундами, спрайтами, тонкостями позиционирования и т.д. и т.п. Так что следите за обновлениями.

На самом деле, я читаю комментарии, так что можете задавать вопросы по этом материалу и корректировать приоритетность написания статей. Если кому-то нужно подробно объяснить, скажем, работу с фоновыми изображениями или если есть вопросы по синтаксису CSS и в целом по вёрстке —спрашивайте, я обязательно отвечу.

1. Списки

Нумерованный список ‹ol› это список, значения которого помечаются цифрами. Что логично, да?

Ненумерованный список ‹ul› это список, значения которого помечаются маркерами. По умолчанию, оба вида списков простые и не гламурные. Но с помощью CSS мы можем без особых усилий изменить их внешний вид.

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

Кастомизация ненумерованного списка

Стандартные маркеры слишком унылые и не привлекают к себе никакого внимания. Но это исправимо с помощью простой техники, которая называется «прячем стандартные маркеры и замещаем их фоновыми картинками».

Вот CSS:

ul.product_checklist {
list-style: none; /*-- Убираем стандартные маркеры --*/
margin: 0;
padding: 0;
}

ul.product_checklist li {
padding: 5px 5px 5px 25px; /*-- Добавляем паддинг вокруг каждого маркера --*/
margin: 0;
background: url(icon_checklist.gif) no-repeat left center; /*-- Ну и ставим какую-нибудь фоновую картинку в роли маркера --*/
}

Ненумерованный список в роли навигационного меню

Сейчас многие CSS-меню построены на списках. Наверное потому-что это удобно. Сейчас мы научимся из обычного списка делать горизонтальное навигационное меню.

HTML: начнём с простого ненумерованного списка с ссылками:

<ul id="topnav">
<li><a href="#">Главная</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>

CSS: убираем обычные маркеры (как мы делали выше) параметром list-style: none. Потом делаем список горизонтальным политически правильным float’ом :) В итоге значения списка будет размещаться горизонтально, слева направо:

ul#topnav {
list-style: none;
float: left;
width: 960px;
margin: 0; padding: 0;
background: #f0f0f0;
border: 1px solid #ddd;
}

ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #ddd;
}

ul#topnav li a {
float: left;
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}

ul#topnav li a:hover {
background: #fff;
}

2. Стилизированные заголовки

Теги заголовков очень важны в SEO. Но стандартные заголовки выглядят слишком уныло. CSS спешит на помощь! Можно описать стили как для заголовков, так и для inline-элементов. Сделаем всё красивенько.

HTML:

<h1>Осваиваем <span>CSS</span> <small>Прикольчики, фишечки и заманушечки</small></h1>

Ну и CSS:

h1 {
font: normal 5.2em Georgia, "Times New Roman", Times, serif;
margin: 0 0 20px;
padding: 10px 0;
font-weight: normal;
text-align: center;
text-shadow: 1px 1px 1px #ccc; /*-- Не поддерживается IE --*/
}

h1 span {
color: #cc0000;
font-weight: bold;

}
h1 small {
font-size: 0.35em;
text-transform: uppercase;
color: #999;
font-family: Arial, Helvetica, sans-serif;
text-shadow: none;
display: block; /*-- Выдаёт тегу отдельную строку--*/
}

3. Overflow (переполнение)

Свойства overflow используются очень часто. Что это? W3Schools.com говорит, что «свойство overflow определяет что случится с контентом, если он выйдет за пределы своего блока». Вот парочка примеров того, как это происходит:

Внешне, overflow: auto очень похож на iframe, но на самом деле он гораздо полезнее и дружественней к SEO. Он автоматически добавляет полосы прокрутки (и вертикальные, и горизонтальные) когда контент выходит за пределы дозволенного.

Свойство overflow: scroll работает практически так же, только полосы прокрутки отображает в любом случае, независимо от количества содержимого.

А свойство overflow: hidden прячет всё, что не поместилось в блок.

Полезная подсказочка: у вас несчастные случаи на стройке были? Ну то есть когда родительский элемент не полностью обволакивает дочерний? Ну то есть как на картинке? Можно это быстренько пофиксить, сделав родительский контейнер плавающим элементом и установив для него свойство overflow: hidden! В общем меньше слов и смотрим на картинку:

4. Позиционирование

Позиционирование (relative-относительное, absolute-абсолютное и fixed-фиксированное) одно из самых мощных свойств CSS. Оно позволяет располагать элементы, используя для этого систему координат, что даёт нам возможность расположить что угодно и как нам угодно.

Для этого нужно сделать три вещи:
1. Установить координаты;
2. Правильно выбрать тип позиционирования: relative, absolute, fixed или static;
3. Установить значение свойства z-index (не обязательно).

Используя position: relative, элемент находится в зависимом положении. Если этот элемент находится внутри другого блока и если его подвинуть на 10 пикселей вниз и на 10 пикселей вправо, то положение элемента изменится относительно положения верхнего левого угла блока, в котором он находится.

Относительное позиционирование также часто используется для установки новой точки начала координат вложенных элементов, спозиционированных абсолютно. Надо как-то проще выразить… По-умолчанию, начальная точка расположения каждого элемента — верхний левый угол окна браузера. Когда вы даёте элементу положение relative, точка отсчёта всех вложенных элементов с положением absolute будет привязана к своему родителю. То есть положение будет 0,0 относительно родительского контейнера, а не окна браузера. Найс?

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

Исходное положение элемента с position: fixed тоже верхний левый угол окна браузера. Разница в том, что фиксированный элемент остаётся на своём месте всегда и в любом случае, даже когда вы прокручиваете страницу.

Свойство z-index указывает на порядок отображения слоёв. Кто работал с Фотошопом — знает как они работают. Чем выше значение, тем выше положение элемента. Можно сравнить с изображениями на прозрачной плёнке. Когда таких плёнок несколько, важно правильно расположить их друг над другом, чтобы получить необходимое итоговое изображение.

Хух. Пока всё. Домашнее задание — разобраться с этим всем самостоятельно. А в следующий раз мы поговорим о фоновых изображениях и спрайтах. Так что самое интересное впереди.

Если есть неточности или неясности — пишите в комментариях.