CSS для початківців: Основи стилізації веб-сторінок

CSS

Вступ:

CSS (Cascading Style Sheets) є необхідним інструментом для розробки привабливих та естетичних веб-сторінок. Навіть для початківців, знання основ CSS дозволить вам ефективно стилізувати ваші HTML-документи. У цій статті ми розглянемо основи CSS, включаючи селектори, властивості, позиціонування та розміщення та адаптивний дизайн.

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

Підключення CSS до HTML

Зовнішній (external) стиль:

За допомогою тега link <link rel=”stylesheet” type=”text/css” href=”styles.css”>

Атрибут rel визначає зв’язок між пов’язаним ресурсом і поточним документом.
Атрибут href відповідає за шлях до нашого файлу CSS

CSS-файл (styles.css):

Внутрішній (inline) стиль:

HTML-файл:

Внутрішній стиль (embedded style):

HTML-файл:

Селектори CSS

CSS використовує селектори для вибору елементів, які потрібно стилізувати. Ось кілька основних селекторів:

  • Елементи: Наприклад, h1, p, a вибирають всі елементи h1, p та a відповідно.
  • Класи: Використовуйте . перед ім’ям класу, наприклад .myClass, щоб вибрати всі елементи з класом “myClass”.
  • Ідентифікатори/id: Використовуйте # перед ідентифікатором, наприклад #myId, щоб вибрати елемент з ідентифікатором “myId”.

Властивості та значення

Властивості CSS визначають, які аспекти стилізації будуть застосовуватись до вибраних елементів. Основні властивості включають кольори, шрифти, розміри, відступи, фони та багато іншого. Наприклад:

  • Колір тексту: color: red
  • Розмір шрифту: font-size: 16px
  • Фоновий колір: background-color: #22f2f2

Використання групування та наслідування

В CSS ви можете групувати селектори та застосовувати стилі до кількох елементів одночасно. Наприклад:

У цьому прикладі стилі color: blue застосовуватимуться до всіх заголовків h1, h2 та h3, а стилі font-size(розмір шрифту): 18px – до елементів p з класом “myClass” та елемента з ідентифікатором “myId”.

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

У цьому прикладі всі елементи з класом “child”, що знаходяться всередині елементів з класом “parent”, матимуть стиль font-size: 18px, а також успадковуватимуть колір color: blue від батьківського елемента.Застосування фонового кольору та зображення:

Застосування фонового кольору та зображення

У цьому прикладі background-color встановлює фоновий колір для сторінки, а background-image задає фонове зображення. background-repeat вказує, як повторювати зображення по горизонталі (repeat-x означає повторення лише горизонтально).

Закруглення кутів елемента:

Зміна розміру тексту та кольору:

У цьому прикладі font-size визначає розмір тексту заголовку <h1>, а color встановлює колір тексту. Використовуйте шістнадцятковий код кольору або назву кольору, наприклад red або #FF0000.

Застосування фонового кольору та зображення:

У цьому прикладі background-color встановлює фоновий колір для сторінки, а background-image задає фонове зображення. background-repeat вказує, як повторювати зображення по горизонталі (repeat-x означає повторення лише горизонтально).

  1. Закруглення кутів елемента:

Цей код встановлює закруглення кутів для елемента з класом .button. Значення 5px визначає радіус закруглення. Застосування закруглення кутів додає елементам більш привабливий вигляд.

    Висновок

    Щоб полегшити вивчення CSS та розробку веб-сайтів, ви можете скористатися CSS-фреймворками, які надають готові стилі та компоненти. Найпопулярніші CSS-фреймворки включають Bootstrap, Foundation та Materialize CSS. Вони забезпечують зручний інтерфейс та зразки коду, які допоможуть вам розпочати роботу.

    Крім того, існують різноманітні онлайн-ресурси, які надають документацію, підручники та практичні завдання для навчання CSS. Деякі з них включають Mozilla Developer Network (MDN), W3Schools та CSS-Tricks. Вивчення CSS є важливим етапом для будь-якого веб-розробника.
    Ви можете також подивитись відео по роботі з CSS перейшовши на мій YouTube канал https://youtu.be/86ZyVV3Qgvs
    Дякую)

    Scroll to Top