| Основы Web-технологий | Введение в Web-дизайн | Первая Web-страница | Графика web-дизайне | Специальные возможности HTML | Каскадные таблицы стилей | Полезные приемы в Web-дизайне | Обслуживание Web-сайта | Программирование на JavaScript и VBScript | Раскрутка сайта | Деньги и интернет | Партнерские программы | Web-софт | Поисковая оптимизация | Хостинг |
Безопасность Поскольку стандарт CSS окончательно сложился значительно позже стандарта HTML, в полной мере его поддерживают далеко не все версии броузеров, а именно — Microsoft Internet
Explorer начиная с версии 4.0 и Netscape Navigator старше четвертой версии. Более того, интерпретаторы данных броузеров работают, как известно, с некоторыми отличиями, а потому одни и те же элементы, специфицированные
согласно стандарту CSS, могут отображаться в них совершенно по-разному. Старые броузеры вообще могут обрабатывать команды CSS по абсолютно непредсказуемому алгоритму, превращая содержимое вашей web-странички
в некое подобие малоаппетитной на вид манной каши. Поэтому с объективной точки зрения нецелесообразно использование для представления содержимого web-страниц каскадных таблиц стилей
в полном объеме. Наоборот, рекомендуется применять лишь ограниченный набор элементов, заведомо поддерживаемый броузерами большинства версий. Такой набор директив CSS условно называется безопасным. В него
входят, прежде всего, свойства текста font-family, font-weight и font-size, свойства цвета color и background-color, свойства текста text-align, text-indent, text-decoration и line-height и, наконец, свойства
границ margin-left, margin-right и margin-top. Это отнюдь не означает, что другие свойства CSS использовать категорически нельзя, просто делать это следует с осторожностью. Подробные таблицы совместимости
стандарта CSS с различными версиями броузеров можно найти на сервере http://style.webreview.com.
Подключение к 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-страниц по мере необходимости.
Маленькие хитрости CSS Как известно, 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
Завершая тему каскадных таблиц стилей, приведу простой и наглядный пример файла 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. 1>>>2>>>3 Обсудить
в форуме...>>>> | 
