Селекторы
Итак, параметры и
директивы CSS описываются по принятым в данном стандарте правилам в
специальном файле с расширением .ess. Общий синтаксис записи стилей
всех элементов HTML в таком файле выглядит следующим образом:
НАЗВАНИЕ ЭЛЕМЕНТА
(свойство: значение:}
В качестве названий
элементов принимаются, как правило, теги HTML. Например, если вы хотите,
чтобы все заголовки первого уровня в вашем html-доку-менте отображались
синим цветом и имели размер в двадцать пикселов, присоединенный к web-страничке
файл CSS должен включать следующую запись:
H1 {color: blue: font-size:
20pt;}
Такая директива CSS
называется селектором. Все, что содержится в фигурных скобках справа
от названия элемента, принято называть для простоты определением селектора.
Каждое определение содержит перечисление свойств и значений. Описания
всех свойств и значений заключаются в фигурные скобки и разделяются
точкой с запятой. Очевидно, что селектор управляет внешней формой отображения
объектов HTML и может содержать только те свойства и значения, которые
характерны для того или иного элемента языка разметки гипертекста.
Группировка
селекторов
Если в нескольких
разных селекторах используются одни и те же определения, с помощью языка
CSS их можно сгруппировать между собой. Группировка селекторов в единую
директиву осуществляется следующим образом: сначала идет перечисление
через запятую всех элементов, использующих одинаковое определение, затем
в фигурных скобках указываются их свойства и значения. Ниже приведены
синтаксис записи и пример использования такой комбинированной директивы.
НАЗВАНИЕ ЭЛЕМЕНТА-1.
НАЗВАНИЕ ЭЛЕМЕНТА-2. ... НАЗВАНИЕ ЭЛЕМЕНТА-N {свойство: значение:}
Пример:
H1. Н2. НЗ. Н4 {font-family:
Helvetica: color: red: font-size: 30pt:}
Аналогичным образом
можно группировать между собой определения, описывая их наподобие некой
«подпрограммы»:
НАЗВАНИЕ ЭЛЕМЕНТА
{Определение-1:Определение-2: Определение-N;}
На самом деле подобная
запись идентична перечислению списка определений подряд, в одну строку,
расположенную правее названия элемента и ограниченную фигурными скобками,
однако в «развернутом» варианте читать листинг файла CSS
гораздо проще и удобнее. Вот пример такого оформления определений:
Н1{
font-family: Helvetica;
font-style: italic:
font-Size: 30pt;
color: black:}
Принцип
наследования
Для элементов HTML,
описанных в файле CSS, справедлив принцип наследования. Что это означает?
Предположим, в используемом
вами файле CSS заголовкам первого уровня составляющих сайт документов
присвоен стиль, определяющий отображение элементов <Н1> зеленым
цветом. Однако для элемента выделения текста жирным шрифтом <STRONG>
никакой цветовой спецификации не было задано. Теперь представим себе,
что в коде одной из использующих CSS web-страниц встречается следующая
директива:
<Н1>Каскадные
таблицы стилей это <STRONG>Kpyтo!</STRONG></Hl>
В окне броузера слово
«круто» отобразится жирным шрифтом зеленого цвета. Иными
словами, элемент <STRONG> унаследовал присвоенные тегу <Н1>
свойства, поскольку в предложенной выше строке последний является «старшим»
тегом, директивой более высокого уровня.
Приведу другой пример.
Положим, в файле CSS вы установили для элемента<Р> выравнивание
по левой границе экрана, не указав каких-либо дополнительных параметров
для элемента <IMG>. Если в коде html-документа вы заключите директиву
вызова изображения в тег разметки текстового абзаца, как показано в
следующем примере, то изображение автоматически будет позиционировано
по левому краю окна броузера:
<P><IMG
SRC="image.gif" WIDTH="310" HEIGHT="219"></P>
Именно на принципе
наследования свойств одного элемента другим строится простой метод описания
единых параметров отображения для всех видимых элементов web-страниц.
Это описание можно осуществить с помощью всего одной строки кода. Не
верите? Напрасно. Включите в листинг вашего ess-файласледующую директиву:
BODY{
background: white:
color: black:
font-family: sans-:erif;
font-size: l0pt:
}
Догадались, в чем
кроется секрет? Все элементы web-страниц по умолчанию являются дочерними
директивами тега <BODY>, а значит, они будут автоматически
наследовать его свойства.
Разумеется, существуют свойства, не наследуемые теми или иными элементами.
Например, тег <HR>, отображающий в окне броузера горизонтальную
разделительную линию, никоим образом не оперирует параметрами текста,
поэтому он не сможет унаследовать, например, значение свойства font-size,
определенное для тега <BODY>, даже несмотря на то, что последний
является для него родительским.
Свойства
элементов
В общих чертах мы
разобрались в синтаксисе языка CSS, по крайней мере того его раздела,
который описывает правила использования селекторов. Теперь давайте подумаем
о том, какие именно элементы можно использовать в файлах CSS, какие
свойства им можно присваивать и какие значения эти свойства могут принимать.
Для простоты я предлагаю разделить все свойства и их значения на логические
разделы по функциональному признаку, так, как это принято в большинстве
технических спецификаций CSS.
Свойства
шрифта
Свойства шрифта могут
описывать элементы, содержащие текст. Среди них можно перечислить такие,
как А, В, BODY, CAPTION, DD, DL, DT, EM,H1-H6, I, LI, P, SMALL, STRIKE,
STRONG, TD, TH, U и некоторые другие. Данные элементы могут включать
в себя в качестве описаний свойства, перечисленные ниже. Свойство font-family
используют для указания шрифта или семейства шрифтов, которыми будет
отображаться обрабатываемый элементом текст. Применять данное свойство
следует достаточно осторожно, поскольку возможна ситуация, при которой
указанного шрифта не окажется на компьютере пользователя. Если вы не
уверены в том, что требуемый шрифт установлен в системе всех потенциальных
посетителей вашего сайта, поместите на сервер данный шрифт в формате
TTF (True Type Font) без использования архиваторов и укажите в значении
свойства font-family URL к этому файлу так, как показано в предложенном
ниже примере. Если клиентский броузер не обнаружит требуемого шрифта
на машине пользователя, он, воспользовавшись указанным вами URL, загрузит
и установит шрифт в автоматическом режиме.
Пример:
P {font-family: Aria!
Black URL(' . ./fonts/arialblack.ttf'):}
URL шрифта можно
указывать в виде как абсолютного адреса (например, http://www.myserver.ru/fonts/font_name.ttf),
так и относительного (например, / fonts / f ontjiame. ttf).
Свойство font-size
управляет размером шрифта. Значение этого свойства может быть указано
как в абсолютных, так и в относительных величинах. Под абсолютными величинами
подразумевается размер шрифта в условных пунктах(pt), сантиметрах (cm),
миллиметрах (mm) или пикселах (рх). Относительные величины содержат
указание на размер шрифта в процентах от высоты символов, принятой по
умолчанию, или в виде следующих определений: smaller — самый маленький
шрифт по отношению к установленному по умолчанию, small — маленький
шрифт, medium — средний, large — большой шрифт и, наконец, larger —
самый большой шрифт. Необходимо помнить, что использование абсолютных
значений более предпочтительно, поскольку относительные значения броузеры
разных версий могут трактовать весьма различным образом.
Пример:
H1 {font-size: 30pt;}
Н2 {font-size: 100рх:}
H4 {font-size: 60%;}
Свойство font-weight
оговаривает толщину символов используемого шрифта. Толщина может быть
задана следующими определениями: normal — стандартное написание без
каких-либо изменений, lighter — тонкий шрифт, bold —жирный шрифт и,
наконец, bolder — очень жирный шрифт. Необходимо учитывать, что значения
свойства font-weight обрабатываются интерпретаторами различных броузеров
по-разному. Например, Microsoft Internet Explorer отображает текст,
которому присвоен параметр bolder, так же, как текст, отмеченный значением
bold, a Netscape Navigator отобразит его идентично тексту с параметром
normal. К тому же Internet Explorer не умеет различать значения normal
и lighter, поэтому эти отрывки текста отображаются в нем одинаковым
образом.
Пример:
STRIKE {font-weight:
bold:}
Свойство font-variant
определяет регистр записи символов и может принимать одно из двух значений:
normal — стандартное написание без каких-либо изменений и small-caps,
когда все символы, описываемые данным элементом, превращаются в заглавные.
Учтите, что свойство font-variant поддерживает только Microsoft Internet
Explorer.
Пример:
CAPTION {font-variant:
small-caps:}
Свойство font-style
описывает правила начертания символов: normal — стандартное написание
и italic — написание наклонным шрифтом.
Пример:
ЕМ {font-style: italic:}
Свойства
текста
Свойства текста применяются
практически ко всем элементам CSS, которые могут включать в себя или
описывать текст, правда, с учетом некоторых ограничений в каждом отдельном
случае.
Свойство text-align
задает расположение текста относительно границ рабочего окна броузера
или ячейки таблицы, иными словами — отвечает за выравнивание текстового
блока. Соответственно, оно применяется совместно с так называемыми «блоковыми
элементами», то есть элементами, поддерживающими отображение текстовых
массивов: P, H1-H6, TD, TR и некоторыми другими.
Можно использовать
одно из четырех значений данного свойства: left — выравнивание по левой
границе экрана или ячейки таблицы, right — по правой границе, center
— выравнивание по центру и justify — растягивание текста по всей ширине
экрана или табличной ячейки.
Пример:
Р {text-align: justify;}
Свойство text-decoration.
Управляет начертанием символов: с его помощью можно задать эффекты отображения
зачеркнутого или подчеркнутого текста. Данное свойство может принимать
одно из следующих значений: попе — отсутствие всяких эффектов, underline
— подчеркнутый текст, line-through — перечеркнутый текст, overline —
надстрочный текст и blink — мерцающий текст. Обратите внимание на то,
что значение overline данного свойства не поддерживается броузером Netscape
Navigator, а значение blink — наоборот, программой Microsoft Internet
Explorer.
Пример:
A {text-decoration:
none:}
ПРИМЕЧАНИЕ
Включение в файл CSS элемента А в совокупности с определением «text-decoration:
none» отменяет подчеркивание гиперссылок в документах HTML.
ВНИМАНИЕ
Элемент А может быть представлен в тексте файла CSS с использованием
четырех определений: link — просто размещенная на web-страницессылка,
active описывает состояние ссылки, нажимаемой пользователем в данный
момент времени, hover — состояние ссылки в момент, когда пользователь
навел на нее курсор мыши и visited отображает посещенную ссылку. Определения
состояний записываются через двоеточие после названия элемента, например,
A: visited{color:2F4F4F;}.
Свойство text-indent,
применяемое, как правило, совместно с элементом Р, указывает на отступ
первой строки текстового блока в пикселах, сантиметрах, миллиметрах
или в процентах от общей длины строки. Например, его используют для
организации табулированных абзацных отступов, так называемых «красных
строк».
Пример:
Р {text-indent: 30pt;}
Свойство line-height
устанавливает межстрочный интервал текста web-страницы в пикселах, сантиметрах,
миллиметрах или процентах от интервала, определенного по умолчанию.
К этому свойству можно применить значение normal, оставляющее определенный
в настройках клиентского броузера межстрочный интервал без изменений.
Пример:
Р { line-height:
5px;}
Свойство letter-spacing
устанавливает расстояние между символами текста в пикселах, сантиметрах
или миллиметрах, но распознается оно только броузером Microsoft Internet
Explorer. Возможно использование атрибута normal, оставляющего межсимвольный
интервал, принятый по умолчанию.
Пример:
Р { letter-spacing:
Зрх:}
Свойство vertical-align
определяет вертикальное выравнивание текста в ячейках таблиц или графических
изображений в текстовом блоке и также не распознается броузером Netscape
Navigator. Оно может принимать одно из следующих значений: top — позиционирование
по верхней границе ячейки, middle — по центру ячейки, bottom — по нижней
границе ячейки, baseline — по условной базовой линии, top-text — по
верхней точке текстовой строки, bottom-text по нижней точке текстовой
строки.
Пример:
ТО {vertical-align:
top:}
IMG {vertical-align:
top-text;}
Свойство text-transform
задает трансформацию определяемого элементом текстового блока: normal
— стандартное отображение текста без каких-либо изменений, capitalize
— каждое слово абзаца начинается с заглавной буквы, при этом регистр
символов, определенный в коде HTML, игнорируется; uppercase — все символы
текста становятся заглавными и, наконец, lowercase — все символы становятся
строчными. Это свойство поддерживается только броузером Microsoft Internet
Explorer.
Пример:
CAPTION {text-transform:
capitalize;}
Свойства
цвета и фона
Свойство color определяет
цвет любого элемента CSS.
Пример:
SMALL {color: red:}
Свойство background-color
указывает на цвет фона какого-либо элемента, причем этот цвет устанавливается
именно для отображения элемента, а не всего html-документа. Учтите,
что интерпретаторы разных броузеров обрабатывают данное свойство неодинаковым
образом: например, Netscape Navigator выделяет фоновым цветом сам элемент
страницы, причем выделение ограничивается его видимой шириной, a Internet
Explorer растягивает выделение на всю ширину страницы.
Пример:
H1 { background-color:
#f00000;}
Свойство background-image
устанавливает фоновое изображение всего документа или ячейки таблицы.
С ним можно использовать параметр попе, указывающий на то, что данная
страница не содержит фоновых изображений.
Пример:
BODY {background-image:
URL(/images/picture.gif):}
Свойство background-repeat
определяет параметры повторения (копирования)фонового изображения в
разных направлениях видимой части html-документа.Может принимать одно
их следующих значений: no-repeat — не повторять изображение; repeat
— повторять изображение во всех направлениях; repeat-x —только по горизонтали;
repeat-y — только по вертикали.
Пример:
BODY {background-repeat:
no-repeat:}
Свойство background-attachment
устанавливает правила скроллинга фонового изображения. Может принимать
одно из двух значений: scroll заставляет фоновое изображение двигаться
вместе с содержимым web-страницы при прокрутке документа, a fixed фиксирует
изображение на экране.
Пример:
BODY { background-attachment:
scroll:}
Свойство background-position,
в случае если значение свойства background-repeat установлено repeat-x
или repeat-y, позволяет зафиксировать положение фонового изображения.
Оно может принимать следующие значения: top — позиционирование по верхней
границе экрана, middle — по центру экрана, bottom — по нижней границе,
left — выравнивание по левой границе экрана или ячейки таблицы, right
— выравнивание по правой границе, center — выравнивание по центру. Можно
также указать в качестве значения этого свойства расстояние от левой
и верхней границы видимой части экрана до изображения в пикселах, миллиметрах
или сантиметрах.
Пример использования:
BODY {background-position:
30cm 0cm;}
TD {background-position:
middle:}
Свойства
границ
Свойства margin-left,
margin-right, margin-top и margin-bottom определяют значения отступов
вокруг содержащего их элемента в пикселах, сантиметрах или миллиметрах
соответственно слева, справа, сверху и снизу. Отступ представляет собой
пустое пространство, не заполненное никакими другими элементами. Данные
свойства могут применяться совместно с элементами изображений, абзацев,
таблиц, любых других компонентов, для которых вы хотите указать описанные
здесь значения.
Пример:
Р {margin-left: 20px;}
IMG{
margin-top: 10mm:
margin-left: 15mm;
margin-bottom: 10mm:
}
Свойства padding-left,
padding-right, padding-top и padding-bottom, аналогично рассмотренным
выше, описывают значения отступов от видимых рамок объектов HTML, например
таблиц. Величина отступов также определяется в пикселах, сантиметрах
или миллиметрах. Они могут применяться как вместе, так и по отдельности.
Пример:
TABLE {
padding-left: 10рх:
padding-right:10px;
padding-top: 15px:
padding-bottom: 15px:
}
Свойства border-top-width,
border-bottom-width, border-right-width и border-left-width определяют
толщину видимого обрамления объектов, например таблиц и их ячеек, по
правилам, аналогичным записи свойств, указанных выше.
Пример:
TD{
border-top-width:
2px:
border-bottom-width:
2px:
border-right-width:
1mm:
border-left-width:
1mm;
}
Свойство border-color
описывает цвет видимого обрамления объектов — рамок изображений и бордюров
таблиц.
Пример:
TABLE (border-color:
blue;}
Свойства
списков
Свойства списков
применяются для настройки отображения элементов нумерованных и маркированных
списков, определяемых в коде HTML тегом <LI>.В языке CSS данному
элементу присваиваются следующие свойства. Свойство list-style-type
определяет внешний вид маркера нумерованного или маркированного списка
и может принимать одно из перечисленных далее значений: попе — маркер
списка не отображается; для маркированного списка disc — метка отображается
в виде черного круга, circle — в виде полой окружности, square — в виде
черного квадрата; для нумерованного списка decimal —метки отображаются
в виде последовательности арабских чисел, lower-roman —в виде последовательности
римских цифр, записанных в строчном регистре, upper-roman — в виде последовательности
римских цифр в заглавном регистре, lower-alpha — в виде последовательности
строчных букв, upper-alpha — в виде последовательности заглавных букв.
Пример:
LI {list-style-type:
square:}
Свойство list-style-image
позволяет назначить в качестве метки маркированного списка произвольное
изображение.
Пример:
LI {list-style-image:
URL(/images/marker.gif);}
Свойство list-style-position
описывает позиционирование элементов списка и может принимать следующие
значения: outside — позиционирование осуществляется по умолчанию и inside
— позиционирование без отступа от левой границы рабочего окна броузера.
Пример:
LI { list-style-position:
inside:}
Вспомогательные
свойства элементов
Свойства width и
height определяют соответственно ширину и высоту объекта в пикселах,
миллиметрах, сантиметрах или процентах от значения, принятого по умолчанию.
Применяются они в основном для задания геометрических размеров изображений
различной величины в случаях, когда их необходимо выровнять по вертикали
или горизонтали. Данные свойства можно использовать как вместе, так
и по отдельности.
Пример:
IMG {
height: 80%;
width: 120px:
}
Свойство float указывает
на расположение какого-либо объекта в окне броузера относительно других
объектов, размещенных рядом. Оно может приниматьодно из следующих значений:
попе — расположение объекта по умолчанию, left — расположение объекта
слева или right — расположение объекта справа.
Пример:
TD {float: left:}
Свойство clear описывает
правила расположения других объектов вокруг данного элемента web-страницы.
Принимает одно из следующих значений: попе —расположение объектов по
умолчанию, left — расположение слева, right —справа и, наконец, both
— расположение с двух сторон.
Пример:
IMG {clear: both;}
Свойство white-space
применяется для управления отображением пробелов и переносов между элементами
html-документа или словами текста. Свойство может использовать одно
из следующих значений: normal — стандартное отображение текста, при
котором несколько следующих подряд пробелов преобразуются в один, рге
— допускается отображение нескольких символов пробела подряд и, наконец,
nowrap — запрещен перенос строки в пределах действия элемента.
Пример:
Р {white-space: рге;}
Свойство display
применяется для управления взаимным расположением текстовых строк и
объектов на экране монитора. Может принимать одно из следующих значений:
block — отображает перенос строки до и после объекта; list-item — переносит
строку до и после объекта, а кроме того, добавляет в начало строки маркер,
как в случае использования маркированного списка; inline —допускается
отображение объекта на одной строке с другими элементами; none — объект
не отображается.
Пример :
IMG {display: block;}
Классы
CSS является достаточно
гибкой структурой, позволяющей описывать не только определенные параметры
для каких-либо элементов таблицы стилей, но и назначать различные свойства
одним и тем же ее элементам. Предположим, в тексте вашего html-документа
встречается несколько вариантов расположения текста: часть абзацев позиционируется
по всей ширине страницы, а часть — по ее левому краю. И в том и в другом
случае для описания отрывков текста используется тег <Р>. Если
вы назначите данному элементу те или иные свойства, представив его в
качестве селектора в файле CSS, то все отрывки текста, помеченные в
коде web-страницы тегом <Р>, будут представлены на экране одинаковым
образом. Чтобы избежать этого, можно использовать в составе ess-файласпециальные
кодовые объекты, называемые классами.
Существуют два метода
использования классов. В первом случае класс можно представить как придуманное
программистом уникальное имя-идентификатор какого-либо перечня свойств,
предваряющееся символом точки и записанное исключительно с применением
символов латинского алфавита и цифр. Оно ставится между названием элемента
и его описанием. В общем виде синтаксис записи такой функции выглядит
следующим образом:
НАЗВАНИЕ ЭЛЕМЕНТА.
имя класса {свойство: значение;}
Простым примером
использования данной функции CSS может служить следующий отрывок текста
ess-файла:
P.myclass {text-align:
justify;}
В этом случае именем
класса у вас служит символьный определитель «myclass». Теперь,
если вы вызовете в коде web-страницы тег форматирования абзаца с указанием
имени класса, данному абзацу будут присвоены значения, определенные
в описании элемента <Р>:
<BODY>
<Р CLASS="myclass">Teкст,
отформатированный согласно директивам CSS</P>
<Р>Текст. отформатированный
по умолчанию</Р>
</BODY>
Очевидно, что теперь
текст, заключенный в первую пару тегов <Р> и </Р>, будет
растянут по всей ширине окна броузера, а текст, заключенный во вторую
пару этих тегов, останется отформатированным по умолчанию. Таким образом,
вы можете придавать одним и тем же элементам разметки гипертекста различные
свойства в пределах одного документа.
Во втором случае
класс можно использовать без привязки к какому-либо конкретному элементу,
правила записи директив CSS допускают такую возможность. В этом случае
общий синтаксис описания класса будет выглядеть так:
.имя класса{свойство:
значение;}
В качестве примера
такого представления класса можно предложить следующий вариант описания
свойств элементов web-страниц:
,myclass{color: green;}
Записав предложенную
выше строку в файл CSS, вы можете вызывать класс с именем «myclass»
из кода html-документа, присваивая его свойства любому тегу. Например,
указав в html-коде директиву
<Р CLASS="myclass">TeKCT,
отображаемый зеленым цветом </Р>
вы сделаете так,
что выводимый в окне броузера текст будет отображаться зеленым шрифтом.
В этом же документе вы можете применить такую команду:
<Н3 CLASS="myclass
">текстовый заголовок</Н3>
Заголовок третьего
уровня также будет представлен на экране зеленым цветом. Очевидно, что
каждый класс можно вызывать в пределах одной web-страницынеограниченное
количество раз, равно как каждый файл CSS может содержать неограниченное
количество классов.
Создавая классы CSS,
следует помнить о том, что для одного элемента каскадной таблицы стилей
может быть специфицирован только один класс. Например, запись
A.class-l.c1ass-2{text-decoration:
none;}
является в корне
неправильной. Учтите также, что для классов, равно как и для селекторов,
справедливы свойства группировки и наследования.
Идентификаторы
В отличие от селекторов
и классов, идентификаторы представляют собой кодовые объекты CSS, которые
позволяют назначать свойства отдельным компонентам HTML без использования
прочих стандартных методов. В файле CSS идентификатор обозначается знаком
<#», а в документе HTML — атрибутом ID. Он имеет собственное
имя, состоящее из цифр и символов латинского алфавита. Общий синтаксис
записи идентификаторов можно представить в следующем виде:
НАЗВАНИЕ ЭЛЕМЕНТА#имя
идентификатора {свойство: значение;}
Простым примером
использования идентификатора может служить такой отрывок файла CSS:
P#qwerty{text-align:
left:}
В html-коде web-страницы
этот идентификатор можно вызвать с использованием атрибута ID:
<Р ID="qwerty">Teкст.
позиционированный по левой границе экрана</Р>Очевидно, что тег
<Р>, включающий атрибут ID, в качестве значения которого использовано
имя идентификатора, наследует свойства последнего. Если же в записи
этого тега вы не укажете данный атрибут, текст будет выровнен по умолчанию
либо согласно другим директивам HTML или CSS. Идентификаторы также можно
записывать без указания имени элемента, которому они соответствуют.
Так, строка
#qwerty{color: #00FF00:}
создает идентификатор,
который может использовать любой элемент HTML, например:
<Н1 ID="qwerty">Teкст
заголовка</Н1>
Комментарии
Файл CSS может содержать
введенные пользователем комментарии, поясняющие назначение тех или иных
участков кода. Комментарии в стандарте CSS заключаются в последовательность
символов «/» и «*» следующим образом:
/* текст комментария
*/
Безопасность
Поскольку стандарт
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».
