НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PYTHON PHP JAVA KOTLIN GO C C++ C# Django HOW TO W3.CSS AI БІЛЬШЕ 🔍 ◑ КНИГИ ДОВІДНИКИ ВПРАВИ
HTML5. Уроки для початківців. W3Schools українською

En Es De

HTML Стилі - CSS

❮ Prev Next ❯

Мода виходить з моди, а стиль - ніколи! І це правда!..
Коко Шанель

CSS розшифровується як Cascading Style Sheets - каскадні таблиці стилів.

CSS економить багато роботи. Він може керувати макетом декількох вебсторінок одночасно.

CSS = Стилі та кольори

Маніпуляція текстом
Кольори, Блоки

В цій темі:

Стилізація HTML за допомогою CSS. Каскадні таблиці стилів

CSS розшифровується як Cascading Style Sheets - Каскадна таблиця стилів.

CSS описує, як HTML елементи мають відображатись на екрані, папері або інших носіях..

CSS економить багато часу. CSS може контролювати макет кількох веб-сторінок одночасно.

CSS можна додати до елементів HTML трьома способами:

  • Inline (вбудований або рядковий) - використовуючи атрибут style в HTML елементах
  • Internal (внутрішній) - використовуючи елемент <style> в разділі <head>
  • External (зовнішній) - за допомогою зовнішнього файлу CSS

Найбільш розповсюджений спосіб додати CSS - це зберігати стилі в окремих файлах CSS. Тим не менше, тут ми будемо використовувати вбудований і внутрішній стиль, тому що для навчання це легше продемонструвати, і вам простіше буде спробувати написання CSS-коду самостійно.

Порада: Ви можете дізнатись більше про CSS в CSS Підручнику на нашому сайті W3Schools українською.

Inline CSS - Вбудований (рядковий) стиль

Вбудований CSS використовується для застосування унікального стиля до одного HTML элемента.

Вбудований CSS використовує атрибут style HTML елемента.

Цей приклад встановлює колір тексту елемента <h1> в синій:

Приклад

<h1 style="color:blue;">Це синій заголовок</h1>
Спробуйте самі »

Internal CSS - Внутрішній стиль

Внутрішній CSS використовується для визначення стилю окремої HTML сторінки.

Внутрішній CSS вказується в розділі <head> HTML сторінки за допомогою елемента <style>:

Приклад

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Спробуйте самі »

External CSS - Зовнішній стиль

Зовнішня таблиця стилів використовується для визначення стилю для багатьох HTML-сторінок.

За допомогою зовнішньої таблиці стилів ви можете змінити зовнішній вигляд всього веб-сайту, змінивши лише один файл!

Щоб використовувати зовнішню таблицю стилів, додайте посилання на неї в розділі <head> HTML сторінки:

Приклад

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Це заголовок</h1>
<p>Це параграф.</p>

</body>
</html>
Спробуйте самі »

Зовнішню таблицю стилів також, як і HTML-код, можна написати в будь-якому текстовому редакторі. Файл не повинен містити HTML-код і повинен бути збережений з розширенням .css.

Ось як виглядає файл "styles.css":

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Примітка: Детальніше про текстові редактори ви можете прочитати в розділі HTML Редактори на нашому сайті W3Schools українською.

CSS Шрифти

CSS властивість color визначає колір тексту, який буде використовуватися.

CSS властивість font-family визначає сімейство шрифту, яке буде використовуватися.

CSS властивість font-size визначає розмір тексту, який буде використовуватися.

Приклад

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>Це заголовок</h1>
<p>Це параграф.</p>

</body>
</html>
Спробуйте самі »

CSS Border - Межа

CSS властивість border визначає межу навколо HTML елемента:

Приклад

p {
  border: 1px solid powderblue;
}
Спробуйте самі »

CSS Padding - Внутрішній відступ

CSS властивість padding визначає відступ (пробіл) між текстом і межею:

Приклад

p {
  border: 1px solid powderblue;
  padding: 30px;
}
Спробуйте самі »

CSS Margin - Зовнішній відступ

CSS властивість margin визначає простір (пробіл) поза межею (зовнішній відступ):

Приклад

p {
  border: 1px solid powderblue;
  margin: 50px;
}
Спробуйте самі »

Атрибут ідентифікатора - id

