Общие принципы
создания CSS-правил
p {
color: #424242;
font-size: 12px;
font-family: Tahoma;
} Из данного примера получается, что все абзацы страницы примут шрифт Tahoma серого цвета с размером в 12 пикселей.
Помимо этого можно создать определенное правило, которое мы можем присвоить конкретному тэгу. Тогда надо создать следующее правило:
p.title {
font-weight: bold;
color: #cc0000;
}Присвоим атрибут class с названием правила первому тэгу <p> (первому абзацу)
<html>
<head>
<title>Пример CSS</title>
</head>
<body>
<p class="title">Этому абзацу присвоили атрибут class="title".</p>
<p>Здесь второе предложение.</p>
<h1>Здесь заголовок.</h1>
<p>Здесь третье предложение.</p>
<body>
</html>
После того как мы присвоили правило "p.title" первому абзацу, он принял свойства, прописанные в правиле и стал выглядеть так:
Этому абзацу присвоили атрибут class="title".
Правило "p.title" можно присвоить любому тэгу <p>. Также можно создать определенное правило, которое мы можем присвоить ЛЮБОМУ тэгу, например правило
.new {
color: #00cc00;
}
можно присвоить как тэгу <p>, так и тэгу <h1> (главному заголовку)
<html>
<head>
<title>Пример CSS</title>
</head>
<body>
<p class="title">Этому абзацу присвоили атрибут class="title".</p>
<p>Здесь второе предложение.</p>
<h1 class="new">Этому заголовку присвоили правило ".new".</h1>
<p class="new">Этому абзацу присвоили правило ".new".</p>
<body>
</html>
В результате тэги, к которым применили правило ".new", стали выглядеть так:Этому заголовку присвоили правило ".new".
Этому абзацу присвоили правило ".new".
Также существуют индивидуально именованные стили (ID). Они применяются, чтобы придать элементам одного класса индивидуальные
свойства.
Например, создадим индивидуально именованный стиль "#add", в котором укажем жирный шрифт (свойство font-weight: bold;)
#add {
font-weight: bold;
}теперь присвоим атрибут id третьему абзацу
<html>
<head>
<title>Пример CSS</title>
</head>
<body>
<p class="title">Этому абзацу присвоили атрибут class="title".</p>
<p>Здесь второе предложение.</p>
<h1 class="new">Этому заголовку присвоили правило ".new".</h1>
<p class="new" id="add">Этому абзацу присвоили правило ".new".</p>
<body>
</html>
В итоге предложение в третьем абзаце приняло зеленый цвет как в правиле ".new" и жирность как в правиле "#add":Получили следующее:
Этому абзацу присвоили правило ".new".
Это значит, что нет необходимости создавать новое правило и дублировать код, достаточно создать индивидуально именованный стиль и добавлять его там, где это необходимо. Если вы хотите применить один и тот же стиль сразу к двум и более тэгам, то не обязательно создавать для каждого тэга свое правило:
p {
color: #424242;
font-size: 12px;
font-family: Tahoma;
}
h1 {
color: #424242;
font-size: 12px;
font-family: Tahoma;
}
Достаточно просто тэги с одинаковыми стилями перечислить через запятую:
p, h1 {
color: #424242;
font-size: 12px;
font-family: Tahoma;
}