Глава 2.6. Визуализация элементов

2.6.1. Ширина содержимого: свойство width

Синтаксис:  width: <размер> | <процент> | auto | inherit
Начально:   auto
Применимо:  ко всем элементам, кроме текстовых, строк таблиц и групп строк
Наследуемо: нет
Проценты:   относительно ширины вмещающего блока
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (5.0+)
            Netscape Navigator Соответствует стандарту (4.0+)

Свойство width задает ширину содержимого при генерации объемлющего прямоугольника блочных элементов и элементов, внешних по отношению к CSS (т. е. графических образов, объектов и некоторых элементов форм). Ширина не может быть отрицательной и задается одним из следующих способов:

<размер>
  Задает фиксированный размер.
<процент>
  Вычисляется относительно ширины вмещающего блока.
auto
  См. раздел 2.6.2.

Пример: следующее правило устанавливает ширину абзаца, равной 400 пикселей.

P { width: 400px }

2.6.2. Вычисление ширин и границ

Вычисленные значения свойств width, margin-left, margin-right, left и right зависят от типа генерируемого прямоугольника. Как правило, вычисленное значение совпадает со специфицированным (кроме значения auto, которое заменяется на вычисленное значение по умолчанию), но есть и исключения. Различаются следующие типы элементов:

  • блочные и текстовые;
  • внешние по отношению к CSS и прочие;
  • плавающие и нет;
  • абсолютно позиционированные и остальные.

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

Не внешние текстовые элементы

Специфицированное значение auto свойств margin-left, margin-right, left и right заменяется вычисленным значением 0. Свойство width здесь не применимо, т. к. ширина содержимого однозначно определяется самим содержимым элемента.

Внешние текстовые элементы

Специфицированное значение auto свойств margin-left, margin-right, left и right заменяется вычисленным значением 0. Специфицированное значение auto свойства width заменяется вычисленным значением ширины соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа).

Не внешние блочные элементы в обычном потоке элементов

Специфицированное значение auto свойств left и right заменяется вычисленным значением 0. Остальные свойства связаны между собой следующим соотношением:

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = ширина вмещающего блока

Поэтому, если мы явно зададим значения всех этих свойств, отличные от auto, то одно из значений будет изменено обозревателем в соответствии с приведенным соотношением (обычно это margin-left, если direction = ltr, и margin-right, если direction = rtl). Если ровно одно значение задано как auto, то оно вычисляется из приведенного соотношения. Если width равно auto, то все остальные значения auto заменяются на 0, и ширина вычисляется из приведенного соотношения. Если margin-left и margin-right равны auto, то их вычисленные значения будут равны между собой.

Внешние блочные элементы в обычном потоке элементов

Специфицированное значение auto свойств left и right заменяется вычисленным значением 0. Остальные свойства связаны между собой приведенным выше соотношением.

Если width равно auto, то оно заменяется вычисленным значением ширины соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа). Если одна из границ равна auto, то ее значение вычисляется из приведенного соотношения. Если margin-left и margin-right равны auto, то их вычисленные значения будут равны между собой.

Не внешние плавающие элементы

Специфицированное значение auto свойств width, margin-left, margin-right, left и right заменяется вычисленным значением 0.

Внешние плавающие элементы

Специфицированное значение auto свойств margin-left, margin-right, left и right заменяется вычисленным значением 0. Специфицированное значение auto свойства width заменяется вычисленным значением ширины соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа).

Не внешние абсолютно позиционированные элементы

Вычисленные значения свойств связаны между собой следующим соотношением:

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = ширина вмещающего блока

При этом вычисление значений свойств производится в следующем порядке:

  1. Если left равно auto, а direction равно ltr, то auto заменяется на расстояние от левого края вмещающего блока до левой границы гипотетического прямоугольника, который был бы первым объемлющим прямоугольником данного элемента, если бы он был статическим. Это значение отрицательно, если гипотетический прямоугольник расположен слева от объемлющего блока.
  2. Если right равно auto, а direction равно rtl, то auto заменяется на расстояние от правого края вмещающего блока до правой границы гипотетического прямоугольника, который был бы первым объемлющим прямоугольником данного элемента, если бы он был статическим. Это значение отрицательно, если гипотетический прямоугольник расположен справа от объемлющего блока.
  3. Если width равно auto, то значения auto для left и right заменяются на 0.
  4. Если left, right или width все еще равны auto, то значения auto для margin-left и margin-right заменяются на 0.
  5. Если margin-left и margin-right все еще равны auto, то их значения вычисляются из приведенного выше соотношения так, чтобы они были равны между собой.
  6. Если к этому моменту только одно значение равно auto, то оно вычисляется из приведенного соотношения.
  7. Если оказалось, что было задано слишком много явных значений, то пересчитывается на основе приведенного соотношения значение left (если direction равно ltr) или right (если direction равно rtl).

