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

Самоучитель по HTML и CSS

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

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

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

←   Ноябрь 2008   →
 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
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 38


Номер: 38

Дата: 2008-11-13

Архив Рассылки

Самоучитель HTML

Справочник по CSS
Самоучитель по HTML и CSS

7. Дочерние селекторы

Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберем небольшой код (пример 7.1).

Пример 7.1. Вложенность элементов в документе

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Lorem ipsum</title>
 </head>
 <body>
  <div class="main">
   <p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing 
   elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam 
   erat volutpat.</p>
   <p><strong><em>Ut wisis enim ad minim veniam</em></strong>, 
   quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
   ea commodo consequat.</p>
  </div>
 </body>
</html>

В данном примере применяется несколько контейнеров, которые в коде располагаются один в другом. Нагляднее это видно на дереве элементов, так называется структура отношений тегов документа между собой (рис. 7.1).

Рис. 7.1. Дерево элементов для примера

Рис. 7.1. Дерево элементов для примера

На рис. 7.1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу <DIV> выступает тег <P>. Вместе с тем тег <STRONG> не является дочерним для тега <DIV>, поскольку он расположен в контейнере <P>.

Вернемся теперь к селекторам. Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий.

Селектор 1 > Селектор 2 { Описание правил стиля }

Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.

