Пошук уроків, статей та іншого контенту
Підключите зовнішню таблицю стилів до HTML-документа та застосуєте перші CSS-правила.
CSS описує зовнішній вигляд HTML-елементів: кольори, шрифти, відступи, розміри та інші властивості.
Зовнішня таблиця стилів — це окремий файл із розширенням .css, який підключається до HTML-документа. Такий підхід має переваги:
HTML відповідає за структуру сторінки;
CSS відповідає за її оформлення;
один CSS-файл можна підключити до кількох HTML-сторінок;
зміни стилів зручно робити в одному місці.
Створимо таку структуру:
project/
├── index.html
└── styles.cssФайли index.html і
styles.cssЩоб підключити CSS-файл, використовуйте елемент <link> усередині елемента <head>:
<link rel="stylesheet" href="styles.css">Атрибути мають таке призначення:
rel="stylesheet" повідомляє браузеру, що підключений файл є таблицею стилів;
href="styles.css" указує шлях до CSS-файлу.
Повний 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="styles.css">
</head>
<body>
<h1>Моя перша CSS-сторінка</h1>
<p>Цей текст оформлено за допомогою зовнішньої таблиці стилів.</p>
<p class="note">CSS змінює зовнішній вигляд HTML-елементів.</p>
</body>
</html>Тепер створіть файл styles.css:
body {
background-color: #f2f4f8;
color: #222;
font-family: Arial, sans-serif;
margin: 40px;
}
h1 {
color: #1769aa;
font-size: 36px;
}
p {
font-size: 18px;
line-height: 1.5;
}
.note {
background-color: #fff;
border-left: 4px solid #1769aa;
padding: 12px;
}Відкрийте файл index.html у браузері. Сторінка матиме світлий фон, синій заголовок і оформлений абзац із класом note.
CSS-правило складається із селектора та блоку декларацій:
селектор {
властивість: значення;
}Наприклад:
h1 {
color: blue;
}У цьому прикладі:
h1 — селектор;
color — властивість;
blue — значення;
color: blue; — декларація.
Крапка з комою ; наприкінці декларації відокремлює її від наступної декларації. Її варто ставити навіть після останньої властивості в блоці.
Селектор елемента застосовує стилі до всіх елементів відповідного типу:
p {
color: #444;
}Це правило змінить колір тексту всіх елементів <p>.
Клас дає змогу застосувати стиль лише до певних елементів. У CSS перед назвою класу ставлять крапку:
.note {
color: #1769aa;
}У HTML цей клас додається через атрибут class:
<p class="note">Важливе повідомлення.</p>Один і той самий клас можна використати для кількох елементів:
<p class="note">Перше повідомлення.</p>
<p class="note">Друге повідомлення.</p>Ідентифікатор позначається символом #:
#main-title {
color: darkgreen;
}<h1 id="main-title">Заголовок сторінки</h1>Ідентифікатор має бути унікальним у межах HTML-документа. Для звичайного повторного оформлення елементів частіше використовують класи.
В одному правилі можна вказати багато властивостей:
button {
background-color: #1769aa;
border: none;
color: white;
cursor: pointer;
font-size: 16px;
padding: 10px 16px;
}Тут для кнопки задано:
колір фону через background-color;
відсутність рамки через border: none;
колір тексту через color;
розмір тексту через font-size;
внутрішні відступи через padding.
Додамо кнопку до HTML:
<button type="button">Натиснути</button>Якщо CSS-файл розташований в іншій папці, у href потрібно вказати правильний шлях.
Наприклад, структура:
project/
├── index.html
└── css/
└── styles.cssТоді підключення матиме такий вигляд:
<link rel="stylesheet" href="css/styles.css">Якщо HTML-файл розташований у папці pages, а CSS — в іншій папці на рівень вище:
project/
├── css/
│ └── styles.css
└── pages/
└── index.htmlПотрібно піднятися на один рівень за допомогою ..:
<link rel="stylesheet" href="../css/styles.css">Якщо стилі не застосувалися, тимчасово додайте до CSS просте правило:
body {
background-color: yellow;
}Якщо фон сторінки не став жовтим, перевірте:
Чи правильно названо CSS-файл.
Чи збігається шлях у href із розташуванням файлу.
Чи написано rel="stylesheet".
Чи немає помилок у назві класу.
Чи збережено обидва файли перед оновленням сторінки.
<link rel="stylesheet" href="style.css">Якщо файл насправді називається styles.css, браузер не знайде його. Назва в href має точно відповідати назві файлу.
<link> у <body>Підключайте таблицю стилів у <head>:
<head>
<link rel="stylesheet" href="styles.css">
</head>Неправильно:
note {
color: blue;
}Правильно:
.note {
color: blue;
}У HTML клас записується без крапки:
<p class="note">Текст</p>CSS:
.message {
color: green;
}HTML:
<p class="note">Текст</p>Це правило не застосує стиль, оскільки назви класів різні. Назва в CSS і значення class в HTML мають збігатися.
Правильний запис:
p {
color: #333;
font-size: 18px;
}Створіть файли index.html і styles.css.
Підключіть styles.css до HTML-документа.
Додайте заголовок, два абзаци та кнопку.
Задайте для сторінки колір фону й шрифт.
Змініть колір заголовка.
Створіть клас highlight і застосуйте його до одного з абзаців.
Оформіть кнопку за допомогою кількох CSS-властивостей.
Зовнішня таблиця стилів зберігається в окремому файлі .css.
CSS підключається до HTML через <link rel="stylesheet" href="...">.
Селектор визначає, до яких елементів застосовуються стилі.
Селектор елемента записується як p, селектор класу — як .class-name, а селектор ідентифікатора — як #id-name.
CSS-декларація має формат властивість: значення;.
Шлях у href має відповідати фактичному розташуванню CSS-файлу.