INTERNET-WEB.RU
Обучение работе с ПК
Операционные системы
Флеш (Flash)

Основы синтаксиса CSS

Стандартом HTML предусмотрены заданные типы стилей оформления, о которых говорилось выше. CSS позволяет по-своему описать каждый стиль (задать его параметры). Но при этом можно использовать толь-КО существующие стили (тэги) оформления документа. С помощью CSS на основе существующего стиля можно создать любое количество дочерних наборов описания, или классов, которые позволяют преодолеть данное ограничение. По сути, каждый класс данного стиля можно рассматривать как новый стиль оформления абзаца или символов.

Для задания параметров оформления в документ включают блок, который начинается тэгом <STYLE>, а заканчивается тэгом </STYLE>. Внутри этого блока перечисляют параметры стилей по следующим принципам: сначала идет название стиля, а затем — в фигурных скобках — перечисление параметров. Каждое свойство (параметр) заканчивается двое- ] точием, после которого пишется значение параметра, а каждую пару «свойство—значение» необходимо отделить от другой точкой с запятой. Пример такого описания:

I FONT-SIZE: 12px; LINE-HEIGHT: 140%; FONT-FAMILY: Verdana, sans-serif; TEXT-ALIGN: justify В данном описании сначала стоит название стиля (стиль обычного абзаца), а в фигурных скобках — новые назначения параметров (размер шрифта, межстроковое расстояние, тип гарнитуры, выключка абзаца).

Стиль можно определять и индивидуально в каждом тэге оформления. Это делается в случае единичных выделений. В этом случае используется следующее оформление:

<р style = "text-indent: 34. Opt; margin-top: 0; margin-bottom: 0">

 Часто для удобства просмотра названия стиля фигурные скобки выделяют в отдельные строки, чтобы легче воспринималось само перечисление.

----------------_-------------------------------------------------------—-------------------------------Администраторам сайтов, которые используют единые варианты оформления страниц, более удобно хранить стили в отдельном файле. В этом случае проще дорабатывать стили и контролировать их использование: достаточно исправить один файл, как все страницы изменят оформление на основе заданного.

Чтобы использовать в документе перечень стилей из внешнего файла стилей, следует в документ включить следующую ссылку:

<LINK href = "путь/имя_файла_стилей.с55" type = text/ess rel = stylesheet>

Эта ссылка сообщает обозревателю, что для правильной интерпретации документа необходимо импортировать файл по указанному пути и что этот файл является описанием стилей.

 Для полной совместимости с браузерами старых версий желательно учесть следующее. Тэги, которые браузер «не знает», он должен проигнорировать. Такими тэгами будут <STYLE TYPE = "text/css"> и </STYLE>. Чтобы параметры стилей не появились как текст документа, «закомментируйте» их так, как показано ниже: <STYLE TYPE = "text/css"x! — Hl color: red-></STYLE>

При необходимости параметры можно изменить сразу для нескольких стилей:

HI, H2, ИЗ font-family: helvetica

Класс

CSS вводит новое свойство для стиля — CLASS. Класс — это набор характеристик оформления, который получает свое имя и может быть назначен стилю за одну операцию. При этом действует следующий принцип наследования характеристик. Если характеристика явно описана в определении класса, то она присваивается стилю. Если характеристики стиля не описаны в классе, то они сохраняют свои значения от «родительского» описания. Иными словами, если вы создаете класс, в котором определено лишь одно свойство — указан цвет шрифта, например красный, то при применении этого класса к любому стилю документа будет изменен цвет шрифта, а другие характеристики — размер кегля, начертание (полужирное, курсив и т. п.) — останутся без изменений.

Класс определяется аналогично заданию параметров стиля, при этом имя класса должно начинаться с точки:

<STYLE TYPE = "text/ess ">

. pastoral color: #00FF0; font-size: 24 pt;

</STYLE>

Чтобы назначить класс стилю, достаточно следующим образом включить его в тэг:

<Н1 CLASS = pastoral> This is pastoral </Hl>

Вложения стилей

Если один стиль оформления встречается внутри другого, то можно определить различные варианты форматирования для вложенного стиля и «самостоятельного». Например, курсив в заголовках первого уровня

может быть выделен красным цветом, в заголовках второго уровня дополнительно подчеркнут и т. д. В этом случае в стилевой блок нужно включить описания всех вариантов таких вложений.

При определении параметров оформления вложенный стиль описывается следующим образом. Сначала записывается название самостоятель- 1 ного стиля, после него, через пробел, — название вложенного стиля, например:

<STYLE TYPE = "text/ess ">

HI. pastoral color: #00FF0

I color: red

HI. pastoral I color: black

</STYLE>

1<H1 CLASS = pastoral> This <l>is</l> pastoral </Hl> <H1> This <l>is</l> normal </Hl> В этом примере при использовании тэга <1> внутри заголовка <Н1> текст не только будет выделен курсивом, но и приобретет красный цвет. В то же время внутри тэга <Н1. pastoral> цвет курсива станет чер- Iным.

Рекомендации CSS допускают использование нескольких уровней вложения, например:

© 2009 internet-web.ru. All Rights Reserved