#3 - Селектори для вибірки елементів
Відеоурок
За допомогою селекторів та правил ми можемо вибрати потрібні об'єкти, після чого застосувати стилі до обраних об'єктів. Спеціально для цього в HTML та CSS існують класи та ідентифікатори. Вони дозволяють ставити мітку на об'єкт і потім за цією міткою брати об'єкт у CSS.
Існує безліч правил та селекторів, які дозволяють вибирати різні об'єкти з HTML. Найпоширенішими варіантами вибору об'єктів є: вибір за тегом, класом та ідентифікатором. Крім того, ми можемо комбінувати все це, щоб здобути більш точних значень.
Важливо розуміти, що при виборі об'єкта за тегом або за класом ви можете вибрати відразу безліч різних об'єктів, а при виборі за ідентифікатором лише один об'єкт, оскільки на одній сторінці не може бути двох id з однаковими значеннями.
Важливо. Якщо у вас два теги з однаковими ідентифікаторами, то сучасні браузери все одно будуть коректно виводити теги та стилі до них. Проте це не правильне рішення, тому намагайтеся такого не допускати, тому що для подібних завдань існують класи.
Матеріали для курсу
Щоб завантажувати матеріали до відеокурсів, необхідно оформити підписку на сайт
Онлайн редактор коду
Завдання до уроку
Є HTML код:
<h3>Просто текст</h3>
<p>Ще <b>додатковий</b> текст </p>За рахунок класів CSS виберіть тег «H3», а також тег «b». До вибраних тегів додайте стилі:
- синій колір тексту;
- розмір тексту 23px (font-size).
Рішення завдання (HTML код):
<h3 class="styling">Просто текст</h3>
<p>Ще <b class="styling">додатковий</b> текст </p>Стилі для об'єктів:
.styling {
color: blue;
font-size: 23px;
}Отримати інші домашні завдання можна після підписки на проект
Велике завдання за курсом
Вам необхідно оформити передплату на сайті, щоб мати доступ до всіх великих завдань. У завдання входить методика рішення, а також готовий проект з відповіддю до завдання.
PS: подібні завдання доступні при підписці від 1 місяця
Також варто подивитися
