Каскадні таблиці стилів

Викладач: остапчук Дмитро

 Каскадні таблиці стилів

Каскадні таблиці стилів CSS – спеціальна мова, що

використовується для опису зовнішнього виду сторінок
написаних мовою розмітки.

Ідея CSS – відокремити дизайн документа від його вмісту.

CSS відповідає за оформлення html коду, а HTML

– за вміст та логічну структуру.
 Порядок опису стилів CSS

Позиціонування Дисплей, відступи Оформлення тексту,

колір
 Складові частини CSS-правила

- селектор (strong) - вказівка, до яких тегів застосовуються зазначені у правилі стилі;

- пари властивість: значення; (декларація) розділені двокрапкою та обов'язково
закінчуються крапкою з комою. Обов'язково укладаються у фігурні дужки.

Селектор Блок об’яв

Декларація Декларація
Приклад:
strong { color: Font-size:
red; } 14pt;
Властивість Властивість
Значення Значення

Стиль (правило)
Способи підключення CSS-коду

За допомогою зовнішньої зв’язаної таблиці

<link href=”style.css” rel=”stylesheet” type=”text/css”>

Атрибут rel визначає відношення

між поточним документом та
файлом

type потрібен для того, щоб

правила стилю були вбудовані на
сторінку
Способи підключення CSS-коду

За допомогою внутрішньої таблиці стилів <style>

<style type=”text/css”>правило</style>
Способи підключення CSS-коду

За допомогою впроваджених правил стилів

Полягає у запровадженні стилю всередину HTML-
дискрипторів за допомогою атрибута style.
Способи підключення CSS-коду

Імпорт стильових правил - дозволяє вбудовувати в документ

таблицю стилів, розміщену на сервері за допомогою директиви
@import

Наразі цей спосіб не застосовується

через те, що сторінка не
завантажиться, доки браузер на
завантажить файл CSS повністю.
 Що може бути селектором?

У найпростішому випадку в якості селектора виступає ім'я тега.

За їх допомогою можна встановити стилі для всіх абзаців на

сторінці, для всіх посилань, заголовків першого рівня тощо. Такі
селектори містять ім'я тега без кутових дужок «<>».
 Що може бути селектором?

Класові селектори (class) складається з імені тега та імені класу,

з'єднаних точкою «.». Він дозволяє задати для одного елемента різні
правила форматування.

Для тегу h1 визначений клас red зі Приклад:

шрифтом червоного кольору.
Тоді в тексті можна послатись на
відповідний клас у параметрі <h1
class=“red">текст</h1>
 Що може бути селектором?

Якщо клас повинен використовуватися для ВСІХ елементів

документа, то конкретний дескриптор не вказується. Ім’я після крапки
завжди починається з латинської букви.

Приклад:
 Що може бути селектором?

ID селектори використовується для вибору одного HTML-елемента з

унікальним атрибутом id. Перед назвою записується символ #

Після визначення правила Приклад:

#red {color:red}
усі елементи з тегами, що містять
атрибут id="red", на сторінці будуть
відтворюватись червоним кольором.
 Що може бути селектором?

Контекстні селектори складаються з простих селекторів, розділених

пробілом. Застосовуються до елементів, зв'язаних спадковими стосунками
(тобто до вкладених елементів) і задають властивості тільки конкретного
дочірнього елемента.

Завдяки цьому можна визначити різні Приклад:

стилі для різних послідовностей тегів. На
прикладі елементи в нумерованому списку
(OL) матимуть один стиль, а в
ненумерованому (UL) – інший.
 Що може бути селектором?

Псевдокласи та псевдоелементи - це особливі класи й елементи, відсутні в

тексті HTML-документа, але присутні в CSS і автоматично визначувані
підтримувальними CSS браузерам. Дозволяє визначити особливий стан
селектора.

Приклад:
Область розміщення елементів
 Властивості шрифту

ВЛАСТИВІСТЬ ПРИЗНАЧЕННЯ ПРИКЛАД

Font-family Пріоритетний список імен шрифтів Body {font-family: “Times New

Roman”, serif}

Font-style Стиль шрифту: normal, italic, oblique (нахилений) h1 {font-style: italic}

Font-weight Товщина шрифту: normal, bold, числові значення від 100 h1 {font-weight: bold}
до 900
Font-size Розмір шрифту (pt, px,%) P{font-size:10pt}

