Селекторы классов CSS
Селекторы классов (class) в языке CSS
Селекторы class
Схема 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