Пошук уроків, статей та іншого контенту
Вивчіть синтаксис CSS: правила, селектори, властивості, значення, коментарі та способи підключення стилів до HTML.
CSS (Cascading Style Sheets) — мова стилів, яка визначає вигляд HTML-елементів: колір, розмір, відступи, шрифт, фон та інші властивості.
CSS складається з правил. Кожне правило вказує:
які HTML-елементи потрібно стилізувати;
які властивості до них застосувати;
які значення мають ці властивості.
Базовий синтаксис CSS має такий вигляд:
селектор {
властивість: значення;
}Наприклад:
p {
color: blue;
font-size: 18px;
}У цьому прикладі:
p — селектор;
color і font-size — властивості;
blue і 18px — значення;
фігурні дужки {} містять декларації стилів;
двокрапка : розділяє властивість і значення;
крапка з комою ; завершує декларацію.
Одне правило може містити багато декларацій:
h1 {
color: darkgreen;
font-size: 32px;
text-align: center;
}Кожну декларацію зазвичай записують з нового рядка. Це не обов’язково для роботи CSS, але так код легше читати.
Селектор визначає, до яких HTML-елементів застосовується правило.
Селектор елемента вибирає всі елементи певного типу:
p {
color: #333;
}
h1 {
font-size: 32px;
}Ці правила застосовуються до всіх елементів <p> і <h1> відповідно.
Наприклад:
<h1>Заголовок</h1>
<p>Перший абзац.</p>
<p>Другий абзац.</p>Обидва абзаци отримають сірий колір тексту.
Клас дає змогу застосувати стилі до вибраної групи елементів.
У CSS перед назвою класу ставлять крапку:
.important {
color: crimson;
font-weight: bold;
}У HTML клас додають через атрибут class:
<p class="important">Важливе повідомлення</p>
<p>Звичайний абзац</p>Стиль буде застосовано лише до елемента з класом important.
Один клас можна використовувати для кількох елементів:
<p class="note">Перша примітка</p>
<p class="note">Друга примітка</p>Ідентифікатор призначений для одного унікального елемента. У CSS перед назвою ідентифікатора ставлять символ #:
#main-title {
color: navy;
}В HTML:
<h1 id="main-title">Головний заголовок</h1>Значення id має бути унікальним на сторінці. Для стилізації групи елементів зазвичай використовують клас, а не ідентифікатор.
Універсальний селектор * вибирає всі елементи:
* {
box-sizing: border-box;
}Такий селектор часто використовують для базових стилів сторінки.
Якщо кілька селекторів мають однакові стилі, їх можна об’єднати через кому:
h1,
h2,
h3 {
font-family: Arial, sans-serif;
color: #222;
}Те саме правило застосовується до всіх заголовків h1, h2 і h3.
Пробіл між селекторами вибирає елемент, який знаходиться всередині іншого:
.card p {
color: #555;
}Це правило застосовується до всіх <p> усередині елемента з класом card:
<article class="card">
<p>Цей абзац буде сірим.</p>
</article>
<p>Цей абзац не підпадає під правило.</p>Властивість описує, що саме потрібно змінити, а значення визначає, як саме це зробити.
button {
background-color: steelblue;
color: white;
padding: 10px 16px;
}У цьому прикладі:
background-color задає колір фону;
color задає колір тексту;
padding задає внутрішні відступи;
steelblue, white та 10px 16px — значення цих властивостей.
Властивості та їхні значення розділяються двокрапкою:
color: green;Декларації завершуються крапкою з комою:
color: green;
font-size: 20px;Крапку з комою після останньої декларації технічно можна не писати, але краще залишати її. Так простіше додавати нові властивості та уникати помилок.
Для розмірів часто використовують одиниці:
.title {
font-size: 2rem;
margin: 16px;
width: 300px;
}Поширені одиниці:
px — пікселі;
% — відсоток від розміру батьківського елемента;
em — відносно розміру шрифту батьківського елемента;
rem — відносно базового розміру шрифту документа;
vh і vw — відсоток висоти та ширини вікна браузера.
Деякі значення не потребують одиниць:
.text {
font-weight: bold;
opacity: 0.8;
}Колір можна записати кількома способами:
.text {
color: red;
background-color: #f0f0f0;
}Поширені формати:
назва кольору: red, white, navy;
шістнадцятковий запис: #ff0000;
скорочений шістнадцятковий запис: #f00;
функція rgb(): rgb(255, 0, 0).
Коментарі допомагають пояснити код. Браузер ігнорує їх під час застосування стилів.
Коментар починається з /* і завершується */:
/* Основні стилі заголовка */
h1 {
color: darkblue;
}
/*
Цей блок стилів
призначений для картки
*/
.card {
padding: 20px;
}Коментарі можна використовувати для тимчасового вимкнення декларації:
.button {
color: white;
/* background-color: blue; */
}Існує три основні способи додати CSS до HTML:
зовнішній файл;
внутрішні стилі в елементі <style>;
вбудовані стилі через атрибут style.
CSS зберігають в окремому файлі з розширенням .css, наприклад styles.css.
Файл styles.css:
body {
font-family: Arial, sans-serif;
color: #222;
}
h1 {
color: darkblue;
}Підключення файлу в HTML виконується за допомогою елемента <link> у секції <head>:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Сторінка зі стилями</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Моя сторінка</h1>
<p>Текст сторінки.</p>
</body>
</html>Атрибут rel="stylesheet" повідомляє браузеру, що підключений файл є таблицею стилів.
Атрибут href містить шлях до CSS-файлу.
Якщо HTML і CSS-файл розташовані в одній папці, достатньо написати:
<link rel="stylesheet" href="styles.css">Зовнішній файл є найзручнішим способом для реальних сайтів, оскільки один CSS-файл можна підключити до кількох HTML-сторінок.
CSS можна записати безпосередньо в HTML-документі всередині елемента <style>. Зазвичай <style> розміщують у <head>:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Внутрішні стилі</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: seagreen;
}
</style>
</head>
<body>
<h1>Заголовок сторінки</h1>
</body>
</html>Такий спосіб зручний для невеликої демонстраційної сторінки або навчального прикладу.
Стиль можна задати безпосередньо в HTML-елементі за допомогою атрибута style:
<p style="color: crimson; font-weight: bold;">
Важливий текст
</p>У цьому випадку CSS записується як значення атрибута style.
Вбудовані стилі можуть бути корисними для швидкої перевірки, але для великих сторінок їх краще не використовувати. Вони змішують структуру HTML зі стилями та ускладнюють подальшу зміну оформлення.
Нижче наведено повний HTML-документ із внутрішніми стилями:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Синтаксис CSS</title>
<style>
/* Базові стилі сторінки */
body {
font-family: Arial, sans-serif;
color: #222;
background-color: #f4f4f4;
}
/* Стиль заголовка за назвою елемента */
h1 {
color: darkblue;
text-align: center;
}
/* Стиль елемента з класом */
.card {
max-width: 400px;
margin: 20px auto;
padding: 20px;
background-color: white;
border: 1px solid #ddd;
}
/* Стиль абзаців усередині картки */
.card p {
color: #555;
line-height: 1.5;
}
/* Стиль елемента з ідентифікатором */
#special-text {
color: crimson;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Вивчаємо CSS</h1>
<article class="card">
<p>Це звичайний текст у картці.</p>
<p id="special-text">Це спеціальний текст.</p>
</article>
</body>
</html>Щоб перевірити приклад:
створіть файл index.html;
вставте в нього код;
відкрийте файл у браузері;
змініть значення властивостей і перегляньте результат.
Неправильно:
p {
color: blue
font-size: 18px;
}Правильно:
p {
color: blue;
font-size: 18px;
}CSS-правило має починатися з фігурної дужки { і завершуватися }:
p {
color: green;
}Круглі дужки використовують для функцій, наприклад rgb().
HTML:
<p class="note">Примітка</p>Неправильно:
note {
color: orange;
}Правильно:
.note {
color: orange;
}# перед ідентифікаторомHTML:
<p id="message">Повідомлення</p>Правильно:
#message {
color: purple;
}Якщо файл має таку структуру:
project/
├── index.html
└── css/
└── styles.cssУ index.html потрібно вказати:
<link rel="stylesheet" href="css/styles.css">Якщо шлях неправильний, браузер не зможе завантажити стилі.
Неправильно:
// Це не стандартний CSS-коментарПравильно:
/* Це CSS-коментар */Створіть HTML-сторінку, яка містить:
заголовок;
два абзаци;
елемент із класом card;
елемент з ідентифікатором main-title.
Додайте CSS, який:
змінює колір заголовка;
задає розмір шрифту для абзаців;
додає фон і внутрішній відступ для .card;
виділяє елемент #main-title;
містить щонайменше один CSS-коментар.
CSS-правило складається із селектора та блоку декларацій.
Декларація має вигляд властивість: значення;.
Селектор елемента вибирає всі елементи певного типу.
Селектор класу починається з крапки: .card.
Селектор ідентифікатора починається з #: #main-title.
Селектори можна групувати через кому.
Коментарі в CSS записують між /* і */.
CSS можна підключити як зовнішній файл, через <style> або через атрибут style.
Для більшості проєктів найзручніше використовувати окремий CSS-файл.