Различия

Показаны различия между двумя версиями страницы.

--- prioriteti_stiliv_css [2023/09/11 18:26]
tro
+++ prioriteti_stiliv_css [2023/09/11 18:49] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== Приорітети стилів CSS ======
-(вищий) - inline
+  * 1 (вищий) - inline
-- ID
+  * 2 - ID
-- classes, attributes, pseudo-classes
+  * 3 - classes, attributes, pseudo-classes
-(нижчий) - pseudo-elements
+  * 4 (нижчий) - pseudo-elements
+Для кожного CSS-правила браузер обчислює специфічність (вагу) селектора.
+Значення специфічності складається з чотирьох рангів. Їхня важливість зростає справа наліво, тобто 1 у лівій колонці — це та сама 1000 балів, а 1 у правій — залишається одиницею.
+Кожен селектор відповідного класу (4й - пседоелемент, 3 - класс і т.д.) додає одиницю ваги у своє місце приорітету.
+З таких цифр і вийде ітогова вага приорітета щоб система зьясувала - х якого джерела стилів має найвищий приорітет.
+Якщо для одного отримувача стилів описано декілька стилів і деякі з них не спіадають (наприклад вв одному бекграунд а у іньшому - розмір шрифта) - то такі властивочті обїеднуються.
+Приклад - Колір тексту посилання буде коричневим, тому що специфічність п'ятого правила вища.
+<code>
+/* Специфічність - 0 0 0 1 */
+a {
+  color: green;
+}
+/* Специфічність - 0 0 1 0 */
+.post-link {
+  color: orange;
+}
+/* Специфічність - 0 0 1 1 */
+a.post-link {
+  color: blue;
+}
+/* Специфічність - 0 0 2 0 */
+.post > .post-link {
+  color: red;
+}
+/* ✅ Специфічність - 0 0 2 1 */
+.post > a.post-link {
+  color: brown;
+}
+</code>
+Якщо специфічність однакова, перемагає правило, розташоване нижче в CSS-коді, тобто останнє по порядку з конфліктуючих.
+<code>
+/* Три селектори елемента з однаковою специфічністю */
+a {
+  color: teal;
+}
+a {
+  color: brown;
+}
+/* Це правило стоїть нижче, отже до всіх посилань застосовується помаранчевий колір тексту */
+a {
+  color: orange;
+}
+</code>
+===== !important =====
+Специфічність правила можна підвищити за допомогою ключового слова **!important**, якщо додати його після значення властивості.
+Вкрай не рекомендується використовувати !important в сучасній розробці. Єдиним прийнятним випадком є перевизначення значення властивості, якщо немає прямого доступу до файлу зі стилями, наприклад, стиль бібліотеки.
+<code>
+p {
+  color: orange !important;
+}
+</code>
+===== inherit =====
+Якщо необхідно, щоб у пості посилання було того ж кольору як і весь текст, можна використовувати спеціальне значення inherit для властивості color, щоб не дублювати колір у двох місцях.Значення inherit повідомляє браузеру, що елементу необхідно успадкувати значення властивості від батьківського елемента.
+<code>
+.post {
+  color: green;
+}
+.post-link {
+  color: inherit;
+}
+</code>
+===== currentColor =====
+Для посилань зазвичай використовується ключове слово currentColor (поточний колір) у HTML. Мета — щоб колір тексту посилання успадковувався від секції.
+<code>
+<section class="post">
+  <h1>Lorem ipsum dolor sit</h1>
+  <p>
+    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
+    veritatis nihil alias iste odit similique sit eius optio veniam, impedit
+    cumque fuga facere labore quo id necessitatibus quaerat rerum.
+  </p>
+  <a href="" class="post-link">Read more...</a>
+</section>
+.post {
+  color: green;
+}
+.post-link {
+  color: currentColor;
+}
+</code>