Опубликован: 19.05.2006 | Уровень: для всех | Доступ: платный
Лекция 14:

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

< Лекция 13 || Лекция 14: 1234 || Лекция 15 >
Аннотация: Даются описание таблиц стилей, способов добавления стилей в HTML, каскадных таблиц стилей.

Введение

Таблицы стилей являются грандиозным прорывом в области Web-дизайна. В научных кругах, там, где был придуман Web, больше интересуются содержимым документов, чем их внешним видом. Поскольку всё больше людей открывают для себя Web, ограничения HTML становятся постоянным источником разочарований, и авторы должны постоянно придумывать, как преодолеть эти стилистические ограничения. Хотя намерения были самыми благими - улучшить внешний вид Web-страниц - техника исполнения этого имела, к сожалению, побочные эффекты. Эта техника иногда работает, но не всегда и не везде. Она включает:

  • использование подходящих расширений HTML;
  • конвертирование текста в изображение;
  • использование изображений для управления пробелами;
  • использование таблиц для форматирования текста;
  • написание программ вместо использования HTML.

Эти способы явно увеличивали сложность страниц Web, ограничивали свободу действий, создавали проблемы совместимости, а также сложности для пользователей с физическими проблемами.

Таблицы стилей решают эти задачи, одновременно выходя за узкие рамки механизмов представления в HTML. Таблицы стилей облегчают установку межстрочных интервалов, отступов, цвета текста и фона, размера и стиля шрифта и других деталей.

Например, эта небольшая CSS ( таблица стилей ), находящаяся в файле "special.css", устанавливает цвет текста параграфа в зелёный и окружает его сплошной красной рамкой:

P.special {
color : green;
border: solid red;
}

Авторы могут подключить эту таблицу стилей к основному документу HTML с помощью элемента LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//RU"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <LINK href="special.css" rel="stylesheet" type="text/css">
  </HEAD>
  <BODY>
    <P class="special">Текст в этом параграфе должен быть зелёного цвета.
  </BODY>
</HTML>

HTML 4 поддерживает следующие возможности таблиц стилей:

Гибкость размещения информации о стиле

Размещение таблиц стилей в отдельных файлах облегчает их повторное использование. Иногда необходимо включить инструкции представления в документ, к которому они применяются, путём группировки их в начале документа или установкой в атрибутах по всему телу документа. Чтобы облегчить работу со стилями на базе сайта, эта спецификация описывает, как использовать заголовки-"шапки"/headers HTTP для установки применения таблиц стилей в документах.

Независимость от конкретного языка таблицы стилей

Эта спецификация не привязывает HTML к какому-то определённому языку таблиц стилей. Это позволяет использовать разные языки, например, простой для большинства пользователей и более сложный - для пользователей с узко специализированными потребностями. Примеры, данные ниже, используют язык CSS (Cascading Style Sheets) "[CSS1]" , но возможны и другие языки таблиц стилей.

Каскадирование

Это возможность, предоставляемая некоторыми языками таблиц стилей, такими как CSS, соединять информацию стилей из различных источников. Это могут быть, например, корпоративные руководства по стилям, стили для групп документов и стили, специфические для отдельного документа. Сохраняя эту информацию раздельно, таблицы стилей могут быть повторно использованы, облегчая творчество и более эффективное использование сетей. Каскад определяет упорядоченную последовательность таблиц стилей, где правила более поздних таблиц имеют преимущество перед правилами более ранних таблиц. Не все языки таблиц стилей поддерживают каскадирование.

Зависимость от типа носителя

HTML позволяет авторам определять media-независимые документы. Это даёт пользователям возможность использовать Web-страницы на разных устройствах и носителях информации, например, графические дисплеи компьютеров, использующих Windows, Macintosh OS и X11, телевизионные устройства, специально адаптированные телефоны и портативные устройства на базе PDA, речевые браузеры и тактильные брайль-устройства.

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

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

Альтернативные стили

У авторов может появиться желание предоставить пользователям различные способы просмотра документа. Например, создав таблицу стилей для компактного просмотра документов со шрифтом небольшого размера, или таблицу, определяющую более крупный шрифт для удобства чтения. Эта спецификация даёт авторам возможность определять основную таблицу стилей, а также альтернативы в зависимости от условий конечного пользователя и типа носителя. ПА должны давать пользователям возможность выбора из нескольких таблиц стилей или объединения этих таблиц.

Возражения в связи с ухудшением параметров работы

Некоторыми высказывается озабоченность в связи с ухудшением параметров работы, связанным с использованием таблиц стилей. Например, загрузка внешней таблицы стилей может задержать вывод документа. Такие ситуации возникают чаще, если "шапки" документов содержат большое количество информации о стиле.

В настоящее время предлагается для решения этой проблемы включать соответствующие инструкции непосредственно в каждый элемент HTML. Информация о представлении в этом случае всегда доступна для ПА при отображении конкретного элемента.

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

< Лекция 13 || Лекция 14: 1234 || Лекция 15 >
Ирина Кириллова
Ирина Кириллова

Нажимаю на ссылку на дополнительный материал и дополнение к информации-меня возвращает на первую страницу лекции. Подскажите, что делать? Или дополнительный материал платный?

Наталья Алмаева
Наталья Алмаева
Россия
Светлана Казьмина
Светлана Казьмина
Россия, Волгодонск