НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності CSS !important CSS Математичні функції

CSS Розширений

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Кольори. Ключові слова CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Image Reflection CSS Підгонка об'єкту CSS object-position CSS Masking CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS SASS

Підручник

CSS Приклади

CSS Шаблони CSS Приклади CSS Сніпети CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

CSS3. Уроки W3Schools для початківців українською мовою

En Es De

 Як підключити CSS до HTML?


Коли браузер читає таблицю стилів, він форматує HTML документ відповідно до інформації в таблиці стилів.


Три способи підключення CSS до html-сторінки

Існує три способи підключення таблиці стилів CSS до вебсторінки:

  • Зовнішня таблиця стилів (External)
  • Внутрішня таблиця стилів (Internal)
  • Вбудований стиль (Inline)

Зовнішня таблиця стилів

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

Кожна HTML сторінка має містити посилання на файл зовнішньої таблиці стилів всередині елемента <link>.

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

Приклад

Зовнішні стилі визначені в елементі <link> всередині розділу <head> HTML сторінки:

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

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

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

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

Примітка: Докладніше про текстові редактори, які можна використовувати для написання як HTML-коду, так і CSS-коду, читайте в розділі Редактори коду.

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

"mystyle.css"

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Примітка: Не додавайте пробіл між значенням властивості та одиницею (наприклад margin-left: 20 px;). Правильно писати: margin-left: 20px;


Внутрішня таблиця стилів

Внутрішня таблиця стилів може використовуватися, якщо одна окрема HTML сторінка має свій унікальний стиль і цей стиль більше ніде не використовується на інших сторінках.

Приклад

Внутрішні стилі визначені в елементі <style> всередині розділу <head> HTML сторінки:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

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

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

Вбудовані стилі

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

Щоб використовувати вбудовані стилі, додайте атрибут стилю до відповідного елементу (тегу). Атрибут style може містити будь-яку властивість CSS.

Примітка. Вбудований стиль необхідно використовувати якомога рідше, в крайніх випадках, коли потрібно виділити окремий фрагмент тексту (словосполучення) тільки на одній HTML сторінці. Вбудований стиль перевантажує HTML-код та збільшує загальний об’єм вебсторінки.

Приклад

Вбудовані стилі визначаються в атрибуті "style" відповідного елементу:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">Це заголовок</h1>
<p style="color:red;">Це параграф.</p>

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

Примітка: Вбудований стиль втрачає багато із переваг таблиці стилів (шляхом змішування контенту з його візуальним представленням). Використовуйте цей метод помірно.


Декілька таблиць стилів

Якщо деякі властивості були визначені для одного й того ж селектора (елемента) в різних таблицях стилів, буде використовуватися значення із останньої прочитаної таблиці стилів.

Припустимо, що зовнішня таблиця стилів має наступний стиль для елемента <h1>:

h1 {
  color: navy;
}

Потім припустимо, що внутрішня таблиця стилів також має наступний стиль для елемента <h1>:

h1 {
  color: orange;   
}

Приклад

Якщо внутрішній стиль визначено після посилання на зовнішню таблицю стилів, то елемент <h1> буде відображатися 'orange' (оранжевим):

<head>
<link rel="stylesheet" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
Спробуйте самі »

Приклад

Однак, якщо внутрішній стиль визначено перед посиланням на зовнішню таблицю стилів, то <h1> елементи будуть "navy" (темно-синього кольору):

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" href="mystyle.css">
</head>
Спробуйте самі »

Порядок використання каскадних стилів

Який стиль буде використовуватись, якщо для елемента HTML вказано більше одного стиля?

Всі стилі на сторінці будуть "каскадно" перетворюватись в нову "віртуальну" таблицю стилів за наступними правилами, де номер один має найвищий пріоритет:

  1. Вбудований стиль (всередині елемента HTML)
  2. Зовнішні та внутрішні таблиці стилів (в розділі head)
  3. Стиль браузера за замовчуванням

Таким чином, вбудований стиль має найвищий пріоритет та перевизначає зовнішні та внутрішні стилі й налаштування браузера за замовчуванням.

Спробуйте самі »


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

Вправа:

Додайте зовнішню таблицю стилів із URL-адресою: "mystyle.css".

<head>

</head>

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


CSS — Як додати CSS до HTML — W3Schools відеоурок

У цьому відео коротко описано, як додати CSS до HTML.

Частина серії відеоуроків для вивчення CSS для початківців!



Коментарі