Методические указания1_2 (1084715), страница 4

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 4)

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

datetime="Дата"

В результате начальный тег может иметь такой вид:

<INS datetime="2000-04-26" cite="file:///С:/Pages/Дополнения. htm">

<BASEFONT>

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

size=базовый размер шрифта

Величина для этого атрибута может лежать в пределах от 1 до 7. По умолчанию используется величина 3. Установка, выполняемая этим элементом, имеет значение для элемента FONT (см. ниже), который позволяет задавать относительный размер шрифта. Другие атрибуты у этого элемента такие же, как и у элемента FONT.

<FONT> </font>

Определение типа, размера и цвета шрифта. Все эти характеристики определяются при помощи соответствующих атрибутов. Абсолютный размер шрифта задается атрибутом size (размер):

size =абсолютный размер шрифта

Этот атрибут может принимать значения от 1 до 7. На рис. 3.2 показаны несколько образцов надписей, выполненных шрифтами разного размера.

Шрифт7 Шрифт 6

Шрифт 5 Шрифт 4

Рис. 3.2. Возможные варианты размеров шрифта

Размер шрифта может также задаваться относительно базового:

size=+ЧИСЛО

При назначении величины для этого атрибута надо учитывать величину базового размера. В сумме эти две величины должны соответствовать одному из абсолютных размеров. Так, для базового размера, равного 3, относительный размер может находиться в пределах от -2 до +4. Если величина выходит за допустимый предел, то используется либо шрифт размера 7, либо шрифт размера 1. На рис. 3.3 показаны надписи, выполненные шрифтами с заданным относительным размером. Для элемента FONT можно использовать атрибут цвета:

со!ог="цвет"

Шрифт+4 Шрифт+3

Шрифт+

Рис. 3.3. При помощи относительных величин тоже

можно получить семь градаций размера шрифта

Атрибут face (вид) позволяет задавать определенный шрифт или несколько шрифтов (через точку с запятой), например:

face="Arial; Verdana; Tahoma"

Правда, есть одна проблема. Web-страницы просматривает множество людей и нет гарантии, что у каждого из них окажется нужный шрифт. Если в системе не установлен шрифт точно с таким же названием, то браузер использует стандартный шрифт из числа назначенных по умолчанию: один пропорциональный, другой моноширинный.

Элемент FONT может с успехом заменять элементы заголовка Н1...Н6. Для последних, например, не предусмотрено задание цвета букв. Чтобы заголовок, созданный на основе элемента FONT, хорошо смотрелся, этот элемент необходимо комбинировать с другими: CENTER, В, I, P и т. д.

Дополнительные атрибуты: id, class, lang, dir, title, style.

<BDO> </bdo>

Этот элемент позволяет изменять направление текста. Он используется совместно с атрибутом dir, которому может быть присвоено одно из значений: LTR (слева направо) или RTL (справа налево). Например:

<BDO dir="RTL"> Haпpaвлeниe текста можно изменить</bdo>

3.4. Таблицы стилей

Таблицы стилей (style sheets) являются одним из самых эффективных нововведений HTML 4. Они позволяют изменять свойства элементов в соответствии с желаниями разработчика страницы.

К обычным таблицам таблицы стилей не имеют никакого отношения. В общем случае шаблон таблицы стилей выглядит так:

