Перейти до вмісту

CSS

завершено на 25%
Матеріал з Вікіпідручника

Даний підручник спробує навчити вас використовувати каскадні таблиці стилів — важливий елемент веб-дизайну. Перед його прочитанням бажано мати певне уявлення про 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>

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