В языке XHTML 1.0 с помощью элемента style можно создать таблицу стилей внутри самого документа; XHTML 1.1 позволяет решить аналогичную задачу посредством модуля, хранящего таблицу стилей; XML допускает применение только внешних таблиц стилей. Следовательно, при проектировании приложения в среде XHTML не стоит ограничиваться только внутренними таблицами стилей. Более того, освоив применение внешних таблиц стилей, вы сократите время на сопровождение проекта.
Примечание Во всех примерах настоящей и последующих глав будут использоваться внешние таблицы.
Разработать внешнюю таблицу стилей несложно. Для этого в текстовом редакторе нужно создать новый документ и ввести правила стиля. Далее показан самый простой тип записи - описание единственного правила для представления текста, размещенного внутри элемента «абзац»:
р {text-decoration: underline;}
Затем файл следует сохранить с расширением .ess. На следующем этапе таблицу стилей необходимо связать с документом при помощи элемента link, размещенного внутри объекта head.
Пример. XHTML-документ начинается обычным образом:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>flaTa встречи</ИИе>
Закрытию элемента head должна предшествовать запись нового - link, в который входят как минимум два атрибута: rel и href. Первый атрибут применяется для указания связи между текущим документом и связанным с ним, второй - не меняется и работает так же, как с элементом привязки (<а>), то есть указывает URI присоединяемого документа. Запись для элемента link принимает следующий вид:
<link rel="stylesheet" href="calendar.ess" />
После этого элемент head можно закрыть и продолжить запись оставшейся части документа:
</head> <body>
<Ь1>Плановая встреча</Ь1> <pxb>C: </Ь>Шейн Маккерон<Ьг> <Ь>Из: </b>ApTest<br> <Ь>Время: </Ь>10:00<br> <Ь2>Тема встречи</Ь2>
<р> Обсуждение условий тестирования программы Widgets 1.О на
соответствие стандарту W3C.</p>
</body>
</html>
Результат показан на рис. 11.1. Текстовый фрагмент внутри абзаца подчеркнут.
Примечание Обратите внимание: подчеркиваются и фрагменты текста, выделенные жирным шрифтом. Дело в том, что элемент, помещенный внутри другого, наследует свойства своего родителя. В нашем случае объект, выделенный жирным шрифтом, находится внутри элемента «абзац». Помещаемый элемент (выделенный жирным шрифтом) называют потомком, а элемент, в который он вкладывается, -родителем.
Реализация возможностей таблиц стилей - процесс трудоемкий и сложный, однако конечный результат оправдывает затраты времени и сил. На рис. 11.2 представлена HTML-страница сайта Writers Guild. Несмотря на небольшие нарушения визуального представления макета (содержательная часть документа кажется немного смещенной к краю экрана), страница в целом выглядит прекрасно.
Обратите внимание на панель навигации в левой части экрана. Ссылки организованы в виде кнопок и из-за скошенных краев кажутся немного выпуклыми. Самые большие цветовые фрагменты, расположенные вверху изображения и в секции «Recent Announcements*, выполнены на основе правил CSS. Та же техника использовалась для создания границ, обрамляющих текст в главной (на рисунке белой) части страницы.
При проектировании такого представления Web-мастер старался максимально использовать классы, группируя однородные селекторы, чтобы описать их единым правилом стиля.
Опубликовал vovan666
April 08 2013 14:57:21 ·
0 Комментариев ·
3886 Прочтений ·
• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •
Комментарии
Нет комментариев.
Добавить комментарий
Рейтинги
Рейтинг доступен только для пользователей.
Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.
Нет данных для оценки.
Гость
Вы не зарегистрированны? Нажмите здесь для регистрации.
Главная
Каталог файлов
