4. Таблицы стилей
Таблицы стилей (style sheets) являются одним из самых эффективных нововведений HTML 4. Они позволяют изменять свойства элементов в соответствии с желаниями разработчика страницы.
Каскадный список стилей {Cascading Style Sheet, CSS), на который иногда ссылаются как на вложенную таблицу стилей, представляет собой набор спецификаций (называемых правилами), которые позволяют получить полный контроль над расположением элементов на Web-странице и внешним видом ее содержимого.
Правила каскадных списков стилей могут использоваться для выбора цвета фона, графических изображений или "водяных знаков", которые будут выводиться под содержимым страницы. Кроме того, свойство position каскадных списков стилей исключает необходимость использования скрытых таблиц для расположения элементов страницы и позволяет указывать Web-браузеру, где располагать каждый конкретный элемент. И, наконец, правила каскадных списков стилей позволяют указывать тип и выбирать размер, цвет и вид текста. Помимо использования обычного, полужирного и курсивного начертаний, каскадные списки стилей дают возможность создавать затененный текст или текст с другими специальными эффектами без преобразования символьных данных в графические изображения, загрузка которых производится гораздо медленнее.
Несмотря на то что каскадный список стилей можно добавить в Web-документ несколькими различными способами, наверное, самый простой способ – поместить правила списка стилей непосредственно в заголовок Web-страницы.
Таблица стилей представляет собой парный дескриптор <STYLE>, внутри которого последовательно описаны используемые стили – ОНИ ПРИМЕНЯЮТСЯ К СТАНДАРНЫМ ТЭГАМ !
<STYLE>
идентификатор_1 {атрибут_1: значение; атрибут_2: значение; ...}
идентификатор_2 {атрибут_1: значение; атрибут_2: значение; ...}
идентификатор_3 {атрибут_1: значение; атрибут_2: значение; ...}
</STYLE>
Чтобы Web-браузер смог применить правила каскадного списка стилей для форматирования и позиционирования элементов на Web-странице, правила списка стилей должны быть включены в HTML-код страницы. Для вставки стилей каскадного списка стилей на Web-страницу можно пользоваться четырьмя методами:
Внедрить список стилей на страницу.
Связать страницу с внешним списком стилей.
Импортировать список стилей.
Включить стили непосредственно в HTML-дескрипторы.
При внедрении списка стилей на Web-страницу браузер будет применять определенные в списке правила только к элементам данной страницы. Поэтому, если правила списка стилей уникальны для данной конкретной страницы, список можно внедрить в раздел заголовка Web-страницы. Если же правила одного и того же списка стилей применяются для двух и большего количества страниц, каскадный список стилей лучше сохранить во внешнем файле (предпочтительно с расширением .сss) и связывать или импортировать внешний список стилей.
Внедрение каскадного списка стилей
При внедрении каскадного списка стилей его правила вставляются между начальным и конечным дескрипторами стиля (<styiex/styie>) в разделе заголовка Web-страницы:
<HTML>
<HEAD>
<TITLE>Пример CSS № 1 </TITLE>
<style type="text/css">
<!--
h1 {color:blue; font-size:40px; font-family:verdana}
p {color:white; background:green; font-family:Aial; text-indent:2cm}
-->
</style>
</HEAD>
<BODY>
<h1>Это пример внедренный каскадный список стилей - переопределен заголовок</h1>
<P>Это пример номер 1 - внедренный каскадный список стилей</P>
</BODY>
</HTML>
Атрибут type дескриптора <styie> указывает Web-браузеру тип приведенного списка стилей. Как правило, все браузеры, не поддерживающие каскадные списки стилей, игнорируют код, содержащийся между начальным и конечным дескрипторами стиля, если значение атрибута type установлено равным "text/ess". К сожалению, некоторые устаревшие браузеры не распознают дескрипторы стиля. Несмотря на то что такие браузеры будут игнорировать HTML-дескрипторы, которых они не понимают, они будут выводить содержимое списков стилей на страницу в виде текста (вместо применения правил списка к элементам страниц). Чтобы предотвратить вывод на экран содержимого каскадных списков стилей в старых браузерах, необходимо заключить правила списков стилей в блок HTML-комментариев (< ! >). Web-браузеры, поддерживающие списки стилей, будут игнорировать дескрипторы комментариев и применять содержащиеся в списках правила.
Применение нескольких правил каскадных списков стилей
к одному селектору
Правила каскадных списков стилей позволяют легко форматировать текст Web-страниц сайта. С помощью списков стилей можно без труда изменить стиль любого HTML-дескриптора путем изменения одного правила списков стилей. Тем не менее, иногда требуется форматирование одного конкретного элемента Web-страницы (например, текста абзаца), которое отличается от форматирования такого же элемента в другой части страницы. Если для одного и того же селектора (в данном случае селектора р) создать несколько правил, Web-браузер будет форматировать элемент в соответствии с последним правилом списка стилей. Например, второе правило в приведенном ниже наборе правил заменяет действие первого правила:
<style type="text/css">
р {color:red; font-size:18pt}
p {color:black; font-size:12pt}
</style>
Как результат, текст всех абзацев будет выводиться шрифтом черного цвета размером 12 пунктов. Для применения к одному элементу Web-страницы нескольких правил списков стилей необходимо для каждого правила определить класс с уникальным именем. После определения класса его форматирование можно применить к элементу за счет указания в HTML-дескрипторе элемента атрибута class:
<р class="Имя_CSS_класса" >
П
ример
с несколькими стилями:
<HTML>
<HEAD>
<TITLE>Пример CSS № 2 </TITLE>
<style type="text/css">
<!--
p.redT {color:red; font-size:16pt}
p.grnT {color:green; font-size:12pt}
-->
</style>
</HEAD>
<BODY>
<p class="redT">Teкст, выводимый шрифтом красного цвета, размером 16 пунктов</p>
<p class="grnT">Текст, выводимый шрифтом зеленого цвета, размером 12 пунктов</p>
</BODY>
</HTML>
Связывание с внешним списком стилей
Внешние каскадные списки стилей идеальны для случаев, когда одни и те же правила применяются к элементам, находящимся на двух или большем количестве Web-страниц. Фактически при связывании всех страниц Web-сайта с внешним списком стилей внешний вид всех страниц сайта можно изменить путем изменения правил, содержащихся в одном файле. Более того, большинство Web-браузеров кэшируют внешние списки стилей, что исключает задержку в выводе на экран страниц при загрузке одного и того же файла каскадного списка стилей.
Как предполагает само имя метода, для связывания HTML-документа с внешним списком стилей используется дескриптор <link>. Вместо ввода правил списка стилей, в заголовок каждой Web-страницы вводится ссылка на файл списка стилей. После этого при изменении в файле списка стилей такого свойства, как, например, типа шрифта, его размера или цвета, все изменения будут сразу же отражаться на всех Web-страницах.
Для связывания Web-страницы с внешним каскадным списком стилей необходимо поместить в заголовок страницы дескриптор <link> следующего вида:
<HEAD>
<TITLE>Пример CSS № 3 </TITLE>
<LINK href="prim7_4css3.css" rel="stylesheet" type="text/css">
</HEAD>
Обратите внимание, что дескриптор <link> не нужно помещать между начальным и конечным дескрипторами (<style/style>). В приведенном примере дескриптор <link> указывает Web-браузеру на необходимость использования правил каскадного списка стилей, которые содержатся в файле styles.css. Атрибут type говорит о том, что в тестовом файле содержатся данные списка стилей, а атрибут href указывает имя файла и, при необходимости, путь к файлу, содержащему объявления каскадного списка стилей. Если Web-браузер не сможет найти файл внешнего списка стилей (указанный в атрибуте href дескриптора <link>), для вывода элементов страницы на экран будет использоваться правила, установленные в Web-браузере по умолчанию.
Во внешнем файле списка стилей (например, prim7_4css3.css) правила должны определяться следующим образом:
h1 {color:blue; font-size:20px; font-family:verdana}
p {color:white; background:green; font-family:Aial; text-indent:2cm}
Обратите внимание на отсутствие во внешнем каскадном списке стилей каких бы то ни было HTML-дескрипторов. Во внешнем, файле списка стилей должны содержаться только правила. Таким образом, внешний каскадный список стилей содержит те же правила, что и внутренний (т.е. внедренный) список. Тем не менее, в файле правила списка стилей не заключаются между начальным и конечным дескрипторами стиля и не содержат HTML-дескрипторов.
Пример со внешним стилем:
<
HTML>
<HEAD>
<TITLE>Пример CSS № 3 </TITLE>
<LINK href="prim7_4css3.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<h1>Это пример внешнего каскадного списка стилей - форматирование взято с примера 1</h1>
<P>Это пример номер 3 - внешний каскадный список стилей</P>
</BODY>
</HTML>
Приложение 0. «Якорь»
В том случае, когда используются переходы внутри текущей страницы, на ней
должны быть расставлены метки:
<A name="Метка">Текст </a>
В больших сайтах часто используются метки для перехода к определенной части некоторой страницы:
<A name="http: //Адрес/Файл.htmltwerra > </a>
Для перехода к метке используется ссылка по такому шаблону:
<P> Переход к <А href="#Метка"> метке </а> </p>
Приложение 1. Некоторые используемые термины
• Элемент (element) — конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов.
• Тег (tag) — начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
• Атрибут (attribute) — параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые броузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
• Гиперссылка — фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
• Фрейм (frame) — этот термин имеет два значения. Первое — область документа со своими полосами прокрутки. Второе значение — одиночное изображение в сложном (анимационном) графическом файле (по аналогии с кадром кинофильма).
• HTML-файл или HTML-страница — документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют, как правило, расширения htm или html. В гипертекстовых редакторах и броузерах эти файлы имеют общее название документ
• Апплет (applet) — программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
• Скрипт или сценарий (script) — программа, включенная в состав Web-страницы для расширения ее возможностей. Броузер Internet Explorer в определенных ситуациях выводит сообщение: Разрешить выполнение сценариев на странице? В этом случае имеются в виду скрипты.
• Расширение (extension) — элемент, не входящий в спецификацию языка, но использующийся, обеспечивая возможность создания нового интересного эффекта форматирования.
• CGI (Common Gateway Interface) — общее название для программ, которые, работая на сервере, позволяют расширить возможности Web-страниц. Например, без таких программ невозможно создание интерактивных страниц.
• Программный код или просто код — аналог понятия текст программы.
• Код HTML — гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.
• World Wide Web, WWW или просто Web — Всемирная паутина, распределенная система доступа к гипертекстовым документам, существующая в Интернете. HTML является основным языком для создания документов в WWW. Изучая его, мы, фактически, изучаем часть этой системы, хотя область применения языка намного шире.
• Web-страница — документ (файл), подготовленный в формате гипертекста и размещенный в WWW.
• Сайт (site) — набор Web-страниц, принадлежащих одному владельцу.
• Броузер (browser) — программа для просмотра Web-страниц.
• Пользовательский агент (user agent) — броузер или другая программа, работающая на компьютере-клиенте.
• Загрузка (downloading) — копирование файлов с сервера на компьютер-клиент.
• URL (Uniform Resource Locator) или универсальный указатель ресурса - адрес некоторого объекта в Интернете. Типичный URL для WWW имеет вид:
http://www.название.домен/имя файла
Здесь название – это часть адреса, который часто употребляется для обозначения владельца сайта, а домен — обозначение крупного раздела Интернета: страны, области деятельности и т. д. URL используются для того, чтобы указать конкретную Web-страницу или графический файл в гиперссылках, а также везде, где требуется однозначно определить месторасположение Web-страницы или файла.
• Базовый URL — часть адреса, которая является общей для всех ссылок текущей Web-страницы.
• Базовый цвет — каждый цветовой оттенок на экране монитора получается соединением трех базовых цветов: красного, зеленого и синего.
• Цветовой канал — интенсивность красного, зеленого или синего цвета на экране монитора. Цвет каждого пиксела определяется как комбинация этих трех величин.
• Гамма-коррекция — создание нелинейной зависимости между реальной интенсивностью базового цвета и полученной яркостью на экране монитора. Изображения, полученные без гамма-коррекции, оказываются более темными, так как монитор воспроизводит различные градации яркости нелинейно по отношению к их числовому выражению. Изменение параметра гамма часто используют в графических редакторах при работе с изображением.
Приложение 2. Управление цветом
Для удобства работы с цветами используются следующие константы:
BLACK BLUE NAVY LIME GREEN SILVER AQUA |
Черный Синий Темно-синий Светло-зеленый Зеленый Серый Голубой |
OLIVE RED MAROON GRAY PURPLE YELLOW WHITE |
Оливковый Красный Коричневый Серый Фиолетовый Желтый Белый |
Вопросы для самоконтроля
Что позволяет сделать язык HTML?
Как проверяются созданные страницы?
Какова основная структура HTML- документа?
Каковы правила использования тэгов?
Перечислить основные тэги для работы с текстом.