Контекстные селекторы - «CSS»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

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

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
Наш опрос



Наши новости

       
17-03-2016, 18:05
Контекстные селекторы - «CSS»
Рейтинг:

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

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

Тег1 Тег2 { ... }

В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.

<Тег1>
 <Тег2> ... </Тег2>
</Тег1>

Использование контекстных селекторов продемонстрировано в примере 10.1.

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Контекстные селекторы</title>
  <style>
   P B { 
    font-family: Times, serif; /* Семейство шрифта */
    color: navy; /* Синий цвет текста */
   }
  </style>
 </head> 
 <body>
  <div><b>Жирное начертание текста</b></div>
  <p><b>Одновременно жирное начертание текста
  и выделенное цветом</b></p>
 </body>
</html>

В данном примере показано обычное применение тега <b> и этого же тега, когда он вложен внутрь абзаца <p>. При этом меняется цвет и шрифт текста, как показано на рис. 10.1.

 


Рис. 10.1. Оформление текста в зависимости от вложенности тегов

Не обязательно контекстные селекторы содержат только один вложенный тег. В зависимости от ситуации допустимо применять два и более последовательно вложенных друг в друга тегов.

Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определённого класса, как показано в примере 10.2.

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Контекстные селекторы</title>
  <style>
   A {
    color: green; /* Зеленый цвет текста для всех ссылок */
   }
   .menu { 
    padding: 7px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
    background: #fc0; /* Цвет фона */
   }
   .menu A {
    color: navy; /* Темно-синий цвет ссылок */
   }
  </style>
 </head> 
 <body>
  <div class="menu">
    <a href="https://hs-design.ru/1.html">Русская кухня</a> |
    <a href="https://hs-design.ru/2.html">Украинская кухня</a> |
    <a href="https://hs-design.ru/3.html">Кавказская кухня</a>
  </div>
  <p><a href="https://hs-design.ru/text.html">Другие материалы по теме</a></p>
 </body>
</html>

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

 


Рис. 10.2. Ссылки разных цветов

В данном примере используется два типа ссылок. Первая ссылка, стиль которой задаётся с помощью селектора A, будет действовать на всей странице, а стиль второй ссылки (.menu A) применяется только к ссылкам внутри элемента с классом menu.

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

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

1. Какой цвет будет у текста списка в следующем коде?

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Контекстные селекторы</title>
  <style>
    UL LI UL { color: green; }
    UL UL { color: red; }
    LI SPAN { color: blue; }
    LI LI { color: fuchsia; }
    UL SPAN { color: orange; }
  </style>
 </head> 
 <body>
  <ul>
   <li>
    <ul>
      <li><span>Первый</span></li>
      <li><span>Второй</span></li>
      <li><span>Третий</span></li>
    </ul>
   </li>
  </ul>
 </body>
</html>
  1. Зелёный.
  2. Красный.
  3. Синий.
  4. Розовый.
  5. Оранжевый.

2. В коде выше какого цвета будут маркеры перед текстом?

  1. Зелёного.
  2. Красного.
  3. Синего.
  4. Розового.
  5. Оранжевого.

Ответы

1. Оранжевый.

2. Розового.

e>

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

Теги: CSS, Контекстные селекторы

Просмотров: 9 121
Комментариев: 0:   17-03-2016, 18:05
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle