Способы подключения стилей к web-странице

Рассмотренный выше пример подразумевает включение в html-код web-страницы инструкций CSS наподобие подпрограммы. Он не требует подключения к web-странице отдельного файла CSS и применяется в тех случаях, когда создание такого файла представляется нецелесообразным, например, если стили используются в пределах лишь одного документа.

Кроме этого, существуют следующие способы подключения (включения) таблиц стилей к web-странице:

1. использование нотаций CSS непосредственно в тегах кода страницы, помещаемых в тело документа, ограниченное директивами <Body> и </Body>. В этом случае общий вид записи имеет вид:

<Тег Style=”свойство: значение”>Содержимое тега</Тег>

Например, чтобы обеспечить вывод текста на экран монитора шрифтом красного цвета:

<P STYLE=”color: red”> Текст, отображаемый красным цветом</P>

Подобная форма представления элементов каскадных таблиц стилей также не требует отдельного подключения к web-странице файлов CSS и может использоваться в коде документа наравне с другими тегами HTML.

2. импортирование нотаций CSS из отдельного файла с расширением .css. В таком файле содержатся описания всех элементов стилей и их свойств. Для этого в заголовок <HEAD> необходимо включить тег <Style>, внутри которого следует записать команду вызова файла CSS. В общем виде процедура подключения имеет вид:

<Head> <Title> Заголовок страницы </Title>

<Style type=”text/css”>@import url (http://www.myserver.ru\css\file.css );

</Style>

</Head>

Значение аргумента url заключается в круглые скобки и является полным или сокращенным адресом, указывающим на целевой css-файл.

3. и наконец, наиболее традиционный и часто используемый способ подключения подразумевает добавление в заголовок <HEAD> специального тега <Link>, синтаксис записи которого следующий:

<LINK REL="stylesheet" TYPE="text/css" HREF="url">, где

REL - определяет тип взаимосвязи текущего документа с объектом, определенным парамет-

ром HREF.

stylesheet - указывает на файл, содержащий таблицу стилей (CSS) для текущего документа.

Браузер загрузит css-файл с указанного в параметре HREF адреса и применит его

к текущему web-документу. Также допустимы значения:

home - указывает на заглавную страницу вашего сайта toc, contents - указывают на файл, содержащий оглавление данного документа. index - указывает на файл, содержащий информацию для индексного поиска по текущему

документу. glossary - указывает на файл, содержащий перечень терминов, относящихся к текущему

документу.

copyright -указывает на страницу сайта, в которой говорится о его создателях, авторских

правах и т.п. up, parent -указывает на "родительскую" страницу

child - указывает на "дочернюю" страницу

next - указывает на следующую страницу в последовательности документов (например,

следующую страницу электронного каталога, документации или словаря).

previous - указывает на предыдущую страницу в последовательности документов. last, end - указывает на последнюю страницу в последовательности документов. first - указывает на первую страницу в последовательности документов. help - указывает на страницу с подсказкой (напр. по навигации по Вашему сайту).

Определение стилей через классы и идентификаторы

Классы предназначены для определения нескольких видов стилей для одного и того же тега. Например, если часть абзацев текста форматируются по одному стилю, а часть абзацев – по другому стилю.

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

НАЗВАНИЕ ЭЛЕМЕНТА .имя класса {свойство: значение;}

Например, P .myclass {text-align: justify;}

В этом случае именем класса служит символьный определитель «myclass». Теперь, если Вы вызовите в коде web-страницы тег форматирования абзаца с указанием имени класса, данному абзацу будут присвоены значения, определенные в описании элемента <P>:

<BODY>

<P CLASS=”myclass”>текст, отформатированный согласно директивам CSS </P>

<P>Текст, отформатированный по умолчанию </Р>

<BODY>

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

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

.имя класса {свойство: значение;}

Например, .myclass {color: green;}

Записав предложенную выше строку в файл CSS, Вы можете вызывать класс с именем “myclass”, присваивая его свойства любому тегу. Например,

<P CLASS=”myclass”> текст, отображаемый зеленым цветом </P>.

Следует помнить, что для классов, равно как и для селекторов, справедливы свойства группировки и наследования.

Идентификаторы представляют собой кодовые объекты CSS, которые позволяют назначать свойства отдельным компонентам HTML без использования прочих стандартных методов. В файле CSS идентификатор обозначается знаком #, а в документе HTML вызывается атрибутом ID. Синтаксис записи идентификаторов следующий:

НАЗВАНИЕ ЭЛЕМЕНТА #имя идентификатора {свойство: значение;}

Например, в файле CSS ввести: P #qwerty {text-align: left;}

а в HTML-документе этот идентификатор можно вызвать директивой:

<P ID=”qwerty”> Текст, позиционированный по левой границе экрана </P>

Идентификаторы, также, можно записывать без указания имени элемента, которому они соответствуют. Например, для определения идентификатора, который меняет шрифт, введем:

#Fontic {font-family:Arial;}

а затем в теге просто укажем атрибут id=Fontic:

<P id=”Fontic”> Изменение шрифта</P>