HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Именно о нем сейчас и пойдет речь.
— Выделение 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-страницах будут выделены тонкой точечной рамкой светло-синего цвета.
Что дальше?
В этой главе мы научились создавать у элементов Web-страницы отступы и рамки. И доделали представление наших Web-страниц, придав им профессиональный лоск.
В следующей главе мы познакомимся с возможностями CSS, которые задают параметры таблиц. Их будет совсем немного.
ГЛАВА 12. Параметры таблиц
В предыдущей главе мы научились создавать у элементов Web-страниц отступы, рамки и выделение и применили свои умения на практике, сделав наши Web-страницы еще привлекательнее. Заодно мы наконец-то создали полную полосу навигации, включающую гиперссылки на все Web-страницы нашего Web-сайта. Теперь посетителю будет намного удобнее "путешествовать" по нему.
В этой главе мы разберемся с атрибутами стиля CSS для задания различных параметров таблиц. Часть из них мы уже изучили в предыдущих
Параметры выравнивания
Для выравнивания содержимого ячеек таблицы по горизонтали мы применим атрибут стиля text-align, описанный в главе 9:
TD, TH { text-align: center }
Этот же атрибут стиля пригоден для выравнивания текста в заголовке таблицы (теге <CAPTION>):
CAPTION { text-align: left }
Содержимое ячеек таблиц по вертикали мы выровняем с помощью атрибута стиля vertical-align:
vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom|<промежуток между базовыми линиями>|inherit
Применительно к другим элементам Web-страниц он был описан в главе 8, но в случае ячеек таблиц ведет себя несколько по-другому.
— top — выравнивает содержимое ячейки по ее верхнему краю (обычное поведение).
— middle — выравнивает содержимое ячейки по ее центру.
— bottom — выравнивает содержимое ячейки по ее нижнему краю.
Остальные значения этого атрибута стиля действуют так же, как и для других элементов Web-страниц (см. главу 8):
TD, TH { vertical-align: middle }
Параметры отступов и рамок
Для задания отступов мы можем пользоваться атрибутами стиля, знакомыми нам по главе 11.
— Для задания внутренних отступов между содержимым ячейки и ее границей — атрибутами стиля padding-left, padding-top, padding-right, padding-bottom и padding.
— Для задания внешних отступов между границами соседних ячеек — атрибутом стиля border-spacing.
Параметры рамок зададим через соответствующие атрибуты стиля, которые также знакомы нам по главе 11 (листинг 12.1).
Листинг 12.1
TABLE { align: center; border: medium solid black; border-spacing: 1px }
TD, TH { border: thin dotted black; padding: 2px }
В листинге 12.1 мы назначили для самой таблицы тонкую сплошную черную рамку и отступ между ячейками, равный одному пикселу, а для ячеек этой таблицы — тонкую точечную черную рамку и отступ между границей ячейки и ее содержимым, равный двум пикселам.
Если мы зададим рамки вокруг ячеек таблицы, Web-обозреватель нарисует рамку вокруг каждой ячейки. Такая таблица будет выглядеть как набор прямоугольников- ячеек, заключенный в большой прямоугольник-таблицу (рис. 12.1).
Рис. 12.1. Обычное поведение Web-обозревателя — рамки рисуются вокруг каждой ячейки таблицы