Если снова обратиться к примеру 7.1, то стиль вида P > EM { color: red } будет установлен для первого абзаца документа, поскольку тег <EM> находится внутри контейнера <P>, и не даст никакого результата для второго абзаца. А все из-за того, что тег <EM> во втором абзаце расположен в контейнере <STRONG>, поэтому нарушается условие вложенности.

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Дочерние селекторы</title>
  <style type="text/css">
   DIV I { /* Контекстный селектор */
    color: green; /* Зеленый цвет текста */
   }
   P > I { /* Дочерний селектор */
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
  <div>
   <p><i>Lorem ipsum dolor sit amet</i>, consectetuer adipiscing 
   elit, sed diem nonummy nibh euismod tincidunt ut lacreet <i>dolore magna</i> 
   aliguam erat volutpat.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 7.2.

Рис. 7.2

Рис. 7.2. Цвет текста, заданный с помощью дочернего селектора

На тег <I> в примере действуют одновременно два правила: контекстный селектор (тег <I> расположен внутри <DIV>) и дочерний селектор (тег <I> является дочерним по отношению к <P>). При этом правила являются равносильными, поскольку все условия для них выполняются и противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I ниже, как цвет текста изменится с красного на зеленый.

Заметим, что в большинстве случаев от добавления дочерних селекторов можно отказаться, заменив их контекстными селекторами. Однако использование дочерних селекторов расширяет возможности по управлению стилями элементов, что в итоге позволяет получить нужный результат, а также простой и наглядный код.

Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой — сюда относятся, например, таблицы и разные списки. В примере 7.3 показано изменение вида списка с помощью стилей. За счет вложения одного списка в другой получаем разновидность меню. Заголовки при этом располагаются горизонтально, а набор ссылок — вертикально под заголовками (рис. 7.3).

Рис. 7.3 Список в виде меню

Рис. 7.3 Список в виде меню

Для размещения текста по горизонтали к селектору LI добавляется стилевой атрибут float. Чтобы при этом разделить между собой стиль горизонтального и вертикального списка и применяются дочерние селекторы (пример 7.3).

Пример 7.3. Использование дочерних селекторов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Дочерние селекторы</title>
  <style type="text/css">
   UL#menu {
    margin: 0; padding: 0; /* Убираем отступы */
   }
   UL#menu > LI {
    list-style: none; /* Убираем маркеры списка */
    width: 100px; /* Ширина элемента в пикселах */
    background: #b3d9d2; /* Цвет фона */
    color: #333; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт */
    font-size: 90%; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    float: left; /* Располагаем элементы по горизонтали */
   }
   LI > UL {
    list-style: none; /* Убираем маркеры списка */
    margin: 0; padding: 0; /* Убираем отступы вокруг элементов списка */
    border-bottom: 1px solid #666; /* Граница внизу */
    padding-top: 5px; /* Добавляем отступ сверху */
   }
   LI > A {
    display: block; /* Ссылки отображаются в виде блока */
    font-weight: normal; /* Нормальное начертание текста */
    font-size: 90%; /* Размер шрифта */
    background: #fff; /* Цвет фона */
    border: 1px solid #666; /* Параметры рамки */
    border-bottom: none; /* Убираем границу снизу */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <ul id="menu"> 
   <li>Правка 
    <ul> 
      <li><a href="undo.html">Отменить</a></li> 
      <li><a href="cut.html">Вырезать</a></li> 
      <li><a href="copy.html">Копировать</a></li> 
      <li><a href="paste.html">Вставить</a></li> 
    </ul> 
   </li> 
   <li>Начертание
    <ul> 
      <li><a href="bold.html">Жирное</a></li> 
      <li><a href="italic.html">Курсивное</a></li> 
      <li><a href="underline.html">Подчеркнутое</a></li> 
    </ul> 
   </li>
   <li>Размер
    <ul> 
      <li><a href="small.html">Маленький</a></li> 
      <li><a href="normal.html">Нормальный</a></li> 
      <li><a href="middle.html">Средний</a></li> 
      <li><a href="big.html">Большой</a></li> 
    </ul> 
   </li> 
  </ul>
 </body>
</html>

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

Вопросы для проверки

1. Какой цвет будет у жирного курсивного текста в коде

<p>Нормы освещенности построены на <b><i>основе классификации зрительных работ</i></b> по определенным количественным признакам.</p>

При использовании следующего стиля?

P { color: green; }
B {color: blue; }
I {color: orange; }
B > I { color: olive; }
P > I { color: yellow; }

  1. Зеленый.
  2. Синий.
  3. Оранжевый.
  4. Оливковый.
  5. Желтый.

2. Какой элемент является родительским для тега <TITLE>?

  1. <HEAD>
  2. <BODY>
  3. <HTML>
  4. <META>
  5. <!DOCTYPE>

3. Элемент <!DOCTYPE> для какого тега выступает родителем?

  1. <HTML>
  2. <TITLE>
  3. <BODY>
  4. <HEAD>
  5. Ни для одного тега.

Задание

1. Измените пример 7.3, чтобы результат остался тот же, но используя только контекстные селекторы.

2. Есть следующий код (менять его запрещено)

<p><span>Синий</span> — <span>Красный</span></p>

Необходимо написать стиль, чтобы слово «Синий» выделялялось синим цветом, слово «Красный» красным, а тире — черным.

Рецепты

Как открыть ссылку в новом окне?

Для открытия ссылки в новом окне применяется параметр target со значением _blank, который добавляется к тегу <A>, как показано в примере 1.

Пример 1. Открытие ссылки в новом окне

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Ссылки</title>
 </head>
 <body>
  <p><a href="link1.html">Ссылка откроется в этом окне</a></p>
  <p><a href="link2.html" target="_blank">Ссылка откроется в новом окне </a></p>
 </body>
</html>

Учтите, что при использовании строгого <!DOCTYPE> параметр target осуждается и код с ним не пройдет валидацию. Чтобы в таком случае соблюсти корректность кода, недостаточно HTML и CSS и придется обратиться к скриптам. Вначале необходимо выделить ссылки, которые будут открываться в новом окне другим способом, например, параметром rel со значением external. Этот параметр кратко описывает ссылку или куда она ведет. Браузеры не воспринимают этот параметр, но это и не требуется, поскольку мы будем проверять все ссылки на предмет наличия этого параметра через JavaScript (пример 2). К нужным ссылкам добавляется все тот же параметр target. Но так как это делается программно, то валидатор уловки не заметит.

Пример 2. Открытие ссылки через JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Ссылка в новом окне</title>
  <script type="text/javascript">
   function externalLinks() {
    links = document.getElementsByTagName("a");
    for (i=0; i<links.length; i++) {
     link = links[i];
     if (link.getAttribute("href") && link.getAttribute("rel") == "external")
     link.target = "_blank";
    }
   }
   window.onload = externalLinks;
  </script>
 </head>
 <body>
  <p><a href="link1.html">Ссылка откроется в текущем окне</a></p>
  <p><a href="link1.html" rel="external">Ссылка откроется в новом окне</a></p>
 </body>
</html>
Copyright 2007—2008 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное