JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

16

Каскадные таблицы стилей

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

Когда подобные визуальные эффекты только появились, они казались революционными. Совместное применение технологий CSS и JavaScript, обеспечивающее получение разнообразных визуальных эффектов, получило не совсем удачное название «динамический язык HTML» (Dynamic HTML, DHTML), которое уже вышло из употребления.

CSS - достаточно сложный стандарт, который на момент написания этих строк продолжал активно развиваться. Тема CSS настолько объемная, что для полного ее охвата потребовалось бы написать отдельную книгу, и ее детальное обсуждение выходит далеко за рамки этой книги. [41]

Однако чтобы освоить принципы работы с каскадными таблицами стилей, совершенно необходимо знать хотя бы основы CSS и наиболее часто используемые стили. Поэтому эта глава начинается с обзора CSS, за которым следует описание ключевых стилей, наиболее часто используемых в сценариях. Вслед за этими двумя вводными разделами глава переходит к описанию принципов работы с CSS. В разделе 16.3 описываются наиболее общие и важные приемы: изменение стилей, применяемых к отдельным элементам документа с помощью HTML-атрибута style. Атрибут style элемента можно использовать для задания стилей, но с его помощью нельзя узнать текущие настройки стилей элементов. В разделе 16.4 рассказывается, как можно получить вычисленные стили любого элемента. В разделе 16.5 вы узнаете, как можно изменить сразу несколько стилей путем изменения атрибута

style

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

41

Рекомендуемое издание: Эрик Мейер «CSS - каскадные таблицы стилей. Подробное руководство», 3-є издание - Пер. с англ.
– СПб.: Символ-Плюс, 2008.

16.1. Обзор CSS

Визуальное представление HTML-документов определяется множеством параметров: шрифты, цвета, отступы и т. д. Все эти параметры перечислены в стандарте CSS, где они называются свойствами стиля (style properties). Стандарт CSS определяет свойства, которые задают шрифты, цвета, величину полей, параметры рамок, фоновые изображения, выравнивание текста, размеры элементов и их позиции. Чтобы задать визуальное представление HTML-элементов, мы определяем соответствующие значения CSS-свойств. Для этого необходимо записать имя свойства и его значение через двоеточие:

font-weight: bold

Чтобы полностью описать визуальное представление элемента, обычно бывает необходимо указать значения нескольких свойств. Когда требуется записать несколько пар имя/значение, они отделяются друг от друга точками с запятой:

margin-left: 10%; /* левое поле 10% от ширины страницы */

text-indent: .5in; /* отступ 1/2 дюйма */

font-size: 12pt; /* размер шрифта 12 пунктов */

Как видите, в каскадные таблицы стилей можно помещать комментарии, заключая их в пары символов /* и */. Однако здесь не поддерживаются комментарии, начинающиеся с символов //.

Существует два способа связать набор значений CSS-свойств с HTML-элементами, чье визуальное представление они определяют. Первый заключается в установке атрибута

style

отдельного HTML-элемента. Такие стили называются встроенными:

<р style="margin: 20рх; border: solid red 2рх;">

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

</р>

Однако намного эффективнее отделять стили CSS от отдельных HTML-элементов и определять их в таблицах стилей. Таблица стилей связывает наборы свойств стилей с группами HTML-элементов, которые описываются с помощью селекторов. Селектор определяет, или «выбирает», один или более элементов документа, опираясь на атрибут

id

или

class

, имя тега или на другие более специализированные критерии. Селекторы были представлены в разделе 15.2.5, где также было показано, как с помощью

querySelectorAll

выбрать группу элементов, соответствующих селектору.

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

р { /* селектору "р" соответствуют все элементы <р> */

text-indent: .5in; /* первая строка с отступом 0,5 дюйма */

}

.warning { /* Любой элемент с атрибутом class="warning" */

background-color: yellow; /* будет иметь желтый фон */

border: solid black 5рх; /* и толстую черную рамку */

}

Таблицу стилей CSS можно добавить в HTML-документ, заключив ее в теги

<stylе>

и

</style>

внутри тега

<head>.

Подобно элементам

<script>

, синтаксический анализ содержимого элементов

<style>

выполняется отдельно и не интерпретируется как разметка HTML:

<html>

<head>

<title>Тестовый документ</title>

<style>

body { margin-left: 30px; margin-right: 15px;

background-color: flffffff }

p { font-size: 24px; }

</style>

</head>

<body>npoBepKa, проверка</р>

</html>

Если таблица стилей используется более чем в одной странице веб-сайта, ее обычно лучше сохранить в отдельном файле, без использования объемлющих HTML-тегов. Затем этот файл CSS можно будет подключить к HTML-странице. В отличие от элемента

<script>

, элемент

<style>

не имеет атрибута

src

. Чтобы подключить таблицу стилей к HTML-странице, следует использовать элемент

<link>

в теге

<head>

документа: