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><p>npoBepKa, проверка</р>

</html>

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

<head>

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

  <link rel="stylesheet" href="mystyles.css" type=”text/css">

</head>

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

Больше книг — больше знаний!

Заберите 30% скидку новым пользователям на все книги Литрес с нашим промокодом

ПОЛУЧИТЬ СКИДКУ