Коли йдеться про дизайн веб-сайту, на візуальний вигляд веб-сторінки в першу чергу впливають дві технології – HTML і CSS. Ці дві технології працюють разом трьома різними способами: вбудовані стилі (inline styles), вбудовані таблиці стилів (embedded style sheets) та зовнішні таблиці стилів (external style sheets). Давайте розберемося, що стоїть за цими методами, дослідимо їхні сильні та слабкі сторони.

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

Вбудовані стилі впроваджують CSS безпосередньо в HTML-елемент за допомогою атрибута style. Ці стилі зручні, коли потрібні динамічні зміни - сфера, де JavaScript часто творить свою магію. Однак їхнім недоліком є обмежена сфера застосування; їх не можна легко розширити або повторно використовувати в різних елементах.

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

index.html

index.css

index.js

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

Вбудована таблиця стилів знаходиться у <head> документа HTML, інкапсульована у тегах <style>. Цей метод дозволяє адаптувати стилі до конкретної сторінки. Однак йому не вистачає універсальності, необхідної для використання на декількох сторінках.

index.html

index.css

index.js

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

Зовнішня таблиця стилів - це гранд-майстер управління CSS. Використовуючи тег <link> всередині <head> HTML-документа, ця техніка забезпечує масштабованість, підтримуваність і багаторазове використання - якості, бажані у веб-проектах.

Але як це працює? Ми створюємо файл з розширенням css і посилаємося на нього в нашому HTML-документі. Нижче наведено короткий огляд обох файлів, index.html та index.css.

index.html

index.css

index.js

Атрибут rel означає relationship (відносини). rel="stylesheet" вказує на те, як index.css пов'язаний з index.html.

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

Які існують способи додавання стилів до HTML-документа?

Виберіть кілька правильних відповідей

Все було зрозуміло?

Секція 1. Розділ 2

Зміст курсу

Основи CSS

1. Вступ до CSS

Що таке CSS?Поєднання HTML і CSS Селектори для Стилізації HTML Елементів Челендж: Додайте Свої Перші Стилі Челендж: Додайте Стилі за Допомогою Імені Класу Псевдокласи Дій Користувача Челендж: Псевдокласи Дій Користувача Кольори Тексту Ефективна Робота з CSS Челендж: Змінні в CSS

2. CSS для Тексту

Стилізація Тексту Форматування Тексту Челлендж: Форматування Тексту Додавання Користувацьких Шрифтів до Веб-сторінки Властивості Шрифту Челендж: Шрифти

3. Бокс Модель та Відстань між Елементами

Бокс Модель Бокс Сайзінг Додавання Простору Елементам Челендж: Бокс-сайзінг Структурні та Функціональні Псевдокласи Челендж: Структурні Псевдокласи Типи Елементів Робота з Блочними Елементами Робота з Інлайн Елементами Челендж: Спрогнозуйте Макет Сторінки

4. Флексбокс

Що таке Flexbox?Flex Напрямок Вирівнювання Вмісту по Горизонталі Вирівнювання Елементів по Вертикалі Властивості Flex-Елементів Челендж: Flexbox Челендж: Робота з Flexbox

5. Декоративні Ефекти

Колір Фону Фонове Зображення Робота з Зображеннями Декоративні Псевдо-Елементи Тіні Челендж: Декоративні Ефекти Подальші Кроки

Основи CSS

Поєднання HTML і CSS

Відкриваємо три шляхи

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

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

index.html

index.css

index.js

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

index.html

index.css

index.js

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

index.html

index.css

index.js

Атрибут rel означає relationship (відносини). rel="stylesheet" вказує на те, як index.css пов'язаний з index.html.

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

Які існують способи додавання стилів до HTML-документа?

Виберіть кілька правильних відповідей

Все було зрозуміло?

Секція 1. Розділ 2