Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Селекторы классов CSS

Селекторы классов (class) в языке CSS

Селекторы
Селекторы class
Описание селекторов классов, языка CSS.

Схема CSS-кода выглядит следующим образом:

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

В селекторе класса (class), в качестве селектора, выступает имя класса:

.имяКласса {
 CSS-свойство: значение;
 CSS-свойство: значение;
 ... и т.д.
}

Обратите внимание на то, что перед именем класса ставится точка .

Селекторы классов — это выборка элементов, по значению глобального атрибута class=" "

Пример внедрения глобального атрибута class=" " в HTML-тег:

<тег class="имяКласса"> </тег>

имяКласса — это значение глобального атрибута class=" "

В качестве имени класса, может выступать любое слово состоящее из букв английского алфавита, цифр, знака дефиса - и знака подчёркивания _. Начинаться имя класса должно только с буквы.

Допустим у нас есть HTML-документ, содержащий две статьи, первая статья о снежном барсе, вторая о полярном волке:

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе и полярном волке</title>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
  <h1>Полярный волк</h1>
  <p>
   Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на
   обширных пространствах северных регионов, которые пять месяцев в году,
   погружены в темноту. Чтобы выжить, волк приспособился есть практически
   любой корм, который только попадается ему на пути.</p>
  <p>
   Полярные волки хорошо усвоились к жизни в Арктике: они могут годами
   жить при минусовой температуре, месяцами не видеть солнечного света и
   неделями оставаться без пищи. Длина волка составляет 100-150 см, высота
   в холке может достигать 100 см, а масса у самцов переваливает за 100 кг.
   Продолжительность жизни полярного волка около 7 лет. В его рацион входят:
   леминги, зайцы, овцебыки, олени и птицы.</p>
 </body>
</html>

Страница в браузере будет выглядеть следующим образом.

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

Для этого, надо в теги заголовков и абзацев внедрить атрибуты class=" ". В теги относящиеся к статье о снежном барсе, внедрим class="bars", а в теги относящиеся к статье о полярном волке, внедрим class="volk"

В CSS-коде, вместо имён тегов, нужно вставить имена классов и перед их именем поставить точку .

<style>
 .bars {color: blue;}
 .volk {color: green;}
</style>

В итоге, получаем такой HTML-документ:

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе и полярном волке</title>
  <style>
   .bars {color: blue;}
   .volk {color: green;}
  </style>
 </head>
 <body>
  <h1 class="bars">Снежный барс</h1>
  <p class="bars">
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p class="bars">
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
  <h1 class="volk">Полярный волк</h1>
  <p class="volk">
   Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на
   обширных пространствах северных регионов, которые пять месяцев в году,
   погружены в темноту. Чтобы выжить, волк приспособился есть практически
   любой корм, который только попадается ему на пути.</p>
  <p class="volk">
   Полярные волки хорошо усвоились к жизни в Арктике: они могут годами
   жить при минусовой температуре, месяцами не видеть солнечного света и
   неделями оставаться без пищи. Длина волка составляет 100-150 см, высота
   в холке может достигать 100 см, а масса у самцов переваливает за 100 кг.
   Продолжительность жизни полярного волка около 7 лет. В его рацион входят:
   леминги, зайцы, овцебыки, олени и птицы.</p>
 </body>
</html>

Страница в браузере будет выглядеть следующим образом.

Читать далее: Селектор уникального идентификатора CSS

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget