курси програмування для дітей безкоштовно

5 Div та span у CSS

Сьогодні ми створимо проєкт з прапорами різних країн і для цього розберемо, як працюють div та span у CSS. Як створювати блочні й рядкові елементи.

Картинка з серіалу “Теорія великого вибуху”, де герої, вчені-фізики, запустили стрім “Fun with flags”.

Блочні й рядкові елементи (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). Вам допоможе завдання “Складніший прапор” з цієї сторінки

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *