CSS-concepten verkennen

  • 4 minuten

CSS-structuur

Als u wilt dat de HTML-pagina alle tekst tussen de h1 tags met de kleur oranje weergeeft, kunt u de CSS-code gebruiken die volgt.

h1 {
    color: orange;
}

De bovenstaande CSS-code begint met (h1) die de HTML selecteert die u wilt stylen. De h1 in het voorbeeld wordt een selector genoemd.

Let op de code in de accolades, color: orange;t geeft aan hoe de geselecteerde h1 tag moet worden gestijld. De CSS-code in de accolades { }, zoals color: orange; wordt een declaratie genoemd.

De voorbeelddeclaratie bevat een eigenschap, colordie is gescheiden van een waarde, orangemet een dubbele punt (:) en het einde van de instelling wordt gemarkeerd door een puntkomma (;).

Notitie

Het is niet nodig om elke beschikbare eigenschap en waarde in CSS te onthouden. Er zijn veel websites waarnaar u kunt verwijzen. Tools zoals vscode.dev of Visual Studio Code bieden ook opties voor automatisch aanvullen die u kunnen helpen bij het maken van een CSS.

Een CSS-bestand insluiten

Een snelle manier om stijlgegevens toe te voegen, is door deze te plaatsen in de head tags van uw HTML-pagina met behulp van een style kenmerk. Deze methode wordt niet beschouwd als de best practice, maar is in orde om te leren en testen.

In het volgende voorbeeld wordt de <style> tag met stijlinformatie toegevoegd om h1 grijs weer te geven. Omdat dat de enige stijl is, wordt de rest van de HTML weergegeven met de standaardstijl van de browser.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

Wanneer deze wordt weergegeven in een browser, wordt de tekst 'Welkom' in de <h1> tag grijs weergegeven.

Schermopname van de weergegeven H T M L-pagina geeft de kop 1 grijs weer.

Stijlen toepassen op HTML met CSS

Wanneer u stijlen toevoegt aan Hypertext Markup Language (HTML), kunt u het beste uw stijl uitvoeren in een afzonderlijk CSS-bestand. Wanneer meerdere HTML-bestanden dezelfde CSS gebruiken, zien ze er consistent uit. Bovendien is het bijwerken van één CSS-bestand eenvoudiger dan het bijwerken van elk afzonderlijk HTML-bestand.

Als u naar het CSS-bestand wilt verwijzen, gebruikt u het link element.

link heeft twee kenmerken en relhref. rel wordt gebruikt om het resourcetype te identificeren waarnaar u verwijst, opmaakmodel voor opmaakmodellen. href wordt gebruikt om het pad naar het CSS-bestand te identificeren. Als uw CSS-bestand zich in dezelfde map bevindt als uw HTML-bestand en de naam style.css had, kunt u het volgende gebruiken om ernaar te verwijzen vanaf uw pagina:

<link rel="stylesheet" href="style.css">

Nu heb je ten minste twee bestanden, een .html bestand en een .css bestand. In het vorige voorbeeld zou een HTML-bestand zijn dat is gekoppeld aan de CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>