Ett av de bästa sätten att lära sig hur man kodar webbplatser är att titta på källkoderna på andra webbplatser. Denna praxis är hur många webbprofessorer lärde sig sina hantverk, särskilt i dagarna innan det fanns så många alternativ för webbdesign kurser, böcker och online träningsplatser.
Om du försöker att träna och kollar på en webbplatss cascading style sheets (CSS), kan en sak du se i den här koden vara en rad som säger! Viktigt. Vad betyder det och, lika viktigt, hur använder du den förklaringen korrekt i dina stylesheets?
Cascade av CSS
Först och främst är det viktigt att förstå att kaskad stilark verkligen gör det kaskad , vilket innebär att de placeras i en viss ordning. I allmänhet innebär detta att stilarna tillämpas 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 överst på ett stilark och sedan ändras lägre ner 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 betyder att de har samma specificitetsnivå), kommer den sistnämnda att användas.
Låt oss föreställa oss att följande stilar finns i ett stilark. Skrifttexten skulle bli svart, trots att den första stilegenskapen som är tillämpad är röd. Detta beror på att det "svarta" värdet är listat andra. Eftersom CSS läses topp-till-botten är den sista stilen "svart" och därför vinner man.
p {färg: röd; }p {färg: svart; }
Hur! Viktigt ändrar prioriteten
Nu när du förstår hur dessa nästan identiska regler behandlas av CSS kan vi titta på hur det viktiga direktivet ändrar sakerna lite.
Det viktiga direktivet påverkar hur din CSS cascades medan du följer de regler du anser vara mest avgörande och bör tillämpas. En regel som har det viktiga direktivet tillämpas alltid oavsett var denna regel framgår av CSS-dokumentet.
För att göra stycktexten alltid röd, från ovanstående exempel, kommer du att använda:
p {färg: röd! viktigt; }p {färg: svart; }
Nu visas all text i rött, även om det "svarta" värdet är listat andra. Det viktiga direktivet strider mot kaskadens normala regler och det ger den här stilen mycket hög specificitet.
Om du absolut behövde styckena att bli röd, skulle den här stilen göra det, men det betyder inte att det här är en bra övning. Låt oss se nästa när du kanske vill använda! Viktigt och när det inte är lämpligt.
När du ska använda! Viktigt
Det viktiga direktivet är till stor hjälp när du testar och debuggar en webbplats. Om du inte är säker på varför en stil inte tillämpas och tror att det kan vara en specificitetsproblem, kan du lägga till den viktiga förklaringen till din stil för att se om det åtgärdar det.
Om du lägger till! Viktigt fixar verkligen stilproblemet, har du bara bestämt att det är en specificitetsproblem. Men du vill inte lämna den viktiga koden på plats, den var bara satt där för teständamål.
Eftersom testningen är klar bör du nu ta bort det direktivet och justera väljaren för att uppnå den specificitet som du behöver för att få din stil att fungera. ! viktigt bör inte gå in i dina produktionsplatser, delvis på grund av hur det ändrar den normala kaskaden.
Om du lutar för mycket på den viktiga deklarationen för att uppnå dina önskade stilar, så kommer du så småningom att ha ett stilark fyllt med! Viktiga stilar. Du kommer att ändra väsentligt hur sidans CSS behandlas. Det är en lat praxis som inte är bra från en långsiktig ledarställning.
Använd! Viktigt för testning eller i vissa fall när du absolut måste åsidosätta en inline-stil som ingår i temat eller mallram. Även i dessa fall, använd detta tillvägagångssätt så sparsamt som möjligt och istället sträva efter att skriva rena stilark som förstår kaskaden.
User Style Sheets
Det finns en slutlig notering om det viktiga direktivet som är viktigt för att förstå. Detta direktiv infördes också för att hjälpa webbsidan att hantera stilark som gör sidor svåra för att de kan använda eller läsa.
Vanligtvis om en användare definierar ett stilark för att visa webbsidor, övertygas det stilarket av webbsidans författarens stilark. Om användaren markerar en stil som viktig, övertygar den stilen för webbsidans författarens stilark, även om författaren markerar en regel som viktig.
Det här är användbart för användare som behöver ställa in stilar på ett visst sätt. Till exempel kan någon behöva öka standardstorleken på alla webbsidor de använder. Genom att använda ditt viktiga direktiv sparsamt inom de sidor du bygger, anpassar du alla speciella behov som dina användare kan ha.
