CSS

Даний підручник спробує навчити вас використовувати каскадні таблиці стилів — важливий елемент веб-дизайну. Перед його прочитанням бажано мати певне уявлення про HTML.

Каскадні стилі сторінок (англ. Cascading Style Sheets) — спеціальна мова, що використовується для запису оформлення сторінок, написаних мовами розмітки даних.

Основні поняття

Стилі дають змогу спростити процес створення сторінок і поліпшити їхній зовнішній вигляд. Концепція стилів подібна до ідеї стилів, яка реалізована в сучасних текстових редакторах — текст спочатку вводять, а потім форматують, користуючись стилями. Застосування стилів дає змогу вводити на сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виглядом і розташуванням.

Стилі програміст зазвичай створює окремо від html-файлу. Під час створення html-файлу він концентрує увагу на змісті сторінки, а не на її зовнішньому вигляді, а під час створення таблиці стилів — навпаки. Отже, стилі дають змогу розмежувати етапи створення html-файлу й удосконалення зовнішнього вигляду сторінки.

Вважатимемо, що таблиця стилів уже створена. Тепер нам потрібно забезпечити взаємодію таблиці з html-файлом. Розглянемо три способи такої взаємодії: зв'язування, імпортування, вбудовування.

Зв'язування

Стилі створюють і зберігають в окремому файлі з розширенням ".css". Таку таблицю називають зовнішньою. Щоб зв'язати основний файл з таблицею стилів, у середині тега <head> застосовують одинарний тег <link> з інформацією про таблицю:

Імпортування

Це те ж саме, що і зв'язування, але взаємодію файлів забезпечують засобами тегу <style> і команди @import URL("адреса таблиці стилів")

Вбудовування

Якщо таблицю створено лише для деякого конкретного html-файлу, то її розташовують у цьому файлі за допомогою контейнера <style>. Таку таблицю стилів називають внутрішньою або вбудованою.

Також стиль можна вбудувати прямо в html-тег за допомогою атрибуту style, наприклад:

Це дасть нам блок з текстом червоного кольору: 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 Положення елемента за віссю zdisplay 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>

Аналогічним чином унікальні ідентифікатори можуть бути призначені будь-якій кількості будь-яких елементів на сторінці.

Źródło i licencja