Модуль 3
Селектори та колір
Table
Search
Вступ до CSS
CSS (Cascading Style Sheets, каскадні таблиці стилів) - це мова для опису і зміни зовнішнього вигляду елементів. HTML використовується для визначення структури і семантики вмісту документа, а CSS - для його оформлення і позиціонування.
Синтаксис
Блок CSS-коду називається правилом, яке складається з селектора і групи оголошень у фігурних дужках.
Селектор вказує браузеру на те, до яких елементів потрібно застосувати стилі з цього правила. Кожне оголошення складається з пари властивість: значення;, де властивість і його значення розділяються двокрапкою з пробілом і обов'язково закінчуються крапкою з комою. Вони описують, що саме потрібно зробити зі стилями елемента.
селектор {
властивість: значення;
властивість: значення;
властивість: значення;
}
Підключення стилів
Є три способи додати стилі до HTML-документу: вбудовані стилі (inline styles), вбудована таблиця стилів (embedded stylesheet) і зовнішня таблиця стилів (external stylesheet). У кожного способу є свої переваги, недоліки, обмеження і сфера застосування.
Вбудовані стилі
Вбудовані (інлайн) стилі задаються тегу безпосередньо в атрибуті style. Їх неможливо масштабувати, складно перевизначати і використовувати повторно, тому вони застосовуються в дуже рідкісних випадках. Наприклад, для динамічних стилів, які встановлюються під час виконання JavaScript коду, коли ми заздалегідь не знаємо, яке буде значення властивості.
<p style="color:blue; font-size:24px;">Цей текст буде синім.</p>
Вбудована таблиця стилів
За такого підходу CSS-правила додаються всередину тегу <style> в шапці документа. Їх неможливо використовувати повторно на інших сторінках і складно масштабувати і підтримувати.
<head>
<style type="text/css">
p {
color: blue;
font-size: 24px;
}
</style>
</head>
Цікаво
Іноді цей підхід використовується для оптимізації швидкості відтворення сторінки, додаючи найважливіші стилі безпосередньо в HTML-документ. Ця просунута техніка називається Critical CSS.
Зовнішня таблиця стилів
Зовнішній CSS-код легко масштабувати, підтримувати і використовувати повторно на інших сторінках, тому це стандарт підключення стилів. У проекті створюється окремий файл стилів з розширенням .css і підключається в HTML-документі.
<head>
<link rel="stylesheet" href="./css/styles.css" />
</head>
На одному рівні з index.html створюється папка css, а всередині неї - файл стилів styles.css.
В тезі <head>, використовуючи тег <link>, підключається створений раніше файл.
В атрибуті href вказується шлях до файлу стилів щодо HTML-документа.
В атрибуті rel вказується тип документа - stylesheet (таблиця стилів), що підключається.
Корисно
Можна підключити скільки завгодно CSS-файлів, додаючи для кожного тег <link>.
<blank>
<blank>
Вступ до CSS
Notes
CSS (Cascading Style Sheets, каскадні таблиці стилів) - це мова для опису і зміни зовнішнього вигляду елементів. HTML використовується для визначення структури і семантики вмісту документа, а CSS - для його оформлення і позиціонування.
Синтаксис
Блок CSS-коду називається правилом, яке складається з селектора і групи оголошень у фігурних дужках.
Селектор вказує браузеру на те, до яких елементів потрібно застосувати стилі з цього правила. Кожне оголошення складається з пари властивість: значення;, де властивість і його значення розділяються двокрапкою з пробілом і обов'язково закінчуються крапкою з комою. Вони описують, що саме потрібно зробити зі стилями елемента.
селектор {
властивість: значення;
властивість: значення;
властивість: значення;
}
Підключення стилів
Є три способи додати стилі до HTML-документу: вбудовані стилі (inline styles), вбудована таблиця стилів (embedded stylesheet) і зовнішня таблиця стилів (external stylesheet). У кожного способу є свої переваги, недоліки, обмеження і сфера застосування.
Вбудовані стилі
Вбудовані (інлайн) стилі задаються тегу безпосередньо в атрибуті style. Їх неможливо масштабувати, складно перевизначати і використовувати повторно, тому вони застосовуються в дуже рідкісних випадках. Наприклад, для динамічних стилів, які встановлюються під час виконання JavaScript коду, коли ми заздалегідь не знаємо, яке буде значення властивості.
<p style="color:blue; font-size:24px;">Цей текст буде синім.</p>
Вбудована таблиця стилів
За такого підходу CSS-правила додаються всередину тегу <style> в шапці документа. Їх неможливо використовувати повторно на інших сторінках і складно масштабувати і підтримувати.
<head>
<style type="text/css">
p {
color: blue;
font-size: 24px;
}
</style>
</head>
Цікаво
Іноді цей підхід використовується для оптимізації швидкості відтворення сторінки, додаючи найважливіші стилі безпосередньо в HTML-документ. Ця просунута техніка називається Critical CSS.
Зовнішня таблиця стилів
Зовнішній CSS-код легко масштабувати, підтримувати і використовувати повторно на інших сторінках, тому це стандарт підключення стилів. У проекті створюється окремий файл стилів з розширенням .css і підключається в HTML-документі.
<head>
<link rel="stylesheet" href="./css/styles.css" />
</head>
Корисно
Можна підключити скільки завгодно CSS-файлів, додаючи для кожного тег <link>.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.