Глобальні стилі
При використанні глобальних стилів властивості CSS описуються в самому документі і розміщуються в заголовку веб-сторінки. Цей спосіб менш зручний ніж попередній, але теж дозволяє зберігати стилі в одному місці, в даному випадку на сторінці за допомогою контейнера <style>, як показано в прикладі 3.
Приклад 3. Використання глобального стиля
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Глобальні стилі</title>
<style type="text/css">
H1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333366;
}
</style>
</head>
<body>
<h1>Привіт!</h1>
</body>
</html>
Внутрішні стилі
Внутрішні стилі по суті є розширенням для одиночного тегу, що використовується на веб-странці. Для визначення стилю використовують параметр style, а його значенням є набір стильових правил (приклад 4).
Приклад 4. Використання внутрішнього стилю
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Внутрішні стилі</title>
</head>
<body>
<p style="font-size: 120%; font-family: monospace; color: #cd66cc">Приклад тексту</p>
</body>
</html>
В даному прикладі стиль тегу <p> задається за допомогою параметра style, в якому через крапку з комою перераховуються стильові властивості.
Всі описані методи використання CSS можуть використовуватись як самостійно, так і в поєднанні. В такому разі необхідно пам’ятати про їх ієрархію. Першим завжди застосовується внутрішній стиль, потім глобальний і в останню чергу зв’язний стиль.
Базовий синтаксис css
Основним поняттям є селектор — це деяке ім’я стилю, для якого додаються параметри оформлення. В якості селектора виступають теги, класи і ідентифікатори. Загальний спосіб їх запису має наступний вигляд.
Селектор { властивість1: значення; властивість2: значення; }
Спочатку записується ім’я селектора, наприклад TABLE, це означає, що всі стильові параметри будуть використовуватись для тегу <table>, потім записуються фігурні лапки, в яких вказується стильова властивість, а її значення вказується після двокрапки. Стильові властивості розділяються між собою крапкою з комою.
Покажемо це на прикладі 5.
Приклад 5. Використання стилів
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовки</title>
<style type="text/css">
h1 { color: #a6780a; font-weight: normal; }
h2 {
color: olive;
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html>
Правила використання стилів Форма запису
Для селектора допускається додавання кожної стильової властивості і її значення окремо, наприклад
Приклад. Расширена форма запису
td { background: olive; }
td { color: white; }
td { border: 1px solid black; }
Проте цей спосіб не дуже зручний. Тому пишіть всі властивості для кожного селектора разом. Вказаний набір записів матиме наступний вигляд.
Приклад. Компактна форма запису
td {
background: olive;
color: white;
border: 1px solid black;
}