отдается последнему описанному стилевому решению. Однако значение любого свойства в декларации можно сделать обязательным, т.е. назначаемым безусловно.
Синтаксис:
{свойство: значение!important}
2.1. Типовое задание
Пример 1. Вывод всех фрагментов документа, отмеченных тэгом h1, полужирным шрифтом.
<head>
<style type="text/css"> h1 {font-weight: bold} </style>
</head>
<body>
<h1>здесь используются стили</h1> здесь стилей нет
</body>
Пример 2. Группировка селекторов, имеющих одинаковую декларацию. Три одинаковых декларации
h1 {font-weight: bold}
h2 {font-weight: bold}
h3 {font-weight: bold}
могут быть заменены одной конструкцией вида
h1, h2, h3 {font-weight: bold}
Стиль в фигурных скобках можно применять к форматированию заголовков сразу трех уровней.
Можно также сделать так, чтобы стиль применялся только к некоторой последовательности тегов. Например, чтобы весь курсив внутри абзаца был окрашен в зеленый цвет. В этом случае выполняется следующая
19
последовательность тегов: сначала открывается абзац, а потом начинается курсив.
<STYLE TYPE="text/css"> P I { color: green }
</STYLE>
Если курсивный текст расположен вне абзаца, то стиль к нему применен не будет.
Пример 3. Использование контекстного селектора.
<head>
<style type="text/css"> b i {color: red} </style>
</head>
<body>
<b>здесь стилей нет</b> <i>здесь стилей нет</i> здесь стилей нет
<b><i>здесь используются стили</i></b> <i><b>здесь НЕ ИСПОЛЬЗУЮТСЯ стили</b></i> </body>
Пример 4. Назначение ряда свойств одному тэгу.
<head>
<style type="text/css"> h1 {font-weight: bold; font-size: 20pt}
</style>
</head>
<body>
<h1>здесь используются стили</h1> здесь стилей нет
</body>
20
Пример 5. Использование классов селекторов.
<head>
<style type="text/css">
.red {color: red}
.blue {color: blue}
.green {color: green} </style>
</head>
<body>
<h1 class="red">красный заголовок</h1> <h1 class="green">зеленый заголовок</h1> <div class="blue">синий текст</div> </body>
Пример 6. Использование иерархии стилей.
<head>
<style type="text/css">
.red {color: red}
.blue {color: blue!important} </style>
</head>
<body>
<h1 class="red" style="color: green">
зеленый заголовок </h1>
<h1 class="blue" style="color: green">
синий заголовок </h1> </body>
21
2.2.Контрольные вопросы
1.Основные методы применения таблиц стилей для оформления Web-
страниц.
2.Типы селекторов и их назначение.
3.Иерархия стилевых решений.
2.3.Контрольные задания
1.Выделите в окне браузера произвольный текст без форматирования. Задайте цвет шрифта, используя встроенный стиль в соответствии с вариантом.
|
|
|
Вариант |
|
|
|
|
|
1 |
2 |
3 |
|
4 |
5 |
6 |
Цвет |
lime |
maroon |
silver |
|
teal |
navy |
fuchsia |
2.Используя идентификатор, задайте курсивное начертание для следующего абзацатекста.
3.Выведите в окне браузера заголовок H1 без форматирования. Используя селекторы, задайтедлязаголовкаследующиепараметры форматирования.
|
|
|
|
|
Вариант |
|
|
|
|
|
||
|
|
|
|
|
3 |
|
|
|
|
|
|
|
|
|
|
1 |
2 |
4 |
5 |
6 |
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Цвет |
green |
red |
teal |
|
yellow |
red |
|
blue |
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Размер шрифта |
20pt |
12pt |
14pt |
|
16pt |
22pt |
|
18pt |
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
4. Используя классы селекторов, задайтецвет текстадляследующего абзацав |
|||||||||||
соответствиисвариантом. |
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
Вариант |
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
2 |
3 |
|
4 |
5 |
|
6 |
|
|
|
Цвет |
|
maroon |
navy |
fuchsia |
|
pink |
silver |
|
olive |
|
|
5. В виде отдельного файла mystyle.css создайте таблицу стилей, в которой задайте контекстный селектор. Примените его к произвольному фрагменту документа, который помечен сразу всеми участвующими в декларировании тэгами с соблюдением указанной последовательности вложения тэгов.
22
Лабораторная работа № 3
ФОРМАТИРОВАНИЕ ТЕКСТА
Цель работы: приобрести начальные навыки создания простейших Internet-документов; научиться выполнять форматирование созданных Webстраниц.
Методические указания
Текст Web-страницы – произвольные символы, определяемые по умолчанию как текстовые данные.
Основные группы тегов, выполняющих форматирование текста Webстраницы:
<Р>…</р> − тег начала и конца абзаца. Данный тег может использовать атрибут align.
<Рrе>…</рrе> − тег вывода текста, определенного пользователем заранее; <Center>…</center> − тег для центрирования текста любого содержания; <Div>…</div> − тег центрирования текста в зависимости от значения
атрибута align;
<Big>…</big> − тег увеличенного размера шрифта; <Small> … </small> − тег уменьшенного размера шрифта;
<Tt>…</tt> − тег для обозначения шрифта телетайпа (моноширинного шрифта);
<Strike>…</strike> − тег для создания перечеркнутого текста; <U>…</и> − тег для формирования подчеркнутого текста; <I>…</i> − тег вывода текста курсивом;
<Sub>…</sub> − тег для написания нижних индексов; <Sup>…</sup> − тег для написания верхних индексов;
<Font>…</font> − тег для определения типа, размера и цвета шрифта.
23
Все характеристики тега <Font> определяются с помощью специальных атрибутов:
• size = абсолютный размер шрифта. Абсолютный размер принимает значения от 1 до 7.Размер шрифта может задаваться не в абсолютном, а в относительном виде по отношению к базовому размеру, например, size = + число
или size = − число. Для базового размера, равного двум, относительный размер может находиться в пределах от −1 до +5.
• color = цвет − атрибут цвета шрифта.
<Bdo>…</bdo> − изменение направления текста на обратный с атрибутом dir.
Например:
<Bdo dir = "RTL"> текст, направление которого меняется </bdo> <Marquee>…</marquee> − текст на странице будет представлен в виде
бегущей строки. Атрибут direction используется для определения движения текста слева направо или справа налево.
Например:
< Marquee direction = left, right> текст </marquee> − движение текста слева направо.
Для оформления цвет указывается по имени (английский эквивалент), например, red (красный), green (зеленый), blue (синий), или тремя двухразрядными шестнадцатеричными числами, которые определяют цвет и двухразрядными шестнадцатеричными числами, которые определяют цвет иx определяется парами шестнадцатиричных чисел соответственно. Названия цветов и их коды представлены в табл. 3.1.
|
|
Таблица 3.1 |
|
|
|
Русское название цвета |
Английское название цвета |
Код цвета |
|
|
|
1 |
2 |
3 |
Аквамарин |
Aqua |
#00FFFF |
|
|
|
Белый |
White |
#FFFFFF |
|
|
|
24
|
|
|
Окончание табл. 3.1 |
||
|
|
|
|
|
|
1 |
|
2 |
|
3 |
|
Желтый |
Yellow |
|
|
#FFFF00 |
|
|
|
|
|
|
|
Зеленый |
Green |
|
|
#008000 |
|
|
|
|
|
|
|
Каштановый (бордовый) |
Maroon |
|
|
#800000 |
|
|
|
|
|
|
|
Красный |
Red |
|
|
#FF0000 |
|
|
|
|
|
|
|
Оливковый |
Olive |
|
|
#808000 |
|
|
|
|
|
|
|
Пурпурный |
Purple |
|
|
#800080 |
|
|
|
|
|
|
|
Светло-зеленый |
Lime |
|
|
#00FF00 |
|
|
|
|
|
|
|
Серебристый |
Silver |
|
|
#C0C0C0 |
|
|
|
|
|
|
|
Серый |
Gray |
|
|
#808080 |
|
|
|
|
|
|
|
Сизый |
Teal |
|
|
#008080 |
|
|
|
|
|
|
|
Синий |
Blue |
|
|
#0000FF |
|
|
|
|
|
|
|
Ультрамарин |
Navy |
|
|
#000080 |
|
|
|
|
|
|
|
Фуксиновый |
Fuchsia |
|
|
#FF00FF |
|
|
|
|
|
|
|
Черный |
Black |
|
|
#000000 |
|
|
|
|
|
|
|
1. Атрибуты тега < Body >
bgcolor = цвет − цвет фона Web-страницы; text = цвет − цвет текста на Web-странице; link = цвет − цвет текста гиперссылок;
vlink = цвет − цвет использованных гиперссылок.
2. Атрибуты текста
Из параметров текста документа реально применяется только один − text, который задает цвет основного текста на странице (значение параметра может быть введено аналогично цвету фона документа): <BODY text ="black">.
3. Атрибуты гиперссылок
Параметры гиперссылок (связей с внутренними или внешними документами) определяют цвета активных(alink), не посещенных (link) и посещенных (vlink) ссылок:
25
<body link ="#OOOOFF" alink ="#OOOOFF" vlink ="blue">
Теги <H1>, <Н2>... <H6> — тег <Н> с указанием одной из цифр (от 1 до 6) задает определенный размер заголовка всего текста целиком или его конкретного фрагмента. Заголовок <Н6> будет минимальным, a <H1> — самым большим. Особенностью тегов <Hn> является то, что они уже подразумевают отступ от текстовой части и разработчикам HTML-документов не приходится делать отступ самостоятельно
<html>
<head>
<title>Заголовки H1-H6</title> </head>
<body bgcolor="#FFFFFF" text="black" link="#OOFFOO" alink="#OOFFOO" vlink="blue">
<Н1>Заголовок1</Н1> <Н2>Заголовок 2</Н2> <НЗ>Заголовок 3</НЗ> <Н4>Заголовок 4</Н4> <Н5>Заголовок 5</Н5> <Н6>Заголовок 6</Н6>
</body>
</html>
Для тегов вида <Нп> обычно указывается одно из трех значений атрибута этого тега align:
align = center — выравнивание заголовка по центру; align = left — выравнивание заголовка по левому краю; align = right— выравнивание заголовка по правому краю.
Разбиение текста Web-страницы на части выполняют горизонтальные линии, которые описывает тег <Нr>.
<Нr> — тег для задания горизонтальной линии и может использовать дополнительно атрибуты:
26
align = выравнивание линии; size — толщина линии в пикселах;
width = длина линии в пикселах или процентах; color = цвет линии.
4. Атрибуты фона
Параметрами фона документа являются bgcolor, bgground и backgproperties.bgcolor устанавливает цвет фона, значение которого может быть введено в символьном эквиваленте, в шестнадцатеричном коде или в формате цветовой модели RGB.
Система указания цвета в HTML основана на трех основных цветах: красном, зеленом и синем (модель RGB — Red, Green, Blue). Любое значение RGB может быть преобразовано в шестнадцатеричный формат (от 00 до FF с приставкой # (читается "диез")). Некоторым значениям упомянутых моделей соответствует символьное название цвета. Таким образом, один и тот же цвет можно указать тремя возможными способами.
Например, три варианта установки цвета фона (белого):
•<body bgcolor="white">
•<body bgcolor="#FFFFFF">
•<body bgcolor="255,255,255">
Параметр backgproperties позволяет накладывать на фон документа графическое изображение: <body background="images/bg.gif">.
Параметр backgproperties поддерживается только браузером Microsoft Internet Explorer и позволяет менять свойства фона документа.
Например, конструкция
< body background ="imagesbg.gif" bgpropeties="fixed">
позволит прокручивать содержание документа, оставляя фоновое графическое изображение в зафиксированном виде.
Описанные параметры не являются обязательными, однако рекомендуется использование bgcolor, так как пользователь в настройках своего браузера может поставить любой цвет фона, а разработчик, считая, что белый цвет является
27