Тег <style>
Тег <style> (укр. – “стиль”) в HTML використовується для додавання CSS стилів безпосередньо в HTML-документ. Він дозволяє визначати стилі для елементів на сторінці без необхідності підключати зовнішній файл CSS. Зазвичай тег <style> розміщується в секції <head>, що дозволяє стилям завантажуватися до рендерингу сторінки.
Тег <style> дозволяє вбудувати CSS стилі прямо в HTML-документ, що корисно для невеликих проектів або швидкого прототипування. Він дає можливість змінювати вигляд елементів безпосередньо в коді сторінки, не звертаючись до зовнішніх файлів CSS.
Атрибути
Специфічні атрибути
Тег <style> не має специфічних атрибутів, окрім тих, що визначають тип вмісту. Однак є кілька атрибутів, які можуть використовуватись для налаштування стилів.
- type — вказує тип вмісту, що міститься в блоці. За замовчуванням для CSS це значення text/css. Наприклад:
<style type="text/css">
/* CSS стиль */
</style>- media — дозволяє визначити умови для застосування стилів, наприклад, для певних типів пристроїв або екранів. Наприклад:
<style media="screen">
/* CSS стиль для екранів */
</style>Глобальні атрибути
- id — унікальний ідентифікатор для елемента. Наприклад:
<style id="page-styles">
/* CSS стиль */
</style>- class — дає змогу додавати CSS класи до елемента. Наприклад:
<style class="main-style">
/* CSS стиль */
</style>- style — дозволяє додавати інлайн стилі до елемента. Наприклад:
<style style="display: none;">
/* CSS стиль */
</style>
Приклад використання
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад використання тегу <style></title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
h1 {
color: #2c3e50;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Привіт, світ!</h1>
<p>Це приклад вбудованих стилів на сторінці.</p>
</body>
</html>Пояснення: Тег <style> в середині секції <head> містить CSS, що визначає стилі для елементів body, h1 та p на сторінці.
Додаткові моменти
- Використання вбудованих стилів через тег
<style>корисне для малих проектів або швидкого прототипування, але для більших проектів рекомендується використовувати зовнішні файли CSS, щоб зберегти код чистим і зручним для обслуговування. - Вбудовані стилі можуть призвести до дублювання коду, що ускладнює підтримку.
- Вбудовані стилі можуть бути корисними для тестування та експериментів, коли не потрібно окремо працювати з файлами стилів.
- Вбудовані стилі не зручно використовувати на великих сайтах з великою кількістю сторінок.
- Медіа запити всередині тегу
<style>дозволяють робити сторінки адаптивними без використання зовнішніх файлів, хоча для складніших проектів краще використовувати зовнішній CSS файл для таких стилів.
