Пріоритет має значення, вказане в коді нижче
Якщо для селектора спочатку задається властивість з одним значенням, а потім та ж властивість, але з іншим значенням, то використовуватись буде те значення, яке в коді розташоване нижче.
Приклад. Різні значення однієї властивості
p { color: green; }
p { color: red; }
В результаті колір тексту буде червоним. Таких записів необхідно взагалі уникати, але подібне може виникнути не явно, коли підключаються різні стильові файли, в яких знаходяться одинакові селектори.
Всі значення стильових властивостей можуть бути зведені до визначеного типу: стрічка, число, процент, розмір, колір, адреса або ключове слово.
Стрічки
Будь-які стрічки необхідно брати в подвійні або одинарні лапки. Можна комбінувати їх, або ставити перед лапками слеш. Наприклад.
Приклад. Допустимі стрічки
'Готель "Турист"' "Готель 'Турист'" "Готель \"Турист\""
Числа
Значенням можуть бути цілі числа, що містять цифри від 0 до 9 і десятковий дріб, в якому ціла і десяткова частина розділяються крапкою. Наприклад.
Приклад 6. Числа в якості значень
<!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">
p {
font-weight: 600; /* Жирний шрифт */
line-height: 1.2; /* Межстрічковий інтервал */
}
</style>
</head>
<body>
<p>Приклад тексту</p>
</body>
</html>
Проценти
Процентний запис зазвичай використовується в тих випадках, коли необхідно змінити значення відносно батьківського елементу або коли розміри залежать від зовнішніх чинників. Наприклад, ширина таблиці 100% означає, що вона буде підлаштовуватись під розміри вікна браузера и змінюватись разом із шириною вікна (приклад 7).
Приклад 7. Процентний запис
<!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">
TABLE {
width: 100%; /* Ширина таблиці в процентах */
background: #f0f0f0; /* Колір фону */
}
</style>
</head>
<body>
<table>
<tr><td>Вміст таблиці</td></tr>
</table>
</body>
</html>
Разміри
Для визначення розмірів різних елементів в CSS використовують абсолютні та відносні одиниці вимірювання. Абсолютні одиниці не залежать від пристроїв виводу, а відносні одиниці визначають розмір елементу відносно значення другого розміру.
Відносні одиниці
Зазвичай використовуються для роботи з текстом, або коли потрібно визначити процентне відношення між елементами.
Відносні одиниці виміру |
|
Одиниця |
Опис |
em |
Размір шрифту елемента |
ex |
Висота символу x |
px |
Піксель |
% |
Процент |
Приклад 8. Використання відносних одиниць
<!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: 30px; }
P { font-size: 1.5em; }
</style>
</head>
<body>
<h1>Заголовок разміром 30 пікселів</h1>
<p>Размір текста 1.5 em</p>
</body>
</html>