2.1 Зовнішні таблиці стилів
Підключення CSS (Cascading Style Sheets) до HTML-документа дозволяє стилізувати веб-сторінки, покращуючи їх зовнішній вигляд та зручність використання. Існує декілька способів підключення CSS до HTML, кожен з яких має свої переваги і підходить для різних ситуацій.
Способи підключення CSS:
- Зовнішні таблиці стилів (External Stylesheets)
- Внутрішні таблиці стилів (Internal Stylesheets)
- Вбудовані стилі (Inline Styles)
Зовнішні таблиці стилів (External Stylesheets)
Зовнішні таблиці стилів — це окремі CSS-файли, які підключаються до HTML-документа за допомогою тега <link>. Такий спосіб дозволяє відокремити стилі від структури документа, що спрощує управління стилями та повторне використання CSS-файлів на кількох сторінках.
Переваги:
- Зручність управління стилями
- Повторне використання стилів на кількох сторінках
- Покращення кешування та продуктивності
Синтаксис:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Приклад зовнішньої таблиці стилів</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Приклад зовнішньої таблиці стилів</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>
Приклад CSS-файлу (styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
2.2 Внутрішні таблиці стилів (Internal Stylesheets)
Внутрішні таблиці стилів розміщуються всередині самого HTML-документа у розділі <head> за допомогою тега <style>. Цей спосіб зручний, коли необхідно застосувати стилі лише до однієї сторінки або коли зовнішній файл недоступний.
Переваги:
- Легкість використання для однієї сторінки
- Немає необхідності в додатковому файлі
Синтаксис:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Приклад внутрішньої таблиці стилів</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>
2.3 Вбудовані стилі (Inline Styles)
Вбудовані стилі застосовуються безпосередньо до HTML-елементів за допомогою атрибута style. Цей спосіб корисний для швидкого тестування або коли потрібно змінити стиль окремого елемента.
Переваги:
- Швидке та точкове застосування стилів
- Підходить для динамічних змін через JavaScript
Недоліки:
- Складність управління стилями при великій кількості елементів
- Ускладнення повторного використання стилів
Синтаксис:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Приклад вбудованих стилів</title>
</head>
<body>
<h1 style="color: #333; font-family: Arial, sans-serif;">Заголовок</h1>
<p style="color: #666; background-color: #f4f4f4;">Текст</p>
</body>
</html>
Приклад використання всіх способів на одній сторінці:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Приклад всіх способів підключення CSS</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f4f4f4;
}
.internal {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="internal">Заголовок</h1>
<p style="color: #666;">Цей текст стилізовано з використанням вбудованих стилів.</p>
</body>
</html>
2.4 Порядок пріоритету стилів
Коли стилі підключені різними способами, пріоритет їх застосування визначається так:
- Вбудовані стилі (Inline Styles) мають найвищий пріоритет
- Внутрішні таблиці стилів (Internal Stylesheets) мають наступний рівень пріоритету
- Зовнішні таблиці стилів (External Stylesheets) мають найнижчий пріоритет
Якщо до одного і того ж елемента застосовуються кілька стилів з однаковим пріоритетом, то пріоритет визначається специфічністю селектора та порядком оголошення.
Приклад пріоритету стилів:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Приклад пріоритету стилів</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue; /* Внутрішній стиль */
}
</style>
</head>
<body>
<p style="color: red;">Цей текст буде червоним через пріоритет вбудованого стилю.</p>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