2020-05-12
88
Широкие возможности каскадных таблиц стилей можно использовать совместно с html-документом различными способами.
Первый из них подразумевает использование нотаций CSS непосредственно в тегах кода web-страницы, помещаемых в тело документа, ограниченное директивами <BODY> и </BODY>. В этом случае общий вид записи тега HTML будет иметь следующий вид:
<ТЕГ STYLE="свойство: значение">Содержимое тега</ТЕГ>
Например, для того чтобы обеспечить вывод текста на экран монитора шрифтом красного цвета, можно использовать следующую запись команды форматирования абзаца:
<Р STYLE="color: геd">Текст, отображаемый красным цветом</Р> Подобная форма представления элементов каскадных таблиц стилей не требует отдельного подключения к web-странице файлов CSS и может использоваться в коде документа наравне с другими тегами HTML.
Второй способ подразумевает включение в html-код web-страницы инструкций CSS наподобие подпрограммы. Он также не требует подключения к странице отдельного css-файла и применяется в основном в тех случаях, когда создание такого файла представляется нецелесообразным, например, если стали используются в пределах лишь одного документа HTML.
|
|
|
Интеграция инструкций CSS в web-страницу осуществляется записью необходимых нотаций CSS в пределах тегов <STYLE TYPE="text/css"> и </STYLE>, которые, в свою очередь, являются составляющими заголовка документа <НЕАD>. Вот простой пример такого использования директив каскадных таблиц стилей:
<HTML>
<HEAD>
<TITLE>3a головок страницы</ТIТLЕ>
<STYLE TYPE="text/css">
P{text-align: justify:}
Hl{color: green:}
</STYLE>
</HEAD>
<BODY>
Тело html документа
</BODY>
</HTML>
Третий метод использования в документе HTML элементов стилей подразумевает подключение к данному документу отдельного файла с расширением.css, содержащего описания всех элементов стилей и их свойств, который хранится на сервере отдельно от web-страниц. Для этого в заголовок <HEAD> html-файла необходимо включить тег <STYLE>, внутри которого следует записать команду вызова файла CSS. В общем виде процедура подключения ess-файла к web-странице будет выглядеть следующим образом:
<HEAD>
<TITLE>3aголовок страницы</TITLE>
<STYLE TYPE="text/css">
@import url(http://www.myserver.ru/css/fne.ess):
</STYLE>
</HEAD>
Свойства стилей, описанных в файле с именем file.css, импортируются в данном примере с применением нотации@ ^import, использующей аргумент url, значение которого, заключаемое в круглые скобки, и является полным или сокращенным адресом, указывающим на целевой ess-файл. Если файл CSS хранится в той же серверной директории, что и использующий его документ HTML, в качестве URL этого файла можно просто указать его имя.
|
|
|
И наконец, четвертый способ подключения файла CSS к web-странице, наиболее традиционный и часто используемый, подразумевает добавление в заголовок <HEAD> html-документа специального тега <LINK>. Синтаксис записи при этом выглядит следующим образом:
<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">
Вместо параметра URL атрибута HREF тега <LINK> подставляется полный или сокращенный адрес, указывающий на расположение необходимого ess-файла.Примером использования данной директивы может служить такой отрывок HTML-кода:
<НЕАD>
<ТIТLE>Заголовок страницы</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF=".../css/file.css">
</HEAD>
CSS можно применять на всех без исключения типах http-серверов без ограничений. Те или иные ограничения на использование каскадных таблиц стилей может накладывать только клиентское программное обеспечение. Не требуется также никаких надстроек и дополнительных программных модулей для того, чтобы браузеры пользователей могли обрабатывать директивы CSS. Файлы CSS просто загружаются на сервер совместно с web-страницами, а при открытии в браузере посетителя вашего сайта они будут автоматически считаны с удаленного узла и запущены на исполнение.
СОВЕТ Для того, чтобы вы могли использовать один и тот же css-файл совместно со всеми документами своего сайта, лучше создать на сервере отдельную директорию с названием CSS и помещать все css-файлы туда, вызывая их из кода web-страниц по мере необходимости.
