Какво означава! Важно означава в CSS?

click fraud protection

Един от най-добрите начини да научите как да кодирате уебсайтове е да разгледате изходни кодове на други сайтове. Тази практика е колко много професионалисти в мрежата са научили своя занаят, особено в дните преди да е имало толкова много възможности за уеб дизайн курсове, книги и онлайн сайтове за обучение.

Ако изпробвате тази практика и разгледате каскадни таблици със стилове на дадено място, едно нещо, което може да видите в този код, е ред, който казва ! важно. Този термин променя приоритета на обработката в таблицата със стилове.

CSS кодиране
E + / Гети изображения

Каскадата на CSS

Каскадните таблици със стил наистина го правят каскада, което означава, че са поставени в определен ред. Като цяло стиловете се прилагат в реда, в който се четат от браузъра. Прилага се първият стил и след това вторият и т.н.

В резултат на това, ако стил се появи в горната част на таблица със стилове и след това се промени по-надолу в документа, вторият екземпляр на този стил е този, приложен в следващите инстанции, а не първият. По принцип, ако два стила казват едно и също нещо (което означава, че имат еднакво ниво на специфичност), ще се използва последният изброен.

instagram viewer

Например, нека си представим, че следните стилове се съдържат в таблица със стилове. Текстът на абзаца ще бъде представен в черен цвят, въпреки че първото приложено свойство на стил е червено. Това е така, защото стойността "черно" е посочена на второ място. Тъй като CSS се чете отгоре надолу, крайният стил е "черен" и следователно този печели.

p {цвят: червен; }
p {цвят: черен; }

Колко! Важно Променя приоритета

The ! важно директива засяга начина, по който вашите CSS каскади, като спазвате правилата, които смятате за най-важни и трябва да се прилагат. Правило, което има тази директива, винаги се прилага, независимо от това къде това правило се появява в CSS документа.

За да направите текста на абзаца винаги червен, от предишния пример променете стила, както следва:

p {цвят: червен! важно; }
p {цвят: черен; }

Сега целият текст ще се появи в червено, въпреки че стойността "черен" е посочена на второ място. Директивата! Important заменя нормалните правила на каскадата и придава на този стил много висока специфичност.

Ако абсолютно ви трябва абзаците да изглеждат червени, този стил би го направил, но това не означава, че това е добра практика.

Кога да се използва! Важно

Директивата! Important е полезна, когато тествате и отстранявате грешки в уебсайт. Ако не сте сигурни защо даден стил не се прилага и смятате, че може да е конфликт на специфичност, добавете декларацията! стил, за да видите дали това го поправя - и ако го направи, променете реда на селекторите и премахнете важните директиви от вашата продукция код.

Ако се опрете твърде много на! Важната декларация, за да постигнете желаните от вас стилове, в крайна сметка ще имате лист със стилове, осеян с важни стилове. Ще промените коренно начина на обработка на CSS на тази страница. Това е мързелива практика, която не е добра от дългосрочна гледна точка на управлението.

Използвайте! Важно за тестване или, в някои случаи, когато абсолютно трябва да замените вградения стил, който е част от рамката на тема или шаблон. Дори в тези случаи използвайте този подход пестеливо и вместо това пишете изчистени таблици със стилове, които почитат каскада.

Листове за потребителски стил

Тази директива също беше въведена, за да помогне на потребителите на уеб страници да се справят със таблици със стилове, които затрудняват използването или четенето на страниците.

Кога някой определя таблица със стилове за да видите уеб страници, този лист със стилове се отменя от стила на автора на страницата. Ако потребителят маркира стил като! Важен, този стил отменя стила на автора на уеб страницата, дори ако авторът маркира правило като! Важно.

Тази йерархия е полезна за потребители, които трябва да зададат стилове по определен начин. Например читателят с увредено зрение може да се наложи да увеличи размера на шрифта по подразбиране на всички уеб страници, които те използват. Използвайки Вашата! Важна директива пестеливо в рамките на създадените от Вас страници, Вие отговаряте на уникалните нужди на Вашите читатели.

instagram story viewer