Een van de beste manieren om te leren hoe je websites kunt coderen, is door te kijken naar de broncodes van andere sites. Deze praktijk is hoe veel webprofessionals hun vak hebben geleerd, vooral in de dagen ervoor waren er zoveel opties voor webontwerpcursussen, boeken en online trainingsites.
Als u deze oefening uitprobeert en naar de cascading style sheets (CSS) van een site kijkt, is een ding dat u in die code kunt zien een regel die zegt: 'belangrijk'. Wat betekent dat en, net zo belangrijk, hoe gebruik je die verklaring juist in je stylesheets?
De cascade van CSS
Allereerst is het belangrijk om te begrijpen dat cascading style sheets inderdaad werken cascade , wat betekent dat ze in een bepaalde volgorde worden geplaatst. Over het algemeen betekent dit dat de stijlen worden toegepast in de volgorde waarin ze door de browser worden gelezen. De eerste stijl wordt toegepast en vervolgens de tweede enzovoort.
Als gevolg hiervan, als een stijl boven aan een stylesheet wordt weergegeven en vervolgens lager in het document wordt gewijzigd, is de tweede instantie van die stijl de stijl die wordt toegepast in volgende exemplaren en niet de eerste. Kortom, als twee stijlen hetzelfde zeggen (wat betekent dat ze hetzelfde niveau van specificiteit hebben), zal de laatst genoemde worden gebruikt.
Laten we ons bijvoorbeeld voorstellen dat de volgende stijlen in een stylesheet waren opgenomen. De alineatekst zou in het zwart worden weergegeven, hoewel de eerste stijleigenschap die is toegepast, rood is. Dit komt omdat de "zwarte" waarde als tweede wordt vermeld. Omdat CSS van boven naar beneden wordt gelezen, is de uiteindelijke stijl "zwart" en daarom wint die.
p {kleur: rood; }p {kleur: zwart; }
Hoe! Belangrijk verandert de prioriteit
Nu je begrijpt hoe deze vrijwel identieke regels door CSS worden verwerkt, kunnen we kijken hoe de! Belangrijke richtlijn de dingen een beetje verandert.
De! Belangrijke richtlijn is van invloed op de manier waarop uw CSS optreedt terwijl u zich aan de regels houdt die volgens u het meest cruciaal zijn en moet worden toegepast. Een regel met de! Belangrijke richtlijn wordt altijd toegepast, ongeacht waar die regel in het CSS-document voorkomt.
Als u de alineatekst altijd rood wilt maken, gebruikt u uit het bovenstaande voorbeeld:
p {kleur: rood! belangrijk; }p {kleur: zwart; }
Nu zal alle tekst in het rood verschijnen, ook al staat de waarde "zwart" op de tweede plaats. De! Belangrijke richtlijn overschrijft de normale regels van de cascade en geeft die stijl een zeer hoge specificiteit.
Als je absoluut de paragrafen rood zou moeten laten lijken, zou deze stijl het doen, maar dat betekent niet dat dit een goede gewoonte is. Laten we het volgende eens bekijken wanneer u het wilt gebruiken! Belangrijk en wanneer dit niet geschikt is.
Wanneer te gebruiken! Belangrijk
De! Belangrijke richtlijn is zeer nuttig wanneer u een website test en debugt. Als u niet zeker weet waarom een stijl niet wordt toegepast en denkt dat er sprake is van een specificiteitsprobleem, kunt u de! Belangrijke verklaring aan uw stijl toevoegen om te kijken of deze is opgelost.
Als het toevoegen van! Important inderdaad het stijlprobleem oplost, hebt u net vastgesteld dat dit een specificiteitsprobleem is. U wilt echter die belangrijke code niet laten staan, hij is alleen daar geplaatst voor testdoeleinden.
Aangezien het testen is voltooid, moet u nu die richtlijn verwijderen en uw selector aanpassen om de specificiteit te bereiken die u nodig heeft om uw stijl aan het werk te krijgen. ! belangrijk moet niet in uw productiesites terechtkomen, gedeeltelijk vanwege de manier waarop het de normale cascade verandert.
Als je te zwaar leunt op de! Belangrijke verklaring om je gewenste stijlen te bereiken, zul je uiteindelijk een stylesheet hebben met een aantal belangrijke stijlen. Je zult de manier waarop de CSS van de pagina wordt verwerkt fundamenteel veranderen. Het is een luie praktijk die niet goed is vanuit het oogpunt van langetermijnbeheer.
Gebruik! Belangrijk voor het testen of, in sommige gevallen, wanneer u absoluut een inline-stijl moet overschrijven die deel uitmaakt van een thema- of sjabloonkader. Zelfs in die gevallen, gebruik deze benadering zo spaarzaam mogelijk en probeer in plaats daarvan schone stijlbladen te maken die de cascade begrijpen.
Gebruikersstijlbladen
Er is nog een laatste opmerking over de! Belangrijke richtlijn die essentieel is om te begrijpen. Deze richtlijn is ook ingesteld om gebruikers van webpagina's te helpen omgaan met stylesheets die het moeilijk maken om pagina's te gebruiken of te lezen.
Als een gebruiker een stijlpagina definieert om webpagina's te bekijken, wordt dat typogram meestal overruled door het typogram van de auteur van de webpagina. Als de gebruiker een stijl als belangrijk bestempelt, overschrijft die stijl de stijlpagina van de auteur van de webpagina, zelfs als de auteur een regel als 'belangrijk' markeert.
Dit is handig voor gebruikers die stijlen op een bepaalde manier moeten instellen. Iemand moet bijvoorbeeld standaard lettergrootten op alle webpagina's die ze gebruiken, verhogen. Door uw! Belangrijke richtlijn spaarzaam te gebruiken in de pagina's die u maakt, kunt u voldoen aan de speciale behoeften van uw gebruikers.
