HTML => HTML gebruiken met CSS

Invoering

CSS biedt stijlen aan HTML-elementen op de pagina. Inline styling omvat het gebruik van het stijlkenmerk in tags en wordt sterk afgeraden. Interne stylesheets gebruiken de tag <style> en worden gebruikt om regels aan te geven voor gerichte delen van de pagina. Externe stylesheets kunnen worden gebruikt via een <link> -tag die een extern CSS-bestand neemt en de regels op het document toepast. Dit onderwerp behandelt het gebruik van alle drie bevestigingsmethoden.

Syntaxis

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<style></style>

Externe stylesheet gebruiken

Gebruik de link attribuut in het document head :

<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

U kunt ook stylesheets van websites gebruiken via een content delivery network, of kortweg CDN. (bijvoorbeeld Bootstrap):

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

Over het algemeen vindt u CDN-ondersteuning voor een framework op de website.

Intern stylesheet

Je kunt ook CSS-elementen intern opnemen met de tag <style> :

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>  
</head>

Meerdere interne stylesheets kunnen ook in een programma worden opgenomen.

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>

    <style type="text/css">
        p {
           background-color: blue;
        }
    </style>  
</head>

Inline stijl

U kunt een specifiek element style met behulp van het style :

<span style="color: red">This text will appear in red.</span>

Opmerking: probeer dit te vermijden - het doel van CSS is om inhoud van presentatie te scheiden.

Meerdere stylesheets

Het is mogelijk om meerdere stylesheets te laden:

<head>
    <link rel="stylesheet" type="text/css" href="general.css">
    <link rel="stylesheet" type="text/css" href="specific.css">
</head>

Houd er rekening mee dat latere bestanden en verklaringen eerdere overschrijven . Dus als general.css bevat:

body {
    background-color: red;
}

en specific.css bevat:

body { 
    background-color: blue;
}

als beide worden gebruikt, is de achtergrond van het document blauw.

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

HTML
HTML gebruiken met CSS

Zoeken…