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

[Mickeleangelo]

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

На заре веба странички выглядели очень просто: тексты, ссылки, минимум графики. Браузеры отображали страницы немного по-разному, и это нисколько не мешало их просмотру. В 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)

Есть и другие варианты, о них я расскажу в одном из следующих уроков. Если для какого-то элемента подходит сразу несколько правил, то для каждого правила определяется его «вес» (в стандарте описано, как) и применяется правило с большим весом.

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

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

   <link rel="stylesheet" type="text/css" href="style.css">

2. Еще один способ подключить CSS, находящиеся в отдельном файле:
   

   <style type="text/css" media="all">@import "style.css";</style>

3. Непосредственно в HTML-документе:
   

   <style type="text/css">body {
       color: red;
   }</style>

4. Непосредственно в элемент:
   

   <p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>

Кроме стилей, которые определены на странице, есть еще 2 источника для параметров отображения элементов:

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

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

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

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

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

© Mickeleangelo

[Александрр]

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

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

Вопрос: Как же мне все-таки сделать так, чтоб все было красиво?

[Mickeleangelo]

Александрр, насколько я понимаю то, что Вы написали, Вам надо к ссылкам добавить классы, а в стилях для этих классов сделать настройки. Например так:

<style>
a.top {
    color: red;
    font-size: 16px;
}
a.menu {
    color: #000;
    font-size: 12px;
}
.footer a {
    color: #00ff00;
    font-size: 14px;
}
</style>
<!-- Шапка -->
<a class="top" href="index.html">Главная</a> <a class="top" href="prod.html">Продукты</a>
<!-- Конец шапки -->
…
 <!-- Меню-->
<a class="menu" href="r1.html">Раздел 1</a> <a class="menu" href="r2.html">Раздел 2</a>
<!-- Конец меню-->
…
 <!-- Футер -->
<div class="footer">
<a href="index.html">Главная</a> <a href="prod.html">Продукты</a>
</div>
<!-- Конец футера-->

[Александрр]

Да, спасибо большое за помощь. Вы правильно меня поняли, но буквавльно за пол дня до вашего ответа мне объяснили примерно это же. Только вот в таблице стилей надо писать не 'a.menu{}', а '.menu a{}' возможно, это и не играет роли, я не проверял, но насколько я понимаю, все-таки должно роль играть. Классы начинаются с точки

[Mickeleangelo]

Сообщение от Александрр

не 'a.menu{}', а '.menu a{}'

Это две большие разницы
a.menu — это ссылки с классом menu
.menu a — это блок с классом меню, в котором находятся ссылки

[Александрр]

оо, кажется, понимаю.
Тогда вопрос к слову: Имеет ли это какую-то разницу в возможностях? Вариативнсть, так сказать Позволяет ли использовать какие-то принципиально разные действия и в каких случаях проще одно, а в каких - друое?

[Mickeleangelo]

Александрр, принципиальной разницы нет, делайте как удобно.