Внешние абсолютно позиционированные элементы

Вычисления производятся так же, как в предыдущем случае, но с одним отличием. Если width равно auto, то оно заменяется вычисленным значением ширины соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа), а затем производятся все перечисленные расчеты.

2.6.3. Минимальная и максимальная ширина: свойства min-width и max-width

Синтаксис:  min-width: <размер> | <процент> | inherit
Начально:   определяется обозревателем
Применимо:  ко всем элементам, кроме текстовых и табличных
Наследуемо: нет
Проценты:   относительно ширины вмещающего блока
Устройства: визуальные
Синтаксис:  max-width: <размер> | <процент> | none | inherit
Начально:   none
Применимо:  ко всем элементам, кроме текстовых и табличных
Наследуемо: нет
Проценты:   относительно ширины вмещающего блока
Устройства: визуальные
Поддержка:  Internet Explorer Не поддерживаются
            Netscape Navigator Не поддерживаются

Эти свойства позволяют нам ограничить ширину содержимого при генерации объемлющего прямоугольника минимально и максимально допустимыми значениями. Ширина не может быть отрицательной и задается одним из следующих способов:

<размер>
  Задает фиксированный размер.
<процент>
  Вычисляется относительно ширины вмещающего блока.
none
  Неограниченная ширина прямоугольника.

Эти свойства применяются следующим образом. Сначала вычисляется свойство width, как описано в разделе 2.6.2. Затем проверяется, попадает ли оно в диапазон от min-width до max-width, и, если нет, то вычисленное значение width заменяется на соответствующее предельно допустимое значение.

Пример: следующее правило устанавливает пределы для ширины абзаца.

P { min-width: 20px; max-width: 400px }

2.6.4. Высота содержимого: свойство height

Синтаксис:  height: <размер> | <процент> | auto | inherit
Начально:   auto
Применимо:  ко всем элементам, кроме текстовых, столбцов таблиц и групп столбцов
Наследуемо: нет
Проценты:   относительно высоты вмещающего блока
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (5.0+)
            Netscape Navigator Соответствует стандарту (4.0+)

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

<размер>
  Задает фиксированный размер.
<процент>
  Вычисляется относительно высоты вмещающего блока. Если эта высота явно не задана,
  то значение интерпретируется как auto.
auto
  См. раздел 2.6.5.

Пример: следующее правило устанавливает высоту абзаца, равной 100 пикселей.

P { height: 100px }

Если высота какого-то абзаца будет превышать 100 пикселей, то такой абзац отображается в соответствии со значением свойства overflow.

2.6.5. Вычисление высот и границ

Вычисленные значения свойств height, margin-top, margin-bottom, top и bottom зависят от типа генерируемого прямоугольника. Как правило, вычисленное значение совпадает со специфицированным (кроме значения auto, которое заменяется на вычисленное значение по умолчанию), но есть и исключения. Различаются следующие типы элементов:

  • блочные и текстовые;
  • внешние по отношению к CSS и прочие;
  • плавающие и нет;
  • абсолютно позиционированные и остальные.

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

Не внешние текстовые элементы

Специфицированное значение auto свойств margin-top, margin-bottom, top и bottom заменяется вычисленным значением 0. Свойство height здесь не применимо, но высоту такого элемента можно задать свойством line-height.

Внешние элементы (текстовые, блочные в обычном потоке элементов и плавающие)

Специфицированное значение auto свойств margin-top, margin-bottom, top и bottom заменяется вычисленным значением 0. Специфицированное значение auto свойства height заменяется вычисленным значением высоты соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа).

Не внешние блочные элементы (в обычном потоке элементов или плавающие)

Специфицированное значение auto свойств margin-top, margin-bottom, top и bottom заменяется вычисленным значением 0. Если height равно auto, то его вычисленное значение зависит от того, имеет ли данный элемент блочных детей. Если все его дети являются текстовыми, то высота элемента вычисляется как расстояние от верхней линии самого верхнего строчного блока до нижней линии самого нижнего строчного блока. Если же элемент имеет блочных детей, то его высота вычисляется как расстояние от верхнего края рамки самого верхнего блока до нижнего края рамки самого нижнего блока. При этом учитываются только те дети, которые находятся в обычном потоке элементов (иными словами, плавающие и абсолютно позиционированные элементы игнорируются, а относительно позиционированные учитываются без своего смещения).

