Создание специальных классов
Таблицы стилей позволяют не только задавать свойства отдельных элементов, но и создавать целые классы. Классы дают возможность варьировать характеристики элементов.
Пример:
<head>
<style>
h1.krasota {color: red}
</style>
</head>
<h1> Обычный заголовок </h1>
<h1 class="krasota"> Красивый заголовок</h1>
Указанный стиль будет применяться к заголовку, если будет указан атрибут class.
Соответственно, можно определять разные классы одного и того же элемента.
<style>
p.body {font-family: Arial; font-size: 14pt}
p.fontnote {font-family: Times New Roman; font-size: 15pt}
</style>
Можно создать универсальный класс. Его можно привязать в теле страницы к любому элементу.
Пример
<style>
.small {font-family: Arial; font-size: 8pt}
</style>
Теперь можно для любого элемента задать этот стиль:
<p class=”small”>…</p>
Пример. Текст страницы с таблицей стилей, содержащей описание классов (на рис. 1 показана эта страница в браузере).
<!DOCTYPE html
PUBLIC "\/W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xlmns="http://www.w3.org/1999/xhtml">
<head>
<style>
h1 {color: black}
h2 {color: red}
p.kr {color: blue}
.my {color: green}
</style>
</head>
<body>
<h1> Обычный заголовок </h1>
<h2> Красивый заголовок</h2>
<p class="kr"> Прекрасный текст</p>
<p class=”my”> Прекраснейший текст</p>
</body>
</html>
Элемент <span>
Элемент <span> − это контейнер, в котором определяется стиль для любых элементов и который действует вплоть до закрывающего тега.
<span style=”font-size: 12pt”>
Привет!
</span>
Можно задать стиль для элемента <span>:
<style>
span { font-family: Arial; font-size: 8pt}
</style>
Теперь <span> можно использовать в качестве специфического элемента:
<p> <span> Привет! </span> </p>
На основе элемента <span> можно создать класс:
<style>
span.dropcap {font-family: Times New Roman; font-size: 24 pt}
span.smallcaps {font-famliy: Arial; font-size: 8 pt}
</style>
Теперь можно использовать элемент <span> с атрибутом class:
<p> <span class="dropcap"> Э </span> <span class="smallcaps"> то случилось темным вечером. </span> </p>
Элемент <span> также можно использовать с заранее определенными универсальными классами (см. пример ниже и рис. 2).
Рис. 1
Элемент <div>
Элемент <div> используется для разделения всего веб-документа на секции. Данный элемент является контейнером и может содержать практически любые элементы. Браузер вокруг данного элемента оставляет на странице пустое пространство.
Для элемента <div> могут быть определены правила таблицы стилей, он может иметь атрибут class.
Пример. Страница с элементами <span> и <div> (рис. 2).
<!DOCTYPE html
PUBLIC "\/W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xlmns="http://www.w3.org/1999/xhtml">
<head>
<style>
span {font-family: Times New Roman;
font-size: 14pt}
span.dropcap {font-family: Times New Roman; font-size: 28pt; float}
span.smallcaps {font-famliy: Arial; font-size: 12pt}
</style>
</head>
<body>
<p> <span> Cтрашная история </span> </p> </br>
<div style="background-color: yellow"
<p> <span class="dropcap">Э</span>
<span class="smallcaps">то случилось темным дождливым вечером. </span>
</p>
</div>
</body>
</html>
Рис. 2