|
|
Подключение CSS к WEB странице
Широкие возможности каскадных таблиц стилей можно использовать совместно с html-документом различными способами. Первый из них подразумевает использование нотаций CSS непосредственно в тегах кода web-страницы помещаемых в тело документа, ограниченное директивами <BODY> и </BODY>. В этом случае общий вид записи тега HTML будет иметь следующий вид:
<ТЕГ STYLE="свойство: значение">Содержимое тега</ТЕГ> Например, для того чтобы обеспечить вывод текста на экран монитора шрифтом красного цвета, можно использовать следующую запись команды форматирования абзаца:
<Р STYLE="color; red">Текст. отображаемый красный цветом</Р> Подобная форма представления элементов каскадных таблиц стилей не требует отдельного подключения к web-странице файлов CSS и может использоваться в коде документа наравне с другими тегами HTML.
Второй способ подразумевает включение в html-код web-страницы инструкции CSS наподобие подпрограммы. Он также не требует подключения к странице отдельного css-файла и применяется в основном в тех случаях, когда создание такого файла представляется нецелесообразным, например, если стили используются в пределах лишь одного документа HTML.
Интеграция инструкций CSS в web-страницу осуществляется записью необходимых нотаций CSS в пределах тегов <STYLE TYPE-"text/css"> и </STYLE>, которые, в свою очередь, являются составляющим заголовка документа <HEAD> вот простои пример такого использования директив каскадных таблиц стилей:
<HTML>
<НЕAD>
<ТITLE>Заголовок страницы</TITLE>
<STYLE TYPE="text/css">
P {text-align: justify;}
H1{COLOR: GREEN:}
</STYLE>
</HEAD>
</HTML>
Третий метод использования в документе HTML элементов стилей подразумевает подключение к данному документу отдельного файла с расширением .css, содержащего описания всех элементов стилей и их свойств, который хранится на сервере отдельно от web-страниц. Для этого в заголовок <HEAD> html-файла необходимо включить тег <STYLE>, внутри которого следует записать команду вызова файла CSS. В общем, виде процедура подключения css-файла к web-странице будет выглядеть следующем образом: <НЕАD>
<ТIТLЕ>Заголовок страницы</TITLE>
<STYLE TYPE="text/css">
@import URL(http://www.myserver.ru/css/file.css);
<STYLE>
</HEAD>
Свойства стилей, описанные в файле с именем file.css, импортируются в данном примере с применением нотации @import, использующей аргумент ur1, значение которого, заключаемое в круглые скобки, и является полным или сокращенным адресом, указывающим на целевой css-файл. Если файл CSS хранится н той же серверной директории, что и использующий его документ HTML, в качестве URL этого файла можно указать его имя, и, наконец, четвёртый способ подключения файла CSS к web-странице, наиболее традиционный и часто используемый, подразумевает добавление в заголовок <НЕAD> html-документe специального тега <LINK>. Синтаксис записи при этом выглядит следующим образом:
<LINK REL =STYLESHEET TYPE="TEXT/CSS" HREF="URL"
Вместо параметра URL атрибута HREF тега <L1NK> подставляется полный или сокращенный адрес, указывающий на расположение необходимого css-файла.Примером использования данной директивы может служить такой отрывок HTML-кода:
<HEAD>
<TITLE>3aголовок страницы </ТIТLЕ><LINK REL=STYLESHEET TYPE="text/css" HREF="URL">
<HEAD>
CSS можно применить на всех без исключения типах http-сервсров без ограничений. Те или иные ограничения на использование каскадных таблиц стилей может накладывать только клиентское программное обеспечение. Не требуется также ни каких надстроек дополнительных программных модулей для того, чтобы броузеры пользователей могли обрабатывать директивы CSS. Файлы CSS просто загружаются на сервер совместно с web-страницами, а при открытии в броузере посетителя вашего сайга они будут автоматически считаны с удаленного узла и запущены на исполнение,
СОВЕТ: Для того чтобы вы могли использовать один и тот же css-файп совместно со всеми документами своего сайта, лучше создать на сервере отдельную директорию с названием CSS и помещать все css-файлы туда, вызывая их когда web-страниц по мере необходимости.
Автор : Валентин Холмогоров.
Источник : www.holmogorov.ru
|
