Маленькие хитрости 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», можно добиться ряда интересных и достаточно красивых эффектов.