Игорь Квинт - HTML, XHTML и CSS на 100% Страница 39

• Highlight – объекты, выделяемые в элементах управления.

• HighlightText – текст в объектах, выделенных в элементах управления.

• InactiveBorder – граница неактивного окна.

• InactiveCaption – заголовок неактивного окна.

• InactiveCaptionText – текст в неактивном заголовке.

• InfoBackground – фон всплывающей подсказки.

• InfoText – текст всплывающей подсказки.

• Menu – фон меню.

• MenuText – текст в меню.

• Scrollbar – полоса прокрутки.

• ThreeDDarkShadow – насыщенная тень для объемных элементов.

• ThreeDFace – «лицевая» сторона объемных элементов.

• ThreeDHighlight – выделенные объемные элементы.

• ThreeDLightShadow – объемные элементы (ребра, расположенные «лицом» к источнику света).

• ThreeDShadow – насыщенная тень для объемных элементов.

• Window – фон окна.

• WindowFrame – рамка окна.

• WindowText – текст в окне.

Рассмотрим CSS-код:

body { background: Background; }

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

Пользовательские настройки шрифтов

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

• caption – используется для заголовков элементов управления (кнопок, выпадающих меню и т. д.).

• icon – применяется для обозначения пиктограмм.

• menu – используется в меню (например, в выпадающих меню и списках меню).

• message-box – применяется в диалоговых окнах.

• small-caption – используется для обозначения небольших элементов управления.

• status-bar – применяется в панелях, описывающих статус окон.

Рассмотрим пример:

h1 { font: caption; }

Приведенный выше фрагмент таблицы стилей задаст для элемента H1 шрифт, используемый для заголовков элементов управления операционной системой пользователя.

Контуры

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

• контуры вообще не занимают места;

• они могут иметь непрямоугольную форму.

Для задания контура используются свойства outline-width, outline-style и outline-color.

Для более компактной записи можно использовать свойство outline. Это сокращенное свойство, которое устанавливает значения для всех трех свойств outline-style, outline-width и outline-color. Рассмотрим их подробнее.

• outline-style – задает стиль контура и может принимать такие же значения, как и свойство границы border-style, за исключением значения hidden: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

• outline-width – определяет размер контура.

• outline-color – принимает те же значения, что и ключевое слово invert, осуществляющее инверсию цветов, используемых для отображения пикселов на экране. Этот традиционный прием используется для того, чтобы независимо от цвета фона контур был всегда виден.

Поскольку использование контура не приводит к переформатированию браузером HTML-страницы, вы также можете применять его для выделения активного элемента либо элемента, на котором располагается фокус. Рассмотрим следующий пример:

:focus { outline: thick solid black }

:active { outline: thick solid red }

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

9.6. Поля и отступы

В этом разделе мы разберем важный момент при создании веб-страниц – задание полей и отступов. Итак, начнем с полей.

Свойства полей

Как отмечалось выше, отображая каждый элемент, браузер как бы создает прямоугольный блок, внутри которого и размещается содержимое элемента. Свойства полей определяют ширину области поля блока. Свойство margin позволяет управлять шириной всех четырех полей. Вы также можете указывать одно из следующих свойств: margin-top, margin-right, margin-bottom, margin-left либо некоторые из них в любой комбинации, чтобы задать значения полей только для отдельных сегментов.

Все свойства margin могут принимать следующие значения.

• «длина» – вы указываете фиксированную ширину поля.

• «проценты» – вы указываете значения поля в процентах. Процентное соотношение вычисляется относительно ширины сгенерированного блока.

• auto – браузер задает значение поля автоматически. Соответственно, разные браузеры будут использовать разные значения.

Рассмотрим пример – небольшое правило CSS, которое устанавливает значение ширины верхнего поля, равное 2 em.

H1 { margin-top: 2em }

Подробнее разберем сокращенную запись этих свойств – margin. Согласитесь, не очень-то удобно каждый раз набирать следующий код:

body {

margin-top: 2em;

margin-right: 2em;

margin-bottom: 2em;

margin-left: 2em;

}

Если свойство margin принимает только одно значение, то оно применяется ко всем полям. Если свойство принимает два значения, то первое применяется к верхнему и нижнему полям, а второе – к правому и левому. Если же оно принимает три значения, то первое значение применяется к верхнему, второе – к левому и правому, а третье – к нижнему полю. И, наконец, если оно принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому сегментам соответственно.

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

Напоследок рассмотрим такой пример:

body { margin: 1em 2em 3em }

Применив эту таблицу стилей к HTML-документу, вы установите ширину верхнего, правого, нижнего и левого полей страницы равной 1 em, 2 em, 3 em и 2 em соответственно.

Свойства отступов

Свойства отступов позволяют задать ширину области отступов блока.

Всего существует четыре свойства отступов: padding-top, padding-right, padding-bottom и padding-left, которые задают верхний, правый, нижний и левый отступы соответственно. Эти свойства можно комбинировать. Свойства padding могут принимать одно из следующих значений.

• «длина» – вы указываете фиксированную ширину поля.

• «проценты» – вы указываете значения поля в процентах. Процентное соотношение вычисляется относительно ширины сгенерированного блока.

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

Свойство padding является сокращенной записью всех четырех свойств отступов: padding-top, padding-right, padding-bottom и padding-left. Свойство padding работает, как и сокращенная запись для полей. Если свойство принимает только одно значение, то оно применяется ко всем отступам. Если свойство принимает два значения, то первое применяется к верхнему и нижнему отступам, а второе – к правому и левому отступам. Если оно принимает три значения, то первое значение применяется к верхнему, второе – к левому и правому, а третье – к нижнему отступу. Если свойство принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому отступам соответственно.

Фон отступов будет использовать цвет или изображение, заданные этому элементу с помощью свойства background:

h1 {

background: white;

padding: 1em 2em;

}

В приведенном примере ширина вертикальных (padding-top и padding-bottom) и горизонтальных (padding-right и padding-left) отступов устанавливается равной 1 em и 2 em соответственно. Напомню, что единица измерения em задается относительно размера шрифта элемента: 1 em равен размеру используемого шрифта.

9.7. Границы

Для всех элементов страницы вы можете задать границы, а также установить их ширину, цвет и стиль. Начнем изучение границ со свойства ширины.

Ширина границы

Рассмотрим свойства border-top-width, border-right-width, border-bottom-width, border-left-width, которые определяют значение ширины верхней, правой, нижней и левой границы элемента страницы соответственно. Все свойства, рассматриваемые в данном разделе, могут принимать одно из следующих значений:

• thin – тонкая граница;

• medium – граница средней толщины;

• thick – толстая граница;

• «длина» – толщина границы задается числом. Естественно, что число, заданное в качестве значения ширины границы, не может быть отрицательным.