Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Применение стиля к тексту
Кафедра САПР
|
Содержание |
|
1 Внедренные таблицы стилей 1.1 Таблица стилей для текста |
Внедренные таблицы стилей
Использование таблиц стилей существенно расширяет возможности Web-авторов. Таблицы CSS не только позволяют устанавливать различные стили для отдельных компонентов страницы или узлаЮ но и предоставляют дополнительные средства управления стилями документа, недоступные при использовании элементов и атрибутов представления в HTML и XHTML.
Внедренные таблицы стилей позволяют управлять стилями одного документа. Внедрение стилей выполняется с помощью элемента style, располагаемого в разделе head. Стили, определенные в элементе style, броузер применяет ко всему документу.
Таблица стилей для текста
Ниже показан процесс создания документа, в котором используется таблица стилей, определяющая цвет, размер и гарнитуру текста, в дескрипторе абзаца документа XHTML.
Создайте с помощью инструмента TopStyle новый документ XHTML 1.0 Transitional и сохраните его в домашнем каталоге под именем primer.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" dir="ltr" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
<title>Внедренный лист стилей</title>
</head>
Добавьте текст в тело документа.
<body>
<p>
Исследователи умственных способностей утверждают, что ваша
неосознанная база данных превосходит по объему осознанную
более чем в 10 миллионов раз. А эта база данных является
источником вашей скрытой естественной гениальности. Другими
словами, определенная часть из вас является более умной, чем
это кажется на самом деле. Мудрые люди регулярно консультируют
эту более умную часть людей.</p>
<p>
Увлеченные люди, которые что-то создают, являются гениями. Богатые
увлеченные люди являются чудаками. Увлеченные люди, которые ничего
не создают и не имеют богатства, являются просто увлеченными людьми.
Гении и увлеченные люди никогда не сидят дома, они находятся в
середине глубокого океана; гении плывут, увлеченные люди тонут.
Большинство же из нас сидят беспечно на берегу этого океана. Ловите
удачу и хотя бы немного замочите свои ноги в нем.
</p>
<p>
-- Michael J. Gelb
</p>
</body>
В разделе head создайте внедренный стиль, содержащий свойство font-family, а также свойства font-size и color для селектора p. Эти свойства определяют гарнитуру, размер и цвет текста параграфа.
<style type="text/css">
<!--
p {
font-family: Garamond, Times, serif;
}
-->
</style>
При просмотре созданного документа броузер выведет текст шрифтом Garamond 18. В окне броузера текст должен иметь цвет красной охры.
Использование свойства font-weight
Данное свойство характеризует толщину линий в символах текста. Для совместимости документа рекомендуется использовать шрифты с наиболее распространенными насыщенностями. К ним относятся шрифты обычной насыщенности и полужирные, которые доступны почти на любом компьютере.
Добавьте в документе primer.html, созданном вами ранее, заголовок h1, расположив его непосредственно после дескриптора body.
<h1>Цитаты от Michael J. Gelb</h1>
Определите для него в таблице стилей полужирный шрифт, тот же цвет и другую гарнитуру.
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color: #CC9966;
}
Измените также цвет и размер шрифта для основного текста.
p {
font-family: Garamond, Times, serif;
color: #999999;
}