Пошук уроків, статей та іншого контенту
Організуєте файли HTML і CSS у зрозумілу структуру та підготуєте простий проєкт до подальшої роботи.
Структура проєкту — це зрозуміле розташування файлів і папок. Вона допомагає:
швидко знаходити потрібний файл;
правильно підключати CSS;
не плутати зображення, стилі та HTML;
легко розширювати проєкт у майбутньому;
уникати довгих і незрозумілих шляхів до файлів.
Для невеликого HTML-проєкту достатньо окремо зберігати HTML-файли, CSS-файли та додаткові ресурси.
Створімо папку проєкту з назвою my-project:
my-project/
├── index.html
├── css/
│ └── style.css
└── images/index.html — головна сторінка проєкту.
css/ — папка для CSS-файлів.
css/style.css — основний файл стилів.
images/ — папка для зображень, які можуть знадобитися пізніше.
Назви файлів і папок краще писати:
латиницею;
без пробілів;
у нижньому регістрі;
з дефісами між словами, наприклад about-page.html.
Такі назви зменшують ризик помилок під час підключення файлів.
Файл index.html є точкою входу до простого проєкту. Додамо до нього базову HTML-структуру:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мій проєкт</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="site-header">
<h1>Мій перший проєкт</h1>
<p>HTML і CSS працюють разом.</p>
</header>
<main class="content">
<section class="card">
<h2>Про проєкт</h2>
<p>
Ця сторінка має окремі файли для структури та стилів.
</p>
</section>
</main>
</body>
</html>У цьому файлі:
<!DOCTYPE html> повідомляє браузеру, що використовується HTML5;
<head> містить службову інформацію про сторінку;
<body> містить видимий вміст;
<link rel="stylesheet" href="css/style.css"> підключає CSS-файл;
href="css/style.css" означає: у поточній папці знайти папку css, а в ній — файл style.css.
Тепер створімо файл css/style.css:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
color: #222;
background-color: #f2f4f7;
}
.site-header {
padding: 40px 20px;
text-align: center;
color: white;
background-color: #2457a6;
}
.site-header h1 {
margin: 0 0 12px;
}
.site-header p {
margin: 0;
}
.content {
max-width: 700px;
margin: 0 auto;
padding: 32px 20px;
}
.card {
padding: 24px;
background-color: white;
border: 1px solid #d9dee7;
border-radius: 8px;
}
.card h2 {
margin-top: 0;
}CSS-файл містить лише правила стилів. Він не повинен містити HTML-теги.
Кожне правило складається із:
селектора — наприклад, .card;
властивостей — наприклад, padding;
значень — наприклад, 24px.
.card {
padding: 24px;
}Це правило додає внутрішній відступ для елемента з класом card.
Шлях до файлу вказується відносно файлу, у якому він записаний.
У нашій структурі:
my-project/
├── index.html
└── css/
└── style.cssТому в index.html використовується:
<link rel="stylesheet" href="css/style.css">Шлях читається так:
css/ — перейти до папки css;
style.css — відкрити файл style.css.
Якщо HTML-файл знаходиться всередині іншої папки, шлях змінюється. Наприклад:
my-project/
├── pages/
│ └── about.html
└── css/
└── style.cssЩоб підключити CSS до pages/about.html, потрібно спочатку вийти з папки pages за допомогою ..:
<link rel="stylesheet" href="../css/style.css">Однак на початку достатньо працювати з головним index.html у корені проєкту.
HTML і CSS мають різні завдання.
HTML визначає, що є на сторінці:
<h1>Заголовок</h1>
<p>Абзац тексту</p>
<button>Натиснути</button>CSS визначає, як ці елементи виглядають:
h1 {
color: #2457a6;
}
button {
padding: 10px 16px;
color: white;
background-color: #2457a6;
border: 0;
border-radius: 4px;
}Не варто додавати великі блоки CSS безпосередньо в index.html через <style>, якщо для цього вже є окремий файл. Окремий style.css робить проєкт охайнішим і спрощує подальше редагування.
Для зображень можна використовувати папку images:
my-project/
├── index.html
├── css/
│ └── style.css
└── images/
└── logo.pngЯкщо зображення використовується в index.html, шлях буде таким:
<img src="images/logo.png" alt="Логотип проєкту">Атрибут alt містить текстовий опис зображення. Він потрібен, якщо зображення не завантажилося або користувач використовує засіб читання з екрана.
Якщо зображення використовується у файлі css/style.css, шлях рахується вже від папки css, а не від кореня проєкту:
.site-header {
background-image: url("../images/logo.png");
}Тут .. означає перехід із папки css до кореневої папки проєкту.
Після створення файлів:
Переконайтеся, що index.html і папка css знаходяться на одному рівні.
Перевірте назву CSS-файлу — style.css.
Відкрийте index.html у браузері.
Перевірте, чи застосувалися кольори, відступи та інші стилі.
Якщо стилі не працюють, відкрийте HTML-код і перевірте шлях у href.
Після змін у CSS збережіть файл і оновіть сторінку в браузері.
Неправильно:
<link rel="stylesheet" href="style.css">Такий шлях працює лише тоді, коли style.css знаходиться поруч із index.html.
Якщо файл розташований у папці css, потрібно написати:
<link rel="stylesheet" href="css/style.css">Операційні системи можуть по-різному обробляти великі та малі літери. Назви style.css, Style.css і STYLE.CSS можуть вважатися різними.
Назва у файловій структурі та шлях у HTML мають збігатися:
<link rel="stylesheet" href="css/style.css">css/
└── style.cssЯкщо в HTML написано:
<link rel="stylesheet" href="css/style.css">але файл лежить у корені:
my-project/
├── index.html
├── style.css
└── css/браузер не знайде потрібний файл у папці css.
relДля підключення таблиці стилів потрібно вказати:
<link rel="stylesheet" href="css/style.css">Атрибут rel="stylesheet" повідомляє браузеру, що підключений файл є таблицею стилів.
Назви на кшталт Мій проєкт або my styles можуть створювати незручності в шляхах. Краще використовувати:
my-project/
css/
style.cssПісля виконання прикладу проєкт має виглядати так:
my-project/
├── index.html
├── css/
│ └── style.css
└── images/index.html містить структуру сторінки, css/style.css — її оформлення, а images/ призначена для зображень.
Головний HTML-файл простого проєкту зазвичай називається index.html.
CSS-файли зручно зберігати в окремій папці css.
CSS підключається до HTML за допомогою елемента <link>.
Шлях до файлу рахується від папки поточного HTML-файлу.
Папку images можна використовувати для зображень.
Назви файлів краще писати латиницею, без пробілів і в нижньому регістрі.
HTML відповідає за структуру, а CSS — за зовнішній вигляд.