Websites zijn een combinatie van stijl en structuur en op het internet van vandaag is het een goede gewoonte om deze twee aspecten van een site gescheiden van elkaar te houden.
HTML is altijd al de structuur van een site geweest. In de begindagen van het web bevatte HTML ook stijlinformatie. Elementen zoals de De tag werd over de HTML-code heen gelegd, naast informatie over de structuur ook look-and-feel-informatie toegevoegd. De beweging met webstandaarden heeft ons ertoe aangezet om deze praktijk te veranderen en in plaats daarvan alle stijlinformatie in CSS of Cascading Style Sheets te pushen. Om dit nog een stap verder te brengen, zijn de huidige aanbevelingen dat je een zogenaamd "extern stijlblad" gebruikt voor de stylingbehoeften van je website. Voordelen en nadelen van externe stijlbladen
Een van de beste dingen van Cascading Style Sheets is dat u ze kunt gebruiken om uw hele site consistent te houden. De gemakkelijkste manier om dit te doen is om een externe stylesheet te linken of te importeren. Als u voor elke pagina van uw site hetzelfde externe stijlblad gebruikt, weet u zeker dat alle pagina's dezelfde stijl hebben. U kunt het ook eenvoudiger maken om wijzigingen voor de toekomst aan te brengen. Omdat elke pagina hetzelfde externe stijlblad gebruikt, heeft elke wijziging aan dat blad invloed op elke pagina van de site. Dit is veel beter dan elke pagina afzonderlijk te moeten wijzigen!
Voordelen van externe stijlbladen
- U kunt het uiterlijk van meerdere documenten tegelijk beheren.
- Dit is vooral handig als u met een team mensen werkt om uw website te maken. Veel stijlregels kunnen moeilijk te onthouden zijn, en hoewel je misschien een gedrukte stijlgids hebt, is het inefficiënt en vervelend om er voortdurend doorheen te bladeren om te bepalen of voorbeeldtekst geschreven moet worden in 12 punten Arial-lettertype of 14-punts koerier. Door alles op één plek te hebben, en omdat die plek ook is waar u wijzigingen aanbrengt, kunt u onderhoud zo veel gemakkelijker maken.
- U kunt klassen met stijlen maken die vervolgens op veel verschillende HTML-elementen kunnen worden gebruikt.
- Als u vaak een bepaalde lettertypestijl gebruikt om de nadruk te leggen op verschillende dingen op uw pagina, kunt u een klassenattribuut gebruiken dat u in uw stylesheet hebt ingesteld om deze look en feel te krijgen, in plaats van een specifieke stijl te definiëren voor elk exemplaar van de nadruk.
- Je kunt je stijlen eenvoudig groeperen om efficiënter te zijn.
- Alle groeperingsmethoden die beschikbaar zijn voor CSS, kunnen worden gebruikt in externe stijlbladen, en dit biedt u meer controle en flexibiliteit op uw pagina's.
Nadelen van externe stijlbladen
- Externe stijlbladen kunnen de downloadtijd verlengen, vooral als ze extreem groot zijn. Aangezien het CSS-bestand een afzonderlijk document is dat moet worden geladen, heeft dit invloed op de prestaties om die download uit te voeren.
- Externe stijlbladen worden erg snel groot omdat het moeilijk te zien is wanneer een stijl niet meer in gebruik is omdat deze niet wordt verwijderd wanneer de pagina wordt verwijderd. Correct beheer van uw CSS-bestanden is belangrijk, vooral als meerdere mensen aan hetzelfde bestand werken.
- Als u slechts een website van één pagina heeft, is een extern bestand voor CSS mogelijk niet nodig, omdat u slechts die ene pagina in stijl heeft. Veel van de voordelen van externe CSS gaan verloren wanneer u slechts één pagina met één pagina heeft.
Een extern stijlblad maken
Externe stijlbladen worden gemaakt met een vergelijkbare syntaxis naar documentniveau-stijlbladen. U moet echter alleen de selector en de aangifte opnemen. Net als in een stylesheet op documentniveau, is de syntaxis voor een regel:
selector {eigenschap: waarde;}
Bewaar deze regels in een tekstbestand met de extensie .css. Dit is niet verplicht, maar het is een goede gewoonte om erin te komen, zodat je je stylesheets onmiddellijk kunt herkennen in een directorylijst.
Zodra u een stylesheet-document hebt, moet u dit koppelen aan uw webpagina's. Dit kan op twee manieren worden gedaan:
- Linken
- Als u een stijlpagina wilt koppelen, gebruikt u de HTML-tag. Dit heeft de attributen rel, type, en href. Het rel-attribuut vertelt wat u aan het linken bent (in dit geval een stylesheet), het type definieert het MIME-Type voor de browser en de href is het pad naar het .css-bestand.
- Importeren
- U zou een geïmporteerd stijlblad binnen een stijlblad op documentniveau gebruiken, zodat u de kenmerken van een externe stijlpagina kunt importeren zonder dat u documentspecifieke documenten kwijtraakt. Je noemt het op dezelfde manier als het aanroepen van een gekoppelde stylesheet, alleen moet deze worden aangeroepen binnen een documentniveau-stijlverklaring. U kunt zoveel externe stijlbladen importeren als u nodig hebt om uw website te onderhouden.
Origineel artikel door Jennifer Krynin. Bewerkt door Jeremy Girard op 8-08-17
