Fogli di stile CSS, o CSS, è il nome di un linguaggio di codifica utilizzato per definire gli stili per pagine Web, anche se si riferisce anche ai file con estensione CSS esterno stessi, chiamati fogli di stile in breve. Esistono tre modi per aggiungere una pagina Web scritta in codice XHTML CSS. Il metodo preferito implica l'incorporamento di un file CSS esterno utilizzando un tag < link >. Un altro metodo mette il codice CSS tra apertura e chiusura tag < style > nell'intestazione di un file HTML. Il metodo meno preferito è quello di utilizzare CSS all'interno di tag HTML definendo l'attributo di stile.

Istruzioni

Fogli di stile esterni

1

Creare un nuovo file vuoto nel codice editor e salvarlo con l'estensione. CSS. Immettere in questo file di qualsiasi codice CSS che si desidera. Ecco un esempio di codice CSS:

H1 {font-size: 24px; font-style: italic;}

Il codice sopra riportato rende tutto il testo all'interno di tag < h1 > corsivo e 24 pixel di dimensioni.

2

Trovare il < head > e < / head > tag nel file HTML. Tra questi tag, aggiungere il seguente codice:

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

Sostituire "filename.css" con il nome del file con estensione CSS. Si noti che in XHTML, tag che non hanno un corrispondente tag di chiusura sono auto-chiuso, quindi l'aggiunta di un back slash alla fine del tag. In XHTML è anche necessario impostare l'attributo di tipo a "text/css" per fogli di stile CSS.

3

Aggiungi come molti fogli di stile come avete bisogno. Poiché codice CSS cascades, il browser considera l'ultimo foglio di stile nell'elenco come quella più importante. Un avvertimento riguardo l'incorporamento di troppi fogli di stile esterni è che ogni volta che un browser deve caricare un nuovo file, il caricamento del sito Web rallenta. Massimizzare la velocità del tuo sito mantenendo il numero di fogli di stile al minimo.

Tag di stile

4

Aprire il file HTML di una pagina Web che si desidera modificare. Trovare il < head > e < / head > Tag. Da qualche parte tra questi tag, aggiungere quanto segue:

< style type = "text/css" >

<!...

-->

< / stile >

Si noti l'utilizzo di tag di commento tra i tag di stile. I browser moderni probabilmente questo non è necessario, ma utilizzare "<!..." e "-->" per nascondere il codice CSS da browser meno recenti.

5

Aggiungere il codice CSS tra il tuo stile di < > e < / stile > Tag. Browser non leggere questo codice come testo da inserire nella pagina, ma come codice CSS per definire lo stile della pagina. Se si definisce uno stile in un foglio di stile esterno e quindi definisce uno stile diverso nei tag < style >, e il browser rileva un conflitto, è necessario che il browser darà preferenza al CSS all'interno dei tag < style >.

6

Aggiungere ulteriore codice all'interno dello stesso < style > e < / stile > Tag. Non aggiungerne di nuovi. Anche se facendo così non romperà il sito, è considerato forma poveri. Codifica sciatta causerà errori sul tuo sito.

L'attributo di stile

7

Aggiungere tag HTML utilizzando l'attributo di stile CSS. In questo caso, aprire il file HTML per la tua pagina Web e trovare il tag di cui si desidera aggiungere alcuni CSS. Ecco un esempio:

< div style = "float: left;" >

... Alcuni contenuti qui...

< / div >

Il codice di cui sopra rende il contenuto all'interno di quello galleggiante di tag < div > a sinistra della finestra del browser. Altri elementi della pagina, ad esempio testo e immagini, verranno avvolgerà intorno alla destra del < div >.

8

Aggiungere un altro stile per lo stesso tag come questo:

< div style = "float: left; text-align: right; " >

È concatenare le regole di stile come "galleggiante: sinistra" e "text-align: giusto" insieme con un punto e virgola. Questo è lo stesso come è usato in fogli esterni o tra tag < style >, ma in questo caso non si utilizzano parentesi graffe e non si può mettere ogni regola sulla propria riga.

9

Rimuovere il tag in CSS codice quando possibile. Designer di prova a volte come uno stile sarebbe effetto la pagina aggiungendo in tag o in linea, CSS prima di passare il codice a un foglio di stile esterno. CSS in linea è considerato povero di codifica e sconfigge lo scopo dei fogli di stile, che vengono utilizzati per controllare lo stile di interi siti Web invece di singole pagine.

Consigli & Avvertenze

• Mantenere tutto il codice CSS in un file esterno e utilizzare altri metodi di inclusione di CSS con parsimonia. Dopo aver completato lo sviluppo di sito Web, condensare il codice CSS utilizzando il software minifying che rimuove tutti gli spazi vuoti per velocizzare il tuo sito.