-
Ви вже вивчили, як використовувати
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"
