Селектори тегів.
Селектори класів.
Селектори ID.
Селектори груп.
Якщо вам потрібно змінити зовнішній вигляд вмісту, який знаходиться в якомусь тезі, використовуйте CSS селектори тегів. Допустимо, вам потрібно змінити шрифт і колір усіх тегів <h3>, які є на веб-сторінці. Для цього вам знадобиться створити стиль, де селектор буде h3(зверніть увагу: в CSS кутові дужки <>тега не записуються, а використовується тільки його ім'я):
Приклад:
h3 {
font-family: Geneva, Arial, sans-serif;
color: orange;
}
Написавши такий стиль, ви зміните шрифт відразу для всіх тегів <h3>на сторінці, скільки б їх не було. Погодьтеся, що це дуже швидко та зручно. Аналогічно можна створювати стилі для інших тегів, замінюючи назву селектора на потрібне вам ( p, h1, h2, h3і тощо).
Класи CSS – це чудовий інструмент, який розширює можливості створення стилів у рази. Для кращого розуміння ми розглядатимемо все на прикладах.
Отже, трохи вище ми використали стиль для всіх тегів <h3>на веб-сторінці – текст має шрифт Geneva та помаранчевий колір. Але що робити, якщо вам потрібно змінити колір одного з тегів <h3>на зелений? На допомогу приходять селектори класів. Все, що вам необхідно зробити, це створити стиль, де селектор – придумане вами ім'я класу. Ми назвемо клас greentext і запишемо Приклад:
.greentext {
color: green;
}
Але це ще не все. Тепер, щоб змінити колір для одного з тегів <h3>на сторінці, потрібно відредагувати HTML-документ, застосувавши клас greentextдо потрібного нам тегу. Записується це так:
<h3 class="greentext"></h3>
Створений клас можна застосовувати до будь-яких елементів веб-сторінки. Ви можете надавати стиль не тільки цілим заголовкам та абзацям, але й окремим фрагментам сторінки, наприклад, словам (використовуючи розглянутий нами у першому та другому розділі тег <span>та присвоюючи йому клас).
Запам'ятайте кілька правил написання класів:
у CSS перед назвою селектора класу обов'язково ставиться крапка (але при присвоєнні класу HTML-документі ця точка не потрібна);
у назві класів можна використовувати лише літери латинського алфавіту, дефіс, символ підкреслення, цифри;
назва класу завжди має починатися з літери (правильні варіанти назв: .intro, .img-border, .nav_menu_01; неправильні: .2color, .-link, ._divider);
Назви класів CSS чутливі до регістру, тому класи начебто .reviewй .Reviewсприйматимуться як два окремих.
Ідентифікатор визначає унікальну назву елемента. Записується він майже так само, як і клас, тільки в CSS замість крапки ставиться символ решітки #
Приклад:
#footer {
width: 100%;
}
У HTML-документі ідентифікатор надається за допомогою атрибута id:
<div id="footer"></div>
Можливо, у вас виникло питання: у чому різниця між ідентифікатором та класом? Існує кілька відмінностей:
ID – це унікальна назва елемента на веб-сторінці, яка має зустрічатися на ній лише один раз (наприклад, шапка сайту та підвал: id="header"і id="footer"), тоді як клас може присвоюватися кільком елементам з метою відрізняти їх від інших;
ідентифікатори зручні для JavaScript-розробників, оскільки дозволяють отримати швидкий доступ до елемента DOM зі скриптів (багато в чому саме тому необхідно, щоб ID зустрічався на сторінці лише один раз);
кожне правило CSS має свою так звану вагу (від ваги залежить, яке з правил отримає вищий пріоритет при виконанні). Ідентифікатор має більшу вагу, ніж клас, тому, якщо елементу присвоєно і ID, і клас, перевага надається ID. Приклад:
<p id="text" class="content">текст</p>
#text {
color: yellow;
}
.content {
color: blue;
}
ID має більшу вагу, тому колір тексту буде жовтим (yellow).
За допомогою ідентифікаторів можна ставити якірні посилання на певні елементи веб-сторінки. Достатньо присвоїти цьому елементу ID:
<h3 id="description">Описание</h3>
…і дати на нього посилання виду http://site.com/category/page/#description.
4. Селектори груп
Ми підійшли до четвертого типу селекторів CSS – групові селектори. Уявіть, що вам потрібно зробити шрифт жирним для декількох елементів веб-сторінки – p, h1, h2, h3. Можна було б записати цей стиль окремо для кожного елемента:
p {
font-weight: bold;
}
h1 {
font-weight: bold;
}
h2 {
font-weight: bold;
}
h3 {
font-weight: bold;
}
Але такий код займає більше часу та місця, ніж це необхідно. Адже все можна записати набагато простіше і коротше, перерахувавши імена через кому і створивши таким чином груповий селектор:
Приклад:
p, h1, h2, h3 {
font-weight: bold;
}
Звичайно, у перерахунку можуть брати участь не тільки селектори тегів, а й класи та ідентифікатори.
А якщо з якоїсь причини вам необхідно створити стиль абсолютно для всіх елементів веб-сторінки, можна скористатися універсальним селектором CSS, для позначення якого використовується символ зірочки *:
* {
font-family: Geneva, Arial, sans-serif;
}
селектор, селектор {
властивість: значення;
властивість: значення;
властивість: значення;
}
p {font-family: arial;
font-size: 60pt;
text-align: center;
font-weight: bold;
font-style: italic; /* курсив */
line-height: 1.2;
background-color:#dfdfdf;
color: red;
}
table {
width: 600px;
height: 800px;
border-collapse: collapse; /*прибираємо пусті проміжки між клітинками*/
border: 1px solid grey; /*встановлюємо для таблиці зовнішню межу сірого кольору товщиною 1px*/
background-color: peachpuff;
}
th {width: 20%;}
th, td {padding: 10px 15px;} /* верхній і нижній відступи */
div {background: linear-gradient(45deg, #EECFBA, #C5DDE8);
}