Зазирни у коробку з контентом!
Боксова модель
У мові CSS є спеціальна боксова модель (також блокова модель або блокова модель, англ. box model), яка описує, з чого складається бокс і які властивості впливають на його розміри. Всі боксові властивості можна задати для групи контенту. Кожен бокс має 4 області: margin (зовнішні відступи), border (рамка), padding (внутрішні поля), і content (контент чи вміст).
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Content area може містити текст, картинки та інші елементи (контент або вміст). У неї часто буває фон, колір або зображення. Для цієї області можна задавати розміри. Наприклад за допомогою тегів: width, min-width, max-width, height, min-height і max-height.
Поля елемента (padding) – це порожня область, що оточує контент. Вона може бути залита якимось кольором, покрита фоновою картинкою.
Розміри полів задаються окремо з різних сторін властивостями padding-top (en-US), padding-right, padding-bottom (en-US), padding-left або загальною властивістю padding.
Рамка (border area) оточує поля елемента й створює рамку. Ширина рамки визначається окремою властивістю border-width або у складі властивості border.
Відступи (margin area) додають порожній простір навколо елемента та визначають відстань до сусідніх елементів. Величина відступів задається окремо в різних напрямках властивостями margin-top, margin-right, margin-bottom, margin-left або загальною властивістю margin.
Приклади задання розмірів можете глянути нижче:
padding: 50px; /*З усіх сторін однаковий відступ по 50px*/
padding: 10px 1px;/*Зверху і знизу по 10px, зліва і справа по 1px*/
padding:10px 5px 15px 20px;/*Зверху: 10px, справа: 5px, знизу 15px, зліва 20px */
Більше прикладів шукайте тут, тут і тут.
Селектори
Ще раз повернемося до селекторів, на цей раз додамо більше деталей і прикладів.
Селектор по тегу
"index.html"
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>High-school schedule</h1>
<div>Math-9</div>
<div>Math-10</div>
<div>Math-11</div>
</body>
</html>
"mystyle.css"
h1 {
text-decoration: bold;
color:orange
}
div {
color:green;
display: inline-block;
width: 30%;
}
Цей код зробить всі заголовки помаранчевим, всі div зеленим (+додаткові властивості, які прописані)
Селектор по класу .Class
"index.html"
<h1>High-school schedule</h1>
<div class="math-9">
<p>Algebra</p>
<p>Physics</p>
<p>Chemistry</p>
</div>
<div class="math-10">
<p>Algebra</p>
<p>Applied physics</p>
<p>Trigonometry</p>
</div>
"mystyle.css"
.math-9 {
background-color:yellow
}
.math-10 {
background-color:orange
}
div {
display: inline-block;
width: 30%;
}
Стилі застосовуються до всіх об’єктів, що мають заданий клас. Увесь розклад для 9-го класу жовтий, а для 10-го помаранчевий
Приклад для тексту можна глянути тут
Селектор по класу #id
"index.html"
<h1>High-school schedule</h1>
<div id="math-9">
<p>Algebra</p>
<p>Physics</p>
<p>Chemistry</p>
</div>
<div id="math-10">
<p>Algebra</p>
<p>Applied physics</p>
<p>Trigonometry</p>
</div>
"mystyle.css"
#math-9 {
background-color:yellow
}
#math-10 {
background-color:orange
}
div {
display: inline-block;
width: 30%;
}
Стилі застосовуються до всіх об’єктів, що мають заданий id. Увесь розклад для 9-го класу жовтий, а для 10-го помаранчевий
Селектори для класу й id працюють дуже схоже. Але в одного елемента може бути кілька класів і лише один id.
Практика! Нарешті! Створюємо картки
Сьогодні ми попрацюємо над проєктом з картками різних героїв. В прикладі Диснеївські принцеси, що працюють в ІТ.
Сьогодні ви створите картки для різних героїв. Це можуть бути видатні вчені, герої книжок, фільмів, покемони, тварини, та все, що захочете. Також ви попрацюєте в групі. Разом веселіше робити великий проєкт і вийде більше різних карток!
1: Для початку відкрийте https://replit.com/@AnikaKnishienko/2-Cards#index.html і створіть Fork (Копію). Тепер у вас є своя копія проєкту з принцесами!
1: Перед завданнями, познайомимося з проєктом.
У файлі HTML спробуйте зайти:
- Як називається клас для кожної картки ?
- Чи є клас, що об’єднує всі картки?
- Як змінити картинку для принцеси Moana?
- Як змінити інформацію для принцеси Merida?
У файлі СSS спробуйте зайти:
- Клас для картки і властивість, яка описує тінь
- Клас який відповідає за всі картки
- Якщо навести на картку, тінь збільшується. Де це описано?
- Розміри картинки?
- Що описує container?
2: У файлах розібрались. Тепер попрацюємо з картками.
Задайте внутрішній і зовнішній відступ для класу картки. (Спробуйте знайти, куди саме додати цей код)
padding: 5px;
margin: 10px;
А тепер задамо одній з карток клас і id:
<div class="card myclass" id="id1">
Створимо стилі, які додадуть колір фону по id і рамку по класу.
#id1{
background-color: #fdbff0;
}
.myclass{
border: 3px solid #b80f69;
}
3: Чудово. Ніби розібрались ? Тепер перейдемо до роботи в групах.
- Створіть картки на обрану тему.
- Кожен в команді бере по 4 персонажі, які не мають повторюватися.
- На картці має бути: картинка, назва або ім’я, 3 характеристики (не пишіть багато тексту)
- Бажано, щоб у команди картки були в схожих стилях
- Додайте ще фішок на сторінку, щоб вона виглядала красивіше.
- Для половини карток пропишіть додатковий клас. Для цього класу визначте колір фону у вигляді градієнта.
- Для перших двох карток пропишіть id. Для цього id пропишіть рамку якогось кольору
- Застосуйте margin, padding для класу картки
- Додайте ще фішок на сторінку, щоб вона виглядала красивіше.
Домашня робота
1: Закінчіть картки, які робили в класі.
Якщо ви не були на уроці й у вас немає команди, зробіть завдання без команди.
Level Up
1: Створіть набір квадратів, як показано на малюнку. Кольори оберіть свої, але :
- У всіх квадратів має бути один клас. Для нього прописуємо розміри, рамку, розмір тексту.
- У перших п’яти квадратів буде додатковий клас, який визначає заливку градієнтом. У останніх п’яти квадратів інший клас з заливкою іншими кольорами.
- У кожного квадрату з парним номером буде id= DD, який визначатиме один колір тексту. А у непарних буде id= СС, який визначатиме інший колір тексту
- Квадрати мають розташовуватись в рядок (як з картками на уроці)