Не внешние абсолютно позиционированные элементы

Вычисленные значения свойств связаны между собой следующим соотношением:

top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = высота вмещающего блока

При этом вычисление значений свойств производится в следующем порядке:

  1. Если top равно auto, то auto заменяется на расстояние от верхнего края вмещающего блока до верхней границы гипотетического прямоугольника, который был бы первым объемлющим прямоугольником данного элемента, если бы он был статическим. Это значение отрицательно, если гипотетический прямоугольник расположен выше объемлющего блока.
  2. Если и height, и bottom равны auto, то значение auto для bottom заменяется на 0.
  3. Если bottom или height все еще равны auto, то значения auto для margin-top и margin-bottom заменяются на 0.
  4. Если margin-top и margin-bottom все еще равны auto, то их значения вычисляются из приведенного выше соотношения так, чтобы они были равны между собой.
  5. Если к этому моменту только одно значение равно auto, то оно вычисляется из приведенного соотношения.
  6. Если оказалось, что было задано слишком много явных значений, то пересчитывается на основе приведенного соотношения значение bottom.

Внешние абсолютно позиционированные элементы

Вычисления производятся так же, как в предыдущем случае, но с одним отличием. Если height равно auto, то оно заменяется вычисленным значением высоты соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа), а затем производятся все перечисленные расчеты.

2.6.6. Минимальная и максимальная высота: свойства min-height и max-height

Синтаксис:  min-height: <размер> | <процент> | inherit
Начально:   определяется обозревателем
Применимо:  ко всем элементам, кроме текстовых и табличных
Наследуемо: нет
Проценты:   относительно высоты вмещающего блока
Устройства: визуальные
Синтаксис:  max-height: <размер> | <процент> | none | inherit
Начально:   none
Применимо:  ко всем элементам, кроме текстовых и табличных
Наследуемо: нет
Проценты:   относительно высоты вмещающего блока
Устройства: визуальные
Поддержка:  Internet Explorer Не поддерживаются
            Netscape Navigator Не поддерживаются

Эти свойства позволяют нам ограничить высоту содержимого при генерации объемлющего прямоугольника минимально и максимально допустимыми значениями. Высота не может быть отрицательной и задается одним из следующих способов:

<размер>
  Задает фиксированный размер.
<процент>
  Вычисляется относительно высоты вмещающего блока. Если эта высота явно не задана,
  то значение интерпретируется как auto.
none
  Неограниченная высота прямоугольника.

Эти свойства применяются следующим образом. Сначала вычисляется свойство height, как описано в разделе 2.6.5. Затем проверяется, попадает ли оно в диапазон от min-height до max-height, и, если нет, то вычисленное значение height заменяется на соответствующее предельно допустимое значение.

Пример: следующее правило устанавливает пределы для высоты абзаца.

P { min-height: 200px; max-height: 1000px }

2.6.7. Отображение текстовых элементов

При отображении текстовых элементов их прямоугольники располагаются горизонтально друг за другом. При этом их взаимное расположение по вертикали определяется свойством vertical-align. Прямоугольная область, содержащая прямоугольники, образующие строку текста, называется строчным блоком. Ширина строчного блока определяется шириной вмещающего блока. Его высота вычисляется на основе высот всех прямоугольников данной строки и может быть изменена свойством line-height.

2.6.7.1. Высота текста: свойство line-height

Синтаксис:  line-height: normal | <число> | <размер> | <процент> | inherit
Начально:   normal
Применимо:  ко всем элементам
Наследуемо: да
Проценты:   относительно размера шрифта элемента
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Соответствует стандарту (4.0+)

Свойство line-height задает высоту строки текста при генерации объемлющего прямоугольника. Если элемент является блочным, то это свойство задает минимальную высоту входящих в него строчных блоков. Если элемент является текстовым, то это свойство задает точную высоту его строчного блока.

Высота не может быть отрицательной и задается одним из следующих способов:

normal
  Высота строчного блока по умолчанию, которую обозреватель определяет на основе
  размера его шрифта.
<число>
  Вычисленное значение равно данному числу, умноженному на размер шрифта.
<размер>
  Задает фиксированный размер.
<процент>
  Вычисляется относительно размера шрифта элемента.

Следующие три правила дадут один и тот же результат:

