|
|
Онлайн учебник по HTML и JAVASCRIPT Элементы языков HTML и JAVASCRIPTСтили в HTML Существует еще один прием позиционирования элементов и достижения внешних
эффектов, которые могут украсить страницу и привлечь к ней внимание читателей.
Этот прием основан на определении пользовательских стилей и задании
таблицы стилей. Таблица стилей — это просто некоторая структура описания
свойств элемента. Не ищите здесь какой-нибудь прямоугольной сетки. Если
таблица стилей задана, то различные документы могут просто ссылаться на
эту таблицу и не содержать большое количество атрибутов в тегах форматирования
типа <Н1>, <FACE> и т. п.
Каскадные таблицы стилей (CSS, Cascading Style Sheets) содержат описание формата части или всего текста, координаты расположения элементов и другие параметры. Задание стиля обеспечивается с помощью как тега <STYLE>, так и атрибута STYLE. Используя стили, можно позиционировать элементы страницы (например, тексты и графику), указав координаты их положения. И это, пожалуй, самое важное, что дают стили. Кроме того, таблицы стилей часто применяются при создании динамических страниц. Далее способ изложения несколько изменится по сравнению с тем, который мы применяли ранее. Теперь мы будем больше рассказывать об идеях, иллюстрируя их примерами, и меньше уделять внимание строгости и полноте определений. При этом все примеры программ будут, как и прежде, работоспособными. Даже если вы не в полной мере разберетесь в теории вопроса, то все равно сможете использовать приведенные примеры в своих разработках. Для этого следует просто скопировать тексты или отдельные их фрагменты в ваш собственный HTML-документ и адаптировать к своей конкретной задаче путем коррекции отдельных параметров. Теги <STYLE> и </STYLE> используются внутри тегов заголовка файла <HEAD> и </HEAD>, а атрибут STYLE — в теге заголовка раздела (<Н1>, <Н2>,..., <H6>), а также в теге <BODY>, в теге выделения фрагмента <DIV> и многих других. Применение тега <STYLE>: <HEAD> Здесь в фигурных скобках через точку с запятой перечисляются свойства
и их значения, причем между свойством и его значением ставится двоеточие.
При этом тег, указываемый перед описанием в фигурных скобках, пишется
без угловых скобок. <HTML> Мы изменили стили Н1 и Н2, принятые по умолчанию: назначили размеры (48 и 30 пунктов) и цвета (красный и синий) для всех текстов, которые окажутся внутри этих тегов. Существуют и другие свойства. Например, свойство FONT-FAMILY: HELVETICA задает гарнитуру шрифта HELVETICA. Обратите внимание на то, что внутри тега <STYLE> указываются определения стилей тегов, которые записываются без угловых скобок.
Рис. 664. Стили заголовков первого и второго уровней заданы атрибутами тега <STYLE> Можно определить стиль для тега BODY. Тогда
весь текст, находящийся между тегами <BODY>
и </BODY>, будет автоматически отформатирован
в соответствии с перечисленными свойствами. <HTML> Мы можем создать таблицу стилей, закрепив за ней имя. Это имя задается
как обычное имя, но с точкой в качестве первого символа. Тогда в тегах
мы можем обращаться к этой таблице по ее имени, используя атрибут
СLASS=имя_стиля, где имя стиля употребляется уже без точки. <STYLE> А стиль заголовка второго уровня можно задать где-нибудь в тексте программы так: <Н2 CLASS=mystyle> Рассмотрим пример, создающий эффект, который без задания стиля был бы достижим только с помощью графики. Мы накладываем тексты друг на друга. Эта возможность далее будет использована для создания эффекта объемного текста (так называемого ЗD-эффекта). Кроме того, возможность наложения (частичного перекрытия) фрагментов страницы часто используется в дизайне реальных страниц. Вданном примере применяется тег <DIV> для выделения фрагмента HTML-документа. Обратите внимание, как внутри определения стиля тега BODY определяются другие стили с именами тень, основа, слой 1 и слой 2. Это и есть то, что понимается под каскадной таблицей стилей. <HTML>
Рис. 665. Пример каскадного стиля В приведенном примере использованы тег <DIV> и атрибут CLASS. тег <DIV> применяется для задания части страницы (фрагмента документа). Он ничего не форматирует, а лишь помечает фрагмент текста, который рассматривается как единый объект. Атрибут CLASS позволяет сослаться на таблицу стилей и тем самым задать стиль представления текста, расположенного между тегами <DIV CLASS . . . > и </DlV>. Обратите внимание на то, как в таблице стилей определяется стиль: набору свойств в фигурных скобках присваивается имя, перед которым ставится точка. В дальнейшем идут ссылки на эти имена с помощью атрибута CLASS для применения ранее определенного стиля. Идея проста: сначала определяется что-то, а затем используется это определение путем ссылки на него. В этом примере тексты определяются как бы в слоях, которые накладываются друг на друга. Так, сначала выводится слой тень, затем на него накладывается слой основа, а потом — слой 1 и слой 2. Порядок, в котором слои накладываются друг на друга, задается порядком следования фрагментов текста, помеченных тегом <DIV>. Собственно перекрытие слоев обеспечивается применением отрицательных значений свойства margin-top (отступ сверху). В рассмотренном выше примере были использованы следующие свойства:
Используя отрицательные значения свойства margin-top,
можно наложить один текст на другой. В этом случае стиль задается в следующем формате: STILE ="описание_свойств_стиля" Описание свойств стиля заключается в кавычки и содержит свойства и их значения, перечисленные через точку с запятой, как это делалось при использовании тега <STYLE>. Атрибут STYLE обычно применяется в тех случаях, когда необходимо задать стиль элемента по месту его появления в программе. Вот пример использования атрибута STYLE для форматирования заголовка второго уровня. <Н2 STYLE="font-size:48; font-family:Аriаl">Некоторый текст</Н2>
|
|
|