Элемент. имя_стиля {свойство"!: значение; свойство2: значение; ...}

В результате для определенного элемента задается набор свойств (ассортимент которых весьма значителен). Тем самым снимаются ограничения HTML, а для дизайнера (автора страницы) открывается широкое поле деятельности. Одна из важнейших особенностей стилевого оформления заключается в том, что преобразованию подвергаются все элементы, заключенные внутри элемента с заданным стилем. Так, определив некоторый стиль для элемента BODY, вы присваиваете его всему содержимому Web-страницы. По аналогии с объектно-ориентированными языками программирования это качество называется наследованием. В соответствии с правилами HTML, автор, использующий стили, должен включить в заголовок документа (элемент HEAD) соответствующее мета-определение:

<МЕТА http-equiv="Content-Style-Type" content="text/css">

Броузер получит информацию, какой язык определения стилей использован. «CSS» в данном случае означает «каскадная таблица стилей» (Cascading Style Sheets). Это одновременно стандарт и язык, расширяющий традиционный HTML. В настоящее время существует две спецификации (CSS1 и CSS2), в которых перечислены свойства элементов. Эти свойства очень похожи на атрибуты, но есть два различия: свойств намного больше и правила синтаксиса несколько другие.

Надо отметить, что есть еще один способ определения свойств элементов: при помощи языка (например, JavaScript). В этом случае правила синтаксиса свои, хотя суть остается прежней. Простейшим способом определения стиля является задание его непосредственно для выбранного элемента, например:

<Р style="font-size: 10pt; font-style: italic; color: blue">

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

<STYLE> </style>

Если атрибут style позволяет задать свойства одного конкретного элемента, то элемент STYLE определяет свойства всех одноименных элементов, например:

<STYLE type="text/css">

Н1 {border-width: 1; border: groove; text-align: center; color: green}

H2 {color: maroon; font-style: italic}

CODE {font-family: Arial, Verdana; background: white} •

P {text-indent: 10; color: green; font-size: 12pt}

P CODE {font-weight: bold; color: violet; font-size: 12pt}

</style>

В этом случае для всей страницы создаются новые стили для заголовков первого и второго уровня. Для элементов CODE выбирается шрифт и цвет фона. Для абзацев (Р) выбирается величина отступа первой строки, цвет и размер букв. Этот простой пример показывает преимущества стилей: автор страницы может легко создать эффекты, недоступные при использовании только одних атрибутов.

Последним в нашем примере идет стиль для вложенных элементов. Он будет использован браузером только в том случае, когда элемент CODE окажется внутри элемента Р. При этом свойства текста будут унаследованы: от элемента абзаца —отступ (text-indent: 10);

от элемента CODE — фон (background: white).

А стиль, который можно условно назвать «P CODE» внесет дополнительные форматы:

полужирное начертание (font-weight: bold); фиолетовый цвет букв (color: violet) и размер символов (font-size: 12pt). Тут уместно вспомнить о многочисленныхэлементах содержания, которые пришли из предыдущих версий языка и вроде бы бесполезны: задачи, для которых они предназначались, кажутся сейчас архаичными. Действительно, зачем предусматривать отдельные элементы для таких объектов, как «текст телетайпа» или «символы, введенные с клавиатуры»? Стили дают таким элементам вторую жизнь. Вложения двух элементов позволяют создать любое количество комбинаций форматов.

Обратите внимание, что в последней строке приведенного выше примера элементы Р и CODE разделены пробелом. Когда элементы отделены друг от друга пробелами, это означает, что ряду элементов присваивается один и тот же стиль.

ПРИМЕЧАНИЕ

Как это все выглядит на практике, можно увидеть в файле Style.htm на прилагаемой дискете.

Использование элемента STYLE не исключает возможность указания атрибута style. Все элементы, которые будут модифицированы при помощи атрибута style, получат форматирование, отличное от того, которое может быть задано при помощи элемента STYLE. Иными словами, атрибут style имеет более высокий приоритет. Элемент STYLE может использовать стандартные атрибуты: type, lang, dir, title.

Классы

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

<STYLE type="text/css">

H1.red1 {color: RGB(215,40,40); text-align: center}

</style>

Цвет задан с помощью функции RGB(). Ее аргументами являются десятичные числа. Теперь, если надо использовать заголовок, его конструкция должна выглядеть так:

<Н1 class="red1"> Текст заголовка </h1>

При желании можно создать класс red2, red3 и т. д. Очевидно, что такой подход более удобен: можно иметь сколько угодно вариантов форматирования для одного элемента.

Универсальные классы: атрибут id

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

#steel {color: RGB(155,180,190); font-weight: bold}

Поскольку оттенок надо подбирать очень точно, без функции RGB() опять не обойтись. Учитывая, что буквы получатся достаточно светлыми, можно добавить в стиль полужирное начертание. Обратите внимание, что о размере символов в формате данных нет. Поэтому такой формат (стиль) можно применять для различных элементов: заголовков и обычного текста. Но для указания стиля надо использовать атрибут id, например:

<Н2 id="steel"> Заголовок формата "steel" </h2>

<Р id="steel"> Абзац, отформатированный универсальным стилем "steel" </p>

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

Каскадные таблицы стилей: элемент <LINK>

Таблицы стилей могут сохраняться в отдельном файле и использоваться для разных Web-страниц. Такие таблицы называются каскадными (CSS). Они названы так потому, что несколько CSS-файлов (стили автора страницы, сервера, пользователя) могут использоваться одновременно. В этом случае стили «накладываются» друг на друга, и более поздние определения отменяют принятые ранее установки. Чтобы подключить к странице файл с таблицами стилей, надо использовать элемент LINK в секции HEAD:

<LINK href="имя_файла.css" rel="stylesheet" type="text/css">

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

P.spec1 {color : green; font-variant: small-caps;}

P.new1 {color : maroon;font-style: italic;}

P.new2 {color : maroon;font-style: italic;letter-spacing: 2pt;}

В результате на странице могут оказаться три стиля абзацев, показанные на рис. 3.4.

ТЕКСТ АБЗАЦА (CLASS-"SPEC1") - ЭФФЕКТ «МАЛЫЕ ПРОПИСНЫЕ»

Текст абзаца (class** "newl") - курсив и цвет букв.

Текст абзаца (class= "new2 ") - добавлена разрядка.

Рис. 3.4. Стили абзацев

ПРИМЕЧАНИЕ

Примеры использования классов и стилей находятся в файлах Class.htm и Formats.css на прилагаемой дискете.

<DIV> </div> и <SPAN> </span>

Существует два элемента, которые специально предназначены для применения стилей. Вы уже знаете, что таблицы стилей универсальны: их можно использовать со многими элементами. Разберем особенности данных элементов. Для определения стилей допустимы все синтаксические правила, о которых рассказывалось в этом разделе. Особенностью элемента DIV является то, что он предназначен для указания в качестве контейнера элементов, то есть его собственный стиль должен влиять на стили элементов, находящихся внутри. Вот шаблон для использования элемента DIV:

<HEAD>

<STYLE type="text/css">

DIV. Имя { Свойство: значение;

</style>

</head>

<BODY>

<DIV class="Имя">

<H1> Заголовок </h1>

<Р>Первый абзац

Характеристики

Список файлов книги