Контуры

Контуры

Иногда при создании страницы вам может понадобиться акцентировать внимание пользователя на некотором визуально отображаемом объекте, например на кнопке, активном поле формы, месте для графического объекта и т. п. Используя 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-страницы, то всякий раз, когда элемент будет находиться в фокусе, вокруг него будет отображаться толстая линия черного цвета, а когда элемент будет активизирован, вокруг него будет отображаться линия красного цвета.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

Промзона: Светящиеся контуры Николай Маслухин

Из книги Цифровой журнал «Компьютерра» № 21 [14.06.2010 — 20.06.2010] автора Журнал «Компьютерра»

Промзона: Светящиеся контуры Николай Маслухин Опубликовано 16 июня 2010 года Отправившись в ночной поход к холодильнику, немудрено наткнуться на что-нибудь в темноте – того и гляди заработаешь перелом, да и просто синяк — штука неприятная. Дизайнер


Как рисуются сложные контуры

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов Владимир

Как рисуются сложные контуры Контуры сложных фигур рисуются в три этапа.1. Web-обозреватель ставится в известность, что сейчас начнется рисование контура сложной фигуры.2. Рисуются отдельные линии, прямые и кривые, составляющие сложный контур.3. Web-обозреватель ставится в


Как рисуются сложные контуры

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов Владимир

Как рисуются сложные контуры Контуры сложных фигур рисуются в три этапа.1. Web-обозреватель ставится в известность, что сейчас начнется рисование контура сложной фигуры.2. Рисуются отдельные линии, прямые и кривые, составляющие сложный контур.3. Web-обозреватель ставится в