Абсолютні одиниці
Абсолютні одиниці використовуються рідше і зазвичай при роботі з текстом.
Абсолютні одиниці вимірювання |
|
Одиниця |
Опис |
in |
Дюйм (1 дюйм равний 2,54 см) |
cm |
Сантиметр |
mm |
Міліметр |
pt |
Пункт (1 пункт рівний 1/72 дюйма) |
pc |
Піка (1 піка рівна 12 пунктам) |
Приклад 9. Використання абсолютних одиниць
<!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: 24pt; }
P { margin-left: 30mm; }
</style>
</head>
<body>
<h1>Заголовок розміром 24 пункти</h1>
<p>Переміщення тексту вправо на 30 міліметрів</p>
</body>
</html>
При встановленні розмірів обов’язково вказувати одиниці вимірів, наприклад width: 30px. В іншому випадку браузер не зможе відобразити потрібний результат, оскільки не знатиме який розмір вам потрібний. Одиниці не додаються лише при нульовому значенні (margin: 0).
Колір
Колір в стилях можна задавати трьома способами: за шістнадцятковим значенням, за назвою і в форматі RGB.
Табличка назв кольорів |
|||
Ім’я |
Колір |
Код |
Опис |
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 |
Розовий |
purple |
|
#800080 |
Фиолетовий |
За допомогою rgb
Можна визначати колір, використовуючи значення червоної, зеленої і синьої складової в десятковому обчисленні. Значення кожного з трьох кольорів може приймати від 0 до 255. Також можна задавати колір в процентному відношенні. Спочатку вказується ключеве слово rgb, а потім в дужках через кому вказуються компоненти кольору, наприклад rgb(255, 0, 0) або rgb(100%, 20%, 20%).
Приклад представлення різними способами елементів веб-сторінки.
<!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">
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>
Адреса
Адреса (URI, Uniform Resource Identifiers) використовується для вказування шляху до файлу, наприклад, до фонової картинки веб-сторінки. Для цього використовується ключеве слово url(), всередині дужок пишеться відносна або абсолютна адреса файлу. При цьому адресу можна задавати в необов’язкових одинарних або подвійних лапках.
Приклад 10. Адреса графічного файлу
<!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">
body {
background: url('http://webimg.ru/images/156_1.png') no-repeat;
}
div {
background: url(images/warning.png) no-repeat;
padding-left: 140px;
}
</style>
</head>
<body>
<div> Увага, сторінка яку ви шукаєте, не знайдена!</div>
</body>
</html>
В даному прикладі в селекторі body використовується абсолютна адреса до графічного файлу, а в селекторі div — відносна.
Класи
Класи використовуються, коли необхідно визначити стиль для індивідуального елементу веб-сторінки або задати різні стилі для одного тегу. При використанні сумісно з тегами синтаксис для класів буде наступним.
Тег.Имя класу { властивість: значення; властивість2: значення; ... }
Всередині стилю спочатку записується необхідний тег, а потім через крапку імя класу. Щоб вказати в коді HTML, що використовується тег з визначеним класом, до тегу додається параметр class="імя класу" (приклад 11).
Пример 11. Використання класів
<!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 { /* Звичайний абзац */
text-align: justify; /* Вирівнювання тексту по ширині */
}
P.cite { /* Абзац з класом cite */
color: navy; /* Колір тексту */
margin-left: 20px; /* Відступ зліва */
border-left: 1px solid navy; /* Границя зліва від тексту */
padding-left: 15px; /* Відстань від лінії до тексту */
}
</style>
</head>
<body>
<p> У Львові також багато галузевих музеїв, як, наприклад, музеї пива, пошти, друкарства, скла, релігії тощо.</p>
<p class="cite"> Є також певна кількість меморіальних будинків-музеїв, присвячених видатним мешканцям міста. Природознавчий музей, який володіє однією з найбагатших у Східній Європі експозицій, сьогодні закритий на реконструкцію.</p>
</body>
</html>
Можна, також, використовувати класи і без вказування тегу. Синтаксис в такому випадку є наступним.
.Ім’я класу { властивість1: значення; властивість2: значення; ... }
При такому записі клас можна використовувати до будь-якого тегу.