Возможно вам уже известно, что информация о стилях может находиться или в отдельном файле, или прямо в коде интернет-страницы. Расположение описания стилей в отдельном файле может понадобиться тогда, когда вы планируете применять эти стили нескольким страницам. Для этого можно создать обычный файл, описать с помощью CSS нужные вам стили, залить его на ваш сервер, а в страницах, которые будут его использовать, просто включить его. Делается это с помощью тега , который ставится на страничках:
<LINK REL=STYLESHEET TYPE=»text/css» HREF=»URL»>
Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://…») в случае, если файл стилей находится на другом сервере. Второй вариант, при котором описание стилей располагается в коде Web¬странички, внутри тега , в теге … . В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type=»text/css» является обязательным и служит для указания броузеру использовать CSS. И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим. Давайте рассмотрим механизм, с помощью которого стили присваиваются элементам Web¬страниц. Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:
НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;}
Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML¬тега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Более подробно команды языка CSS мы рассмотрим чуть позже. Пример:
H1 {font-size: 30pt; color: blue;}
В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет. Также элементы страниц, созданные с использованием CSS, используют механизм наследования: т. е. если вы располагаете изображение внутри тега
<p></p>
оформленного с помощью CSS, с отступами, так, чтобы параграф занимал только определенную часть ширины страницы, изображение также унаследует значения отступов, указанные для этого параграфа. CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = «имя класса» или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее. Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных). Пример:
.b-с {font-weight: bold; text-align: center}
– описание стиля для класса b-с Все элементы класса b-с будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).
<P CLASS=»b-с»>Текст параграфа</P>
– параграфу присвоен стиль класса b-с.
<TD CLASS=»b-c»>текст</TD>
– ячейке таблицы присвоен стиль класса b-c. Содержащийся в ячейке текст будет отображаться согласно описанию класса. Таким образом, вы можете присвоить описанный стиль любым текстовым элементам страниц. Обратите внимание, что при написании названия классов необходимо соблюдать регистр символов, согласно тому, как вы назвали класс в описании стиля! Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс.
