HTML => Usare l'HTML con i CSS

introduzione

Il CSS fornisce gli stili agli elementi HTML sulla pagina. Lo stile in linea comporta l'utilizzo dell'attributo style nei tag ed è altamente sconsigliato. I fogli di stile interni usano il tag <style> e sono usati per dichiarare le regole per le porzioni dirette della pagina. I fogli di stile esterni possono essere utilizzati tramite un tag <link> che accetta un file esterno di CSS e applica le regole al documento. Questo argomento riguarda l'utilizzo di tutti e tre i metodi di collegamento.

Sintassi

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

Uso del foglio di stile esterno

Usa l'attributo link nella head del documento:

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

È inoltre possibile utilizzare i fogli di stile forniti dai siti Web tramite una rete di distribuzione dei contenuti o in breve CDN. (ad esempio, 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>

In generale, è possibile trovare il supporto CDN per un framework sul proprio sito Web.

Foglio di stile interno

Puoi anche includere elementi CSS internamente usando il tag <style> :

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

È possibile includere più fogli di stile interni in un programma.

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

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

Stile in linea

Puoi dare uno stile a un elemento specifico usando l'attributo style :

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

Nota: cerca di evitare questo: il punto del CSS è separare il contenuto dalla presentazione.

Fogli di stile multipli

È possibile caricare più fogli di stile:

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

Nota che i file e le dichiarazioni successivi sovrascriveranno quelli precedenti . Quindi se general.css contiene:

body {
    background-color: red;
}

e specific.css contiene:

body { 
    background-color: blue;
}

se entrambi vengono utilizzati, lo sfondo del documento sarà blu.

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

HTML
Usare l'HTML con i CSS

Ricerca…