1 of 18

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

За навчальною програмою 2018 року

Урок 8

10

(11)

2 of 18

Актуалізація опорних знань і життєвого досвіду

Розділ 2 § 8

Розкажіть про свої досягнення з вивчення веб-технологій.

Я навчився...

Я зрозумів...

Мені вдалося зробити...

Я можу пояснити суть понять..

10�(11)

3 of 18

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

Розділ 2 § 8

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

10�(11)

4 of 18

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

Розділ 2 § 8

Особливості використання каскадних таблиць стилів:

Таблиці стилів дають змогу спростити процес створення сторінок і поліпшити їх зовнішній вигляд

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

10�(11)

5 of 18

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

Розділ 2 § 8

(Продовження…) Особливості використання каскадних таблиць стилів:

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

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

10�(11)

6 of 18

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

Розділ 2 § 8

Каскадні таблиці стилів дають змогу розділити етапи:

удосконалення зовнішнього вигляду сторінки

й

створення

html-файла

10�(11)

7 of 18

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

Розділ 2 § 8

Існують такі способи взаємодії таблиці стилів з html-файлом:

зв’язування

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

вбудовування (використання стильових класів)

10�(11)

8 of 18

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

Розділ 2 § 8

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

href="адреса таблиці стилів"

адреса розташування файлу

type="text/css"

опис типу файлу

rel="stylesheet"

вказівка на відношення основного файлу з файлом таблиці стилю.

10�(11)

9 of 18

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

Розділ 2 § 8

Імпорт – те саме, що і зв'язування, але взаємодію файлів забезпечують засобами тегу <style> і такої вказівки:

@import URL(адреса таблиці стилів)

10�(11)

10 of 18

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

Розділ 2 § 8

Вбудовування (використання стильових класів)

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

внутрішньою

вбудованою

або

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

Створює блок з текстом синього кольору: Blue.

10�(11)

11 of 18

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

Розділ 2 § 8

Правила в CSS працюють по каскаду ( пріоритету, вазі). Це дозволяє отримати передбачуваний результат у випадку, коли до одного елемента, одночасно, застосовуються декілька стильових правил.

Селектор (тег, id, клас) {

властивість 1: значення1;

властивість 2: значення2;

властивістьN: значенняN;

}

CSS-правило має наступну структуру:

Наприклад:

div p, #id:first-line {

background-color : red;

background-style : none;

}

10�(11)

12 of 18

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

Розділ 2 § 8

Кожне правило починається з селектора (покажчика), що вказує на ті html-елементи, до яких ми будемо застосувати css-правило. У блоці оголошень відбувається найцікавіше - ми встановлюємо правила відображення обраних нами елементів, визначаємо їх властивості - розмір, колір, грані, поля, положення на екрані і т.д.

Псевдоклас — це властивість, що дає змогу змінювати стиль елемента залежно від дій користувача, а також розташування елемента (тега) у загальному потоці документа, що додає у дизайн сторінки деяку динаміку і логіку.

10�(11)

13 of 18

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

Розділ 2 § 8

Деякі властивості стилів:

Назва властивості стилю

Значення (перелік або приклади)

Пояснення

background-color

red, green

колір тла

text-transform

none, uppercase, lowercase, capitalize

трансформація тексту

vertical-align

baseline, sub, super, top, text-top, middle, bottom,

text-bottom

вертикальне вирівнювання

letter-spacing

1 mm

відстань між символами

10�(11)

14 of 18

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

Розділ 2 § 8

(Продовження…) Деякі властивості стилів:

Назва властивості стилю

Значення (перелік або приклади)

Пояснення

font-weight

normal (400), bold (700), bolder, lighter, 100–900

жирність шрифту

font-family

arial, sans-serif

гарнітура

font-style

normal, italic, oblique

стиль шрифту

10�(11)

15 of 18

Запитання для рефлексії

Розділ 2 § 8

Які мої досягнення на цьому уроці?

Чи можу я пояснити, що таке каскадні таблиці стилів?

Чи можна сказати, що я наблизився до мети проекту зі створення власного сайта?

10�(11)

16 of 18

Домашнє завдання

Розділ 2 § 8

Продовжити вивчення властивостей стилів

10�(11)

17 of 18

Працюємо за комп’ютером

Розділ 2 § 8

10�(11)

18 of 18

Дякую за увагу!

За навчальною програмою 2018 року

Урок 8

10

(11)