Параметры выделения

 

Мы знаем множество способов привлечь внимание посетителя к определенным элементам Web-страниц, использовав теги HTML или атрибуты стиля CSS. Но CSS 3 предлагает нам еще один способ сделать это — так называемое выделение .

Именно о нем сейчас и пойдет речь.

— Выделение CSS 3 представляет собой рамку, которой окружается данный элемент Web-страницы.

— Мы можем задавать параметры выделения: толщину, цвет и стиль.

— Выделение, в отличие от знакомой нам рамки CSS, не увеличивает размеры элемента Web-страницы. Так что можно спокойно применять выделение, не опасаясь, что оно нарушит выстраданный нами контейнерный дизайн.

Для задания параметров выделения CSS 3 предназначено четыре специальных атрибута стиля. Сейчас мы их рассмотрим.

Атрибут стиля outline-width задает толщину рамки выделения:

outline-width: thin|medium|thick|<толщина> |inherit

Здесь доступны те же значения, что и для знакомого нам атрибута стиля border-width.

Пример:

DFN { outline-width: thin }

Здесь мы задали для содержимого тега <DFN> тонкую рамку выделения. Атрибут стиля outline-color задает цвет рамки выделения: outline-color: <цвет> |inherit

 

ВНИМАНИЕ!

Цвет рамки выделения всегда следует задавать явно — в противном случае оно может быть не нарисовано.

 

Пример:

DFN { outline-width: thin; outline-color: black }

Теперь выделение содержимого тега <DFN> будет выведено черным цветом.

Атрибут стиля outline-style задает стиль линий, которыми будет нарисована рамка выделения:

outline-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Значения здесь доступны те же, что и для атрибута стиля border-style.

Пример:

DFN { outline-width: thin; outline-color: black; outline-style: dotted }

Атрибут стиля outline позволяет задать сразу все параметры для рамки выделения:

outline: <толщина> <стиль> <цвет> | inherit

DFN { outline: thin dotted black }

А что, это идея! Давайте добавим в нашу таблицу стилей main.css вот такой стиль:

DFN { outline: thin dotted #B1BEC6 }

После этого все новые термины (т. е. содержимое тегов <DFN>) на наших Web-страницах будут выделены тонкой точечной рамкой светло-синего цвета.








Дата добавления: 2015-05-08; просмотров: 677;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.005 сек.