Від автора: працюючи з css вам у будь-якому випадку доведеться долати стилі. Завдання властивостей для глобальних селекторів в будь-якому випадку не вистачить. Сьогодні подивимося, як в css змінити стиль будь-якого елементу.
Перше – глобальні селектори тегів
Селектори тегів призначені для того, щоб давати стилі всіх елементів одного типу. Наприклад, списками. Щоб прибрати маркери у всіх списків на веб-сторінках сайту, достатньо в css записати це:
ul{
list-style: none;
}
Відмінно. Відповідно, свій селектор є у комірок таблиць, малюнків, блоків, полів форм і взагалі всіх елементів. Це зрозуміло. Але тут же виникає проблема: чи всі списки на сайті ви будете стилізувати однаково. Не, ну тут ситуації можуть бути абсолютно різними. Давайте розглянемо краще на прикладі абзаців, тому що це буде більш наближене до реальності.
Отже, всім абзаців на сторінці ставимо якісь стилі. Це буде загальне оформлення.
p{
font-size: 16px;
color: #333;
}
Ну сильно напружуватися не будемо, лише поставимо колір і розмір шрифту. Добре, це просто оформлення для всіх параграфів. Але тепер припустимо, що перед вами з’явилася завдання: певні абзаци потрібно виділити червоним кольором. Як це зробити?
Досить просто. Опишемо в css новий стильовий клас. Припустимо, назвемо його red, щоб було зрозуміло.
.red{
color: red;
}
Тепер залишається поставити його потрібним абзаців. Припустимо, мені потрібно зробити його для другого і третього. Я сподіваюся, прописувати стильові класи ви вмієте, це робиться так:
Абзац 3
Ну і також чинимо з іншими абзацом. У підсумку ми вже переопределили стиль. Тобто колір тексту всіх абзаців з темно-сірим, а ми змінили колір деяких параграфів на червоний. Ось вам і перевизначення стилів.
Але завдання стильового класу годиться в тому разі, коли потрібно змінити правила групі. Тобто кількох параграфів, зображень і т. д. Але що робити, якщо перевизначити стилі потрібно всього лише одному елементу? Для цієї мети краще використовувати ідентифікатор.
Ідентифікатор (id) використовується для того, щоб привласнити унікальну мітку конкретного елементу на веб-сторінці. Таким чином до нього можна буде звертатися в css через цей ідентифікатор і ставити якісь правила. Вони будуть застосовані, навіть якщо раніше для цього елемента були поставлені абсолютно інші стилі.
Наприклад, у нас є 2 абзацу, в якому текст пофарбований червоним кольором. Але якщо одному з них задати ідентифікатор і потім описати в css-стилі для цього селектора, то вони будуть пріоритетніше, ніж правила класу.
Абзац 3
#blue{
color: blue;
}
Оновимо сторінку і переконаємося в тому, що синій колір тексту. Але по суті для нашого абзацу колір тексту задається в трьох місцях. По-перше, в селекторі тега – темно-сірий. По-друге, в класі – червоний. По-третє, в ідентифікаторі.
Який висновок з цього експерименту? А те, що клас пріоритетніше селектора тега, а ідентифікатор пріоритетніше класу. Ще одне важливе твердження, які ви повинні зрозуміти для себе: стильові класи зазвичай використовують для стилізації групи елементів (меню, групу абзаців, ряд картинок), а ідентифікатори – для стилізації одиночних елементів, унікальних на сайті (шапка, підвал, якась іконка, логотип тощо).
Перевизначення за допомогою вбудованих стилів
Будь html-елемента можна вбудувати стилі прямо в тег, прописавши їх за допомогою атрибута style. Якщо ми зробимо так:
Абзац 3
Дивіться, у нашого параграфа вже купа властивостей, які визначають оформлення. Але його текст стане зеленим, як це описано в атрибуті style. Чому? Та тому що внутрішні стилі мають найвищий пріоритет.
Ламаємо всі правила з допомогою !important
Ми підібралися до css-приймання, який ламає всі правила пріоритетності і відправляє їх у відро для сміття. Це запис !important, яка позначає властивість як найважливіше. Давайте розглянемо той самий приклад. У нас є параграф, його код наведений вище. Як видно, для нього записано аж 4 різних варіанти кольору.
Зокрема, в селекторі тега вказаний темно-сірий колір, але він перебивається класом, ідентифікатором і внутрішніми стилями, які в нашому випадку перебивають все інше. Але є простий спосіб перебити все це. Запишемо так:
p{
font-size: 16px;
color: #333 !important;
}
Тобто ті ж самі стилі для селектора всіх абзаців, тільки при визначенні кольору після значення дописано !important. Ця команда позначає стиль як важливий. Тобто той, який обов’язково повинен застосується. Ну перевіримо:
Всі абзаци одного кольору – темно-сірого. Зауважте. Що не клас, ані ідентифікатор, ні навіть вбудовані стилі, які по ідеї застосовуються в останню чергу і повинні перебивати все, не можуть змінити колір і він залишається таким, яким він заданий у селекторі тега.
Ось такі пироги. Правда, я раджу вам не вдаватися занадто часто до !important. А якщо немає гострої потреби, то зовсім не вдаватися. Природно, якщо ви пропишіть для стильового класу !important, то вже цей стиль буде найважливішим. Причому в змаганні: селектор тега !important і клас !important, переможе клас. І ви вже розумієте, з якої причини. Ну і так далі. Виходить, що можна вбудованому стилю теж дописати !important. Ось це буде вже кінцеве перевизначення, яке неможливо перебити.
Ну знову ж таки, не раджу вам занадто багато гратися з important, це вважається поганим тоном верстки.
Підсумок
Окей. З перевизначенням ми начебто розібралися. Звичайно, ми розглянули не всі способи перевизначення. Про деякі ви можете здогадатися самі. Наприклад, використання вкладених селекторів. В принципі можна легко здогадатися, що абзаци в боковій колонці легко відокремити від абзацу в основній частині сайту.
#sidebar p{}
#content p{}
Зауважте, що тут ми ніяких класів та ідентифікаторів саме абзаців не ставили. Ну а рівень вкладеності селекторів може бути будь-яким. Ви можете написати хоч так:
#content article .block-header .left-b p{}
Все залежить від складності розмітки. Крім комбінованих селекторів є і маса інших, допомагають так чи інакше змінити оформлення. Їх ви зможете вивчити, якщо більш серйозно візьметеся за вивчення css. Наприклад, пропоную пройти наш курс з CSS3, в якому ви зможете познайомитися з купою нових цікавих селекторів.
