Селекторы id и класс
В дополнение к определению стиля для элемента HTML, CSS позволяет задать собственные селекторы называемые "id" и "класс".
Селектор id
Селектор id используется для задания стиля для одного, единственного элемента.
Селектор id использует атрибут id элемента HTML, и определяется с "#".
Правило стиля ниже будет применяться к элементу с id="para1":
Примеры
Пример 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#para1 { text-align:center; color:red; }
</style>
</head>
<body>
<p id="para1">Привет Мир!</p>
<p>На этот параграф не влияют стили.</p>
</body>
</html>
Не начинайте имя ID с номера! Он не будет работать Mozilla/Firefox.
Селектор класса
Селектор класса используется для определения стиля для группы элементов. В отличии от id селектора, селектор класса обычно используется на несколько элементов.
Это позволяет установить особый стиль для любых элементов HTML с тем же классом.
Селектор класса использует атрибут HTML класса, и определяется с "."
В примере, приведенном ниже, все HTML-элементы с class="center" будут отцентрованны:
Пример 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.center { text-align:center; }
</style>
</head>
<body>
<h1 class="center">Отцентрованный заголовок</h1>
<p class="center">Отцентрованный параграф.</p>
</body>
</html>
Вы можете также указать, что только определенные HTML элементы должны быть затронуты классом.
В примере ниже, все элементы p с class="center" будут отцентрованны:
Пример 3
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> p.center { text-align:center; } </style> </head> <body> <h1 class="center">Этот заголовок не будет изменен</h1> <p class="center">Этот параграф будет отцентрован.</p> </body> </html>
Не начинайте имя класса с номера! Оно будет работать только в Internet Explorer.
Была ли эта информация полезной?
