Внедренные стилевые таблицы
Вторым вариантом использования стилевых спецификаций является их внедрение в документ. Для этого в заголовок документа (в теге<HEAD>) нужно поместить теги <STYLE> и </STYLE>, а внутри этой пары тегов ввести стилевые правила.
Например:
<head>
<style>
h1 {color: “blue”, font-size:”18p”t; text-align:”center”}
p {color:”#0000FF”; font-size:”13pt”}
</style>
</head>
Задание 3
Откройте файл “basset1.htm” и на его основе подготовьте файл “basset2.htm”. Для этого:
Удалите из HTML-кода тег <LINK>;
В HTML-код файла “basset2.htm” добавьте тег <STYLE> и </STYLE>, в котором опишите стилевые спецификации заголовка и текстовых абзацев.
Для заголовка: имя шрифта «Verdana Italic», цвет шрифта 7B68EE, размер шрифта – 18pt.
Для абзацев: имя шрифта «Tahoma», цвет шрифта 808080, размер шрифта – 15pt.
Сохраните файл “basset2.htm” в папке CSS.
Пригласите преподавателя и продемонстрируйте работающую Web-страницу.
Внутренние стили
Последним вариантом использования стилевых таблиц является применение их к конкретному HTML-элементу при помощи атрибута STYLE, который разрешен практически для каждого элемента.
Например: <h1 style=”color:blue; font-family:arial;”>.
Задание 4
Откройте файл “basset2.htm” и на его основе подготовьте файл “basset3.htm”. Для этого в HTML-код файла “basset2.htm” добавьте еще один абзац, стилевые спецификации которого опишите при помощи атрибута STYLE.
Имя шрифта ‑ Comic Sans MS, цвет шрифта ‑ красный, размер шрифта – 10pt.
Текст абзаца приведен на рис. 15.
Сохраните файл “basset3.htm” в папке CSS.
Пригласите преподавателя и продемонстрируйте работающую Web-страницу.
Рис. 15. Пример оформления текстового фрагмента
Классы в стилевых спецификациях
Если необходимо, чтобы определенный фрагмент текста отличался от другого, можно создать свой собственный тег. Каждый тип форматирования, который мы таким образом оформляем, называется стилевым классом.
Класс определяет разновидность стиля, к которому Вы обращаетесь в определенном теге, используя атрибут class.
Например, можно определить 3 разновидности стиля одного элемента и использовать каждый из них в соответствующем контексте. При определении класса к нужному тегу добавляется произвольное имя класса, отделяемое точкой.
<style>
h1.blue{color:”blue”}
h1.red{color:”red”}
h1.black{color:”black”}
</style>
Теперь при использовании тега <H1> в документе необходимо установить атрибут CLASS, чтобы указать, какой именно стиль нужно применить: <h1 class=”red”> текст </h1>.
Можно создать класс без указания имени элемента. Например: .my{color:”#00ff00”}
Применяется он тогда к разным элементам. Например:
<p class=”my”>
<h2 class=”my”>
Задание 5
Откройте файл “basset3.htm” и на его основе подготовьте файл “basset4.htm”. Для этого удалите из HTML-кода файла “basset3.htm” описание внутреннего стиля третьего абзаца, а в таблице стилевых спецификаций вместо общей стилевой спецификации абзацев создайте три разных стилевых класса: p1, p2, p3.
Для первого абзаца: имя шрифта ‑ Comic Sans MS, цвет шрифта ‑ красный, размер шрифта – 10pt.
Для второго абзаца: имя шрифта «Tahoma», цвет шрифта синий, размер шрифта – 15pt.
Для третьего абзаца: имя шрифта «Arial», цвет шрифта черный, размер шрифта – 13pt.
Сохраните файл “basset4.htm” в папке CSS.
Пригласите преподавателя и продемонстрируйте работающую Web-страницу.