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

02. Боксова модель: padding, border, margin

Боксова модель: padding border margin | Уроки HTML CSS JavaScript для дітей | ITisFuture

Зазирни у коробку з контентом!

Боксова модель

У мові 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 спробуйте зайти:

  1. Як називається клас для кожної картки ?
  2. Чи є клас, що об’єднує всі картки?
  3. Як змінити картинку для принцеси Moana?
  4. Як змінити інформацію для принцеси Merida?

У файлі СSS спробуйте зайти:

  1. Клас для картки і властивість, яка описує тінь
  2. Клас який відповідає за всі картки
  3. Якщо навести на картку, тінь збільшується. Де це описано?
  4. Розміри картинки?
  5. Що описує container?

2: У файлах розібрались. Тепер попрацюємо з картками.

Задайте внутрішній і зовнішній відступ для класу картки. (Спробуйте знайти, куди саме додати цей код)

  padding: 5px;
  margin: 10px;

А тепер задамо одній з карток клас і id:

<div class="card myclass" id="id1">

Створимо стилі, які додадуть колір фону по id і рамку по класу.

#id1{
  background-color: #fdbff0;
}

.myclass{
  border: 3px solid #b80f69;
}

3: Чудово. Ніби розібрались ? Тепер перейдемо до роботи в групах.

  1. Створіть картки на обрану тему. 
  2. Кожен в команді бере по 4 персонажі, які не мають повторюватися.
  3. На картці має бути: картинка, назва або ім’я, 3 характеристики (не пишіть багато тексту)
  4. Бажано, щоб у команди картки були в схожих стилях
  5. Додайте ще фішок на сторінку, щоб вона виглядала красивіше.
  6. Для половини карток пропишіть додатковий клас. Для цього класу визначте колір фону у вигляді градієнта. 
  7. Для перших двох карток пропишіть id.  Для цього id  пропишіть рамку якогось кольору
  8. Застосуйте margin, padding для класу картки
  9. Додайте ще фішок на сторінку, щоб вона виглядала красивіше.
Уроки програмування для дітей. Домашня робота

Домашня робота

1: Закінчіть картки, які робили в класі.

Якщо ви не були на уроці й у вас немає команди, зробіть завдання без команди.

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

Level Up

1: Створіть набір квадратів, як показано на малюнку. Кольори оберіть свої, але :

  1. У всіх квадратів має бути один клас. Для нього прописуємо розміри, рамку, розмір тексту.
  2. У перших п’яти квадратів буде додатковий клас, який визначає заливку градієнтом. У останніх п’яти квадратів інший клас з заливкою іншими кольорами.
  3. У кожного квадрату з парним номером буде id= DD, який визначатиме один колір тексту. А у непарних буде id= СС, який визначатиме інший колір тексту
  4. Квадрати мають розташовуватись в рядок (як з картками на уроці)

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

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