Latest web development tutorials

creare CSS

Durante la lettura di un foglio di stile, il browser sarà basato sul suo documento in formato HTML.

Come inserire il foglio di stile

Inserire il foglio di stile in tre modi:

  • foglio di stile esterno
  • foglio di stile interno
  • stile in linea

foglio di stile esterno

Quando lo stile viene applicato a molte pagine richiesto, un foglio di stile esterno sarebbe la scelta ideale. Nel caso di un foglio di stile esterno, è possibile modificare un file per modificare l'aspetto dell'intero sito. Ogni pagina utilizza il tag <link> per collegare un foglio di stile. Tag <link> nel (documento) Responsabile:

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

Il browser leggerà dalla dichiarazione di stile miostile.css file in conformità con essa per formattare il documento.

foglio di stile esterno può essere modificato in qualsiasi editor di testo. I file non possono contenere tag HTML. foglio di stile deve essere salvato con l'estensione .css. Ecco un esempio di un file di foglio di stile:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("../images/back40.gif");}

osservazione Non lasciare spazi tra il valore della proprietà e le unità. Se si utilizza il "margin-left: 20 px" invece "margin-left: 20px", è valida solo in IE 6, ma non funziona in Mozilla / Firefox o Netscape in.

foglio di stile interno

Quando un singolo documento richiede uno stile particolare, foglio di stile interno dovrebbe essere usato. È possibile utilizzare il tag <style> nella testa del documento per definire foglio di stile interno, in questo modo:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

stile in linea

Grazie alle prestazioni e contenuti mescolati insieme, stili in linea perderanno molti dei vantaggi dei fogli di stile. Si prega di cautela questo metodo, per esempio, quando deve essere applicata un'unica volta su un elemento di stile.

Per utilizzare gli stili inline, è necessario utilizzare l'attributo di stile (stile) nel tag in questione. attributo style può contenere qualsiasi proprietà CSS. Questo esempio mostra come cambiare il colore del paragrafo e il margine sinistro:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

stili multipli

Se alcuni attributi vengono definiti lo stesso selettore in diversi fogli di stile, allora il valore della proprietà del foglio di stile più specifica è ereditata.

Per esempio, un foglio di stile esterno ha tre proprietà per il selettore h3:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

Il foglio di stile interno ha due proprietà per il selettore H3:

h3
{
text-align:right;
font-size:20pt;
}

Se lo stile ha i fogli di stile interni e fogli di stile esterni collegano questa pagina, allo stesso tempo, quindi ottenere H3 è:

color:red;
text-align:right;
font-size:20pt;

Questa è la proprietà colore sarà ereditata dal foglio di stile esterno e la disposizione del testo (text-allineamento) e la dimensione del carattere (font-size) saranno sostituite dalle norme interne del foglio di stile.

Stili multipli sono laminate uno

I fogli di stile permettono che le informazioni stile specificato in vari modi. Gli stili possono essere specificati in un unico elemento HTML, il primo elemento della pagina HTML, o in un file CSS esterno. Anche i più fogli di stile esterni possono essere indicati all'interno di un singolo documento HTML.

ordine di sovrapposizione

Quando lo stesso elemento HTML è definito da più di uno stile, quale stile lo utilizzerà?

In generale, tutti gli stili saranno impilati in un nuovo foglio di stile virtuale secondo le seguenti regole, in cui il numero 4 ha la massima priorità.

  1. Browser predefinito
  2. foglio di stile esterno
  3. foglio di stile interno (nel tag <head> all'interno)
  4. stile in linea (elementi HTML all'interno)

Così, uno stile in linea (all'interno di un elemento HTML) ha la massima priorità, il che significa che ha la precedenza sul seguente dichiarazione di stile: l'etichetta dichiarazione di stile, lo stile dichiarazione di stile lamiera esterna, o dichiarazione di stile del browser (valore di default).

osservazioneSuggerimento: se si utilizza un file di stile esterno nella sezione <head> è anche definito lo stile, il foglio di stile sostituirà i file esterni stile interno.