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

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

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

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

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

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

index

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

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

index

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

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

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

index

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

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

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

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

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