Классы в CSS

Классы применяют, когда необходимо определить стиль для одного или нескольких элементов web-страницы. Элементы при этом могут быть разными, но иметь частично или полностью похожие элементы оформления. В коде HTML имя класса определяется через атрибут class. Пример определения класса:

<p class="important">…</p>
<p class="help">…</p>

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

Рассмотрим пример применения класса на практике:

<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   p { /* Обычный абзац */ 
    text-align: justify; /* Выравнивание текста по ширине */
   } 
   .cite { /* Абзац с классом cite */
    color: navy; /* Синий цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
   } 
  </style>
 </head> 
 <body>
  <p>Пример 1.</p>
  <p class="cite">Пример 2.</p>
 </body>
</html>

Имя класса может содержать в себе латинские символы, цифры, символ дефиса — и подчёркивания _ и начинаться оно должно с латинского символа.

Класс с привязкой к элементу

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

НАЗВАНИЕ ЭЛЕМЕНТА.имя-класса { свойство: значение }

В CSS-файле это будет выглядеть так:

P.class1 { text-align: center; }

P.class2 { text-align: left; }

Вызов из HTML будет выглядеть таким образом:

<p class="class1"> Текст выровнен по центру </p>
<p class="class2"> Текст выровнен по левой стороне </p>
<p> текст отформатирован по умолчанию </p>

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

Объединение классов в CSS используется довольно редко. Чтобы применить к тегу несколько классов, достаточно указать названия классов в атрибуте class через пробел. Рассмотрим пример:

<html>
 <head>
  <meta 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>

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

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

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

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

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

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

Рассмотрим пример:

<html>
 <head>
  <meta 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>

2023-11-18 00:28 Самоучитель по CSS