Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Поєднання HTML і CSS | Вступ до CSS
Основи CSS
course content

Зміст курсу

Основи CSS

Основи CSS

2. CSS для Тексту
3. Бокс Модель та Відстань між Елементами
4. Флексбокс
5. Декоративні Ефекти

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

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

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

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

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

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

html

index

css

index

js

index

copy

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

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

html

index

css

index

js

index

copy

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

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

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

html

index

css

index

js

index

copy

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

Примітка

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

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

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

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

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

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 2
We're sorry to hear that something went wrong. What happened?
some-alt