На главную | Отправить SMS | Сделать стартовой | Поставить закладку |
Разделы сайта

 Главная
 Новости
 Регистрация
 Region Free Keys
 Телефония
 Железо
 Software
 Секреты Windows
 Безопасность
 Web-дизайн
 Web-мастерам
 Фото-приколы
 Хостинги
 Раскрутка сайта
 Анекдоты
 Игромания
 Фотогалерея
 Разное
 Знакомства
 Мир техники
 Флейм
 Голосования
 Музыка
 Спорт
 Кино
 Авто
 Зал суда
 Программа TB
 Форум
 Авторам статей
 Реклама на сайте

Рассылка


Подписаться на рассылку
"Все о WEB-дизайне"

Content.Mail.Ru

Реклама



Error. Page cannot be displayed. Please contact your service provider for more details. (19)




Web-дизайн

| Основы 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

Содержание

Обсудить в форуме...>>>>

 

Каталог

Реклама


Rambler's Top100 Rambler's Top100

© 2002-2012, DIWAXX.RU. Дизайн Freeline Studio. Хостинг http://www.mtw.ru. Вопросы, пожелания, предложения: admin@diwaxx.ru