, кожному з яких потрібно задати певний колір. Як це зробити? Стандартні CSS selectors за тегами не підійдуть, вони вказують параметри всіх блоків відразу. Вихід простий. Призначте елемент клас. Наприклад, перший div отримав class='red', другий - class='blue', третій - class='green'. Тепер їх можна вибрати за допомогою таблиці CSS.

Синтаксис такий: вказуємо точку («.»), після якої пишемо назву класу. Щоб керувати першим блоком, використовуємо конструкцію. Другим – .blue і так далі.

Важливо!Рекомендується використовувати зрозумілі значення атрибуту class. Поганим тоном вважається використання трансліту (наприклад, krasiviy-blok) або випадкових комбінацій букв/цифр (ojfh834871). У такому коді ви обов'язково заплутаєтеся, не кажучи вже про те, з якими труднощами доведеться зіткнутися тим, хто займатиметься проектом після вас. Оптимальний варіант- Використовувати якусь методологію, на зразок БЕМ.

Позитивні якості - досить висока гнучкість.

Недоліки - у кількох елементів може бути той самий клас, отже, вони редагуватимуться одночасно. Проблема вирішується використанням методології, а також успадкування препроцесорів. Обов'язково освойте less, sass або якийсь інший препроцесор, вони спростять роботу.

Селектор з ID

