Все різноманіття значень стильових властивостей може бути зведене до певного типу: рядок, число, відсотки, розмір, колір, адреса або ключове слово.
рядки
Будь-які рядки необхідно брати в подвійні або одинарні лапки. Якщо всередині рядка потрібно залишити одну або кілька лапок, то можна комбінувати типи лапок або додати перед лапками слеш (приклад 6.1).
Приклад 6.1. Допустимі рядки
Готель" Турист" ' " Готель Турист'" " Готель \" Турист \""
в даному прикладі в першому рядку застосовуються одинарні лапки, а слово «Турист» взято в подвійні лапки. У другому рядку все з точністю до навпаки, в третій же рядку використовуються тільки подвійні лапки, але внутрішні екрановані за допомогою слеша.
Числа
Значним може виступати ціле число, що містить цифри від 0 до 9 і десяткова дріб, в якій ціла і десяткова частина розділяються крапкою (приклад 6.2).
приклад 6.2. Числа в якості значень
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Числа </title>
<style>
p {font-weight: 600; /* Жирне накреслення */ line-height: 1.2; /* Міжрядковий інтервал */ } </style>
</head>
<body>
<p>
Приклад тексту </p>
</body>
</html>
Якщо в десяткового дробу ціла частина дорівнює нулю, то її дозволяється не писати. Запис . 7 і 0.7 рівнозначна.
Відсотки
Відсотковий запис зазвичай застосовується в тих випадках, коли треба змінити значення щодо батьківського елементу або коли розміри залежать від зовнішніх умов. Так, ширина таблиці 100% означає, що вона буде підлаштовуватися під розміри вікна браузера і змінюватися разом з шириною вікна (приклад 6.3).
Приклад 6.3. Відсоткова запис
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Ширина у відсотках </title>
<style>
TABLE {width: 100%; /* Ширина таблиці у відсотках */ background: #f0f0f0; /* Колір фону */ } </style>
</head>
<body>
<table>
<tr>
<td>
Вміст таблиці </td>
</tr>
</table>
</body>
</html>
Відсотки не обов'язково повинні бути цілим числом, допускається використовувати десяткові дроби, на кшталт значення 56.8%.
Розміри
Для завдання розмірів різних елементів, в CSS використовуються абсолютні і відносні одиниці виміру. Абсолютні одиниці не залежать від пристрою виведення, а відносні одиниці визначають розмір елемента щодо значення іншого розміру.
Відносні одиниці
Відносні одиниці зазвичай використовують для роботи з текстом, або коли треба обчислити процентне співвідношення між елементами. У табл. 6.1 перераховані основні відносні одиниці.
| Одиниця | Опис |
|---|---|
| em | Розмір шрифту поточного елементу |
| ex | Висота символу x |
| px | Пиксел |
| % | Відсоток |
Одиниця em це змінне значення, яке залежить від розміру шрифту поточного елементу (розмір встановлюється через стильову властивість font-size ). В кожному браузері закладений розмір тексту, який застосовується в тому випадку, коли цей розмір явно не заданий. Тому спочатку 1em дорівнює розміру шрифту, заданого в браузері за умовчанням або розміром шрифту батьківського елементу. Відсоткова запис ідентична em, в тому сенсі, що значення 1em і 100% рівні.
Одиниця ex визначається як висота символу « x » в нижньому регістрі. На ex поширюються ті ж правила, що і для em, а саме, він прив'язаний до розміру шрифту, заданого в браузері за умовчанням, або до розміру шрифту батьківського елементу.
Пиксел це елементарна точка, яка відображається монітором або іншим подібним пристроєм, наприклад, смартфоном. Розмір пікселя залежить від дозволу пристрою і його технічних характеристик. У прикладі 6.4 показано застосування пікселів і em для завдання розміру шрифту.
Приклад 6.4. Використання відносних одиниць
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Відносні одиниці </title>
<style>
h1 {font-size: 30px; } P {font-size: 1.5em; } </style>
</head>
<body>
<h1>
Тема розміром 30 пікселів </h1>
<p>
Розмір тексту 1.5 em </p>
</body>
</html>
Результат даного прикладу показаний нижче (рис. 6.1).
Абсолютні одиниці
Абсолютні одиниці застосовуються рідше, ніж відносні і зазвичай при роботі з текстом. У табл. 6.2 перераховані основні абсолютні одиниці.
| Одиниця | Опис |
|---|---|
| in | Дюйм (1 дюйм дорівнює 2,54 см) |
| cm | Сантиметр |
| mm | Міліметр |
| pt | пункт (1 пункт дорівнює 1/72 дюйма) |
| pc | піка (1 піку дорівнює 12 пунктам) |
Найбільш, мабуть, найпоширенішою одиницею є пункт, який використовується для вказівки розміру шрифту. Хоча ми звикли вимірювати все в міліметрах і подібних одиницях, пункт, мабуть, єдина величина з НЕ метричної системи вимірювання, яка використовується у нас повсюдно. І все завдяки текстовим редакторам і видавничим системам. У прикладі 6.5 показано використання пунктів і міліметрів.
Приклад 6.5. Використання абсолютних одиниць
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Абсолютні одиниці </title>
<style>
h1 {font-size: 24pt; } P {margin-left: 30mm; } </style>
</head>
<body>
<h1>
Тема розміром 24 пункту </h1>
<p>
Зрушення тексту вправо на 30 міліметрів </p>
</body>
</html>
Результат використання абсолютних одиниць вимірювання показаний нижче (рис. 6.2).
При установці розмірів обов'язково вказуйте одиниці виміру, наприклад width : 30px . В іншому випадку браузер не зможе показати бажаний результат, оскільки не розуміє, який розмір вам потрібно. Одиниці не додаються тільки при нульовому значенні ( margin : 0 ).
Колір
Колір в стилях можна задавати трьома способами: по шістнадцятиричним значенням, за назвою і в форматі RGB.
За шістнадцятиричним значенням
Для зазначення кольорів використовуються числа в шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 16. Цифри будуть наступні: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифри від 10 до 15 замінені латинськими буквами. Числа більше 15 в шістнадцятковій системі утворюються об'єднанням двох чисел в одне. Наприклад, числу 255 в десятковій системі відповідає число FF в шістнадцятковій системі. Щоб не виникало плутанини у визначенні системи числення, перед шістнадцятковим числом ставлять символ грат #, наприклад #666999. Кожен з трьох кольорів - червоний, зелений і синій - може приймати значення від 00 до FF. Таким чином, позначення кольору розбивається на три складові #rrggbb, де перші два символи відзначають червону компоненту кольору, два середніх - зелену, а два останніх - синю. Допускається використовувати скорочену форму виду #rgb, де кожен символ варто подвоювати (#rrggbb). Наприклад, запис #fe0 розцінюється як #ffee00.
За назвою
Браузери підтримують деякі кольори по їх назві. У табл. 6.3 наведені назви, шістнадцятковий код і опис.
| Ім'я | Колір | Код | Опис |
|---|---|---|---|
| white | #ffffff або #fff | Білий | |
| silver | #c0c0c0 | Сірий | |
| gray | #808080 | Темно-сірий | |
| black | #000000 або #000 | Чорний | |
| maroon | #800000 | Темно-червоний | |
| red | #ff0000 або #f00 | Червоний | |
| orange | #ffa500 | Помаранчевий | |
| yellow | #ffff00 або #Ff0 | Жовтий | |
| olive | #808000 | Оливковий | |
| lime | #00ff00 або #0f0 | Світло-зелений | |
| green | #008000 | Зелений | |
| aqua | #00ffff або #0ff | Блакитний | |
| blue | #0000ff або #00f | Синій | |
| navy | #000080 | Темно-синій | |
| teal | #008080 | Синьо-зелений | |
| fuchsia | #ff00ff або #f0f | Рожевий | |
| pur ple | #800080 | Фіолетовий |
За допомогою RGB
Можна визначити колір, використовуючи значення червоної, зеленої та синьої компоненти в десятковому численні. Значення кожного з трьох кольорів може набувати значень від 0 до 255. Також можна задавати колір в процентному відношенні. Спочатку вказується ключове слово rgb, а потім в дужках, через кому вказуються компоненти кольору, наприклад rgb (255, 0, 0) або rgb (100%, 20%, 20%).
У прикладі 6.6 представлені різні способи вказування кольорів елементів веб-сторінок.
Приклад 6.6. Дані зображення
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Кольори </title>
<style>
BODY {background-color:#3366CC; /* Колір фону веб-сторінки */ } h1 {background-color: RGB (249, 201, 16); /* Колір фону під заголовком */ } P {background-color: maroon; /* Колір фону під текстом абзацу */ color: white; /* Колір тексту */ } </style>
</head>
<body>
<h1>
Lorem ipsum dolor sit amet </h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p>
</body>
</html>
Результат даного прикладу показаний на рис. 6.3.
Адреси
Адреси ( URI, Uniform Resource Identifiers, уніфікований ідентифікатор ресурсів) застосовуються для вказівки шляху до файлу, наприклад, для установки фонової картинки на сторінці. Для цього застосовується ключове слово url (), усередині дужок пишеться відносний або абсолютний адресу файлу. При цьому адреса можна задавати в необов'язкових одинарних або подвійних лапках (приклад 6.7).
Приклад 6.7. Адреса графічного файлу
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Додавання фону </title>
<style>
body {background: url ( 'http://webimg.ru/images/156_1.png') no-repeat; } Div {background: url (images/warning.png) no-repeat; padding-left: 20px; margin-left: 200px; } </style>
</head>
<body>
<div>
Увага, запитувана сторінка не знайдена! </div>
</body>
</html>
В даному прикладі в селекторі body використовується абсолютний адресу до графічного файлу, а в селекторі div - відносний.
Ключові слова
як значення активно застосовуються ключові слова, які визначають бажаний результат дії стильових властивостей. Ключові слова пишуться без лапок.
Правильно: P {text-align: right; } Невірно: P {text-align:" right " ;; }
Питання для перевірки
1. В якому рядку міститься помилка?
- font-size: 20px
- font-size: 0
- font-size: 1, 5em
- font-size: 5mm
- font-size: 300ex
2. Який вираз написано коректно?
- color: #fco
- width: "auto"
- font-size: blue
- bakground: red
- border: none
3. Який розмір в пунктах буде у тексту <p> <span> Приклад тексту </span> </p > ;, якщо на сторінці поставлене таке стиль?
BODY {font-size: 24pt; } P {font-size: 50%; } SPAN {font-size: 1.5em; }
- 48pt
- 36pt
- 24pt
- 18pt
- 12pt
4. Ані хочеться встановити бузковий колір фону веб-сторінки. Яке значення властивості background підійде найкраще?
- #cbd1e8
- rgb (121, 232, 47)
- #33f
- #b6b7be
- rgb (205%, 85%, 53%)
5. Яка помилка міститься в наступному стилі?
img {float: left; border-width: 3; display: block}
- Бракує крапки з комою в кінці запису.
- Чи не вказані одиниці виміру властивості border-width.
- Значення left і block написані без лапок.
- властивості border-width не існує.
- значення block властивості display не допускається застосовувати до зображень.
Відповіді
1. font-size: 1,5em
2. border: none
3. 18pt
4. #Cbd1e8
5. Чи не вказані одиниці виміру властивості border-width.