Новые HTML-контейнеры

С появлением таблиц стилей в языке появилось три новых контейнера: STYLE, LINK, SPAN. Вообще говоря LINK - это не новый таг, а новое применение старого тага.

Контейнер STYLE(<style type="...">......</style>) служит для определения таблицы описания стилей. Хотя в спецификации CSS прямо не говорится, в каком контейнере документа следует применять STYLE, тем не менее, в примерах чаще всего приводится этот контейнер внутри контейнера HEAD.

Контейнер LINK в контексте описателей стилей применяется для определения внешнего файла с описаниями стилей для данного документа. Например, внешний файл может содержать следующее описание стилей:

/* CONTENTS OF THE EXTERNAL STYLE SHEETS FILE CSS.HTM*/
p {color:blue; font-family: times; font-size:10pt;}
h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;}
/* the end of style sheets definition */

Для применения этого описателя стилей в заголовок документа необходимо включить следующий таг:

Пример 1.30

<html>
<head>
<link REL=STYLESHEET TYPE="text/css" HREF=HTTP://LOCALHOST/CSS.HTM>
</head>
<body>
The body of the document should be here.
</body>
</html>

Из данного примера видно, что писание стилей в фале CSS.HTM полностью совпадает с описанием в контейнере STYLE. В тексте файла описания стилей не нужно указывать таги контейнера STYLE.

Контейнер SPAN применяется для переопределения стиля отображения текущего фрагмента текста и в некотором смысле аналогичен контейнеру FONT. Часто SPAN применяют для достижения типографских эффектов, таких например, как выделение заглавной буквы абзаца:

Пример 1.31

<HTML>

<HEAD>
<style TYPE="text/css">
FS.all { color:red; font-size: 24pt; font-family: times;}
H1 {color:navy; text-transform: uppercase;font-size: 18pt;
font-weight: bold; font-family: times;}
H2 {color:navy; font-size: 14pt;
font-weight: bold; font-style: italic;
font-family: times;}
H3 {color:navy; font-size: 10pt; font-weight: bold; font-family: times;}
P {color:navy; font-size: 12pt; font-family: times; text-align: justify}
P.HELP {color:darkgreen; font-size: 10pt; font-family: times; text-align: justify;}
P.LEFT {color:navy; font-size: 12pt; font-family: times; text-align: right;}
</style>
</HEAD>
<BODY bgcolor=lightyellow>
<center>
<h3>Центр информационных технологий</h3>
<h1>Информационные Ресурсы Internet</h1>
<h3>(Учебное пособие для компьютерных непрофессионалов)</h3>
<h3>Храмцов П.Б.</h2>
<h3>Москва, 1997</h2>
<hr>
</center>
<p><span class=FS>C</span>
обществу глобальных компьютерных сетей Internet в 1995 году исполнилось 25 лет.
На настоящий момент - это самый большое информационный ресурс мира.
Одновременно Internet - это самая популярная и массовая компьютерная сеть планеты.
По оценкам международного центра координации сетевой деятельности в рамках
Internet(Internic-Internet Information Center) на 1997 год в сети читывалось
несколько десятков миллионов постоянно зарегистрированных компьютеров-серверов,
которые откликаются на запросы пользователей 365 дней в году и 24 часа в сутки.
Этот огромный информационный ресурс полностью децентрализован и не подчиняется ни
одному правительству или крупной финансовой компании мира.
</BODY>
</HTML>

В данном примере, контейнер SPAN применен сразу после тага начала параграфа <p>, что позволяет выделить первую букву в отображаемом абзаце:

Кроме новых контейнеров таблицы описания стилей привнесли еще и новые атрибуты в известные таги.