CSS è usato per definire come i diversi HTML elementi dovrebbero apparire su un sito. Ciò significa che esso controlla colori, dimensioni, spaziatura, spaziatura, altezza/larghezza e anche famiglie di font. Siti come CSS Zen Garden (Vedi risorse) sono una testimonianza di come CSS può trasformare completamente gli elementi di base di un sito Web. Conoscere alcuni principi di base CSS può andare un lungo cammino verso la costruzione di un sito Web dinamico, attraente.

Collegamento al foglio di stile

Codice CSS può essere incluso direttamente all'interno di un elemento HTML, ma è consigliabile tenerlo in un file separato denominato di un foglio di stile. Aprire un documento vuoto nel blocco note o un editor di testo di base equivalente e salvarlo come StyleSheet. CSS. Si noti l'estensione css – non dovrebbe finire in. txt o quant'altro.

Per collegare il foglio di stile al tuo codice HTML, inserire StyleSheet. CSS nella stessa cartella come documento HTML e inserire la seguente riga di codice tra < HEAD > e < / HEAD >.

< link rel = \ "stylesheet\" href=\"stylesheet.css\" / >

Struttura di base CSS

La struttura di base di un tag CSS è simile al seguente:

corpo () {
text-align: giustificare
VAI
colore: rosso
VAI
font-family: sans-serif
VAI
}

In questo esempio, il corpo è il tag HTML viene modificato. Tutto all'interno del tag body sarà interessato da questi parametri CSS – e poiché l'intera pagina web visibile è incluso all'interno del tag BODY per impostazione predefinita, ciò significa che qualsiasi codice CSS, applicato al tag body diventa il valore predefinito per l'intera pagina.

Applicare i CSS agli elementi più

Ora che hai riempito in alcuni valori di default, andiamo più specifico. Iniziare con un contenitore che il contenuto del sito si inserisce all'interno. Questo mantiene il contenuto da sempre troppo larga su monitor di grandi dimensioni, che può essere difficile da leggere.

Nel codice HTML, inserire il seguente:

< div id = "container" >< / div >

Tutti i componenti del sito web visibile andrà tra questi due tag.

Nel tuo foglio di stile, inserire il seguente:

container () {
Larghezza: 800px
VAI
margine: auto
VAI
}

Questo significa che il contenuto del sito..--tutto all'interno dei tag div con id = "contenitore"..--sarà 800 pixel di larghezza e verrà centrata sullo schermo. Ecco cosa margin: auto; significa.

I tag div e regole di nidificazione

Tag div possono avere due attributi: id = "" e class = "". Utilizzare id = "" quando il div viene visualizzato solo una volta e utilizzare classe = "" quando si ripeterà un elemento nella pagina.

Il sopra id = "container" esempio ha mostrato che nel tuo foglio di stile, si antepone il nome univoco con un periodo. Tuttavia, quando si fa riferimento a una classe, è precedere da un segno di cancelletto:

navigazione () {

linea-altezza: 1,5
VAI
colore: rosa
VAI
}

Possono nidificare gli elementi; la specifica di stile più vicina a un oggetto è quella che si applica. Ad esempio, se il codice HTML è simile al seguente:

< corpo >
< div class = "navigazione" > navigazione elemento < / div >
< h3 > My voce < / h3 >
< / body >

Quindi "Elemento di navigazione" sarebbe rosa perché è controllato dal div "navigazione", ma "Mio titolo" sarebbe rosso perché è il valore predefinito impostato in precedenza nel tag body.

Moving Forward

Consultare la Guida di riferimento di W3C CSS (vedi riferimenti) per un elenco completo dei CSS valido tag e attributi.