Властивості елементів

Колір та розмір — це базові елементи стилю будь-якого об’єкта. Розберемо, як для окремих елементів, так і для тегу <div>

Як працювати з властивостями?

На відео — детальне пояснення від Григорія. Нижче — ще нюанси пояснимо текстово

Властивості елементів

Розмір пишеться зазвичай у пікселях. Пікселі позначаються літерами «px» та пишуться нерозривно від числа. Наприклад, розмір 500 пікселів — це 500px.

Колір. Як змінити колір тексту ви вже знаєте. Тому швидко продублюємо. 

Колір просто пишеться англійською. «Синій» — це «blue», червоний — «red», чорний — «black» і так далі. Все просто.

Але можна ще гратись з відтінками. Для цього використовується цифрова назва кольору за системою RGB. Виглядає ось так: #31B404. Але вчити її не треба. Якщо хочеш використовувати відтінки, можеш скористатися простим генератором кольорів за посиланням: клікнув на колір → отримав його значення у системі RGB → вписав у CSS-код.

Як що до тегу <div></div>? Тут все цікавенько.

Для початку створимо цей блок та додамо ідентифікатором «block», щоб зручніше на нього посилатися:

<div id=”block”></div>

В CSS-файлі пошлемось на нього та почнемо працювати над стилем. Наприклад, зробимо, щоб фон цього блоку був червоним, задамо висоту (height) та ширину (width).

Ширина та висота в коді. Помітили, що у нас немає жодного тегу, окрім пустого <div>? Але через те, що у <div> є колір, висота та ширина — він зображається, як червоний квадратик.

Обведення

До блоку зручно додають обведення — це рамка, яка надає об’єкту унікальну форму. Наприклад, її використовують, щоб додати тінь для кнопки чи картинки на сайті.

Додамо обведення до нашого червоного квадрата.

Додамо рядок border: 5px; та вкажемо тип обведення — solid. У нас вийде суцільне обведення шириною в 5 пікселів. Рядок виглядає ось так:

Так виглядає border в коді. Є різні типи обведення, ми їх розглядати не будемо. Головне, щоб ви зрозуміли, як воно працює. Тоді ти зможеш знайти потрібний тип обведення самостійно грамотно додати до об’єкту. Якщо скористаєшся найголовнішим вмінням програміста, як ми розглядали у html.

Колір Щоб додати колір — просто впишемо його назву англійською:

Зовнішній відступ

це відступ від об’єкта до країв вікна браузера. Наприклад, якщо ви хочете, щоб текст вашого абзацу був посередині сторінки браузеру — відступ допоможе.

Задається селектором «margin» та сторони, з якої нам треба відступ. Зсуньмо наш червоний квадрат у бік на 30 пікселів.

Внутрішній відступ.

Це відступи, які знаходяться всередині об’єкту. Давайте для наочності впишемо в наш квадрат якийсь текст. Для цього повернемось html-файлу та тегу <div></div>:

<div id=”block”> Якийсь текст </div>

Ми не вписали текст у тег абзацу, щоб навкруги нього не було жодних відступів: він буде просто у верхньому лівому краєві нашого квадрата.

Скористаємося властивістю padding, щоб задати внутрішній відступ та відсунути текст. Зробимо відступи по 25 пікселів навколо тексту.

Нюанс

Помітили, що ми не вказали конкретну сторону відступу і отримали відступ від верху та зліва на 25 пікселів? Так це тому, що і в padding, і в margin можна не вказувати напрямок відступу, але кожне наступне число буде працювати за замовчуванням.

Наприклад, напишіть такий рядок: «padding: 25px 30px 45px»; та погляньте, що буде.