Щодо цього варіанту думки верстальників та програмістів неоднозначні. Деякі підручникиCSSвзагалі не рекомендують використовуватиID,оскільки при неакуратному застосуванні вони можуть спричинити проблеми з успадкуванням. Однак багато фахівців активно розставляють їх по всій розмітці. Вирішувати вам. Синтаксис такий: символ ґрат («# »), Потім ім'я блоку. Наприклад,# Red.

IDвідрізняється від класу за кількома параметрами. По-перше, на сторінці не може бути двох однаковихID.Їм призначаються унікальні імена. По-друге, такий селектор має більш високий пріоритет. Це означає, що якщо ви задасте блоку класredта вкажіть у таблицяхCSSчервоний а потім призначте йому жid blueі вкаже синій колір, блок стане синім.

Позитивні якості - можна керувати конкретним елементом, не звертаючи уваги на стилі для тегів і класів.

Недоліки - легко заплутатися у великій кількостіIDіclass.

Важливо!Якщо ви користуєтеся методологією БЕМ (або її аналогами),IDвам, загалом, не потрібні. Така техніка верстки має на увазі використання унікальних класів, що набагато зручніше.

Універсальний селектор

Синтаксис: знак звідочки («*») та фігурні дужки, тобто *{}.

Використовується для призначення певних атрибутів одразу всім елементам сторінки. Коли це може стати в нагоді? Наприклад, якщо ви хочете задати сторінці властивістьbox-sizing: border-box.Може використовуватися не тільки для керування всіма компонентами документа, але й для контролю всіма дочірніми елементами певного блоку, наприклад,div * ().

Переваги - можна керувати великою кількістюелементів одночасно.

Недоліки - недостатньо гнучкий варіант. Крім того, використання цього селектора в деяких випадках уповільнює роботу сторінки.

За атрибутами

Дають можливість керувати елементом із конкретним атрибутом. Наприклад, у вас є кілька тегів input з різним типом атрибутів. Один з них - текст, другий - password, третій - число. Звичайно, можна задати кожному класи чи ID, але це не завжди зручно. CSS selectors за атрибутами дозволяють вказати значення для певних тегів з максимальною точністю. Наприклад, ось так:

input()

Цей селектор атрибутів вибере все input із типом text.

Інструмент досить гнучкий, його можна використовувати з будь-якими тегами, які мають наявність атрибутів. Але це ще не все! У специфікації CSS можна управляти елементами навіть з великою зручністю!

Уявимо, що на вашій сторінці є input з атрибутом placeholder=“Введіть ім'я“ та input placeholder=“Введіть пароль“. Їх також можна вибрати за допомогою селектора! Для цього використовується наступна конструкція:

input() або input

Можлива гнучкіша робота з атрибутами. Припустимо, у вас є кілька тегів зі схожими атрибутами title (скажімо, «каспійська» та «каспійська»). Щоб вибрати обидва, використовуємо такі селектори:

CSS вибере всі елементи, у тайтлі яких є символи «каспійська», тобто і «каспійська», і «каспійська».

Також можна вибирати теги, атрибути яких починаються з певних символів:

або закінчуються ними:

{}.

Переваги – максимальна гнучкість. Можна вибирати будь-які існуючі елементи сторінки без метушні з класами.

Недоліки – використовується відносно рідко, лише у специфічних випадках. Багато верстальників віддають перевагу методології, оскільки вказати клас буває простіше, ніж розставляти численні знаки «рівно». Крім того, ці селектори не працюють в Інтернеті. Explorer версії 7 та нижче. Втім, кому зараз потрібні старі Internet Explorer?

Селектори псевдокласів

Псевдоклас позначає стан елемента. Наприклад, :hover - те, що відбувається з частиною сторінки при наведенні курсору, :visited - відвідане посилання. Сюди входять елементи на кшталт: first-child і: last-child.

Цей тип селекторів активно застосовується у сучасній верстці, оскільки завдяки ньому можна зробити сторінку «живою» без застосування JavaScript. Наприклад, ви хочете зробити так, щоб при наведенні на кнопку з класом btn її колір змінювався. Для цього використовуємо таку конструкцію:

Btn:hover (

Background-color: red;

Для краси можна вказати в основних властивостях цієї кнопки властивість transition, наприклад, в 0,5s - у такому разі кнопка червонітиме не миттєво, а протягом півсекунди.

Переваги – активно використовуються для «оживлення» сторінок. Прості у застосуванні.

Недоліки – їх немає. Це справді зручний засіб. Однак недосвідчені верстальники можуть заплутатися у великій кількості псевдокласів. Проблема вирішується навчанням та практикою.

Селектори псевдоелементів

"Псевдоелементи" - це ті частини сторінки, яких немає в HTML, але ними все одно можна керувати. Нічого не зрозуміли? Все простіше, ніж здається. Наприклад, ви хочете зробити першу літеру в рядку великого і червоного, залишивши інший текст маленьким і чорним. Звичайно, можна укласти цю літеру в span з певним класом, але це довго і нудно. Набагато простіше виділити абзац і використовувати псевдоелемент::first-letter. Він дає можливість керувати зовнішнім виглядом першої літери.

Існує досить багато псевдоелементів. Перерахувати їх у межах однієї статті навряд чи вдасться. Ви можете знайти відповідну інформацію в улюбленій пошуковій системі.

Позитивні якості - дають можливість гнучко налаштовувати зовнішній вигляд сторінки.

Недоліки – новачки в них часто плутаються. Багато селекторів цього типу працюють лише у певних браузерах.

Підведемо підсумок

Селектор – потужний засіб контролю потоку документа. Завдяки йому можна вибрати абсолютно кожен компонент сторінки (навіть існуючий лише умовно). Обов'язково вивчіть усі наявні варіанти або запишіть їх. Це особливо важливо, якщо ви створюєте складні сторінки із сучасним дизайном та великою кількістю інтерактивних елементів.

Універсальний селектор CSS, мабуть, найпростіший у розумінні, тому що він вказує, що стилі будуть застосовані абсолютно до всіх елементів без винятку. Універсальний селектор складається лише з одного знака – зірочка (*), загальний синтаксис наступний:

* { властивість: значення; властивість: значення; ... )

Приклад використання універсального селектора CSS

Параграф 1

Параграф 2

Параграф 3

Результат у браузері

Параграф 1

Параграф 2

Параграф 3

У цьому прикладі було обнулено поля, відступи та прибрано рамки елементів сторінки. Навіщо це може бути потрібно? Як ви вже знаєте з уроку деякі HTML-елементи спочатку мають певні значення деяких властивостей, наприклад у параграфів це ненульові верхні і нижні поля порожнього простору, у посилань-зображень це рамки і т.д. Але не все так просто, справа в тому, що в різних браузерахрозмір цих полів може дещо відрізнятися, а деякі вже давно не встановлюють рамки за замовчуванням у посилань-зображень. І це далеко не всі можливі відмінності.

Так ось, багато верстальників (а ви зараз навчаєтеся саме верстці) створюють так зване «Скидання стилів CSS», тобто на початку таблиці стилів вони обнуляють всі можливі ненульові значення CSS, а потім, в процесі роботи, додають стилі елементам, але вже, природно, зі своїми значеннями. Таким чином можна бути впевненим, що у всіх браузерах HTML-сторінка виглядатиме однаково.

Дуже часто для скидання стилів якраз і застосовується універсальний селектор, хоча деякі вважають за краще просто перераховувати через кому деякі селектори тегів, а інші взагалі не використовують скидання, покладаючись на свою уважність. Як робитимете ви - вирішувати тільки вам, але в будь-якому випадку поки про це думати рано. І будьте впевнені, що з часом у вас сам собою виробиться свій стиль написання стилів (вибачте за тавтологію) так що не морочіться на цьому.

Домашнє завдання.

Робити домашнє завдання з універсального селектора я не бачу сенсу, тому що тут все дуже очевидно, тому займемося трохи іншим.

1. Змініть стилі тега таким чином, щоб він став схожим на параграф. Яку властивість для цього потрібно подумати самі.
2. Змініть тег параграфа так, щоб він навпаки став схожим на тег виділення довгих цитат.
3. Перетворіть тег із елемента рівня рядка (inline) на блоковий елемент. Використовуйте для цього властивість

Іноді потрібно встановити одночасно один стиль для всіх елементів веб-сторінки, наприклад, встановити шрифт або зображення тексту. У цьому випадку допоможе універсальний селектор, який відповідає будь-якому елементу веб-сторінки.

Для позначення універсального селектора застосовується символ зірочки (*) і синтаксис буде наступним.

* (Опис правил стилю)

У У деяких випадках вказувати універсальний селектор не обов'язково. Так, наприклад, записи*.class та .class є ідентичними за своїм результатом.

У приклад 1.50 показано одне з можливих додатківУніверсальний селектор - вибір шрифту та розміру тексту для всіх елементів документа.

приклад 1.50. Використання універсального селектора