Зміст курсу
Основи CSS
Основи CSS
Поєднання HTML і CSS
Відкриваємо три шляхи
Коли йдеться про дизайн веб-сайту, на візуальний вигляд веб-сторінки в першу чергу впливають дві технології – HTML і CSS. Ці дві технології працюють разом трьома різними способами: вбудовані стилі (inline styles), вбудовані таблиці стилів (embedded style sheets) та зовнішні таблиці стилів (external style sheets). Давайте розберемося, що стоїть за цими методами, дослідимо їхні сильні та слабкі сторони.
Вбудовані стилі
Вбудовані стилі впроваджують CSS безпосередньо в HTML-елемент за допомогою атрибута style. Ці стилі зручні, коли потрібні динамічні зміни - сфера, де JavaScript часто творить свою магію. Однак їхнім недоліком є обмежена сфера застосування; їх не можна легко розширити або повторно використовувати в різних елементах.
Наприклад, давайте застосуємо вбудований стиль, щоб змінити колір тексту на blueviolet.
index
index
index
Вбудована таблиця стилів
Вбудована таблиця стилів знаходиться у <head> документа HTML, інкапсульована у тегах <style>. Цей метод дозволяє адаптувати стилі до конкретної сторінки. Однак йому не вистачає універсальності, необхідної для використання на декількох сторінках.
index
index
index
Зовнішня таблиця стилів
Зовнішня таблиця стилів - це гранд-майстер управління CSS. Використовуючи тег <link> всередині <head> HTML-документа, ця техніка забезпечує масштабованість, підтримуваність і багаторазове використання - якості, бажані у веб-проектах.
Але як це працює? Ми створюємо файл з розширенням css і посилаємося на нього в нашому HTML-документі. Нижче наведено короткий огляд обох файлів, index.html та index.css.
index
index
index
Атрибут rel означає relationship (відносини). rel="stylesheet" вказує на те, як index.css пов'язаний з index.html.
Примітка
Пам'ятайте, що якщо вбудовані стилі призначені для одного елемента, то стилі із зовнішніх таблиць стилів або вбудованих таблиць стилів можуть прикрашати кілька елементів, спрощуючи ваш дизайн.
Дякуємо за ваш відгук!
