Тема та мета роботи
Тема: Каскадні таблиці стилів. Селектори. Ідентифікатори. Текстове оформлення.
Мета: Навчитися працювати з селекторами тегів, класів, ID, списками, фоном, кольорами та стилями тексту.
Місце розташування: GitHub
Селектори тегу
Селектори тегів застосовуються до всіх елементів певного типу.
body {
margin: 0;
font-family: 'Poppins', sans-serif;
background-color: #F0EADB;
}
Цей абзац оформлено через селектор тегу body.
Селектори класу
Класи дозволяють створювати стилі для групи елементів.
.burger {
display: none;
font-size: 30px;
cursor: pointer;
color: #3b2f22;
margin-left: auto;
user-select: none;
}
Текст оформлений за допомогою класу .burger.
Селектори ідентифікатора
ID-селектор використовується для одного унікального елемента.
#toggle-search {
display: none;
}
Цей елемент стилізований за допомогою селектора #toggle-search.
Інші селектори
В CSS існують також дочірні, універсальні, сусідні та атрибутні селектори.
.menu ul li ul li {
display: block;
text-align: left;
padding: 4px 20px;
}
CSS: Шрифти, текст, фон, таблиці, списки
Текст із шрифтом Poppins, кольором #AF1FCC та тінню.
Приклад таблиці:
| Елемент | Властивість | Значення |
|---|---|---|
| Шрифт | font-family | Poppins |
| Колір | color | #AF1FCC |
| Фон | background-color | #e5e7de |
Приклад списку:
- Селектори тегів
- Селектори класів
- Селектори ідентифікаторів
Висновки
У ході виконання лабораторної роботи я закріпила знання щодо CSS-селекторів, навчилась оформлювати текст, фон, таблиці та списки.
Контрольні питання
- Для чого використовуються CSS?
- Методи визначення стилів:
- Каскадування vs спадкування
- Приклади селекторів тегу і класу:
- Для чого використовується ID?
- Приклади оформлення тексту
CSS задає зовнішній вигляд HTML-елементів.
<link rel="stylesheet" href="style.css">
<style> h1 { color: red; } </style>
<p style="color: green;">Текст</p>
Каскадування: вибір стилю з найвищим пріоритетом.
Спадкування: властивості передаються дочірнім елементам.
p { color: blue; }
.text { font-size: 20px; }
Для унікального елемента, до якого звертаються в CSS або JS.
p {
color: #333;
font-size: 18px;
font-family: 'Poppins';
text-align: center;
text-decoration: underline;
}