Изучаем HTML. Часть 8 — Что такое CSS

[Admin]

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

На заре веба странички выглядели очень просто: тексты, ссылки, минимум графики. Браузеры отображали страницы немного по-разному, и это нисколько не мешало их просмотру. В 90-е годы веб начал активно развиваться, у сайтов начали появляться более-менее нормальные дизайны, но различия в отображении браузерами одних и тех же вещей не позволяло использовать дизайнерские решения в полную меру.

Тогда, в 96-м году была принята «Рекомендация CSS1» — стандарт для учета браузерами таких вещей, как параметры шрифта, цвета, атрибуты текста, выравнивания текста, таблиц и изображений, свойства блоков (отступы, рамки и прочее) и другие.

В 98-м году была принята «Рекомендация CSS2». Она добавляла к первой такие вещи, как позиционирование блоков, указатели, разделение стилей в зависимости от носителя (монитор, принтер, КПК…), параметры печати и многое другое.

В 2006-м появилась «Рекомендация CSS2.1», исправляющая ошибки и недочеты 2-й версии.

Сейчас идет активная разработка третьей версии, в корой будут такие вещи, как анимация, трансформация, переменные и другие вкусности.

Хватит истории, перейдем к действительности. Итак, CSS (Cascading Style Sheets — каскадные таблицы стилей) — это описания того, как страница будет выглядеть визуально. Какие на ней будут шрифты, отступы у блоков, межстрочные расстояния, фоны, выравнивания, цвета и так далее. Основное назначение стилей — это отделение содержимого страницы от его представления. Описания записываются в следующем виде:

Код:
селектор1, селектор2 {
свойство1: значение1;
свойство2: значение2;
свойство3: значение3;
}Селектор — это указание, к каким элементам на странице применяется данное описание. Пары свойство + значение — это отдельные элементы правил (шрифт, фон, отступ и так далее). Вот несколько примеров:

Код:
p {
font-family: "Garamond", serif;
}
h2 {
font-size: 110 %;
color: red;
background: white;
}
.note {
color: red;
background: yellow;
font-weight: bold;
}
#article {
color: yellow;
}
a:hover {
text-decoration: none;
}
p.paragraph1 {
margin: 0;
}
#news p {
color: blue;
}Как вы видите, селекторы бывают разными:

Для вида html элемента (В примере: p, h2)
Для элементов с определенным классом (В примере: .note)
Для элемента с определенным идентификатором (В примере: #article)
Для элементов, у которых произошло определенное событие (В примере: a:hover — наведение мышкой на ссылку)
Для выполнения нескольких условий у элемента (В примере: p.paragraph1 — все параграфы, имеющие класс "paragraph1")
Для выполнения условий вложенности (В примере: #news p — все параграфы, которые находятся внутри элемента с идентификатором #news)
Есть и другие варианты, о них я расскажу в одном из следующих уроков. Если для какого-то элемента подходит сразу несколько правил, то для каждого правила определяется его «вес» (в стандарте описано, как) и применяется правило с большим весом.

Подключить стили можно несколькими способами:

Лишь ссылка в HTML, а сами CSS в отдельном файле (наиболее предпочтителен):

Код HTML:
<link rel="stylesheet" type="text/css" href="style.css">Еще один способ подключить CSS, находящиеся в отдельном файле:

Код HTML:
<style type="text/css" media="all">@import "style.css";</style>Непосредственно в HTML-документе:

Код HTML:
<style type="text/css">body {
color: red;
}</style>Непосредственно в элемент:

Код HTML:
<p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>Кроме стилей, которые определены на странице, есть еще 2 источника для параметров отображения элементов:

Стили браузера. В каждом браузере определены стили по-умолчанию, согласно которым он отображает содержимое для тех элементов, для которых не заданы никакие стили.
Стили пользователя. В нормальных браузерах для пользователей есть возможность создать свои определения стилей, которые будут применяться на всех сайтах.
Вот так браузеры и работают: читают код html, берут свои стили по-умолчанию, стили пользователя, стили от страницы, мешают всё это, затем определяют для каждого элемента, как его отображать и выводят всё это на экран.

Казалось бы, всё это должно отлично работать, но…
Во-первых, не все браузеры полноценно поддерживают стандарты CSS2.1.
Во-вторых, некоторые моменты в стандартах описаны так, что их можно понять двояко. И разработчики разных браузеров реализуют некоторые особенности немного по-разному, или вносят свои фишки.
В-третьих, исторически сложилось, что в html коде можно делать ошибки: неправильно закрывать теги, забывать указывать обязательные параметры и так далее. Страницы при этом продолжают отображаться, а браузеры пытаются понять, что же именно имел ввиду верстальщик, и стараются исправить эти ошибки при выводе страницы. Каждый браузер, естественно, по-своему.

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


Испугались? Давайте напоследок что-нибудь хорошее покажу. Есть сайт, отлично демонстрирующий всю мощь CSS. При одном и том же html коде и разными css стилями получаются совершенно разные по дизайну варианты, причем, меняется абсолютно всё: начиная от шрифтов и заканчивая взаимным расположением блоков.