Сьогодні ми створимо проєкт з прапорами різних країн і для цього розберемо, як працюють div та span у CSS. Як створювати блочні й рядкові елементи.
Блочні й рядкові елементи (block & inline)
Дивіться порівняння й опис англійською та українською:
block elements:
- always start on a new line
- by default, take the whole width of the screen
- block elements can contain inline elements
Блочні елементи :
- завжди починаються з нового рядка
- за промовчанням розтягуються на всю ширину
- Блочні елементи можуть мати в середині рядкові (inline) елементи
inline elements:
- do not have to start from a new line
- the width is equal to their content width
- inline elements must not contain block elements
Рядкові елементи:
- не починаються з нового рядка
- ширина елементу буде розтягується на ширину контенту в ньому
- Рядкові (inline) елементи НЕ можуть в середині мати блочні елементи.
<div>
<div> – це блочний елемент.
Він визначає розділ у документі HTML. Цей елемент часто використовується як контейнер для інших елементів HTML, щоб стилізувати їх за допомогою CSS або виконувати певні завдання за допомогою JavaScript.
На зображенні сторінки качки в соцмережі виділено частини, які є блочними елементами.
Елемент <div> є блоковим елементом і призначений для виділення фрагмента документа з метою зміни виду вмісту. Як правило, вид блоку управляється за допомогою стилю. Спробуйте пригадати, як виглядають товари в інтернет-магазинах або сторінки у соцмережах. Подумайте, які елементи зроблені там за допомогою div.
<span>
<span> це рядковий, або inline елемент
Ви так само можете додавати стилі або скрипти для span елементів, але вони будуть розмішені в рядок.
Практика. Малюємо наш перший прапор!
1: Створіть проєкт “Прапори”. Давайте додамо html-код для наших прапорів:
<div class='wrapper'>
<div class='blue hstripe'></div>
<div class='yellow hstripe'></div>
</div>Якщо зараз запустити код, то ви побачите нічого. Це тому, що ми не додали стилів. Зробімо це.
2: Додайте css-код у відповідний файл:
.wrapper {
width: 600px;
height:300px;
margin: 0 auto 50px;
}
.blue {
background-color: #0096FF;
}
.yellow {
background-color: #f2e016;
}
.hstripe{
height:100px;
}Що змінилося ? Давайте розбиратися:
class wrapper – для всього прапора задає ширину 600 px, висоту 300 px і відступ між прапорами
class blue – додає блакитний колір
class yellow – додає жовтий колір
class hstripe – задає висоту полоски.
Як ми бачимо, то класи можуть працювати разом: hstripe і blue, наприклад. Перший задає розмір, другий колір
Прапор з вертикальними полосами
3: Додайте код для прапора з вертикальними полосами. В прикладі буде країна, яка:
Це не просто країна, а королівство. Тут є король і королева, замки, піддані тощо. Все, як годиться! Крім того, ця країна вважається негласною столицею Європи. Тут розташований Європарламент, Єврокомісія і штаб-квартира НАТО.
-Тут немає своєї національної мови, а офіційними вважаються мови найближчих сусідів – французька, нідерландська і німецька.
-Відсоток урбанізації населення тут один з найвищих у світі. У містах живе близько 97%.
-Попри те, що популярна майже в усьому світі картопля фрі в англійській мові називається французькою (french fries), винайшли її саме тут, а не у Франції.
Здогадалися, що це за країна? Це Бельгія! Давайте запрограмуємо її прапор:
<div class = 'wrapper'>
<div class= 'black vstripe' ></div>
<div class= 'yellow vstripe'></div>
<div class= 'red vstripe'></div>
</div>4: Додайте цей код у файл стилів:
.black{
background-color: black;
}
.red{
background-color: red;
}
.vstripe{
height:300px;
width:200px;
float:left;
}Важливо, що стилі для одного і того ж кольору не треба прописувати кілька разів. Якщо один раз задали жовтий колір (ще для прапора України), то він буде працювати і для інших прапорів з таким стилем.
5(Додаткове завдання): Спробуйте розгадати країни, які зашифровані в цих картинках. Намалюйте прапор однієї або кількох з них:
Складніший прапор
Ще півстоліття тому на місці, де тепер знаходяться ця країна, не було нічого, крім пустелі.
Та знайдена тут нафта зробила з пустелі райську оазу. Доходи від неї настільки грамотно поділяються між всіма мешканцями цієї дивовижної країни, що допомогли їй зробити швидкий стрибок у майбутнє.
Заробітна платня у держслужбовців (з-поміж місцевого населення) сягає 10000 доларів. На весілля громадянам виділяється 9000 доларів та власне житло, а за народження сина сім’ї видається до 100 000 доларів!
Це країна Об’єднані Арабські Емірати.
6: Тепер до прапора. Він складається з двох вертикальних блоків: червоний і другий. Другий блок містить в собі три літії. До html-коду додайте це:
<div class = 'wrapper'>
<div class= 'red vstripe'></div>
<div class = 'vstripe innerWrapper'>
<div class= 'green hstripe'></div>
<div class= 'white hstripe'></div>
<div class= 'black hstripe'></div>
</div>
</div>
7: Чому червона секція стала на місце?
Чому горизонтальні секції підхопили колір (хоча білий колір ми не задавали) ?
Чому горизонтальні секції такі короткі?
Як зробити, horizontal лінії довше?
8: Спробуйте додати клас, щоб розтягнути горизонтальну полоску
.vstripe.innerWrapper{
width:400px;
}Що ще треба додати, щоб прапор виглядав правильно?
Span
9: Додаймо опис країн. Під прапором додайте заголовок з назвою країни, потім додайте параграф з інформацією про населення:
<h1>Україна</h1>
<p>Населення: 42 млн.</p>Зробимо значення жирним шрифтом за допомогою тегу <strong>:
<strong>42 млн</strong>Розфарбуємо слово “Населення: ”. Для цього обернемо це слово у тег <span> і додамо атрибут class:
<span class="fade">Населення: </span>Повернемося до нашого файлу зі стилями і додамо наш клас:
.fade {
color: dimgray;
}Ось так span допомагає задати стилі тільки для частини абзацу
Домашня робота
1: Створіть прапори країн, факти про які записані на картинках (можна 2 країни). P.s. якщо не вгадаєте якусь країну, то просто створіть прапор країни за своїм вибором.
2: Додайте інформацію про населення і площу двох країн. Використайте тег span, щоб зробити частину інформації іншого кольору.
3: Придумайте прапор для свого рідного міста (селища) і намалюйте його (поряд напишіть назву міста)
Level Up!
1: Намалюй прапор однієї зі скандинавських країн (за допомогою div). Вам допоможе завдання “Складніший прапор” з цієї сторінки
