Селектори вибору елементів

В залежності від різних ситуацій, ми можемо посилатися на різні об’єкти декількома способами.

Тегом. Ми вже користувалися цим методом: просто беремо назву тегу та вписуємо, а у фігурних дужках — задаємо стиль.

Класом. Для кожного тегу можна задати клас. Здогадуєтесь, як? Правильно, за допомогою атрибуту. Заходимо в наш html-документ та в будь-який тег вписуємо атрибут «class=””». В лапки вписуємо довільну назву.

Ось так: <b class=”style_red”>жирний текст</b>

Повертаємося до css-файлу та задамо його стиль:👉 Як скористатися класом у коді?

Клас вже не прописується просто, як тег. Ми ставимо крапку на початку: так CSS розуміє, що ми посилаємося саме на клас під назвою style_red, а не на тег style_red.

Тобто, виглядає так: «.style_red»

Тепер ми можемо вписати class=”style_red” в будь-який інший тег, та йому автоматично присвоюється заданий стиль.

Це дозволяє не перенавантажувати код, і водночас додати до різних тегів однаковий стиль. Один раз прописати стиль класу і просто вписувати його в потрібні теги.

Ідентифікатором. Працює майже як клас, але може бути лише один на html-сторінці. Тобто, декілька об’єктів можуть належати до одного класу, а до одного ідентифікатору — ні.

Задається також за допомогою атрибуту «id=””». В лапках — довільна назва (краще латиницею, без пробілів та без спеціальних символів).

Наприклад, задамо ідентифікатор для тегу <b></b>:

<b id=new_name>Жирний текст</b>

Потім на цей ідентифікатор можна буде послатися у CSS-документу та задати стиль саме йому. Але вже не через крапку, як для класу, а через решітку. Пишеться так:👉 Як працює ідентифікатор в коді?

Як це все працює — Григорій пояснив на відео

Стилі для тегу <div></div>

Є ще досить популярний спосіб обирати елементи. Для цього нам треба повернутися до html та розібрати тег <div></div>.

Це тег, як коробка — в нього можна помістити групу тегів, та працювати з ними одразу, як з блоком. Наприклад, накидати туди купу тексту та сказати: яка буде ширина в цього блоку, висота і все таке. Так ми можемо, наприклад, зробити велику статтю, адаптовану під мобільні пристрої.

Наприклад, у нас уже прописані стилі для тегу <b> — червоний колір. Але тепер нам треба зробити так, щоб саме тег <b>, вложений у тег <div>, був синім.

Написати новий стиль для <b> не можемо, бо він застосується то всіх тегів <b> на сторінці. Задати клас ми не бажаємо. Що робити? Скористатися вкладеністю тегів.

Якщо нам треба задати стиль тегу, який знаходиться в іншому тегові, можемо послатись на нього так:👉 Як це виглядає у коді?

Чому ми не проходили <div>, коли вчили HTML?

В роботі програміста дуже багато навчання. Тут немає такого, що ти вчишся рік, а потім йдеш на практику, коли все-все вивчив. Так не буває в реальному світі. Програміст вчиться та працює одночасно.

Неможливо вивчити все програмування і лише кодити, ніколи не навчаючись. За час роботи ви не раз знайдете нове у звичному. Тим більше маєте бути до цього готові на фрилансі.

Задача курсу не лише дати вам знання з програмування, а й привчати до роботи програміста.

Завдання

1. Створіть кілька нових об’єктів у html-файлі. Наприклад, <h1></h1>, <strike></strike> та <b></b>.

2. Пошліться на кожен тег різним способом: напряму, вписавши тег, за допомогою класу та ідентифікатора.

3. Створіть тег <div>

4. Копіюйте туди будь-який текст.

5. Як завгодно розставте у ньому теги маркування тексту, які ми вивчали на курсі по html (наприклад, підкреслений, курсив або закреслений)

6. Та задайте кожному тегові різний колір