Отже, каскадна таблиця стилів - це набір правил форматування HTML тегів. Наведемо кілька прикладів написання таких правил:
1. Основний текст з вирівнюванням по ширині, абзацний відступ 30px, гарнітура (шрифт) - Serif, кегль (розмір шрифту) - 14px:
p {
text-align: justify;
text-indent: 30px;
font-family: Serif;
font-size: 14px;
}
Це правило буде застосовано до всіх тегами <p>.
2. Синій колір для заголовків з першого по третій рівень:
h1, h2, h3 {
color: blue; /* теж саме, що й #0000FF */
}
3. Таблиці та зображення виводити без обрамлення:
table, img {border: none;}
4. Посилання в елементах списків показувати без підкреслення:
li a {text-decoration: none;}
5. Посилання в елементах списків показувати без підкреслення:Внутрішні відступ ліворуч і праворуч для блоків (<div>), заголовки таблиць і комірок таблиць встановити в 10px і залити фон жовтим кольором:
div, th, td {
padding-left: 10px;
padding-right: 10px;
background-color: yellow;
}
6. Всі посилання в документі відображати чорним кольором і напівжирним шрифтом, а в основному тексті і списках - звичайним, а також виділяти їх зеленим кольором і підкреслювати тільки при наведенні курсора (в описі правил використаний псевдоелемент a:hover).
a {color: black; font-weight: bold;}
p a, li a {font-weight: normal; text-decoration: none;}
p a:hover, li a:hover {
color: #00FF00; text-decoration: underline;
}
Класи
Стандарт CSS представляє можливості створення іменованих стилів - стильових класів. Це дозволяє відповісти на такі, наприклад, питання: Як застосувати різні стилі до одного і того ж селектору?
Припустимо, що в документі вам потрібні два різних види основного тексту - один без відступу, другий - з відступом зліва і шрифтом червоного кольору. Для цього потрібно створити правила для кожного з них, наприклад так:
p {margin-left: 0;}
p.warn {margin-left: 40px; color: #FF00;}
Для застосування створеного класу його ім'я потрібно вказати в атрибуті class для вибраних абзаців:
<p class=”warn”>Красный текст с отступом слева</p>
Загальний синтаксис описания класу:
селектор.имя_класса {опис}
При створенні класу селектор можна не вказувати, тоді це правило можна застосовувати до будь-якого селектору, що підтримує той же набір властивостей. Ось кілька прикладів:
Правило:
.solid_blue {color: blue;}
Використання:
<p class=”solid_blue”>Синій текст абзаца</p>
<li class=”solid_blue”>Синій текст елемента списка</li>
Правило:
h1.bigsans {font-family: Sans; font-size: 1.5em;}
h1.smallserif {font-family: Serif; font-size: .84em;}
Використання:
<h1 class="bigsans">Великий, але рубаний</h1>
<h1 class="smallserif">Маленький, але із зарубками</h1>
