Отправляет email-рассылки с помощью сервиса Sendsay

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

← Сентябрь 2002 →
	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Автор

Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю

← Все выпуски →

Рецепты HTML

Информационный Канал Subscribe.Ru

Рецепты HTML

http://html.krsk.ru

Селекторы

Контекстные селекторы

При создании веб-страницы часто приходится вкладывать одни теги в другие. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, можно определить стиль для жирного текста, только когда он еще и курсивный.

Обычное использование селекторов.

B { font-family: Arial; font-weight: bold; color: navy; }
I { font-style: italic; }

Контекстный селектор состоит из простых селекторов разделенных пробелом.

B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }

В примере жирный курсивный шрифт Arial синего цвета будет применен к тегу I, когда он находится внутри тега B.

Пример. Контекстные селекторы

<html>
<head>
<style type="text/css">
B { font-weight: bold; }
I { font-style: italic; }
B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }
</style>
</head>

<body>
<b>Жирный шрифт</b><br>
<i>Курсивный текст</i><br>
<b><i>Жирный курсивный текст</i></b><br>
<i><b>Курсивный и жирный текст</b></i>

</body>
</html>

Жирный шрифт
Курсивный текст
Жирный курсивный текст
Курсивный и жирный текст

Можно одновременно использовать сгруппированные и контекстные селекторы.

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; }
H2 { font-size: 135%; color: #333333; }
H3 { font-size: 120%; color: #990000; }

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

Наследование селекторов

Наследование – это перенос правил форматирования для элементов, находящихся внутри других. Например, для параграфа P задано форматирование, а для курсива I, который находится внутри параграфа, нет. В этом случае вложенный элемент наследует свойства родительского элемента.

Пример. Наследование селекторов

<html>
<head>
<style type="text/css">
P { text-align: justify; color: black; }
B { font-weight: bold; color: navy; }
</style>
</head>

<body>
<p>Перед началом работы проверьте наличие оборудования входящего в комплект <b>ЭВМ</b>. При отсутствии одного или нескольких периферийных устройств следует сразу же обратиться к техническому персоналу <b>ВЦ</b>. После осмотра визуальными методами своего рабочего места <i>можно осторожно включить питание</i> <b>ЭВМ</b>.</p>
</body>
</html>

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

В примере используются разные параметры форматирования для тегов P и B. Как бы вы эти теги не сочетали друг с другом, вид их, заданный в стиле, не изменится. Другое дело тег курсива I. В стиле он не указан, поэтому некоторые свойства, такие как цвет, он наследует от тега параграфа, внутри которого находится.

Наследование полезно для задания свойств, применяемых к элементу по умолчанию. Например, достаточно задать параметры форматирования тега TABLE и к ячейкам таблицы они будут применены автоматически. Точно так же можно определить свойства тега BODY, который порождает все остальные элементы веб-страницы.

Приведенный в примере код задает форматирование для всех элементов веб-страницы по умолчанию.

Псевдоклассы

Псевдоклассы используются в CSS чтобы применять к элементам разные процедуры форматирования. В реальности псевдоклассы используется только для ссылок.

A:псевдокласс { Параметр: Значение; }

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

active – активная ссылка;
link – непосещенная ссылка;
hover – ссылка при наведенном курсоре мыши;
visited – посещенная ссылка.

Пример 1. Использование псевдоклассов

<html>
<head>
<style type="text/css">
a:link { color: #003366; }
a:visited { color: #660066; }
a:hover { color: #800000; }
a:active { color: #FF0000; }
</style>
</head>

<body>
| <a href=#>Ссылка 1</a> | <a href=#>Ссылка 2</a> | <a href=#>Ссылка 3</a> |
</body>
</html>

Псевдокласс hover работает только в IE 4 и Netscape 6.

Псевдоклассы сочетаются с селекторами, что позволяет создавать ссылки с разными параметрами форматирования.

Пример 2. Ссылки разных цветов

<html>
<head>
<style>
a.link1 { font-size: 12px; color: green }
a.link1:hover { color: red }
a.link2 {font-size: 14px; color: blue }
a.link2:hover { color: red }
</style>

<body link=#0000ff>
| <a href=link1.html>Ссылка 1</a> | <a href=link2.html class=link1>Ссылка 2</a> | <a href=link3.html class=link2>Ссылка 3</a> |
</body>
</html>

| Ссылка 1 | Ссылка 2 | Ссылка 3 |

В примере используется три вида ссылок. Первый тип используется на данном сайте по умолчанию, вторая ссылка – зеленая, а третья – синяя. Все три ссылки изменяют свой цвет при наведении курсора мыши.

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

http://subscribe.ru/
E-mail: ask@subscribe.ru

Отписаться
Убрать рекламу

В избранное