CSS (Cascading Style Sheets, каскадні таблиці стилів) - це мова для опису і зміни зовнішнього вигляду елементів.
HTML використовується для визначення структури і семантики вмісту документа, а CSS - для його оформлення і позиціонування.
Є три способи додати CSS стилі до HTML-документу:
1. Інлайнові стилі:
Посилання на приклад ввідображення на web-сторінці
2. Вбудована таблиця стилів:
3. Зовнішня таблиця стилів:
Блок CSS-коду називається правилом, яке складається з селектора (selector) і групи оголошень (declaration) у фігурних дужках, та відповідає на ТРИ запитання:
- КОГО стилізуємо?
- ЩО стилізуємо?
- ЯК стилізуємо?
Селектор вказує браузеру на те, до яких елементів потрібно застосувати стилі з цього правила.
Кожне оголошення складається з пари {властивість: значення;}, де властивість і його значення розділяються двокрапкою з пробілом і обов'язково закінчуються крапкою з комою.
Вони описують, ЩО саме потрібно ЗРОБИТИ (або ЯК зробити) зі стилями елемента.
селектор {
властивість: значення;
властивість: значення;
властивість: значення;
}
Є два види CSS-селекторів:
1. Селектор елемента (тегу) описує, до яких елементів згідно вказанного тегу буде застосоване CSS-правило.
body {
color: blue;
background-color: gray;
}
2. Селектор класу - основний селектор в сучасній розробці. Використовується разом із глобальним атрибутом class.
Ім'я класу (назва класу) задається тільки англійською мовою. Використовуються тільки маленькі літери і тире і це обов'язково іменник, що описує цей елемент.
.basic-style {
color: blue;
background-color: gray;
}
| Синтаксис (приклади) | Селектор |
|---|---|
* {...} |
Універсальний - відповідає всім елементам розмітки |
a {...} |
Теговый селектор (селектор элементу) - відповідає назві html-елементу. Наприклад, звернення до посилання (тег <a>) |
#top {...} |
Селектор ідентифікатора - звернення до елемента через його ідентифікатор |
h1, h2, h3 {...} |
Селектор груп - дозволяє дати стилі декільком елементам одночасно |
body a {...} |
Селектор нащадку - дозволяє вибирати всі екземпляри певного елемента, які є нащадками певного батьківського елемента |
header > div {...} |
Дочірний селектор (селектор дитини) - дозволяє задати стилі дочірнім елементам, які йдуть одразу після батьківського тега |
header + main {...} |
Сусідній селектор - дає змогу звернутись до сусіднього елемента, який є безпосередньо наступним після вказаного елемента і якщо у них один батьківський елемент |
main ~ article {...} |
Споріднений селектор (родственный) - працює так само, як і сусідній, тільки вибирає всі наступні елементі після вказаного, які є дочірніми одного батьківського тега |
input[type="text"] {...} |
Селектор атрибуту - звернення до елемента через його атрибут |
Універсальний селектор:
Теговый селектор (селектор элементу):
Селектор ідентифікатора:
Селектор груп:
Селектор нащадку:
Дочірний селектор (селектор дитини):
Сусідній селектор:
Споріднений селектор (родственный):
Селектор атрибуту:
⚠ корисне джерело інформації ⚠
| Синтаксис (приклад) | Селектор |
|---|---|
.box {...} |
Селектор класу - звернення до елемента через його клас |
Композиція класів:
У елемента може бути декілька класів, тоді вони записуються через пробіл.
<element class="value1 value2 value3" >контент</element>
⚠ корисне джерело інформації ⚠
- Слова, які часто використовуються в CSS-класах
- Словник термінів з FrontEnd
- Слова та скорочення у CSS-класах
Модель кольору:
Є три основні кольори: червоний, зелений та синій. Змішуючи їх у різних пропорціях, можна отримати будь-який інший колір:
Колір тексту та колір фону:
За допомогою властивості {color: значення;} можна змінити колір тексту елемента.
Властивість {background-color: значення;} дозволяє змінити колір фону елемента.
body {
color: blue;
background-color: gray;
}
У цьому прикладі колір тексту всього відображеного контенту на web-сторінці зміниться на синій, а колір фону – на сірий.
Формати використання кольорів:
Hexadecimal формат (HEX-формат):
Цифрами цієї системи числення виступає набір цифр від 0 до 9 і латинські літери від A до F у нижньому або верхньому регістрі.
0 - найменша частка кольору
f - найбільша частка кольору
⚠ корисне джерело інформації ⚠
- Сервіс конвертації кольорів у різні формати
- Конвертація RGB кольорів в HEX кольори
- Набір зарезервованих слів для використання іменованих кольорів
Користувацькі властивості (CSS Custom Properties), також відомі як CSS-змінні - це контейнери для значень, визначені в CSS-документі з метою повторного використання.
Приклад використання CSS-змінної:
Приклад використання резервних значень кольорів:
