CSS
Даний підручник спробує навчити вас використовувати каскадні таблиці стилів — важливий елемент веб-дизайну. Перед його прочитанням бажано мати певне уявлення про HTML.
Каскадні стилі сторінок (англ. Cascading Style Sheets) — спеціальна мова, що використовується для запису оформлення сторінок, написаних мовами розмітки даних.
Основні поняття
[ред.]Стилі дають змогу спростити процес створення сторінок і поліпшити їхній зовнішній вигляд. Концепція стилів подібна до ідеї стилів, яка реалізована в сучасних текстових редакторах — текст спочатку вводять, а потім форматують, користуючись стилями. Застосування стилів дає змогу вводити на сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виглядом і розташуванням.
Стилі програміст зазвичай створює окремо від html-файлу. Під час створення html-файлу він концентрує увагу на змісті сторінки, а не на її зовнішньому вигляді, а під час створення таблиці стилів — навпаки. Отже, стилі дають змогу розмежувати етапи створення html-файлу й удосконалення зовнішнього вигляду сторінки.
Вважатимемо, що таблиця стилів уже створена. Тепер нам потрібно забезпечити взаємодію таблиці з html-файлом. Розглянемо три способи такої взаємодії: зв'язування, імпортування, вбудовування.
Зв'язування
[ред.]Стилі створюють і зберігають в окремому файлі з розширенням ".css". Таку таблицю називають зовнішньою. Щоб зв'язати основний файл з таблицею стилів, у середині тега <head> застосовують одинарний тег <link> з інформацією про таблицю:
<head>
<link href="адреса таблиці стилів"
type="text/css"
rel="stylesheet"
title="назва таблиці стилів">
</head>
Імпортування
[ред.]Це те ж саме, що і зв'язування, але взаємодію файлів забезпечують засобами тегу <style> і команди @import URL("адреса таблиці стилів")
Вбудовування
[ред.]Якщо таблицю створено лише для деякого конкретного html-файлу, то її розташовують у цьому файлі за допомогою контейнера <style>. Таку таблицю стилів називають внутрішньою або вбудованою.
Також стиль можна вбудувати прямо в html-тег за допомогою атрибуту style, наприклад:
<span style="color: red">RED</span>
Це дасть нам блок з текстом червоного кольору: RED
Мова CSS
[ред.]Таблиця стилів складається з правил, а правило — з назви тега чи списку назв тегів і описів стилів, які діятимуть у межах деякого html-файлу.
Опис стилю — це послідовність пар властивість:значення, які записують через крапку з комою та охоплюють фігурними дужками.
Отже, загальний вигляд правила такий:
Селектор {
властивість1: значення1;
властивість2: значення2;
властивістьN: значенняN;
}
Приклад правила для одного тега:
p {
color: red;
}
Браузер виводить на екрані тексти всіх абзаців червоним кольором.
Ось приклад складнішого правила для списку тегів:
h3,li {
color: green;
font-family: pragmatica;
font-size: 16pt;
text-align: left;
border-style: ridge;
border-width: 2mm;
}
Браузер виведе всі заголовки третього рівня h3 і елементи списків li зеленим кольором, шрифтом Прагматика розміру 16 пунктів, вирівняє їх до лівого краю вікна й охопить рамкою товщиною 2 мм з видавленим контуром (ridge).
Властивості стилів та їх значення
[ред.]Імена властивостей складаются з одного чи декількох англійських слів, що записуются через риску. Властивість діє лише в межах тега, зазначеного у відповідному правилі.
Властивості стилів наведені у таблиці:
| Властивість | Значення | Пояснення |
|---|---|---|
| background-attachment | fixed, scroll | Тло фіксоване чи прокручуєтся |
| background-color | red, green, #343434 | Колір тла |
| background-image | url("Адреса графічного файлу для тла") | Фонове зображення |
| background-position | 0% 0% | Початкове положення тла |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat | Повторює зображення |
| border-top/border-right/border-bottom/border-left/border | 4mm | Рамка |
| border-color | red, green, #343434 | Колір рамки |
| border-style | none, dotted, dashed, solid, double, groove, ridge, inset, outset | Стиль рамки |
| border-width | 2mm, 3mm | Товщина рамки |
| font-family | arial, sans-serif | Назва шрифта |
| font-size | 16px | Розмір шрифта |
| font-style | normal, italic, oblique | Стиль шрифта |
| font-variant | normal, small-caps | Варіант шрифта |
| font-weight | normal(400), bold(700), bolder, lighter, 100 - 900 | Жирність шрифта |
| word-spacing | 1mm, 2mm | Відстань між словами |
| letter-spacing | 1mm | Відстань між символами |
| line-height | 2mm, 4mm | Відстань між рядками |
| text-align | left, right, center, justify | Вирівнювання тексту |
| text-decoration | none, underline, blink, overline, line-through | Оформлення тексту |
| text-indent | 2cm | Абзацний відступ |
| text-transform | none, uppercase, lowercase, capitalize | Трансформація тексту |
| vertical-align | baseline, sub, super, top, text-top, middle, bottom, text-bottom | Вертикальне вирівнювання |
| white-space | normal, pre, nowrap, pre-wrap, pre-line | Пробіли та перенесення між словами |
| margin-top/margin-right/margin-bottom/margin-left/margin | 4mm | Зовнішній відступ |
| padding-top/padding-right/padding-bottom/padding-left/padding | 4mm | Внутрішній відступ |
| height | 4cm | Висота елемента |
| width | 14cm | Ширина елемента |
| float | none, left, right | Обтікання об'єкта текстом |
| clear | none, left, right, both | Заборона обтікання |
| color | red, green, #343434 | Колір елемента |
| list-style-image | url("Адреса графічного файлу маркера списку") | Зображення для маркера |
| list-style-position | inside, outside | Позиція маркера |
| list-style-type | disc, circle, square, decimal, lower-alpha, lower-roman, upper-alpha, upper-roman | Вигляд маркера |
| position | static, relative, absolute, fixed | Спосіб позиціонування елемента |
| top/right/bottom/left | px, in, pt, %, auto тощо | Позиціонування елемента |
| z-index | ціле число, auto | Положення елемента за віссю z |
| display | block, inline-block, inline, list-item, none, table, table-row, table-cell | Поведінка елемента в документі |
| visibility | visible, hidden, collapse | Відобразити чи сховати елемент |
| overflow | visible, hidden, scroll, auto | Спосіб відображення вмісту елемента, якщо він повністю не вміщується в задану область |
| clip | shape(rect), auto | Визначає прямокутну область, де буде показано частину елемента |
| outline-color/outline-style/outline-width/outline | значення, аналогічні border | Зовнішня рамка |
| cursor | default, pointer, help, wait, progress, text, move, crosshair, auto | Вигляд курсору |
Теги <style>,<div>,<span>
[ред.]Внутрішні таблиці стилів описують у головному файлі в контейнері тега <head>...</head> за допомогою тега-контейнера <style>...</style>.
Правила можуть починатися або з назви тега без кутових дужок, або з деякого слова користувача, перед яким є крапка. Це слово стає назвою типу, який можна застосувати в контейнері тега <BODY> до іншого текстового блока, фрагмена тексту чи деякого елемента, наприклад:
.mystyle1 {
color: red;
font-size: 40pt;
margin-top: 30px;
}
.mystyle2 {
color: black;
font-size: 16pt;
margin-top: -50px;
}
Для відокремлення текстового блока, до якого застосовуватимуть стиль, призначений тег-контейнер <DIV параметр></DIV> з параметром CLASS, який задає конкретний стиль, що діятиме на блок: <DIV CLASS=назва стилю>блок</DIV>.
Для відокремлення у блоці текстового фрагмента, для якого будуть переозначувати стиль, застосовують тег-контейнер <SPAN>...</SPAN>
Селектори CSS
[ред.]Селектор class
[ред.]Припустимо, ми хочемо зробити сторінку, на якій буде два види абзаців <p>, причому обидва види будуть постійно чергуватися і часто повторюватися. Приклад такої сторінки — інтерв'ю, в якому чергуются питання журналіста і відповіді людини. Звичайно, при створені такої сторінки ми захочемо візуально відділити питання і відповіді одне від одного. Якщо б нам необхідно було це робити можливостями CSS, які ми розглянули вище, то ми мали б створити дві різні таблиці стилів. На щастя, це нам не потрібно. Ми можемо створити в одній таблиці стилів два різних класи абзаців за допомогою селектора класу. Це буде виглядати так:
<html>
<head>
...
<style>
...
p.ask {
font-style: italic;
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 10pt;
color: gray;
margin-left: 15px;
}
p.answer {
font-family: 'Times New Roman', serif;
font-size: 12pt;
color: black;
}
...
</style>
...
</head>
<body>
...
<p class="ask">Питання журналіста</p>
<p class="answer">Відповідь</p>
...
</body>
</html>
В наведеному прикладі питання журналіста будуть відображатися шрифтом Arial сірого кольору, напівжирним курсивом, розміром 10 пунктів з відступом 15 пікселів від лівого краю сторінки. Відповіді ж будуть відображені шрифтом Times New Roman розміром 12 пунктів чорного кольору. Ви можете створювати будь-яку кількість класів для будь-яких елементів сторінки.
Селектор id
[ред.]Візьмемо наступний приклад. Наприклад, ви хочете створити на сторінці які-небудь унікальні предмети, до яких в майбутньому хочете звертатись за допомогою JavaScript. Можливо, ці елементи будуть повторюватися на інших сторінках, і ви хотіли б задати їм єдине оформлення за допомогою CSS. На цей випадок в таблицях стилів є можливість присвоєння унікальним елементам ідентифікаторів (id). Ось приклад призначення ідентифікатора і правил CSS таким елементам:
<html>
<head>
...
<style>
...
input#green {
color: green;
}
input#red {
color: red;
}
...
</style>
...
</head>
<body>
...
<form ...>
<p>Текст, введений в це поле, буде відображений зеленим кольором:
<input type="text" id="green" name="info1" size="20"></p>
<p>Текст, введений в це поле, буде відображений червоним кольором:
<input type="text" id="red" name="info2" size="20"></p>
</form>
...
</body>
</html>
Аналогічним чином унікальні ідентифікатори можуть бути призначені будь-якій кількості будь-яких елементів на сторінці.