- Class selectors
- Syntax
- Examples
- CSS
- HTML
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- CSS урок 2. Использование классов
- Универсальные классы или CSS селектор ID
- Заголовок без стиля
- Каскадирование css стилей
- CSS наследование стилей
- How to Define a CSS Class Style
- Expert Q&A
- You Might Also Like
Class selectors
The CSS class selector matches elements based on the contents of their class attribute.
Syntax
.class_name style properties > Note that this is equivalent to the following attribute selector :
[class~=class_name] style properties > Examples
CSS
.red color: #f33; > .yellow-bg background: #ffa; > .fancy font-weight: bold; text-shadow: 4px 4px 3px #77f; > HTML
p class="red">This paragraph has red text.p> p class="red yellow-bg"> This paragraph has red text and a yellow background. p> p class="red fancy">This paragraph has red text and "fancy" styling.p> p>This is just a regular paragraph.p>
Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 22, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
CSS урок 2. Использование классов
Чтобы добавить класс, необходимо:
Для элементов (тегов) к которым будут применены свойства класса, нужно прописать атрибут class с придуманным названием класса в качестве значения атрибута:
h1 class="my_class">В моей душе/h1>
В отельном стилевом файле (style.css) или в области head текущего документа прописать свойства созданного класса
h1.my_class { color: RGB(215,40,40); text-align: center }
В данном примере класс my_class будет «привязан» именно к тегу h1 , т.е. для других тегов с аналогичным классом свойства работать не будут.
Можно написать без привязки к конкретному тегу:
.my_class { color: RGB(215,40,40); text-align: center }
В данном случае класс будет применен к любым тегом данного класса
Пример: Создать два класса с названиями red1 и class1 . Один класс применить для заголовков h1 , другой класс применить для тегов p
html> head> style type="text/css">
h1.red1 { color: RGB(215,40,40); text-align: center } p.class1{color:#3366FF; font-family:Arial}
/style> /head> body> h1 class="red1">В моей душе/h1> p class="class1"> Я хочу быть ребенком: наивным и смелым,br> Ничего не бояться и верить в добро.br> Я бы снова писала по черному белым:br> Два плюс два - ну, четыре, конечно равно! /p> p> Конец /p>
Ничего не бояться и верить в добро.
Я бы снова писала по черному белым:
Два плюс два — ну, четыре, конечно равно!
Конец
Я хочу быть ребенком: наивным и смелым,
Ничего не бояться и верить в добро.
Я бы снова писала по черному белым:
Два плюс два — ну, четыре, конечно равно!
Задание: скопируйте код страницы. Измените страницу меню сайта так, чтобы одни пункты меню были темного цвета (класс .dark ), а другие – светлого ( класс .light ).
Для гиперссылки добавить свойство: text-decoration:none;
html> head> title> Классы /title> style type="text/css"> . /style> /head> body> center>h3> Главное меню /h3>/center> ul> a href="#" class="dark">li>Введение/li>/a> a href="#" class="dark">li>Глава1/li>/a> a href="#" class="dark">li>Глава2/li>/a> a href="#" class="dark">li>Заключение/li>/a> /ul> center>h3> Дополнительное меню /h3>/center> ul> a href="#" class="light">li>Тест/li>/a> a href="#" class="light">li>Глоссарий/li>/a> a href="#" class="light">li>Литература/li>/a> /ul> /body> /html>
Примеры использования классов с тегами и просто классов:
Универсальные классы или CSS селектор ID
Универсальные классы необходимы для того, чтобы оформить определенным стилем один единственный элемент на странице (на разных страницах сайта).
#имя_класса{ свойство1: значение; свойство2: значение; }
Необходимо задать атрибут id с уникальным значением для того элемента, к которому будет применен универсальный класс:
Значение атрибута id придумывается самостоятельно и должно быть единственным таким значением id на всей веб-странице.
В стилевом файле (style.css) либо в области head текущей веб-страницы задается стиль для селектора id :
="text/css"> #steel { color: RGB(155,180,190); font-weight:bold } >
Пример: для первого заголовка h2 создать универсальный стиль, оформив его каким-либо цветом и увеличив жирность шрифта
html> head> style type="text/css">
#steel { color: RGB(155,180,190); /* изменили цвет в системе RGB */ font-weight:bold /* установили жирный шрифт */ }
/style> /head> body> h2 id="steel">Заголовок со стилем/h2> h2>Заголовок без стиля/h2> /body> /html>
Заголовок без стиля