Введение в Css. Урок №1

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

У нас есть документы, которые мы размечаем с помощью тэгов HTML. Сам контент, который мы разметили, конечно, имеет какой-то изначальный внешний вид в браузерах, его можно изменять, подставляя различные атрибуты в тэги. Но разработчики, вместо того, чтобы усложнять язык HTML, добавляя в него новые тэги и их атрибуты для визуального оформления документов, пошли другим путем. Они оформили все визуальные представления HTML при помощи специального языка стилевой разметки. Называется он "Каскадные таблицы стилей" или Css (Cascading Style Sheets). Суть этой технологии в том, что, подключая специальный язык стилевой разметки к любым документам сайта, мы получаем визуальное представление (оформление) содержимого всех элементов (тэгов). Язык Css состоит из правил – записей, как и что должно выглядеть, и селекторов – меток, которые позволяют браузеру определить, к каким элементам нужно применить те или иные правила.
Записываются правила следующим образом:

p{color:red; background:yellow;}

где p - селектор, color – свойство, а red – значение. Если нужно записать несколько свойств, то они разделяются точкой с запятой. В конце каждого правила обязательно нужно ставить ";". Если используется всего одно свойство, то можно не ставить точку с запятой в конце, а также можно не ставить точку с запятой после последнего свойства в цепочке, однако, я Вам настоятельно рекомендую ставить этот знак препинания после каждого свойства - это поможет Вам избежать ошибок.

Есть три основных способа применения правил CSS к документам. Это:
- связывание
- встраивание
- вложение

Способ "вложение"

В тэгах HTML можно написать атрибут style, а в качестве значения атрибута написать свойства CSS:

Однако, данный способ использовать не рекомендуется, так как его использование резко понижает возможность изменять вид Вашего сайта. Например, вместо того, чтобы изменить свойства один раз в одном файле, Вам придется лазить по сайту и искать атрибуты style на каждой странице. Данный способ можно использовать, например, для тестирования свойств.

Способ "встраивание"

Он отличается от предыдущего тем, что вместо того, чтобы вставлять атрибут style в каждый элемент, мы в тэг <head> страницы вставляем парный элемент <style>. А для того, чтобы браузер понимал, что это Css, в тэг <style> вставляется атрибут type со значением "text/css". Внутри пишется сначала селектор, который указывает браузеру, к чему нужно применить правило. Далее, внутри фигурных скобок записываются свойства Css со значениями. Выглядит это так:

В данном коде в качестве селектора выступает название тэга "параграф" без угловых скобок. А правило говорит браузеру, что во всех параграфах на странице цвет текста должен быть красным, а цвет фона – желтым.

Этот способ также не рекомендуется использовать. По той же причине, что и способ "вложение", однако, такие монстры, как Google и Яндекс пользуются именно таким методом (можете посмотреть исходный код страницы поиска Яндекса). Для чего это нужно? Это нужно для того, чтобы снизить нагрузку на сервер. Так как им не зачем создавать дополнительные стилевые файлы, их страницы открываются пользователями очень часто, и нагрузка на серверы огромная. Поэтому, если Ваши сайты не предполагают очень серьезную нагрузку на сервер, то не нужно использовать этот метод.

Способ "связывание"

Применяя данный способ, мы все правила записываем в отдельный файл, ссылку на который помещаем в <head> документа. Этот файл имеет расширение .css, и в нем записаны все правила для всех документов сайта.
Чтобы привязать этот файл к документам, мы в <head> всех документов должны поместить служебную ссылку при помощи одинарного элемента <link>. Выглядит это следующим образом:

Атрибут rel здесь используется для связи двух документов. Он указывает браузеру на то, что файл, с которым связывается документ – это stylesheet (таблица стилей). А в href – указывается путь к данному файлу.

На сайте консорциума (w3.org) список всех свойств можно найти, вбив в поиске по сайту "Css", а затем, нажав на "Cascading Style Sheets…". В закладке "properties" (в верхней части страницы) находится перечень всех свойств. В этом перечне указано (справа налево): название свойства, возможные значения, значение по умолчанию, к чему применяется (если пусто, то ко всем элементам), наследуется свойство или нет (если наследуется, то передается всем элементам по цепочке), можно ли задавать значение свойства в процентах (если пусто, то нельзя, если можно, то к чему относится).

На этом я заканчиваю введение в язык стилевой разметки Css. В следующем материале мы рассмотрим типы селекторов, которые используются в данном языке.

Комментарии: