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-attachement | fixed, scroll | Тло фіксоване чи прокручуєтся |
| Background-color | red, green, #343434 | Колір тла |
| Background-image | URL("Адреса графічного файлу для тла") | |
| Background-repeat | repeat, repeat-x, repeat-y, no-repeat | Повторює зображення |
| Border-color | red, green, #343434 | Колір рамки |
| Border-style | none, dotted, dashed, soild, double, groove, ridge, inset, outset | Стиль рамки |
| Border-width | 2mm,3mm | Товщина рамки |
| Font-family | Arial, serif | Назва шрифта |
| Font-size | normal, italic, oblique | Розмір шрифта |
| Font-variant | small-caps | Вигляд курсивів |
| Font-weight | normal,bold,bolder | Жирність шрифта |
| Word-spacing | 1mm,2mm | Відстань між словами |
| Letter-spacing | 1mm | Відстань між символами |
| Line-height | 2mm,4mm | Відстань між рядками |
| Text-align | Left, right, center, justify | Вирівнювання тексту |
| Text-decorate | none, underline, blinkoverline, line-throught | Оформлення тексту |
| Text-indent | 2cm | Абзацний відступ |
| Margin-top | 4mm | Відступ зверху |
| Margin-right | 4mm | Відступ справа |
| Margin-bottom | 4mm | Відступ знизу |
| Margin-left | 4mm | Відступ зліва |
| Height | 4cm | Висота елемента |
| Width | 14cm | Ширина елемента |
| Float | none, left, right | Обтікання об'єкта текстом |
| Сolor | red, green, #343434 | Колір елемента |
| Vertical-allign | top, super, bottom, middle | Вертикальне вирівнювання |
| List-style-image | URL("Адреса графічного файлу маркера списку") | |
| List-style-position | inside, outside | Позиція маркера |
| List-style-type | disc, circle, square, lower-roman тощо | Вигляд маркера(диск, круг, квадрат) |
Теги <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: 12 pt; 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>
Аналогічним образом унікальні ідентифікатори можуть бути назначені будь-якій кількості будь-яких елеменів на сторінці.
