CSS по шагам


         

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<style type="text/css">

P B {

 font-family: Times, serif; /* Семейство шрифта */

 font-weight: bold; /* Жирное начертание */

 color: navy /* Синий цвет текста */

}

</style>

</head>

<body>

<b>Жирное начертание текста </b>

<p><b>Одновременно жирное начертание текста и выделенное цветом</b></p>

</body>

</html>

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

DIV.result P B { font-family: Times, serif; font-weight: bold; color: navy }

Жирное начертание текста

Одновременно жирное начертание текста и выделенное цветом

Замечание

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

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




Содержание  Назад  Вперед