Skip to content

CSS

CSS⚑

Що таке CSS?⚑

CSS (Cascading Style Sheets) — це мова стилів, яка використовується для опису вигляду і форматування документів, написаних на мовах розмітки, таких як HTML. Вона відокремлює контент від його представлення.

CSS дозволяє налаштувати стилі для різних частин HTML-документа за допомогою селекторів, які можуть бути класами, ідентифікаторами або елементами. Перевагою CSS є каскадність, що означає, що стилі можуть наслідуватись або перекриватись з різних джерел: вбудовані стилі, стилі у тегах <style>, зовнішні файли стилів. Використовуючи CSS, розробники можуть контролювати кольори, шрифти, відступи, розміщення елементів, анімації.

CSS підтримує медіа-запити, що дозволяють створювати адаптивний дизайн, змінюючи вигляд залежно від пристрою, наприклад, для мобільних або настільних пристроїв.

Також для зручності роботи з CSS використовуються різні інструменти, такі як препроцесори (наприклад, Sass, Less), фреймворки (наприклад, Bootstrap, Foundation).

Приклад CSS файлу

/* Sets the background color and text color for the entire body */
body {
    background-color: #f0f0f0;
    color: #333;
}

/* Styles for a header with specific class */
.header {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0;
}

/* Changes style for links on hover */
a:hover {
    color: #0066cc;
    text-decoration: underline;
}

Що таке псевдоелементи?⚑

Псевдоелементи – віртуальні елементи, які не існують у вихідному HTML-коді, але можуть бути стилізовані за допомогою CSS. Вони використовуються для додавання стилів до частин документа, які не можна безпосередньо вибрати за допомогою стандартних селекторів.

Основні псевдоелементи

  • ::before - Вставляє вміст перед вмістом вибраного елемента. Зазвичай використовується для додавання декоративних елементів.
  • ::after - Вставляє вміст після вмісту вибраного елемента. Використовується для додавання декоративних елементів або очищення плаваючих елементів (clearfix).
  • ::first-line- Застосовує стилі до першого рядка тексту в елементі. Корисно для зміни стилю першого рядка в абзацах.
  • ::first-letter - Стилізує першу літеру тексту в елементі. Використовується для створення ефекту великих початкових букв (drop cap).
  • ::placeholder - Стилізує текст-заповнювач в елементах форми, таких як <input> або <textarea>.

Приклад використання псевдоелементів

<!DOCTYPE html>
<html>
<head>
    <style>
        p::before {
            content: "▶ ";
            color: red;
        }
        p::first-letter {
            font-size: 2em;
            color: green;
        }
    </style>
</head>
<body>
    <p>This is a paragraph with styled first letter and an icon before it.</p>
</body>
</html>

Види позиціонування елементів⚑

Є 4 види позиціюнування

  • static - базове позиціонування за замовчуванням для всіх елементів. Воно означає, що елемент слідує звичайному потоку документа, не маючи можливості переміщатися щодо свого початкового положення. Цей тип позиціонування не враховує властивості top, right, bottom та left.
  • relative - дозволяє зміщувати елемент щодо його звичайного положення. Елементу залишається у звичайному потоці документа, але при цьому можна зміщувати його щодо його початкового положення за допомогою top, right, bottom і left. Елемент зберігає свій простір у макеті, навіть якщо візуально переміщений.
  • fixed - закріплює елемент щодо вікна браузера.
  • absolute - позиціонує елемент щодо найближчого предка з позиціонуванням

Основні принципи адаптивного дизайну⚑

Основні принципи адаптивного дизайну

  • Гнучкість: дизайн повинен бути гнучким та адаптивним до різних пристроїв та екранів.
  • Сітка: використання сітки для розподілу контенту на сторінці, щоб він міг адаптуватися до різних розмірів екранів.
  • Використання медіазапитів: медіазапити дозволяють змінювати стилі та розташування елементів на сторінці залежно від розміру екрана.
  • Гнучкі зображення: використання гнучких зображень, які можуть бути адаптовані до різних розмірів екранів.
  • Використання відносних одиниць вимірювання: використання відносних одиниць вимірювання, таких як відсотки та em, замість фіксованих значень, щоб контент міг адаптуватися до різних розмірів екранів.
  • Тестування на різних пристроях: тестування дизайну на різних пристроях, щоб переконатися, що він працює коректно та добре виглядає на всіх екранах.