Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Информационный Канал Subscribe.Ru |
http://html.krsk.ru |
При создании веб-страницы часто приходится вкладывать одни теги в другие. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, можно определить стиль для жирного текста, только когда он еще и курсивный.
Обычное использование селекторов.
B { font-family: Arial; font-weight: bold; color: navy; } |
Контекстный селектор состоит из простых селекторов разделенных пробелом.
B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; } |
В примере жирный курсивный шрифт Arial синего цвета будет применен к тегу I, когда он находится внутри тега B.
Пример. Контекстные селекторы
|
Жирный шрифт |
Можно одновременно использовать сгруппированные и контекстные селекторы.
B I, H1, P .cite { color: navy; } |
В примере синий цвет будет применен:
- к тегу курсива I размещенному внутри
тега B;
- ко всем тегам H1;
- к классу cite находящемуся внутри
тега параграфа P.
Большинство используемых в CSS селекторов имеют некоторые общие совпадающие параметры, например используют один и тот же шрифт. Чтобы не повторять одни и те же элементы, их можно сгруппировать для удобства и сокращения записей.
Обычная запись
H1 { font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #000033; } H2 { font-family: Arial, Helvetica, sans-serif; font-size: 135%; color: #333333; } H3 { font-family: Arial, Helvetica, sans-serif; font-size: 120%; color: #990000; } |
Сгруппированные селекторы
H1, H2, H3 { font-family: Arial, Helvetica, sans-serif; } H1 { font-size: 160%; color: #000033; } |
Селекторы группируются в виде списка тегов, разделенных между собой запятыми.
Наследование это перенос правил форматирования для элементов, находящихся внутри других. Например, для параграфа P задано форматирование, а для курсива I, который находится внутри параграфа, нет. В этом случае вложенный элемент наследует свойства родительского элемента.
Пример. Наследование селекторов
|
Перед началом работы проверьте наличие оборудования входящего в комплект ЭВМ. При отсутствии одного или нескольких периферийных устройств следует сразу же обратиться к техническому персоналу ВЦ. После осмотра визуальными методами своего рабочего места можно осторожно включить питание ЭВМ. |
В примере используются разные параметры форматирования для тегов P и B. Как бы вы эти теги не сочетали друг с другом, вид их, заданный в стиле, не изменится. Другое дело тег курсива I. В стиле он не указан, поэтому некоторые свойства, такие как цвет, он наследует от тега параграфа, внутри которого находится.
Наследование полезно для задания свойств, применяемых к элементу по умолчанию. Например, достаточно задать параметры форматирования тега TABLE и к ячейкам таблицы они будут применены автоматически. Точно так же можно определить свойства тега BODY, который порождает все остальные элементы веб-страницы.
<style type="text/css"> BODY { text-align: justify; color: black; font-family: Arial; } </style> |
Приведенный в примере код задает форматирование для всех элементов веб-страницы по умолчанию.
Псевдоклассы используются в CSS чтобы применять к элементам разные процедуры форматирования. В реальности псевдоклассы используется только для ссылок.
A:псевдокласс { Параметр: Значение; } |
Псевдоклассы для ссылок могут принимать следующие значения:
active активная ссылка;
link непосещенная ссылка;
hover ссылка при наведенном
курсоре мыши;
visited посещенная ссылка.
Пример 1. Использование псевдоклассов
|
Псевдокласс hover работает только в IE 4 и Netscape 6.
Псевдоклассы сочетаются с селекторами, что позволяет создавать ссылки с разными параметрами форматирования.
Пример 2. Ссылки разных цветов
|
| Ссылка 1 | Ссылка 2 | Ссылка 3 | |
В примере используется три вида ссылок. Первый тип используется на данном сайте по умолчанию, вторая ссылка зеленая, а третья синяя. Все три ссылки изменяют свой цвет при наведении курсора мыши.
Данный прием позволяет создавать ссылки любых цветов и размеров для использования в разных частях документа.
Copyright Влад Мержевич. По всем вопросам пишите мне по адресу inferos@mail.ru |
http://subscribe.ru/
E-mail: ask@subscribe.ru |
Отписаться
Убрать рекламу |
В избранное | ||