Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

CSS селектор класс

Поддержка браузерами

Описание

CSS селектор класс (class) применяет стиль ко всем элементам с указанным классом. Он определяется при помощи произвольного имени, перед которым ставится точка:

.myClass { color: blue; }

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

<p class="myClass">Текст абзаца.</p>

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

<p class="className1 className2 className3">Текст абзаца.</p>

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

При выборе имени класса необходимо учитывать следующие правила:

Примечание: если одинаковые значения атрибута class прописаны к нескольким разным элементам, но только к одной группе из них нужно применить дополнительный стиль, то перед именем класса нужно написать дополнительный селектор, который будет информировать к каким элементам применять заданный стиль:
span.alert { font-weight: bold; }
в этом случае только текст в элементах span со значение alert атрибута class будет выделен жирным шрифтом, остальные элементы с данным классом будут игнорировать этот стиль.

Пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      .myclass { color: blue; }
    </style>
  </head>

  <body>
    <h1> Добро пожаловать! </h1>

    <p class="myclass"> Меня зовут Арни. </p>
    <p class="myclass"> Я играю в онлайн игры. </p>
    <p> Моего кота тоже зовут Арни. </p>

  </body>
</html>		

Результат данного примера:

Добро пожаловать!

Меня зовут Арни.

Я играю в онлайн игры.

Моего кота тоже зовут Арни.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen