Mit jelent! Fontos a CSS-ben?

A webhelyek kódolásának megtanulásának egyik legjobb módja az forráskódok más oldalakról. Ez a gyakorlat az, hogy sok webes szakember megtanulta a mesterségét, különösen az azt megelőző napokban, hogy ilyen sok lehetőség volt webdesign tanfolyamok, könyvek és online képzési oldalak.

Ha kipróbálja ezt a gyakorlatot, és megnézi a webhely lépcsőzetes stíluslapjait, akkor a kódban egy dolog látható: !fontos. Ez a kifejezés megváltoztatja a stíluslapon belüli feldolgozás prioritását.

CSS kódolás
E + / Getty Images

A CSS kaszkádja

Lépcsőzetes stíluslapok valóban vízesés, vagyis meghatározott sorrendbe kerülnek. A stílusokat általában a böngésző által olvasott sorrendben alkalmazzák. Az első stílust alkalmazzák, majd a másodikat stb.

Ennek eredményeként, ha egy stílus megjelenik a stíluslap tetején, majd a dokumentumban lentebb módosul, akkor ennek a stílusnak a második példánya lesz a következő példányokban alkalmazott, nem az első. Alapvetően, ha két stílus ugyanazt mondja (ami azt jelenti, hogy azonos a specifitás szintje), akkor a felsorolt ​​utolsót kell használni.

instagram viewer

Képzeljük el például, hogy a következő stílusokat tartalmazta egy stíluslap. A bekezdések szövege feketével jelenik meg, annak ellenére, hogy az első stílustulajdonság piros. Ez azért van, mert a "fekete" érték szerepel a második helyen. Mivel a CSS-t fentről lefelé olvassák, a végső stílus "fekete", ezért ez az egyik nyer.

p {szín: piros; }
p {szín: fekete; }

Hogyan! Fontos megváltoztatja a prioritást

A !fontos irányelv befolyásolja a CSS kaszkádolásának módját, miközben betartja a legfontosabbnak tartott szabályokat, amelyeket alkalmazni kell. Egy olyan szabály, amely rendelkezik ezzel az irányelvvel, mindig alkalmazandó, függetlenül attól, hogy ez a szabály hol jelenik meg a CSS dokumentumban.

Ahhoz, hogy a bekezdés szövege mindig piros legyen, az előző példához képest változtassa meg a stílust az alábbiak szerint:

p {szín: piros! fontos; }
p {szín: fekete; }

Most az egész szöveg pirosan jelenik meg, annak ellenére, hogy a "fekete" érték szerepel a második helyen. A! Fontos irányelv felülírja a kaszkád normál szabályait, és ennek a stílusnak nagyon nagy specifitást ad.

Ha feltétlenül szükséges, hogy a bekezdések pirosak legyenek, akkor ez a stílus megcsinálja, de ez nem jelenti azt, hogy ez jó gyakorlat.

Mikor kell használni! Fontos

A! Fontos irányelv hasznos, ha webhelyet tesztel és hibakeresést végez. Ha nem biztos abban, hogy miért nem alkalmaznak egy stílust, és úgy gondolja, hogy ez sajátosságkonfliktus lehet, adja hozzá a! Fontos nyilatkozatot a stílus, hogy lássa, helyrehozza-e ezt - és ha sikerül, változtassa meg a választók sorrendjét, és távolítsa el a! fontos irányelveket a produkcióból kód.

Ha túl erősen támaszkodik a! Fontos nyilatkozatra a kívánt stílusok elérése érdekében, akkor végül egy stíluslap lesz tele! Fontos stílusokkal. Alapvetően megváltoztatja az oldal CSS-feldolgozásának módját. Ez egy lusta gyakorlat, amely hosszú távú menedzsment szempontjából nem jó.

Használja a! Fontos elemet a teszteléshez, vagy bizonyos esetekben, amikor feltétlenül felül kell írnia a téma vagy sablon keretrendszerének részét képező belső stílust. Még ezekben az esetekben is használja kíméletesen ezt a megközelítést, és ehelyett tiszta stíluslapokat írjon, amelyek tiszteletben tartják a vízesés.

Felhasználói stíluslapok

Ezt az irányelvet azért is hozták létre, hogy segítsen a weboldalak felhasználóinak megbirkózni olyan stíluslapokkal, amelyek megnehezítik számukra az oldalak használatát vagy olvasását.

Mikor valaki meghatároz egy stíluslapot weboldalak megtekintéséhez az adott stíluslapot felülírja az oldalszerző stíluslapja. Ha a felhasználó egy stílust fontosnak jelöl, akkor ez a stílus felülírja a weboldal szerzőjének stíluslapját, még akkor is, ha a szerző egy szabályt fontosként jelöl meg.

Ez a hierarchia hasznos azoknak a felhasználóknak, akiknek meghatározott módon kell beállítaniuk a stílusokat. Például egy látássérült olvasónak növelnie kell az alapértelmezett betűméretet az összes használt weboldalon. Ha a! Fontos irányelveket takarékosan használja az épített oldalakon belül, akkor kielégíti olvasói egyedi igényeit.

instagram story viewer