Gebruik van een externe stylesheet voor HTML5- en CSS3-programmering - dummies

CSS3 ondersteunt externe stylesheets. Met deze techniek kunt u een stijlpagina als een afzonderlijk document definiëren en deze in uw webpagina's importeren. Om te zien waarom dit aantrekkelijk kan zijn, bekijk het voorbeeld.

Als u naar de code voor externalStyle kijkt. html, je zou verbaasd zijn om helemaal geen duidelijke stijlinformatie te zien!

externalStyle. html

Externe stijl

Op deze pagina zijn stijlen ingesteld voor alinea's, hoofdtekst en kop 1.

De stijlen worden gedefinieerd in een externe stylesheet.

Waar normaal gesproken stijltags worden weergegeven (in de koptekst), is er geen stijl. In plaats daarvan zie je een tag. Deze speciale tag wordt gebruikt om het huidige document aan een ander document te koppelen.

Hoe definieer ik de externe stijl

Wanneer u een externe stijl gebruikt, worden de stijlelementen niet ingesloten in de paginakop maar in een volledig afzonderlijk document.

In dit geval is de pagina verbonden met een speciaal bestand met de naam myStyle. css. Dit bestand bevat alle CSS-regels:

/ * myStyle. css * / body {background-colour: # 333300; kleur: #FFFFFF;} h1 {kleur: # FFFF33; text-align: center; lettertype: cursief 200% fantasie;} p {achtergrondkleur: # FFFF33; kleur: # 333300; text-align: right; border: 3px groove # FFFF33;}

De stijlpagina lijkt op een stijl op paginaniveau, behalve enkele belangrijke verschillen:

De stylesheet-regels bevinden zich in een apart bestand. De stijl maakt geen deel meer uit van de HTML-pagina, maar is een volledig afzonderlijk bestand dat op de server is opgeslagen. CSS-bestanden eindigen meestal met de. css extensie.
Er zijn geen -tags. Deze zijn niet nodig omdat de stijl niet langer is ingesloten in HTML.
De code begint met een opmerking. Het / * * / paar geeft een opmerking in CSS. Eerlijk gezegd kun je opmerkingen in CSS op paginaniveau plaatsen. Externe CSS-bestanden bevatten vaak opmerkingen.
Het stijldocument heeft geen HTML. CSS-documenten bevatten niets anders dan CSS. Dit komt dichter bij het doel om stijl (in het CSS-document) en inhoud (in het HTML-document) te scheiden.
Het document is niet gekoppeld aan een bepaalde pagina. Het grote voordeel van externe CSS is hergebruik. Het CSS-document maakt geen deel uit van een bepaalde pagina, maar elke pagina kan het gebruiken.

Hoe u een externe CSS-stijl opnieuw kunt gebruiken

Externe stijlbladen zijn echt leuk als u meer dan één pagina hebt die dezelfde stijl nodig heeft. De meeste websites gebruiken tegenwoordig meerdere pagina's en ze moeten een standaard stylesheet delen om de consistentie te behouden.

De code laat zien hoe gemakkelijk dit wordt gedaan:

SecondPage.html

Tweede pagina

Deze pagina gebruikt dezelfde stijl als externalStyle. html.

Externe stylesheets hebben enkele enorme voordelen:

Eén stylesheet kan vele pagina's besturen: Over het algemeen heeft u een groot aantal verschillende pagina's in een website die allemaal dezelfde algemene stijl delen. U kunt de stijlpagina in één document definiëren en alle HTML-bestanden verwijzen naar het CSS-bestand.
Wereldwijde wijzigingen zijn eenvoudiger: Als u externe stijlen gebruikt, maakt u een wijziging op één plaats en wordt deze automatisch doorgevoerd naar alle pagina's in het systeem.
Scheiding van inhoud en ontwerp: Met externe CSS is al het ontwerp gehuisvest in de CSS en de gegevens in HTML.
Eenvoudige upgrades: Omdat de ontwerpparameters van de hele site in één bestand zijn gedefinieerd, kunt u de site gemakkelijk wijzigen zonder dat u hoeft te rotzooien met afzonderlijke HTML-bestanden.

De linktag

De tag is de sleutel tot het toevoegen van een CSS-verwijzing naar een HTML-document. De tag heeft de volgende kenmerken:

De tag maakt deel uit van de HTML-pagina. Gebruik een tag in uw HTML-document om aan te geven welk CSS-document door de HTML-pagina wordt gebruikt.
De tag komt alleen voor in de koptekst. Anders dan de tag, kan de tag alleen in de header voorkomen.
De tag is niet zichtbaar. De gebruiker kan de tag niet zien, alleen de effecten.
De -link wordt gebruikt om het document aan een ander document te relateren. U gebruikt de tag om de relatie tussen documenten te beschrijven.
De -tag heeft een rel -attribuut, waarmee het type relatie wordt gedefinieerd. Momenteel is de enige relatie die u gebruikt het kenmerk stylesheet.
De tag heeft ook een kenmerk href , dat de locatie van het andere document beschrijft.

Koppelingstags worden vaak gebruikt om een pagina aan een extern gedefinieerd stijldocument te koppelen.

De meeste mensen verwijzen naar de hyperlinks die door de anchor () -tag zijn gemaakt als hyperlinks of links. Dit kan tot enige verwarring leiden, omdat in die zin de koppelingstag niet dat type koppeling maakt.

Een externe koppeling opgeven

Ga als volgt te werk om de tag te gebruiken om een externe stijlpagina op te geven:

Definieer de stijlpagina.

Externe stijlbladen lijken veel op de bladen die u al kent. Plaats alle stijlen in een afzonderlijk tekstdocument zonder de tags en.
Maak een koppelingselement in het hoofdgedeelte van de HTML-pagina om de koppeling tussen de HTML- en CSS-pagina's te definiëren.

Mijn link-element ziet er zo uit:
Stel de relatie van de koppeling in door het kenmerk rel = "stylesheet" in te stellen.

Eerlijk gezegd, stylesheet is bijna de enige relatie die u ooit zult gebruiken, dus dit zou automatisch moeten worden.
Specificeer het type stijl door type = "text / css" in te stellen.
Bepaal de locatie van de stijlpagina met het href-kenmerk.