Меню

Учебник HTML

Применение таблиц стилей

Трудоемкий процесс создания веб-страниц можно значительно облегчить, воспользовавшись специальными технологиями разработки, а также разнообразными сервисами, которые обычно предоставляются провайдерами. Одним из важнейших вспомогательных элементов, облегчающих создание сайтов, являются так называемые каскадные таблицы стилей (Cascading Style Sheets, CSS), предназначенные для централизованной настройки внешнего вида страниц.

НТМL всегда поддерживал концепцию стилей — готовых типов форматирования текста, предназначенных для веб-страниц. К числу встроенных стилей НТМL относятся стиль тела страницы, используемый для неформатированного текста, и стили заголовков (от <Н1> до <Н6>). Первоначально в НТМL не существовало средства для изменения параметров стилей - до тех пор, пока не были изобретены каскадные таблицы стилей. Они совершили настоящую революцию в области создания и структурирования веб-страниц и открыли перед дизайнерами широчайшие возможности для творчества. Таблицы стилей позволяют реализовать Множество интересных возможностей, самыми важными из которых считаются:

изменение внешнего вида текста и других объектов на всех страницах сайта без редактирования этих страниц;
позиционирование и создание анимационных эффектов для текста и других объектов на страницах.

Далее речь пойдет о создании и применении стилей, а также о размещении объектов на страницах.

Концепции таблиц стилей

Таблицей стилей называется набор определяемых веб-дизайнером стилей форматирования текста и других объектов, размещаемых на страницах сайта. Редактируя таблицы стилей, дизайнер изменяет внешний вид объектов, не внося изменения непосредственно в сами веб-страницы.

Для использования технологии CSS не обязательно вручную писать НТМL код таблицы стилей, а затем, опять же вручную, связывать элементы страниц со стилями из этой таблицы. Последние версии наиболее популярных средств разработки веб-страниц поддерживают технологию CSS или хотя бы ее важнейшие элементы.

Типы таблиц стилей

Стиль может применяться к одному элементу, одному документу или множеству документов, в зависимости от того, где хранится его объявление.

Один элемент. Можно определить стиль одного тега веб-страницы, применяемый только к его содержимому. Такие стили называются текстовыми. Их используют в тех случаях, когда отдельные элементы, встречающиеся в одном-двух местах сайта, требуют специфического форматирования.
Одна веб-страница. Определение стиля в заголовке того документа, в котором он используется, называется внедрением таблицы стилей. Эта технология облегчает стандартизацию стилей в пределах страницы и применяется тогда, когда сайт состоит всего из нескольких по-разному отформатированных страниц.
Множество веб-страниц. Таблицу стилей можно хранить в отдельном файле и ссылаться на нее из любого количества веб-страниц. Такой файл имеет расширение css и называется внешней таблицей стилей. Данная таблица позволяют управлять внешним видом страниц централизованно, что особенно удобно, если сайт содержит довольно большое количество страниц, требующих однородного форматирования.

Где бы ни хранились объявления стилей — в отдельном теге, в заголовке страницы или во внешнем файле, — действуют они одинаково.

Объявления стилей

Внедренные и внешние таблицы стилей содержат списки объявлений; каждое из них состоит из имени стиля и его свойств (например, цвета, характеристик шрифта и т. п.). Приведем пример объявления стиля:

элемент { свойства }

Стили задаются для всех стандартных элементов НТМL, в том числе абзацев <Р>, <Н1> и <Н2>. С помощью свойств стиля определяются основные параметры текста, такие как размер, шрифт, отступы. Значение свойства можно задать следующим образом:

имя_свойства : значение

Перед двоеточием могут стоять пробелы, но браузеры не обращают на них внимания. Вот наиболее распространенные свойства форматирования:

Цвета. Можно применять 16 VGA-цветов Windows (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow). В качестве альтернативы используются числовые значения, описанные в разделе, посвященном выбору цвета фона.
Единицы измерения. Эти значения задаются в относительных единицах, называемых ет. 1 ет соответствует высоте заглавной буквы шрифта элемента. В качестве альтернативы разрешается применять пикселы (рх), дюймы (in) или сантиметры (cm); результаты, полученные при использовании этих единиц измерения, зависят от размера и разрешения экрана и иногда бывают непредсказуемыми. Размеры можно задавать и другим способом - указывать процент от стандартного размера элемента. Например, если размер текста должен составлять 150 % от его обычного размера, в качестве значения свойства, определяющего размер шрифта, можно задать 150 %.
Имена файлов. Задаются в виде url (имя). Именем может служить имя файла на том же веб-сервере, например url(fill.gif) или url(images/fill.gif), либо URL веб-страницы, например url(http://www.uua.org/chalice.gif).

Для элемента можно задать несколько свойств, определив, предположим, его шрифт, цвет и фон. Значения свойств разделяются символами точки с запятой. Например, следующее объявление стиля определяет для заголовка Н2 шрифт Sans-Serif (Arial, если он доступен) синего цвета и курсивное начертание текста:

Н2 { font-family: Arial, Sans-Serif;
font-style: italic;
color: blue }

Переопределение стилей НТМL с использованием классов

В предыдущем разделе рассказывалось, как изменять стили стандартных НТМL-элементов документа, таких как абзацы и заголовки. А можно ли создать собственный стиль? Скажем, на сайте детской поэзии для названий стихотворений должен применяться один стиль, а для их текста — другой.

С помощью CSS невозможно создавать новые элементы НТМL, но они позволяют делать нечто подобное — создавать классы. Класс является подмножеством существующих элементов НТМL. Например, можно создать класс POEMTITLE как подмножество НТМL-элементов, представляющих абзацы (Р). Его объявление с описанием параметров форматирования

р.poemtitle { font-size: large; color: blue }

должно храниться в таблице стилей. С использованием этого класса текст на веб-странице может быть отформатирован, например, так:

<Р CLASS=poemtitle>Снежным вечером в лесу</Р>

Кроме того, можно создавать классы, с помощью которых будут форматироваться любые элементы. Для этого в их объявлении нужно опустить имя элемента:

.poemtitle { font-size: large; color: blue }

Данный класс может использоваться так:

<Р CLASS=poemtitle>Снежным вечером в лесу</Р>

или так:

<H1 CLASS=poemtitle>Снежным вечером в лесу</Н1>

Определение стилей посредством идентификаторов

Стиль, определенный в виде класса, применяется для форматирования любого количества элементов страницы. Если же стиль на странице используется не более одного раза, его можно определить с помощью идентификатора. Идентификатор всегда начинается с символа "#":

#logo { font-size: xx-large; color: green; text-alignment: right }

и может быть применен к любому расположенному на странице объекту, например к тексту:

<Р ID=logo>Книги России</Р>

Создание текстовых стилей вручную

В этом разделе рассказывается о создании таблиц стилей и об изменении с их помощью формата текста на веб-страницах. При форматировании нескольких однотипных страниц имеет смысл пользоваться внедренными таблицами стилей, а если таких страниц много — внешними таблицами.

Создание внедренной таблицы стилей

Если веб-страница создается вручную (а не с помощью веб-редактора), для включения в нее таблицы стилей в НТМL-код нужно добавить элемент STYLE. Он состоит из тегов <STYLE> и </STYLE> и текста между ними и помещается в заголовок страницы (между тегами <НЕАD> и </НЕАD>). Следующий пример показывает, как определить стиль стандартного НТМL-элемента Н3 и класс с именем SIDEBAR:

<НЕАD>
<STYLE ТYРЕ="text/css">
<!-
Н3 { font-family: Desdemona, Courier;
font-style: normal;
color: green }
.sidebar { font-family: Arial, Sans-Serif;
font-style: italic;
color: blue }
->
</STYLE>
</НЕАD>

Элемент STYLE состоит из четырех частей.

Тег <STYLE ТYРЕ= text/css"> начинает таблицу стилей. Значение ТYРЕ указывает браузеру, что данный элемент является таблицей стилей типа CSS (единственного существующего в настоящее время).
Строки комментария начинаются с символов <!- и заканчиваются символами ->. Они необходимы в том случае, если страница будет открыта в браузере, не поддерживающем таблицы стилей.
Между символами комментария располагаются объявления стилей - их может быть сколько угодно.
Тег </STYLE> завершает элемент STYLE.

Применение стилей к веб-странице

Определяемые дизайнером стили (в приведенном выше примере это класс SIDEBAR и стандартный стиль Н3) автоматически применяются ко всем элементам, обозначенным заданными тегами. Так, все заголовки, форматируемые с помощью тега <Н3>, будут выводиться шрифтом Desdemona зеленого цвета или Courier, если на компьютере нет первого шрифта. Для того чтобы указать, к какому классу относится конкретный тег, нужно воспользоваться атрибутом CLASS:

<Р CLASS=sidebar>Техническая записка</Р>

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

Это обычный текст, а
<SPAN CLASS=sidebar>этот текст выводится стилем Sidebar.</SPAN>

Создание внешней таблицы стилей

Внешняя таблица стилей - это текстовый файл, содержащий только определения стиля. Он имеет расширение css (например, mystyles.css). Внешние таблицы стилей обычно хранятся в том же каталоге, что и веб-страницы, или же, если используется несколько таблиц стилей, — в отдельном каталоге. В раздел <НЕАD> каждой веб-страницы, где используются стили из внешней таблицы, нужно включить тег <LINK>:

<LINK REL="StyleSheet" HREF="mystyles.css" ТYРЕ="text/css">

Замените mystyles.css именем файла своей таблицы стилей. Атрибуты REL и ТYРЕ должны иметь те же значения, что и в приведенной строке — они указывают на использование таблицы стилей CSS. (В будущем, возможно, появятся таблицы стилей других типов.)

После добавления тега <LINK> при просмотре страницы к ней будут применяться стили из внешней таблицы. И если вы внесете изменение в файл таблицы CSS, соответствующие изменения автоматически распространятся на все страницы, содержащие ссылки на данный файл. Именно эту особенность таблицы стилей ценят веб-дизайнеры - ведь с ее помощью они могут изменить внешний вид всего сайта, модифицировав лишь один файл.

Использование стилей для форматирования текста

Стили применяются также для форматирования отдельных фрагментов текста. В частности, свойства стилей можно использовать как для форматирования всего абзаца, так и нескольких слов. При этом теряется одно из важнейших преимуществ таблиц стилей, а именно возможность обновления стилей текста группы страниц или всего сайта путем изменения единственного файла. Однако текстовые стили (то есть свойства стиля, задаваемые прямо в тексте страницы), удобно применять в тех случаях, когда особым образом нужно отформатировать всего один элемент.

Чтобы определить стиль форматирования текста, нужно тег, содержащий форматируемый текст, дополнить атрибутом style="свойства". Например, если абзац должен быть выведен крупным шрифтом Arial синего цвета, его можно отформатировать так:

<P STYLE="font-family: Arial; font-size: 18pt; color: blue">
Важное примечание</P>

Тег <SPAN> используется для форматирования текста внутри абзаца:

<P>Многие считают поэзию
<SPAN STYLE="color: red">загадочной и вдохновляющей</SPAN>.</P>

[Вернуться к содержанию...]