DIV { font-size: 10pt; line-height: 1.2 }
DIV { font-size: 10pt; line-height: 1.2em }
DIV { font-size: 10pt; line-height: 120% }

Если текст элемента отображается несколькими шрифтами, то выбирается наибольший из размеров этих шрифтов.

2.6.7.2. Вертикальное выравнивание: свойство vertical-align

Синтаксис:  vertical-align: baseline | sub | super | top | text-top | middle | bottom |
                            text-bottom | <размер> | <процент> | inherit
Начально:   baseline
Применимо:  к текстовым элементам и ячейкам таблиц
Наследуемо: нет
Проценты:   относительно значения line-height элемента
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Не поддерживается

Свойство vertical-align задает положение по вертикали объемлющего прямоугольника текстового элемента внутри содержащего его строчного блока. Оно может принимать следующие значения:

baseline Выравнивание по базовой линии строчного блока.
sub Расположение в позиции нижних индексов (но без изменения размера шрифта).
super Расположение в позиции верхних индексов (но без изменения размера шрифта).
top Выравнивание по верху строчного блока.
text-top Выравнивание по верхней линии шрифта строчного блока.
middle Выравнивание по центру строчного блока.
bottom Выравнивание по низу строчного блока.
text-bottom Выравнивание по нижней линии шрифта строчного блока.
<размер> Увеличить (положительное значение) или уменьшить (отрицательное значение) на данную величину.
<процент> Увеличить (положительное значение) или уменьшить (отрицательное значение) на данную величину в процентах от значения line-height.

Пример:

EM.center { vertical-align: middle }

2.6.8. Переполнение и обрезка

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

  • Строка текста не может быть разорвана, и строчный блок становится шире блочного прямоугольника.
  • Блочный прямоугольник слишком широк для вмещающего блока.
  • Высота элемента больше, чем значение свойства height вмещающего блока.
  • Элемент абсолютно позиционирован.
  • Объемлющий прямоугольник имеет отрицательные границы.

Всякий раз, когда происходит переполнение, значение свойства overflow указывает как следует (и следует ли вообще) обрезать содержимое блока; размер и форма области обрезки при этом задается свойством clip.

2.6.8.1. Реакция на переполнение: свойство overflow

Синтаксис:  overflow: visible | hidden | scroll | auto | inherit
Начально:   visible
Применимо:  к блочным и внешним элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Не поддерживается

Свойство overflow определяет правила обрезки содержимого элемента при переполнении. Оно может принимать следующие значения:

visible Содержимое не обрезается, т. е. отображается за пределами объемлющего прямоугольника.
hidden Содержимое обрезается; размер и форма области обрезки при этом задается свойством clip.
scroll Содержимое обрезается, но обозреватель должен обеспечить механизм прокрутки содержимого для того, чтобы пользователь мог получить доступ ко всему содержимому элемента. При отображении на устройства print и projection должно печататься все содержимое элемента.
auto Содержимое обрезается, и при необходимости обеспечивается прокрутка содержимого.

Рассмотрим следующий пример.

<DIV style="width: 100px; height: 100px; border: thin solid red; overflow: scroll">
  <BLOCKQUOTE style="width: 125px; height: 100px; margin-top: 50px;
    margin-left: 50px; border: thin dashed black">
    <P>Если бы строители строили здания так же, как программисты пишут
       программы, первый залетевший дятел разрушил бы цивилизацию.</P>
    <P style="text-align: right">Второй закон Вейнберга</P>
  </BLOCKQUOTE>
</DIV>

Здесь элемент BLOCKQUOTE выходит за пределы содержащего его элемента DIV, поэтому этот фрагмент будет отображаться так (Netscape Navigator 4.x не поддерживает обрезку и прокрутку!):

Если бы строители строили здания так же, как программисты пишут программы, первый залетевший дятел разрушил бы цивилизацию.

Второй закон Вейнберга

2.6.8.2. Область обрезки: свойство clip

Синтаксис:  clip: rect(<top>,<right>,<bottom>,<left>) | auto | inherit
Начально:   auto
Применимо:  к блочным и внешним элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Поддерживается только для абсолютно позиционированных элементов (4.0+)
            Netscape Navigator Поддерживается только для слоев (layers) (4.0+)

Свойство clip задает облесть обрезки содержимого элемента при переполнении. Оно может принимать следующие значения:

  auto
    Область обрезки совпадает с объемлющим прямоугольником.
  rect(<top>,<right>,<bottom>,<left>)
    Область вырезки является прямоугольником с заданными координатами, где
    <top>,<right>,<bottom> и <left> — это смещения от соответствующих сторон
    объемлющего прямоугольника. Каждое из этих смещений должно быть равно либо
    auto (что означает нулевое смещение), либо <размер>. Отрицательные смещения
    допускаются.

