Подключение к web-странице
Широкие возможности каскадных таблиц стилей можно использовать совместно с html-документом различными способами. Первый из них подразумевает использование нотаций CSS непосредственно в тегах кода web-страницы, помещаемых в тело документа, ограниченное директивами <BODY> и </BODY>. В этом случае общий вид записи тега HTML будет иметь следующий вид:
<ТЕГ STYLE="свойство: значение">Содержимое тега</ТЕГ>
Например, для того чтобы обеспечить вывод текста на экран монитора шрифтом красного цвета, можно использовать следующую запись команды форматирования абзаца:
<Р STYLE="color: геd">Текст, отображаемый красным цветом</Р>Подобная форма представления элементов каскадных таблиц стилей не требует отдельного подключения к web-странице файлов CSS и может использоваться в коде документа наравне с другими тегами HTML.
Второй способ подразумевает включение в html-код web-страницы инструкций CSS наподобие подпрограммы. Он также не требует подключения к странице отдельного ess-файла и применяется в основном в тех случаях, когда созданиетакого файла представляется нецелесообразным, например, если стали используются в пределах лишь одного документа 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>
Тело htrnl документа
</BODY>
</HTML>
Третий метод использования в документе HTML элементов стилей подразумевает подключение к данному документу отдельного файла с расширением .ess, содержащего описания всех элементов стилей и их свойств, который хранится на сервере отдельно от web-страниц. Для этого в заголовок <HEAD> htrol-файланеобходимо включить тег <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=". ../ess/file.css">
</HEAD>
CSS можно применять на всех без исключения типах http-серверов без ограничений. Те или иные ограничения на использование каскадных таблиц стилей может накладывать только клиентское программное обеспечение. Не требуется также никаких надстроек и дополнительных программных модулей для того, чтобы броузеры пользователей могли обрабатывать директивы CSS. Файлы CSS просто загружаются на сервер совместно с web-страницами, а при открытии в броузере посетителя вашего сайта они будут автоматически считаны с удаленного узла и запущены на исполнение.
СОВЕТ Для того чтобы вы могли использовать один и тот же ess-файл совместно со всеми документами своего сайта, лучше создать на сервере отдельную директорию с названием CSS и помещать все ess-файлы туда, вызывая их из кода web-страниц по мере необходимости.
Как известно, HTML — язык не компилируемый, а интерпретируемый. Причем интерпретируется он весьма любопытным образом: если броузер обнаруживает неточность в записи какого-либо тега HTML, он не выводит на экран сообщение об ошибке, а просто игнорирует всю ошибочную строку, продолжая обработку кода дальше.
Теперь давайте немного задумаемся. Согласно стандартам HTML, тегом данного языка считается какая-либо символьная нотация, заключенная в угловые скобки, а все остальные символьные последовательности распознаются броузером как обычный текст. Спецификация CSS позволяет включать элементы каскадных таблиц стилей в теги <STYLE> и </STYLE>, наподобие обычного кода подпрограммы, но сами директивы CSS записываются без угловых скобок, в виде обычной текстовой строки. Хорошо, если на компьютере пользователя установлен современный броузер, поддерживающий обработку инструкций CSS. Встретив в листинге web-странички такой код, он незамедлительно обработает его, внеся соответствующие изменения в содержимое документа. Но если этот броузер — старой версии, то, посчитав инструкции CSS отрывком содержательного текста, он отобразит их на экране, что, разумеется, совершенно недопустимо.
Метод борьбы с этим досадным недостатком старого программного обеспечения чрезвычайно прост. Нужно всего-навсего «спрятать» встроенные в html-до-кумент директивы CSS внутрь комментария. Современные броузеры проигнорируют синтаксис комментария и станут транслировать содержащиеся в них инструкции CSS по обычному алгоритму, старые же броузеры, наоборот, проигнорируют весь комментарий целиком. Вот пример использования этого незамысловатого приема на практике:
<HEAD>
<TITLE>3aголовок страницы</TITLE>
<STYLE TYPE="text/css">
<!--
P{text-align: justify;}
H1{color: green;}
-->
</STYLE>
</HEAD>
В основе другой примечательной хитрости каскадных таблиц стилей, которую можно с успехом использовать на практике, лежит не то случайное упущение, не то грандиозный творческий замысел разработчиков данного стандарта. Дело в том, что в качестве значений отступов вокруг различных элементов, описываемых CSS, можно, как ни странно, указывать отрицательные величины. Более того, с помощью этого любопытного свойства CSS можно создавать без использования графических изображений текстовые элементы с признаками псевдо трехмерности, например, заголовки, отбрасывающие на web-страницу «тень».Фактически же вы просто располагаете на экране текст в два слоя, один из которых частично «наползает» на другой.
Для этого необходимо создать файл style.ess, описывающий стиль заголовка, и два класса, элементы которых определяют другие параметры отображения текста, в частности его цвет и отступы:
/* File type: CSS; file name: style.ess: file location:
'http://www.mysite.ru/css' */
H1{font-family:Arial; font-size: 70pt: font-weight: bold;}
.abc{color: gray; margin-top: l00px: margin-left: 60px:}
.deffcolor: black; margin-top: -118px; margin-left: 58px:}
/* End of file */
Первой директивой вы определили стиль отображения заголовка первого уровня <Н1>, указав тип, размер и начертание используемого для него шрифта. Теперь, подключив к какому-либо html-документу файл style.ess, запишите в его коде следующие команды:
<Н1 CLASS="аbс">Заголовок</Н1>
<Н1 CLASS="def">3aголовок</Hl>
Варьируя значения свойств margin-top и margin-left классов «abc» и «def», можно добиться ряда интересных и достаточно красивых эффектов.
Завершая тему каскадных таблиц стилей, приведу простой и наглядный пример файла CSS, описывающего стили отображения элементов web-страницы. Данный файл представляет собой обычный текстовый документ, набранный в редакторе Notepad и сохраненный на диске под именем style.ess.
/* File type: CSS;
File name: style.ess:
File location: 'http://www.mysite.ru/css/'
Autor: Ivan Ivanov */
BODY{
background-color: №FFFFFF;
font-size: l0pt;
font-family: Arial;
}
P{
font-size: l0pt:
text-align: justify;
}
Hl{
font-size: 40pt;
font-weight: bold;
color: blue;
}
H2{
font-size: 30pt;
font-weight: bold:
color: red;
}
TD{
font-size: llpt;
font-weight: bold;
border-top-width: 0px;
border-bottom-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
}
LI{
list-style-image: URL(/images/marker.gif);
list-style-position: inside:
}
.form{font-size: l0pt: color: black:}
P.comment {
font-family: Courier New: FONT-SIZE: 8pt:
}
#news{
font-family: Arial: .
font-size: 12pt:
font-weight: bold:
}
/* End of file */
Как становится очевидным из изученного нами материала, в этом файле мы описали свойства всего документа в целом (элемент BODY), свойства форматирования абзацев (элемент Р), свойства заголовков (элементы HI и Н2), свойства таблиц (элемент TD) и списков (элемент LI), создали классы с именами «form» и «comment», а также описали идентификатор с именем «news».
| На главную |