Стандартный CSS-файл для CSS Zen Garden (Выпуск 6)

Напоминаю, что ранее мы рассмотрели HTML-разметку сайта http://www.csszengarden.com/. Сегодня мы познакомимся с его стандартным CSS-стилем, который из примитивной HTML-разметки создает, как по мановению волшебной палочки, прекрасный сайт. Буду рассказывать так подробно, насколько это возможно, поскольку рассылку могут читать люди, которые только-только занялись сайтостроительством. Хотя предполагается, что базовые HTML-тэги все знают :).

Пропуская коментарии, первым делом мы видим стили базовых элементов:

html {
 margin: 0;
 padding: 0;
}
body {
 font: 75% georgia, sans-serif;
 line-height: 1.88889;
 color: #555753;
 background: #fff url(blossoms.jpg) no-repeat bottom right;
 margin: 0;
 padding: 0;
}
p {
 margin-top: 0;
 text-align: justify;
}
h3 {
 font: italic normal 1.4em georgia, sans-serif;
 letter-spacing: 1px;
 margin-bottom: 0;
 color: #7D775C;
}
a:link {
 font-weight: bold;
 text-decoration: none;
 color: #B7A5DF;
}
a:visited {
 font-weight: bold;
 text-decoration: none;
 color: #D4CDDC;
}
a:hover, a:active {
 text-decoration: underline;
 color: #9685BA;
}
acronym {
 border-bottom: none;
}

Напоминаю, стиль какого либо параметра описывается в формате: параметр: стиль;. При этом полное описание стиля элемента (HTML-тэга, например) задаётся синтаксисом: элемент{параметр₁: стиль₁; параметр₂: стиль₂;...}

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

margin - это пространство вокруг границ элемента. Полное описание параметра margin находится по адресу: http://msdn2.microsoft.com/en-us/library/ms530799(VS.85).aspx
padding - это пространство между границами элемента и содержательной частью элемента (аналог пробела, если говорить в терминах текста). Полное описание параметра margin находится по адресу: http://msdn2.microsoft.com/en-us/library/ms530830(VS.85).aspx

Как вы поняли, у элементов html и body оба эти параметра установлены в ноль, то есть ни отступов, ни пробелов.

color - это цвет элемента. Полное описание параметра color находится по адресу: http://msdn2.microsoft.com/en-us/library/ms530749(VS.85).aspx
background - это описание фона элемента внутри границ. Полное описание параметра background находится по адресу: http://msdn2.microsoft.com/en-us/library/ms530722(VS.85).aspx

То есть в теле документа текст имеет цвет #555753 и фон - некий рисунок blossom.jpg, который помещается лишь единожды (no repeat) в правый нижний угол (bottom right). Если же картинки в браузере отключены, то фон будет просто белым (#fff).

У текстовых элементов можно варьировать стиль шрифта при помощи параметра font, полное описание которого находится по адресу: http://msdn2.microsoft.com/en-us/library/ms530756(VS.85).aspx

В частности, в теле элемента мы будем иметь текст Georgia или Sanserif (если Georgia не установлен на компьютере) в 75% размере от стандартного.

Завершаем стиль элемента body параметром line-height, который устанавливает расстояние между строками (http://msdn2.microsoft.com/en-us/library/ms530784(VS.85).aspx). Отсутствие единиц измерения (сантиметры, дюймы и т.д. http://msdn2.microsoft.com/en-us/library/ms531211(VS.85).aspx) говорит о единице измерения по умолчанию, px (пиксели).

Для стандартного HTML абзаца (элемент р) все параметры body наследуются (http://msdn2.microsoft.com/en-us/library/ms531429(VS.85).aspx), плюс добавляется выравнивание текста слева и справа: text-align: justify; Подробнее про выравнивание текста ситайте по адресу: http://msdn2.microsoft.com/en-us/library/ms531162(VS.85).aspx

Далее идут более сложные выражения для элементов, которые называются селекторы и о них мы поговорим в следующий раз и закончим разбор стилей для основных элементов в стандартном CSS- файле для CSS Zen Garden. А пока что поэкспериментируйте со стилями других элементов. Рекомендую обращаться к справочнику по стилям для HTML элементов, находящемуся по адресу http://msdn2.microsoft.com/en-us/library/ms533054(VS.85).aspx