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

10 Стилі CSS

Сьогодні ми будемо на стилі з CSS, бо почнемо занурюватися у магію стилів наших сторінок. Просто HTML додавати не так цікаво, тепер ми будемо створювати гарненькі сторінки і допоможуть нам ні що інше, як стилі CSS!

Без стилів елементи розташовуються одне за одним і сайт виходить малопривабливим. Подивіться на зображення нижче. Це одна і та ж сторінка зі стилями та без.

Зі стилями

Зі стилями

Без стилів

Без стилів

Зі стилями

Без стилів

Оце так! Тож стилі дуже важливі, але без HTML теж не обійтись. HTML – це скелет сайту. Але для кожного тега можна прописати власний стиль. Зверніть увагу на дужки у файлі стилів. Він дуже відрізняється від файлу HTML :

p – це селектор, він обирає тег або інші елементи, до яких буде застосовуватися стиль. В нашому випадку це всі абзаци р.
color – властивість кольору
red – значення для властивості. В прикладі всі абзаци будуть червоного кольору

Практика

Сьогодні ми створимо сторінку про свого улюбленого героя. Це може бути відома або звичайна людина. Або герой мультику, фільму чи коміксу. Може і не людина зовсім, а персонаж. Головне, щоб він чи вона вам подобалися.

Для прикладу я буду створювати сторінку про Януша Корчака. Видатного письменника, педагога, громадського діяча і лікаря. Він писав чудові книжки для дітей, батьків і вчителів. А його методи виховання були дуже прогресивні на свій час.

Він прожив неймовірне життя, а ще неймовірніша і водночас сумна історія його загибелі. Колись обов’язково дізнайтеся більше про цю чудову людину.

А поки він – мій герой і герой моєї сторінки для прикладу

1: Створіть новий проєкт. Додайте заголовок:

<h1> Мій герой</h1>

2: Додайте стилі для заголовка:

Тут і далі код, який треба додавати у html-файл буде виділений синім, а код, який додаємо у css – зеленим !!!!

h1 {
  text-align: center;
  color: white;
  background: teal;
  padding: 5px;
}

h1 – назва тегу для якого пишемо стилі
text-align: center; – розташування тексту по центру
color: white; – колір тексту білий
background: teal; – фон тексту зеленуватий (колір teal)
padding: 5px; – відступ від країв 5 пікселів

Ці значення можна змінити та трохи погратися з ними

3: Також додамо стилі для тега body. Це буде тло нашого сайту:

body {
  background: linear-gradient(to bottom right, skyblue, white);
  padding: 15px;

}

background: linear-gradient(to bottom right, skyblue, white); – лінійний градієнт для фону. Перехід з блакитного на білий зверху зліва вниз вправо
padding: 15px; – відступи 15 пікселів

Створюємо колонки

4: Створимо майбутні колонки. Текст і картинки будуть розташовуватися в них як у газетній статті.

<div class="col1">
  <div class="item"> 

  </div>
</div>

<div class="col2">
  <div class="item"> 
 
  </div>
</div>

5: Стилі для колонок: перша займе простір зліва на 48% (майже половина екрана), а друга справа теж на 48%:

.col1 {
  width: 48%;
  float: left;
}

.col2 {
  width: 48%;
  float: right;
}

6: В середину другої колонки додамо картинку (додайте тільки виділений текст, інше вже є) :

<div class="col2">
  <div class="item"> 
    <h2>Аватар</h2>
    <img class="photo" src="https://static.ukrinform.com/photos/2017_10/thumb_files/630_360_1507300965-2770.jpg">
  </div>
</div>

Замініть картинку на ту, що підходить вам. Додайте стилі для картинки :


img {
  max-width: 90%;
}

7: І ще один милий стиль саме для цієї картинки :

.photo{
  box-shadow: 4px 4px 4px gray;
  transform: rotate(5deg);
}

.photo – клас картинки з аватаром
box-shadow: 4px 4px 4px gray; – тінь для картинки
transform: rotate(5deg); – поворот картинки на 5 градусів

Стилізуємо тексти

8: Додамо ще стилів для малого заголовка і блоку з картинкою

h2 {
  color: white;
  background: teal;
  text-align: center;
  paddingL 5px;
  box-shadow: 2px 2px 2px gray;
}

.item {
  border: 3px dashed teal;
  margin: 30px;
}

Стилі для заголовка h2:
color: white; – колір тексту білий
background: teal; – колір фону зеленуватий
text-align: center; – вирівнювання тексту по центру
padding: 5px; відступ 5 пікселів
box-shadow: 2px 2px 2px gray; – тінь сірого кольору на 2 пікселі з трьох сторін

Стилі для блоку item
border: 3px dashed teal; – рамка з рисочок зеленуватого кольору
margin: 30px; – внутрішній відступ на 30 пікселів

Додаємо розповідь

9: Додайте текст про вашого героя у першу колонку (у прикладі виділений синім фоном, але у вас все одно має бути інший текст)

<div class="col1">
  <div class="item"> 
  <h2>Януш Корчак</h2>
  <p>Януш Корчак (пол. Janusz Korczak, справжнє ім'я Генрик Гольдшмідт, відомий також як Пан Лікар. Польський лікар, педагог, письменник, публіцист, громадський діяч єврейського походження. </p>
  <p>Педагог-новатор, автор праць із теорії й практики виховання. Зачинатель діяльності на захист прав дитини і повної рівноправності дітей. Як директор сиротинця створив, зокрема, дитячий товариський суд, де діти самі розглядали справи, які самі подавали, а також могли позиватися до цього суду на своїх вихователів. «Чудова людина, яка мала відвагу довіряти дітям і молоді, якими займалася, настільки, щоб передати в їхні руки питання дисципліни й довірити окремим дітям найскладніші завдання, пов'язані з дуже великою відповідальністю», — сказав про Корчака відомий швейцарський психолог Жан Піаже, відвідавши Дім Сиріт, створений Корчаком. </p>
    </div> 
</div>

Можете додати ще інформації. У мене вийшла така сторінка:

домашка з програмування

Level Up

1: Змініть кольори у стилях для своєї сторінки. Змініть інші стилі, пограйтеся зі значеннями у властивостях.

2: Додайте ще два блоки item в середину тегів div. Додайте в середину них заголовок та текст або картинки. Ці теги допоможуть розбити сторінку на блоки (тут на фото 4 блоки: Януш Корчак, аватар, Чим він сподобався, Його книги, але у вас можуть бути інші назви):

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

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