Задание №9
Знакомство с каскадными таблицами стилей.
Каскадные таблицы стилей или просто таблицы стилей (CSS — Cascading Style Sheets) — это набор правил, описывающих форматирование разных фрагментов HTML-кода и хранящихся отдельно от него. Одно такое правило, отображающее форматирование какого-то одного фрагмента или однотипной группы фрагментов кода, называется стилем. Таблицы стилей описываются на особом языке CSS и хранятся в особых файлах с расширением сss, хотя могут быть внедрены в саму Web-страницу.
Таблицы стилей, как и многое другое, лучше представить на примере. Давайте рассмотрим небольшой фрагмент классического, "чистого" HTML-кода, созданного без использования таблиц стилей.
<p><font color="#FF0000">Это цитата.</font></p>
Как видите, это одна из тех цитат, которые по приказу нашего гипотетического начальства должны были "измельчать". Давайте же все-таки доставим начальству это удовольствие.
<p><font color="#FF0000" size="-1">Это цитата.</font></p>
С одной цитатой мы справились без труда. А если их сотня? Нет, без таблицы стилей тут не обойтись. Перепишем наш пример с использованием стилей.
Сначала напишем саму таблицу стилей.
.cit { font-style: italic; color: #FF0000 }
Эта таблица стилей содержит определение всего одного стиля — cit. Такой стиль, имеющий уникальное имя (чтобы Web-обозреватель мог однозначно его идентифицировать), называется стилевым классом.
Этот стиль содержит определение параметров для двух атрибутов стиля. Первый атрибут — font-style — задает "стиль" текста; в нашем случае значение italic делает текст курсивом, словно бы его поместили внутрь тега . Второй атрибут — color — задает цвет текста. Как видите, два атрибута стиля cit заменили оба тега: и <FONT>, и .
Собственно, красивое форматирование текста таблицы стилей, которое вы видите здесь, совсем не обязательно. Ваша таблица стилей может выглядеть и следующим образом:
.cit {font-style:italic;color: #FF0000}
Так она получается даже компактнее — весьма немаловажное достоинство во времена господства медленных каналов связи. Но, согласитесь, красиво отформатированный вариант легче читается.
Сохраним нашу таблицу стилей в файле styles.css. И давайте перепишем наш фрагмент HTML-кода так, чтобы он использовал эту таблицу стилей.
<p class="cit">ЭTO цитата.</p>
Как видите, достаточно просто добавить в тег <р> атрибут CLASS и в качестве значения присвоить ему имя определенного нами стилевого класса, в нашем случае cit. Теперь этот фрагмент текста будет форматироваться курсивным красным шрифтом уменьшенного размера.
Но, кроме того, нам еще нужно добавить в секцию HTML-заголовка (тег <HEAD>) нашей страницы ссылку на таблицу стиля, чтобы Web-обозреватель смог ее найти. Эта ссылка будет иметь следующий вид:
<link rel="stylesheet" href="styles.сss" type="text/css">
Всего стандарт CSS определяет три способа задания стиля для элемента страницы. Давайте перечислим их и дадим краткое описание каждому способу.
Внешняя (или привязанная) таблица стилей. Стили сохраняются в отдельном файле с расширением css и привязываются к Web-странице с помощью особого тега <LINK>. Вы уже познакомились с внешними таблицами стиля, так что не будем сейчас подробно на них останавливаться.
Внутренняя (или внедренная) таблица стилей. Таблица стилей в этом случае имеет тот же самый формат, что и внешняя, но располагается в секции заголовка той же Web-страницы и помещается внутрь специального тега <STYLE>.
Внутренние (также встроенные или внедренные) стили. Определение стиля помещается прямо в нужный тег, для чего используется специальный атрибут STYLE.
Создайте новый CSS документ. Сохраните его под именем d009.css.
Создайте новый HTML документ. Сохраните его под именем d009.html.
Добавьте ссылку на CSS-документ ссылку в область head.
Перейдите в документ с таблицей стилей и добавьте в него описание стиля: .cit { font-style: italic; color: #FF0000 }
Сохраните документ. Перейдите в html документ и добавьте туда несколько текстовых абзацев, применив к ним стиль cit.
Для уменьшения высоты текста цитаты добавьте в стиль cit еще один параметр font-size: smaller. Сохраните оба документа, посмотрите на результат.
Создайте еще 2 стиля, примените их другим абзацам.
С помощью таблицы стилей можно изменить внешний вид любого тега HTML. Для этого нужно просто переопределить его в таблице стилей следующим образом:
i { color: #FF0000; font-size: smaller }
После этого все фрагменты текста, заключенные внутрь тега (курсив), будут отображаться уменьшенным шрифтом красного цвета. Такой стиль называется стилем переопределения тега.
А если вы создадите такой стиль:
h1 i { color: #FF0000; font-size: smaller }
то уменьшенным шрифтом красного цвета будет отображаться только текст, заключенный внутрь тега , который, в свою очередь, находится внутри тега <H1>. Вот такой:
<h1>Курсивный заголовок</h1> А следующий текст: <i>0бычный курсив</i> <h2>Экспериментируем с курсивом</h2>
будет отображаться как обычно. А такой стиль:
I.cit { color: #FF0000; font-size: smaller }
будет применяться только к тексту, помещенному внутрь тега с атрибутом CLASS, установленном в cit (своеобразный гибрид стилевого класса и переопределения тега; этот стиль так и называется — гибридный), т. е. к такому тексту:
<i class="сit">Маленький зеленый курсивчик
Как видите, тег также поддерживает атрибут CLASS. Вообще, его поддерживают практически все теги, "отвечающие" за видимые элементы страницы. Так что проблем с форматированием страниц у вас возникнуть не должно.
Есть еще один способ применения стиля к элементу страницы: воспользоваться атрибутом ID, который также поддерживается почти всеми тегами.
<p id="cit">это цитата.</p>
Тогда определение стиля в таблице должно выглядеть следующим образом:
#cit { font-size: smaller; font-style: italic }
Такой стиль называется стилем-селектором.
Измените внешний вид следующих тегов em, h1, h2, ul.Создайте в html документе текст и выделите его соответствующими тегами.
Для тега абзаца создайте несколько стилей селекторов.
Для использования таблицы стилей внутри файла html необходимо добавить между тегами <head> парный тег <style></style>. Пример использования стилей внутри html документа представлен ниже:
<head> <style>
.cit { font-size: smaller; font-style: italic } I {color: #00FFOO } HI I { color: #FF0000; font-size: larger }
</style> <title>Untitled Document</title> </head>
Сохраните документ.
Создайте новые CSS и HTML документы. Назовите их d009_1.css и d009_1.html соответственно.
Создайте следующий html документ:
В файле с таблицами стилей задайте следующие параметры для текстов:
Заголовок – высота текста 24 пт, выравнивание по центру;
Абзацы (параграфы) – высота текста 9 пт;
Стиль для авторских прав, например, copyright – высота текста 8 пт, начертание текста – курсив, выравнивание текста – по правому краю.
В html документе присоедините созданную таблицу стилей.
Создайте внутри html файла еще несколько стилей:
Заголовок – высота текста 16 пт, цвет текста - #00FF00.
Стиль, определенный во внутренней таблице, имеет приоритет перед стилем из внешней таблицы. Аналогично, внутренний стиль, помещенный внутрь тега, имеет приоритет перед и внутренней, и внешней таблицами стилей. Это и называется каскадностью.
Сохраните все файлы.
Создайте новые CSS и HTML документы. Назовите их d009_2.css и d009_2.html соответственно.
HTML позволяет вам также сменить цвета гиперссылок, отдельно — для непосещенных, отдельно — для посещенных и отдельно — для активной гиперссылки. Это позволяет немного оживить Web-сайт, сделать его не похожим на другие. Но возможности, предлагаемые псевдостилями, несравнимо шире. Вы можете менять шрифт, начертание и даже убирать надоевшее подчеркивание у активной гиперссылки.
Псевдостили гиперссылок
|
Псевдостиль |
Описание |
|
|
A: link |
Применяется ко всем гиперссылкам документа |
|
|
A: active |
Применяется ко всем активным гиперссылкам документа |
|
|
A: visited |
Применяется ко всем посещенным гиперссылкам документа |
|
|
A: hover |
Применяется к гиперссылке, на которую указывает курсор мыши |
|
В файл с таблицей стилей скопируйте следующий код:
a:link { color:#tCC0000; background-color: #FFFFFF; text-decoration: none }
a:active { color: #FFFFFF; background-color: #CC0000; text-decoration: none }
a:visited { color: #CC0000; background-color: #FFFFFF; text-decoration: line-through }
a:hover { color: #FFFFFF; background-color: #CC0000; text-decoration: none }
Сохраните файл со стилями. Присоедините его к html документу.
В html документе создайте три-четыре любых гиперссылки. Посмотрите результат.
Сохраните файлы. Вы можете изменить цвета в таблице стилей по своему усмотрению.
На самом деле процесс создания стилей можно автоматизировать, используя возможности программы Dreamweaver. Для этого необходимо слинковать уже существующий файл с css правилами. После присоединения файла в html файле будет создана ссылка (link rel…). После присоединения css-файла щелчок по кнопке New CSS Rule будет предложено ввести название нового класса, после чего откроется окно со свойствами создаваемого стиля. Для редактирования существующих стилей щелкните дважды по названию стиля.
Добавьте несколько стилей, используя возможности программы.