Щоб вказати конкретний стиль для одного визначеного елемента, додайте атрибут id до елемента:

<p id="p01">Я відрізняюсь</p>

потім вкажіть стиль для елемента з визначеним id:

Приклад

#p01 {
  color: blue;
}
Спробуйте самі »

Ідентифікатор id вказується в css за допомогою символу # (решітка) і назва ідентифікатора.

Примітка: Ідентифікатор (id) елемента повинен бути унікальним на сторінці, тому селектор ідентифікаторів використовується для вибору одного унікального елемента!

Атрибут класу - class

Щоб вказати стиль для визначених типів елементів, додайте атрибут class до елемента:

<p class="error">Я відрізняюсь</p>

Потім вкажіть стиль для елементів з певним класом:

Приклад

p.error {
  color: red;
}
Спробуйте самі »

Клас (class) вказується в css за допомогою символу . (крапка) і назва класу.

Зовнішні посилання

На зовнішні таблиці стилів можна посилатися за повним URL або по шляху відносно поточної вебсторінки.

У цьому прикладі використовується повна URL-адреса для посилання на таблицю стилів:

Приклад

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Спробуйте самі »

Цей приклад посилається на таблицю стилів, розташовану в папці html на поточному веб-сайті:

Приклад

<link rel="stylesheet" href="/html/styles.css">
Спробуйте самі »

Цей приклад посилається на таблицю стилів, розташовану в тій же папці, що і поточна сторінка:

Приклад

<link rel="stylesheet" href="styles.css">
Спробуйте самі »

Ви можете прочитати більше про шляхи до файлів в розділі HTML Шляхи до файлів на нашому сайті W3Schools українською.

Резюме розділу

  • Використовуйте HTML атрибут style для вбудованого стилю
  • Використовуйте HTML елемент <style> для визначення внутрішнього CSS
  • Використовуйте HTML елемент <link> для посилання на зовнішній файл CSS
  • Використовуйте HTML елемент <head>, щоб зберігати елементи <style> та <link>
  • Використовуйте CSS властивість color для установки кольору тексту
  • Використовуйте CSS властивість font-family для установки сімейства шрифтів тексту
  • Використовуйте CSS властивість font-size для установки розміру тексту
  • Використовуйте CSS властивість border для установки меж єлементів
  • Використовуйте CSS властивість padding для установки відступу всередині меж
  • Використовуйте CSS властивість margin для установки відступу поза межами

HTML Вправи

Перевірте себе за допомогою вправ

Вправа:

Використовуйте CSS, щоб встановити жовтий колір (yellow) фону документа (body).

<!DOCTYPE html>
<html>
<head>
<style>

  :yellow;

</style>
</head>
<body>

<h1>Моя домашня сторінка</h1>

</body>
</html>

HTML Теги стилю

Тег Опис
<style> Визначає інформацію про стилі HTML документа
<link> Визначає посилання між документом і зовнішнім ресурсом

Для отримання повного списку всіх доступних тегів HTML, відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.

Запитання для самоконтролю

  • Що таке стилізація вебсторінок?
  • Як розшифровується CSS?
  • Для чого потрібні каскадні таблиці стилів?
  • Як можна додати CSS до HTML-елементів?
  • Який атрибут використовує вбудований CSS?
  • В якому розділі вебсторінки вказується внутрішній CSS?
  • Як вказується зовнішня таблиця стилів в HTML-документі?
  • Яке розширення повинно бути в файлі зовнішньої таблиці стилів?
  • Яка CSS-властивість визначає колір тексту?
  • Яка CSS-властивість визначає сімейство шрифту?
  • Яка CSS-властивість визначає розмір тексту?
  • Яка CSS-властивість визначає межу навколо HTML-елемента?
  • Яка CSS-властивість визначає внутрішній відступ між текстом і межею HTML-елемента?
  • Яка CSS-властивість визначає зовнішній відступ поза межею HTML-елемента?
  • Який атрибут використовується для конкретного стиля визначеного HTML-елемента?
  • За допомогою якого символу в CSS вказується ідентифікатор (id) HTML-елемента?
  • Який атрибут використовується для визначених типів HTML-елементів?
  • За допомогою якого символу в CSS вказується назва класу HTML-елемента?
  • Які є способи посилання на зовнішній файл стилів?
❮ Prev Next ❯

✍ Коментарі