Связь и интернет Архив Программирование
   
Сделать стартовойСделать закладку            
   ПОИСК  
   
Главная / CSS / Не для новичков /
8  Perl
8  PHP
8  JavaScript
8  HTML
8  DHTML
8  XML
8  CSS
8  C / C++
8  Pascal и Delphi
8  Турбо Ассемблер
8  MySQL
8  CASE-технологии
8  Алгоритмы
8  Python
8  Обратная связь
8  Гостевая книга
Новости о мире


Визуализация элементов - Программирование от RIN.RU
Визуализация элементов



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


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


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


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


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


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

Поддержка :Не поддерживается
Не поддерживается


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


A:active { outline-width: thick }


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


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

Поддержка :Не поддерживается
Не поддерживается


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


A:focus { outline-style: double }


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


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

Поддержка :Не поддерживается
Не поддерживается


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


A:focus { outline-color: red }


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


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

Поддержка :Не поддерживается
Не поддерживается


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


A:active { outline: thick solid red }

<<<  Назад
 1  2  3  4  5  6 


 8  Комментарии к статье  8 8  Обсудить в чате

8  В тему

Введение в таблицы стилей

Селекторы, псевдоклассы и псевдоэлементы

Значения свойств, каскадность и наследование

Границы, заполнители и рамки

Позиционирование элементов

Цвет и фон

Шрифты

Текст

Таблицы

Генерация содержимого, нумерация и списки

Страничные устройства вывода

Звуковые таблицы стилей

 
  
  
    Copyright ©  RIN 2003 - 2004      * Обратная связь