CSS селектор class позволяет также как и селектор id стилизовать конкретный элемент страницы, но в отличие от id, селектор class позволяет применить свой стиль к нескольким элементам на веб-странице, а не только к одному. Для использования селектора class, нужно указать, к какому элементу на странице вы хотите его применить, для этого надо всего лишь добавить атрибут class к HTML тегу, который нужно стилизовать, и указать в качестве значения нужное имя класса. Правила для имен классов: в CSS коде все обозначения селекторов класс должны начинаться с точки, с ее помощью браузеры опознают селектор класс в таблице стилей CSS в имени класса разрешается использовать только буквы, числа, дефис и знак подчеркивания имя класса после точки всегда должно начинаться с буквы имена классов чувствительны к регистру, например .Menu и .menu будут рассматриваться в CSS, как два разных класса CSS код для классов ничем не отличается от CSS кода для других селекторов. После имени класса идет блок объявлений, содержащий все необходимые свойства: .menu { color: #33CCFF; font-family: sans-serif; } Если атрибут class, с одним и тем же именем, добавлен к нескольких разным тегам, а вам нужно чтобы стиль применялся только к определенным тегам, то в селекторе перед обозначением класса нужно указать тег, к которому должен быть применён стиль: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> p.center { text-align: center; } </style> </head> <body> <h1 class="center">Стиль не будет применен.</h1> <p class="center">Абзац будет выровнен по центру.</p> </body> </html>
Самоучитель CSS
Селектор class
CSS селектор class позволяет также как и селектор id стилизовать конкретный элемент страницы, но в отличие от id, селектор class позволяет применить свой стиль к нескольким элементам на веб-странице, а не только к одному.
Для использования селектора class, нужно указать, к какому элементу на странице вы хотите его применить, для этого надо всего лишь добавить атрибут class к HTML тегу, который нужно стилизовать, и указать в качестве значения нужное имя класса.
Правила для имен классов:
в CSS коде все обозначения селекторов класс должны начинаться с точки, с ее помощью браузеры опознают селектор класс в таблице стилей CSS
в имени класса разрешается использовать только буквы, числа, дефис и знак подчеркивания
имя класса после точки всегда должно начинаться с буквы
имена классов чувствительны к регистру, например .Menu и .menu будут рассматриваться в CSS, как два разных класса
CSS код для классов ничем не отличается от CSS кода для других селекторов. После имени класса идет блок объявлений, содержащий все необходимые свойства:
.menu {
color: #33CCFF;
font-family: sans-serif;
}
Если атрибут class, с одним и тем же именем, добавлен к нескольких разным тегам, а вам нужно чтобы стиль применялся только к определенным тегам, то в селекторе перед обозначением класса нужно указать тег, к которому должен быть применён стиль:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
p.center { text-align: center; }
</style>
</head>
<body>
<h1 class="center">Стиль не будет применен.</h1>
<p class="center">Абзац будет выровнен по центру.</p>
</body>
</html>