Веб-розробка включає не тільки створення різних HTML-елементів, але і їх стилізацію за допомогою каскадних таблиць стилів (CSS). CSS відіграє ключову роль у візуальному оформленні веб-сторінок, дозволяючи задавати різні стилі та ефекти для всіх елементів сайту. Однак не завжди зрозуміло, як правильно задати стилі та де шукати потрібні властивості та значення.
У цій статті ми розглянемо основи роботи з CSS та навчимося задавати стилі для різних HTML-елементів. Основними компонентами CSS є селектори, властивості та значення. Селектори дозволяють вибирати елементи, до яких застосовуватимуться задані стилі, властивості визначають конкретні атрибути елемента, а значення задають конкретне значення цього атрибута.
Селектори в CSS можуть бути дуже різноманітними: від класів та ідентифікаторів до псевдоелементів та псевдокласів. Кожен з них надає різні можливості для вибору елементів та завдання стилів. Властивості та значення CSS можна знайти у спеціальній документації та використовувати для створення цікавих ефектів та оформлення веб-сторінок. Взаємодія з CSS здійснюється через файли стилів або всередині самого HTML-документа за допомогою тега <style>
.
Назва стилю | Синтаксис | приклад |
---|---|---|
Вбудовані стилі | тег style | <style> p { color: blue; } </style> |
Внутрішні стилі | тег style всередині тега head | <head> |
Зовнішні стилі | тег link з атрибутом rel="stylesheet" | <head> |
Inline-стилі | атрибут style для елемента | <p style="font-weight: bold;">Текст</p> |
!important | додавання !important до якості | <p style="color: green !important;">Текст</p> |
Як встановити стиль у CSS?
Щоб додати елемент вбудований стиль, виконайте наступні дії:
- Виберіть елемент.
- На панелі CSS у блоці Вбудований стиль натисніть кнопку Додати властивість.
- Додайте властивості зі значеннями, щоб змінити стиль елемент.
Як підключити стилі CSS?
Щоб підключити CSS файл до HTML-сторінки, в тезі head слід написати таку конструкцію: <linkrel="stylesheet" href="путь к CSS файлу">. Сам CSS файл має бути з розширенням. css.
Як додати стилі CSS до HTML?
Найбільш правильний варіант визначення загальних стилів для сайту – це підключення зовнішнього файлу CSS за допомогою тега <link>. В атрибуті href необхідно вказати URL-адресу файлу, що містить набір стилів CSS. Атрибути rel="stylesheet" та type="text/cssвказують, що вказаний файл є таблицею стилю у форматі CSS. Збережена копія