HTML => Använda HTML med CSS

Introduktion

CSS tillhandahåller stilar för HTML-element på sidan. Inline styling involverar användning av stilattributet i taggar och är starkt avskräckt. Interna formatmallar använder <style> -taggen och används för att förklara regler för riktade delar av sidan. Externa stilark kan användas via en <link> -tagg som tar en extern fil med CSS och tillämpar reglerna på dokumentet. Detta ämne täcker användning av alla tre fästmetoderna.

Syntax

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

Användning av externt formatmall

Använd link i dokumentets head :

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

Du kan också använda stilmallar som tillhandahålls från webbplatser via ett innehållsleveransnätverk eller CDN för kort. (till exempel 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>

Generellt kan du hitta CDN-stöd för ett ramverk på dess webbplats.

Internt formatmall

Du kan också inkludera CSS-element internt genom att använda taggen <style> :

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

Flera interna stilark kan också inkluderas i ett program.

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

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

Inline stil

Du kan styla en särskild del med hjälp av style attribut:

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

Obs: Försök att undvika detta - syftet med CSS är att separera innehåll från presentationen.

Flera formatmallar

Det är möjligt att ladda flera stilark:

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

Observera att senare filer och deklarationer kommer att åsidosätta tidigare . Så om general.css innehåller:

body {
    background-color: red;
}

och specific.css innehåller:

body { 
    background-color: blue;
}

om båda används blir dokumentets bakgrund blå.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

HTML
Använda HTML med CSS

Sök…