CSS. Группирование элементов.

     Для группирования элементов используется свойство  class. С помощью него можно применить любой стиль к определённому элементу или группе элементов. Предположим, что нам надо сделать заголовки на нашей странице разных цветов. Для этого прописываем селекторам example1 и example2 (названия селекторов могут быть любыми) разные цвета: .example1 {color:#CC0000} и .example2 {color:#008000}, где точка перед селекторами- обязательна. Далее используем наше свойство class в заголовке h3, которое и приравниваем к нужному селектору: <h3 class="example1"> и <h3 class="example2">.

Пример:

<html>
  <head>
    <title>Пример</title>
    <style type="text/css">
      .example1 {color:#CC0000}
      .example2 {color:#008000}
    </style>
  </head>
  <body>
   <h3 class="example1"> Заголовок красного цвета.</h3>
   <p>Наш текст</p>
   <h3 class="example2">Заголовок зеленого цвета.</h3>
   <p>Наш текст</p>
</body>
</html>

 

Результат: (открыть в браузере)


 

 Смотрите также:

     Группирование с помощью <span>.

Загрузка...