Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

Классы CSS

Классы являются ключевыми селекторами CSS, так как дают практически неограниченную возможность по применению стилей к тем или иным HTML-элементам. Селектор класса всегда начинается с точки (.) после которой без пробела записывается имя класса. Общий синтаксис следующий:

.имя_класса { свойство: значение; свойство: значение; ... }

Имя класса — это произвольное слово, которое вы придумываете сами, но есть ограничение, оно может состоять только из символов латинского алфавита (a-z, A-Z), цифр (0-9), символов дефиса (-) и подчеркивания (_). Причем имя класса не может начинаться с цифры или дефиса, за которым следует цифра. Например, классы .block-1, .-block3, .kartinkiBlock, ._7Block_vnizu — правильные, а .1-block, .-7block — нет.

Хорошо, класс мы создали, стили для него прописали, но как его применять к элементам? Ну, тут все проще простого. В теге необходимого элемента надо просто указать атрибут class="имя_класса", где имя_класса и есть имя придуманного вами класса. Причем один и тот же класс можно использовать в любом количестве тегов. Вот и все.

Как вы помните, CSS не чувствителен к регистру, но есть одно «НО». Имя класса всегда должно точно соответствовать тому, что вы пропишете в атрибуте class. Например, если у вас есть класс .menuHeader, то в теге надо писать class="menuHeader", а никак не class="menuheader", class="MenuHeader" и т.д.

Ну что, пришла пора изучить пример, только не пугайтесь заранее такому количеству стилей. На самом деле, если вы хоть чуть-чуть к ним приглядитесь, то я уверен, что сразу во всем разберетесь.

Пример использования классов в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Селекторы классов</title>
  <style type="text/css">
   .vertical_menu {
    width: 250px; /* ширина колонки с меню */
   }
   .menu_name {
    font-weight: bold; /* жирный шрифт названия меню */
    text-align: center; /* ставим по центру текст в названии */
    border-top: 1px #ff00cc solid; /* стили верхней стороны рамки */
    border-bottom: 3px #ff00cc solid; /* стили нижней стороны рамки */
    padding: 5px; /* задаем размер внутренних отступов */
   }
   .menu {
    list-style-type: none; /* убираем маркеры у списка */
    border: 1px #66ccff solid; /* стили рамки вокруг списка */
    margin: 3px 0; /* изменяем размеры внешних полей */
    padding: 5px; /* изменяем размеры внутренних отступов */
   }
   a {
    color: #0099cc; /* цвет ссылок на странице */
   }
  </style>
 </head>
 <body>
  <div class="vertical_menu"> <!-- Начало колонки с меню -->
   <div class="menu_name">МЕНЮ</div>
   <ul class="menu">
    <li><a href="podkluchenie-css.php">Способы подключения CSS</a></li>
    <li><a href="tipy-ustrojstv.php">Типы устройств в CSS</a></li>
    <li><a href="bazovyj-sintaksis.php">Синтаксис CSS</a></li>
   </ul>
  </div> <!-- конец колонки с меню -->
 </body>
</html>

Результат в браузере

МЕНЮ

Объединение классов CSS

В CSS допускается объединение классов, причем оно может использоваться для совершенно разных целей: для применения нескольких классов к одному элементу или для сужения выборки элементов.

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

Применение нескольких классов CSS к одному элементу

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Объединение классов</title>
  <style type="text/css">
   .bold { font-weight: bold; }
   .kursiv { font-style: italic; }
   .blue { color: blue; }
   .green { color: green; }
  </style>
 </head>
 <body>
  <p class="bold blue">Жирный текст синего цвета.</p>
  <p class="kursiv bold">Жирный курсивный шрифт текста.</p>
  <p class="bold green blue">Жирный текст зеленого цвета.</p>
 </body>
</html>

Результат в браузере

Жирный текст синего цвета.

Жирный курсивный шрифт текста.

Жирный текст зеленого цвета.

Как видите, в последнем параграфе примера текст зеленый, так как класс .green находится ниже, чем .blue. Поехали дальше.

Иногда возникает необходимость в объединении класса с другим классом или другим селектором (например, тега), либо то и другое одновременно, чтобы сузить рамки выборки элементов. Для этого все селекторы указываются подряд без пробела, в этом случае стили будут применены только к тем элементам, которые соответсвуют сразу всем этим селекторам. Общий синтаксис:

.класс1.класс2 { свойство: значение; ... }

селектор.класс { свойство: значение; ... }

селектор.класс1.класс2 { свойство: значение; ... }

Пример объединения селекторов классов в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Объединение селекторов</title>
  <style type="text/css">
   p.note { /* стили параграфа-примечания */
    border: 5px #c66 double;
    padding: 5px;
   }
   span.note { /* стили span для примечания */
    font-weight: bold;
    color: #f00;
   }
   .kursiv { font-style: italic; }
   .bold { font-weight: bold; }
   .kursiv.bold { text-decoration: underline; }
  </style>
 </head>
 <body>
  <p class="note">
   <span class="note">Примечание:</span> вообще, объединение
   <span class="kursiv">нескольких селекторов классов</span>
   используется в верстке довольно <span class="bold">редко</span>,
   зато объединение классов с другими селекторами —
   <span class="bold kursiv">очень часто</span>, особенно с селекторами тегов.
  </p>
 </body>
</html>

Результат в браузере

Примечание: вообще, объединение нескольких селекторов классов используется в верстке довольно редко, зато объединение классов с другими селекторами — очень часто, особенно с селекторами тегов.

В данном примере мы использовали один и тот же класс (.note) для разных тегов и с совершенно разными стилями. Также обратите внимание на последний тег <SPAN>, к тексту внутри него были применены не только свойства указанных классов, но и и общее для них свойство.

Домашнее задание.

Это задание будет сложнее предыдущих. Сначала думал с ним немного повременить, но потом все же решил именно в классы его определить. Ведь лучше сейчас шишки набивать, чем потом, когда вы всерьез займетесь созданием своего сайта. Тем более, что со всеми свойствами CSS, которые здесь понадобятся, вы уже сталкивались, ну разве что одно вам может быть незнакомо. Итак.

  1. Сделайте колонку небольшой ширины, например 200px. Поместите в нее меню со ссылками. Оформите его так, как показано в результате задания.
  2. Ниже создайте еще один блок и напишите в нем несколько параграфов.
  3. Пусть ваш блок с меню всплывает влево, для этого вам потребуется свойство float.
  4. После всплытия меню, текст параграфов будет его обтекать справа. Сделайте так, чтобы текст не прилегал к меню вплотную, а был от него на определенном расстоянии, например в 20px. Но это еще не все. Он должен не просто не прилегать, но и не размещаться под меню, если текста достаточно много. Вот здесь вам придется голову поломать.
  5. Не вздумайте использовать таблицы.
Универсальный селектор← Содержание →Идентификаторы
Учебник CSS