Ett av de bästa sätten att lära sig att koda webbplatser är att titta på källkoder av andra webbplatser. Denna praxis är hur många webbproffs som lärde sig sitt hantverk, särskilt under dagarna innan det fanns så många alternativ för webbdesign kurser, böcker och online-utbildningswebbplatser.
Om du provar denna praxis och tittar på webbplatsens kaskad stilark, kan du se en sak i den koden en rad som säger !Viktig. Denna term ändrar prioriteringen för bearbetning inom stilarket.
Kaskaden av CSS
Kaskad stilark verkligen kaskad, vilket innebär att de placeras i en viss ordning. I allmänhet tillämpas stilarna i den ordning de läses av webbläsaren. Den första stilen tillämpas och sedan den andra, och så vidare.
Som ett resultat, om en stil visas högst upp på ett formatmall och sedan ändras nere i dokumentet, är den andra instansen av den stilen den som tillämpas i efterföljande fall, inte den första. I grund och botten, om två stilar säger samma sak (vilket innebär att de har samma specificitetsnivå), kommer den senaste listade att användas.
Låt oss till exempel föreställa oss att följande stilar ingick i ett formatmall. Punkttexten återges i svart, även om den första typegenskapen som används är röd. Detta beror på att det "svarta" värdet listas på andra plats. Eftersom CSS läses upp och ned är den slutliga stilen "svart" och därför vinner den.
p {färg: röd; }
p {färg: svart; }
Hur viktigt ändrar prioriteten
De !Viktig direktivet påverkar det sätt på vilket din CSS kaskaderar medan du följer de regler som du tycker är mest avgörande och bör tillämpas. En regel som har detta direktiv tillämpas alltid oavsett var den finns i CSS-dokumentet.
För att göra stycketexten alltid röd, från föregående exempel, ändra stilen enligt följande:
p {färg: röd! viktigt; }
p {färg: svart; }
Nu kommer all text att visas i rött, även om det "svarta" värdet är listat på andra plats. Det! Viktiga direktivet åsidosätter kaskadens normala regler och det ger den stilen mycket hög specificitet.
Om du absolut behövde styckena för att se röda ut, skulle den här stilen göra det, men det betyder inte att detta är en bra praxis.
När ska man använda! Viktigt
Det viktiga direktivet är till hjälp när du testar och felsöker en webbplats. Om du inte är säker på varför en stil inte används och tror att det kan vara en specificitetskonflikt, lägg till den! Viktiga deklarationen till din utforma för att se om det fixar det - och om det gör det, ändra ordningen på väljarna och ta bort de! viktiga direktiven från din produktion koda.
Om du lutar för hårt på den! Viktiga deklarationen för att uppnå dina önskade stilar, kommer du så småningom att ha ett stilark med! Viktiga stilar. Du kommer i grunden att förändra hur sidans CSS bearbetas. Det är en lat praxis som inte är bra ur en långsiktig ledningssynpunkt.
Använd! Viktigt för testning eller, i vissa fall, när du absolut måste åsidosätta en inbyggd stil som ingår i ett tema- eller mallram. Även i dessa fall, använd detta tillvägagångssätt sparsamt och skriv istället rena stilark som hedrar kaskad.
Användarstilark
Detta direktiv infördes också för att hjälpa webbsidanvändare att hantera stilark som gör sidor svåra att använda eller läsa.
När någon definierar ett formatmall för att visa webbsidor åsidosätts det stilarket av sidförfattarens stilark. Om användaren markerar en stil som! Viktig, åsidosätter den stilen webbsidans författares stilark, även om författaren markerar en regel som! Viktig.
Denna hierarki är till hjälp för användare som behöver ställa in stilar på ett visst sätt. Till exempel kan en synskadad läsare behöva öka standardstorleken på alla webbsidor de använder. Genom att använda ditt! Viktiga direktiv sparsamt på de sidor du bygger, tillgodoser du dina läsares unika behov.