Page 49 - 6108

– Селектор Елемента. Селектори елементів використовуються для
визначення стилів елементів для всіх сторінок веб-сайту, наприклад, стиль
заголовків h1 або загальний стиль абзаців:

h1 {font-family: Lobster, cursive;}
p {letter-spacing: 0.1em;}

– Селектор Класу. Селектори класу використовуються для визначення
стилів для кількох елементів одного типу, розміщених у різних частинах або на
різних сторінках веб-сайту. Для створення заголовка класу headline
необхідно додати атрибут class з відповідним значенням в відкриваючий тег

<h1>. Далі необхідно задати стиль для зазначеного класу. Даний стиль
оформлення можна застосувати і для інших елементів.
.headline {
text-transform: uppercase;
color: lightblue;
}
– Селектор Ідентифікатора. Селектори ідентифікатора
використовуються для привласнення стилю одному конкретному елементу.
Ідентифікатор id елемента можна використовувати в документі лише один раз,

оскільки він виділяє унікальний елемент.
#sidebar { text-transform: uppercase; color: lightblue;}

– Селектор Нащадка. До нащадків елемента відносяться його дочірні
елементи. Селектори нащадків дозволяють стилізувати всі вкладені елементи,
наприклад, можна відформатувати зовнішній вигляд елементів маркованого
списку:

ul li {text-transform: uppercase;} – вибере всі елементи li,
що є нащадками всіх елементів ul.

Якщо потрібно відформатувати нащадів певного елемента, то можна
поставити йому стильовий клас:
p.first a {color: green;} – означає, що потрібно застосувати
даний стиль до всіх посилань, нащадків абзацу, що відноситься до класу з ім'ям
first;
p .first a {color: green;} – якщо додати пробіл, то будуть обрані
посилання, розташовані всередині будь-якого тегу класу .first, який є
нащадком елемента <p>;
.first a {color: green;} – даний стиль застосовується до любого

посилання, що розташоване всередині інших тегів, позначених класом .first.
– Дочірній селектор. Дочірній тег є прямим нащадком тегу, що його
містить. Тобто, відносини "батьки-діти" існують між елементами і тими
елементами, які містяться безпосередньо всередині них. В одного елемента
може бути кілька дочірніх елементів, а батьківський елемент може бути в
кожного елемента тільки один.
p > strong – вибирає всі елементи strong, які є дочірніми по
відношенню до елементу p.