Пример:

P { clip: rect(5px, -5px, 10px, 5px); }

2.6.9. Видимость элемента: свойство visibility

Синтаксис:  visibility: visible | hidden | collapse | inherit
Начально:   inherit
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Поддерживаются только значения visible, hidden и inherit (4.0+)
            Netscape Navigator Поддерживается только для слоев (layers) (4.0+)

Свойство visibility задает видимость элемента при отображении. Оно может принимать следующие значения:

visible Объемлющий прямоугольник элемента видим.
hidden Объемлющий прямоугольник элемента невидим.
collapse То же, что hidden. Применяется только в таблицах, где имеет особое назначение  (см. п. 2.10.2).

Примечания:

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

2.6.10. Форма курсора: свойство cursor

Синтаксис:  cursor: [[<uri>,]* [auto | crosshair | default | pointer | move |
                    e-resize | ne-resize | nw-resize | n-resize | se-resize |
                    sw-resize | s-resize | w-resize| text | wait | help]] | inherit
Начально:   auto
Применимо:  ко всем элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные интерактивные
Поддержка:  Internet Explorer Вместо pointer используется hand, список <uri> не поддерживается (4.0+)
            Netscape Navigator Не поддерживается

Свойство cursor задает форму курсора мыши при наведении ее на данный элемент. Оно может принимать следующие значения:

auto Форма курсора определяется обозревателем в зависимости от содержимого элемента.
crosshair Перекрестье.
default Курсор операционной системы по умолчанию. В Windows это стрелка.
pointer Указатель на гиперссылку. Обычно это кисть руки.
move Скрещенные стрелки, указывающие на то, что что-то должно переместиться.
*-resize Стрелка, указывающая на сдвигаемую границу; * задает направление сдвига (n = север, s = юг, w = запад, e = восток и т. п.).
text Указывает на редактируемый текст. Обычно имеет форму буквы I.
wait Песочные часы, указывающие на то, что программа занята, и пользователь должен подождать.
help Вопросительный знак, указывающий, что для данного элемента можно получить справку.
<uri> Задает список URI ресурсов, содержащих курсоры.

Если значение данного списка задано списком URI, то обозреватель пытается сначала загрузить первый курсор из списка, при неудаче — второй и т. д. Рекомендуется заканчивать такой список одним из ключевых слов, чтобы при невозможности загрузить курсор обозреватель знал, какую из предопределенных форм курсоров ему использовать, например:

P { cursor: url("mycursor.cur"), url("second.csr"), text }

2.6.11. Динамические контуры

2.6.11.1. Общее описание

CSS допускает создание вокруг отображаемых элементов динамических контуров. Это удобно для выделения таких объектов, как кнопки, активные поля форм или карты ссылок. Контуры отличаются от рамок в двух отношениях: во-первых, они не занимают экранного пространства, во-вторых, не обязаны иметь прямоугольную форму.

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

2.6.11.2. Размер контура: свойство outline-width

Синтаксис:  outline-width: <размер-рамки> | inherit
Начально:   medium
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные интерактивные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство outline-width задает размер динамического контура. Оно принимает те же значения, что и border-width. Пример:

A:active { outline-width: thick }

2.6.11.3. Стиль контура: свойство outline-style

Синтаксис:  outline-style: <стиль-рамки> | inherit
Начально:   none
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные интерактивные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство outline-style задает стиль динамического контура. Оно принимает те же значения, что и border-style. Пример:

A:focus { outline-style: double }

2.6.11.4. Цвет контура: свойство outline-color

Синтаксис:  outline-color: <цвет> | invert | inherit
Начально:   invert
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные интерактивные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство outline-color задает цвет динамического контура. Его значениями могут быть любые цвета, а также invert, что означает, что цвет контура должен быть получен обращением цветов пикселей экрана. Пример:

A:focus { outline-color: red }

2.6.11.5. Свойства контура: свойство outline

Синтаксис:  outline: [<outline-width> || <outline-style> || <outline-color>] | inherit
Начально:   см. индивидуальные свойства
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные интерактивные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство outline задает размер, стиль и цвет контура одновременно. Если какое-то из этих свойств не задано, то принимается его начальное значение. Пример:

A:active { outline: thick solid red }