Font Одночасне встановлення властивостей шрифту P{font: italic 12pt serif}

font-variant Особливі великі літери – normal, small-caps p {font-variant: small-caps}

 Властивості тексту

ВЛАСТИВІСТЬ ПРИЗНАЧЕННЯ ПРИКЛАД

line-height Міжрядковий інтервал: normal, множник, точно, % line-height: normal,
line-height: 1.5, line-height: 12px,
line-height: 120%
Letter-spacing Встановлює відстань між літерами (normal, значення в рх)  
Text-decoration Тип підкреслення (overline (верхнє підкреслення), h1{text-decoration: underline}
underline (нижнє), line-through (закреслений), blink -
блимання, none - без оформлення
Text-align Вирівнювання тексту (left, right, center, justify) h2{text-align: center}
Vertical-align Вирівнювання по вертикалі (top, middle, bottom) h2{vertical-align: middle}
Text-transform Текст у верхньому регістрі (uppercase) або нижньому h2 {text-transform: uppercase}
(lowercase), capitalize - починати з великої літери, none-
відмова від параметра
text-indent Відступ першого рядка (точно,%) text-indent:15px; text-indent:10%
Word-spacing Відстань між словами (normal, числове значення в рх)  
 Властивості елементів для установки кольору, фону

ВЛАСТИВІСТЬ ПРИЗНАЧЕННЯ ПРИКЛАД

Color Встановлює колір тексту P { color: #330000 }

background-color Колір фону BODY { background-color: #6699FF }

background-image Фоновий рисунок (URL, none) BODY { background-image: url (bg.gif)}

background-repeat Повторюваність фонового малюнка BODY { background-image: url (bg.gif)

(repeat, repeat-x, repeat-y, no-repeat) background-repeat: repeat-y }
 Властивості області розміщення елемента

ВЛАСТИВІСТЬ ПРИЗНАЧЕННЯ ПРИКЛАД

Margin Значення полів (вгору, вправо, вниз, вліво) Body {margin:10 10 20 20}

Padding Відступ до елементу Img {padding: 5 5 5 7}

Border-width Ширина межі Img (border-width :10}

Border-color Колір межі Img (border – color: blue}

Border-style Визначає типи меж - none, dotted, dashed, solid, p {border-style: solid;}
double (відсутня, пунктирна, штрихова, звичайна,
подвійна)
 Властивості елементів для роботи зі списками

ВЛАСТИВІСТЬ ПРИЗНАЧЕННЯ ПРИКЛАД

list-style-type Вид маркера: disc, circle, square LI {list-style: circle;}LI {list-style:

upper-alpha;}
використовуються для створення
маркованого списку, а decimal, lower-roman,
upper-roman, lower-alpha, upper-alpha, none –
для нумерованого
list-style-image Встановлює символом маркера будь-яку LI {list-style-image:
картинку. (none, URL) url(check.gif)}
list-style position Вибір положення маркера щодо блоку рядків LI {list-style-position:
тексту: outside (текст під маркером-відступ), inside;}
inside (текст під текстом-виступ)  
 Властивості позиціонування

ВЛАСТИВІС ПРИЗНАЧЕННЯ ПРИКЛАД

ТЬ
Display Визначає, чи буде показаний За замовчуванням показується
елемент Block - Елемент відображається як блоковий
None -не показується і місце під нього не відводиться
inline – елемент відображається у рядок;
Position Спосіб позиціонування елемента Absolute – елемент видаляється із звичайного потоку елементів
щодо вікна браузера документа, і його положення задається атрибутами left, top, right та
bottom щодо краю вікна браузера
Fixed – схожий на absolute, але на відміну від нього прив'язується до
зазначеної властивості left, top, right та bottom точки на екрані і не
змінює свого положення при прокручуванні
Relative – Положення елемента встановлюється щодо його вихідного
місця
Static - Елементи відображаються як завжди. Використання
властивостей left, top, right та bottom не призводить до будь-яких
результатів.
Inherit - успадковує значення батька

Float Обтікання елемента та його None – виведення елемента без обтікання

розташування Left – розташований ліворуч з обтіканням текстом
Right – розташований праворуч з обтіканням текстом
Дякую за увагу!

Викладач: Дмитро Остапчук