Ви вже вивчили, як використовувати
CSS, щоб оформити текст,
але ми також можемо
використовувати CSS для того,
щоб повністю змінити розмітку
нашої сторінки.
Це означає, що ми можемо переміщувати
елементи, змінювати розмір,
навіть накладати елементи один на однин.
Але якими є елементи, які ми
хочемо перемістити?
Інколи це одиничні елементи,
які ми створили,
такі як певні абзаци
чи певні заголовки.
Але часто — це групи елементів,
такі як певна частина тексту
чи заголовок та декілька абзаців.
Для того щоб переміщувати їх
як єдиний елемент,
ми маємо вивчити два нові теги HTML,
які ми називаємо згрупованими елементами.
Ми не говорили про них до вивчення СSS,
тому що вони використовуються
лише в поєднанні з СSS.
Вони не мають семантичного
значення для браузера.
Перший тег — це ,
і він використовується,
для того щоб вибрати частину тексту.
Скажімо, ми хочемо зафарбувати
це слово "Love" в червоний колір.
І ми хочемо зафарбувати лише одне слово,
а не весь заголовок.
Ми поставимо курсор перед цим словом,
напишемо початковий тег ,
поставимо курсор після слова
і напишемо кінцевий тег.
Тепер ми хочемо додати стиль
цій частині з тегами .
Ми можемо створити правило, яке
зафарбує усі теги на сторінці,
але ми не хочемо,
щоб всі вони були червоні.
Ми дамо цьому тегу клас
"lovey-dovey" (кохання-зітхання)
і додамо правило "лише для
елементів, які мають такий клас".
Отже, .lovey-dovey {color: red}.
Подивіться на слово "Love" тепер!
Тег використовується для
вибору окремих частин тексту,
як же ми можемо обрати
декілька елементів разом?
Тут нам допоможе тег .
Скажімо, ми хочемо згрупувати
цю нижню частину:
заголовок "Official Info", абзаци
і зображення під ним.
Щоб зробити це, я поставлю курсор перед тегом
і напишу початковий тег .
Потім перейду вниз до останнього абзацу
і закрию тег .
Ми маємо тег і тепер
нам потрібно додати стиль.
Щоб оформити його,
я додам "id":
official-info.
Потім тут додам для нього правило.
#official-info і background.
Зробімо його сіреньким.
Ми виберемо... цей. Чудово!
Тепер ви можете побачити,
що тег став блоком сірого кольору,
який містить усі елементи.
Він має інший вигляд, ніж якби ми
додали сірий фон
кожному з елементів окремо.
Якщо б ми зробили так, проміжки
між елементами не були б сірими.
Нам потрібен тег , якщо ми хочемо,
щоб блок був суцільним.
Ви можете розглядати тег , як можливість
згрупувати частини тексту,
а тег — як можливість згрупувати
окремі елементи.
Але є й інший спосіб, щоб їх розрізнити.
Бачите, існує два типи елементів
в світі CSS:
рядкові і блокові.
Рядковий елемент
не має нового рядка після себе,
тобто якщо цих елементів буде декілька,
вони будуть в одному рядку.
Декілька прикладів, про які ми вже
говорили — теги та .
І ви можете побачити, що це
зображення "наштовхується"
на текст, який йде після нього.
Після зображення немає
порожнього рядка.
Блокові елементи мають рядок після себе,
і більшість елементів в HTML — cаме такі.
Подивіться на всі інші
приклади на цій сторінці:
заголовки, абзаци, список.
Браузер ставить порожні рядки
після всіх цих елементів,
тому вам не потрібно писати
кожного разу тег
.
Що це має спільного з тегами
та ?
Що ж, створює рядковий елемент,
а — блоковий.
Це означає, що якщо ви додасте
і не додасте жодного іншого стилю,
браузер розіб'є на частини
цю частину сторінки.
Так що ця частина тексту,
обгорнута тегом ,
тепер матиме нові рядки до і після.
І, можливо, це те, що вам потрібно.
Просто пам'ятайте про цю відмінність.
І продовжуйте практикуватись,
тому що ми можемо зробити
дуже багато з цими тегами.
Особливо з могутнім тегом .
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодіний фонд "MagneticOne.org"