Перше - глобальні селектори тегів
Селектори тегів призначені для того, щоб давати стилі всіх елементів одного типу. Наприклад, списками. Щоб прибрати маркери у всіх списків на веб-сторінках сайту, досить в css записати це:
Відмінно. Відповідно, свій селектор є у комірок таблиць, картинок, блоків, полів форм і взагалі всіх елементів. Це зрозуміло. Але тут же виникає проблема: чи все списки на сайті ви будете стилізувати однаково. Не, ну тут ситуації можуть бути абсолютно різними. Давайте розглянемо краще на прикладі абзаців, тому що це буде більш наближена до реальності.
Отже, всім абзаців на сторінці задаємо якісь стилі. Це буде спільне оформлення.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Ну сильно напружуватися не будемо, лише поставимо колір і розмір шрифту. Добре, це просто оформлення для всіх параграфів. Але тепер припустимо, що перед вами постало завдання: певні абзаци потрібно виділити червоним кольором. Як це зробити?
Досить просто. Опишемо в css новий стильовий клас. Припустимо, назвемо його red, щоб було зрозуміло.
Тепер залишається поставити його за потрібне абзаців. Припустимо, мені потрібно зробити його для другого і третього. Я сподіваюся, прописувати стильові класи ви вмієте, це робиться так:
Ну і також чинимо з іншим абзацом. У підсумку ми вже переопределили стиль. Тобто колір тексту всіх абзаців був темно-сірим, а ми змінили колір деяких параграфів на червоний. Ось вам і перевизначення стилів.
Але завдання стильового класу годиться в тому випадку, коли потрібно перевизначити правила групі елементів. Тобто декільком пунктам, зображень і т.д. Але що робити, якщо перевизначити стилі потрібно всього лише одного елементу? Для цієї мети вже краще використовувати ідентифікатор.
Ідентифікатор (id) використовується для того, щоб привласнити унікальну мітку конкретного елементу на веб-сторінці. Таким чином до нього можна буде звертатися в css через цей ідентифікатор і задавати якісь правила. Вони будуть застосовані, навіть якщо раніше для цього елемента були задані абсолютно інші стилі.
Наприклад, у нас є 2 абзацу, в якому текст забарвлений червоним кольором. Але якщо одному з них поставити ідентифікатор і потім описати в css стилі для цього селектора, то вони будуть приоритетнее, ніж правила класу.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Оновимо сторінку і переконаємося в тому, що колір тексту синій. Але по суті для нашого абзацу колір тексту задається в трьох місцях. По-перше, в селекторі тега - темно-сірий. По-друге, в класі - червоний. По-третє, в ідентифікатор.
Який висновок з цього експерименту? А то, що клас приоритетнее селектора тега, а ідентифікатор приоритетнее класу. Ще одне важливе твердження, які ви повинні зрозуміти для себе: стильові класи зазвичай використовують для стилізації групи елементів (пункти меню, група абзаців, ряд картинок), а ідентифікатори - для стилізації одиночних елементів, унікальних на сайті (шапка, підвал, якась іконка, логотип і т.д.).
Перевизначення за допомогою вбудованих стилів
Будь-якому html-елементу можна вбудувати стилі прямо в тег, прописавши їх за допомогою атрибута style. Якщо ми зробимо так:
Дивіться, у нашого параграфа вже купа властивостей, що визначають оформлення. Але його текст стане зеленим, як це описано в атрибуті style. Чому? Та тому що внутрішні стилі мають найвищий пріоритет.
Ламаємо все правила за допомогою! Important
Ми підібралися до css-прийому, який ламає всі правила пріоритетності і відправляє їх у відро для сміття. Це запис! Important, яка позначає властивість як найважливіше. Давайте розглянемо той же самий приклад. У нас є параграф, його код наведено вище. Як видно, для нього записано аж 4 різних варіанти кольору.
Зокрема, в селекторі тега зазначений темно-сірий колір, але він перебивається класом, ідентифікатором і внутрішніми стилями, які в нашому випадку перебивають все інше. Але є простий спосіб перебити все це. Запишемо так:
Тобто ті ж самі стилі для селектора всіх абзаців, тільки при визначенні кольору після значення дописано! Important. Ця команда позначає стиль як важливий. Тобто той, який обов'язково повинен застосується. Ну перевіримо:
Всі абзаци одного кольору - темно-сірого. Зауважте. Що не клас, ні ідентифікатор, ні навіть вбудовані стилі, які по ідеї застосовуються в останню чергу і повинні перебивати все, не можуть перевизначити колір і він залишається таким, яким він заданий в селекторі тега.
Ось такі пироги. Правда, я раджу вам не вдаватися занадто часто до! Important. А якщо немає гострої потреби, то зовсім не вдаватися. Природно, якщо ви пропишіть для стильового класу! Important, то вже цей стиль буде найважливішим. Причому в змаганні: селектор тега! Important і клас! Important, переможе клас. І ви вже розумієте, з якої причини. Ну і так далі. Виходить, що можна вбудованому стилю теж дописати! Important. Ось це буде вже кінцеве перевизначення, яке неможливо перебити.
Ну знову ж таки, не раджу вам занадто багато гратися з important, це вважається поганим тоном верстки.
Окей. З перевизначенням ми начебто розібралися. Звичайно, ми розглянули не всі способи перевизначення. Про деякі ви можете здогадатися і самі. Наприклад, використання вкладених селектор. В принципі можна легко здогадатися, що абзаци в боковій колонці легко відокремити від абзаців в основній частині сайту.
Зауважте, що тут ми ніяких класів і ідентифікаторів саме абзаців не задавали. Ну а рівень вкладеності селекторів може бути будь-яким. Ви можете написати хоч так:
Все залежить від складності розмітки. Крім комбінованих селектор є і маса інших, які допомагають так чи інакше перевизначити оформлення. Їх ви зможете вивчити, якщо більш серйозно візьметеся за вивчення css. Наприклад, пропоную пройти наш курс по CSS3. в якому ви якраз зможете познайомитися з купою нових цікавих селектор.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
