Таблицы каскадных стилей CSS (вместо введения)
Таблицы каскадных стилей (Cascading Style Sheets) - набор правил оформления и форматирования применяемый к различным элементам HTML-страницы.
В HTML для присвоения группе одинаковых элементов определенных свойств (цвет, размер, положение на странице и т. п.) приходиться описывать эти свойства в каждом элементе. В CSS достаточно один раз описав свойства и определив это описание как стиль, в дальнейшем просто указывать, что элемент, который нужно оформить соответствующим образом, должен принять свойства описанного стиля. Оценить преимущество CSS перед HTML-версткой можно, создав пару десятков страниц, в которых привередливый заказчик решил поменять некоторые элементы оформления. :-)
Каждое CSS правило состоит из селектора и объявления. Способ записи CSS отличается от формы использования тегов HTML, и, в общем виде, выгладит так:
селектор {
свойство1: значение1;
свойство2: значение2;
свойство n: значение n
}
Селектор - имя стиля, в котором указаны параметры форматирования. Он определяет, к каким элементам HTML-документа будет применен данный стиль. Селекторы делятся на селекторы тегов, классы и идентификаторы (id-классы). После указания селектора ставят фигурные скобки, между ними записывается необходимое объявление. Объявление, в свою очередь, состоит из свойства и значения, которое указывается после двоеточия. CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции.
h2 {color: red;
text-align: center
}
В этой записи заголовок второго уровня - селектор, он определяет, к каким элементам HTML-документа будет применен данный стиль. То, что находится в фигурных скобках - объявление правила для этого селектора. "Color" и "text_align" - свойства объявлений, а "red" и "center" - значения.
Правила описания стилей можно писать в строку, в столбик в разных местах HTML-документа и даже в отдельном файле. После каждого свойства необходимо ставить двоеточие. После каждого значения - точку с запятой. В последнем значении точка с запятой необязательна.
Способ задания стиля в элементе разметки для конкретного тега HTML-страницы называют "локальным" или "внутренним":
<body><тег style="свойство 1: значение 1; свойство n: значение n">текст</элемент>
</body>
Чаще используют способ описания стиля в заголовке страницы (таблицы глобальных стилей), размещая элемент style между тегами <head> … </head>:
<head><style type="text/css">
элемент {
свойство 1: значение1;
свойство "n": значение "n"
}
</style>
</head>
Наиболее распространен способ организации внешнего листа описания стилей в виде отдельного файла (таблицы связанных стилей) и подключения его к HTML-страницам сайта путем записи в <head> ссылки:
<link rel="stylesheet" href="style.css" type="text/css"/>Внешний лист описания стилей, созданный для всех страниц сайта, позволяет значительно сократить время загрузки страниц, так как кэшируется браузером, уменьшая вес Web страницы.
