Сьогодні ми будемо на стилі з CSS, бо почнемо занурюватися у магію стилів наших сторінок. Просто HTML додавати не так цікаво, тепер ми будемо створювати гарненькі сторінки і допоможуть нам ні що інше, як стилі CSS!
Без стилів CSS елементи розташовуються одне за одним і сайт виходить малопривабливим. Подивіться на зображення нижче. Це одна і та ж сторінка зі стилями та без.
Зі стилями
Без стилів
Зі стилями
Без стилів
Оце так! Тож стилі CSS дуже важливі, але без HTML теж не обійтись. HTML – це скелет сайту. Але для кожного тега можна прописати власний стиль. Зверніть увагу на дужки у файлі стилів. Він дуже відрізняється від файлу HTML :
p – це селектор, він обирає тег або інші елементи, до яких буде застосовуватися стиль. В нашому випадку це всі абзаци р.
color – властивість кольору
red – значення для властивості. В прикладі всі абзаци будуть червоного кольору
Практика
Сьогодні ми створимо сторінку про свого улюбленого героя. Це може бути відома або звичайна людина. Або герой мультику, фільму чи коміксу. Може і не людина зовсім, а персонаж. Головне, щоб він чи вона вам подобалися.
Для прикладу я буду створювати сторінку про Януша Корчака. Видатного письменника, педагога, громадського діяча і лікаря. Він писав чудові книжки для дітей, батьків і вчителів. А його методи виховання були дуже прогресивні на свій час.
Він прожив неймовірне життя, а ще неймовірніша і водночас сумна історія його загибелі. Колись обов’язково дізнайтеся більше про цю чудову людину.
А поки він – мій герой і герой моєї сторінки для прикладу
1: Створіть новий проєкт. Додайте заголовок:
<h1> Мій герой</h1>2: Додайте стилі CSS для заголовка:
Тут і далі код, який треба додавати у 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: Стилі CSS для колонок: перша займе простір зліва на 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>Замініть картинку на ту, що підходить вам (Докладніше про картинки тут, якщо забули, як їх додавати). Додайте стилі CSS для картинки :
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 градусів
Стилізуємо тексти у CSS
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 блоки: Януш Корчак, аватар, Чим він сподобався, Його книги, але у вас можуть бути інші назви):
