Le dichiarazioni CSS (Cascading Style Sheet) dettano la formattazione, layout e l'aspetto degli elementi della pagina Web. È possibile includere dichiarazioni CSS in più posizioni in un file HTML, tra cui inline, internamente e facoltativamente in un file esterno. Le regole CSS Inline sono indicate come parte del tag di apertura di un elemento utilizzando l'attributo di "stile". È possibile includere fogli di stile interni all'interno di una sezione di "stile" nella zona della testa di una pagina. È possibile collegare al file di foglio di stile esterno all'interno dell'area di testa di pagina. Cambiare da inline per fogli di stile esterni è in genere semplice.

Istruzioni

1

Creare file CSS esterni. Aprire un nuovo file in un editor di testo e salvarlo con estensione "CSS"..--ad esempio, "mypagestyle.css" o qualsiasi altro nome che preferite. Aggiungere un collegamento al foglio di stile all'interno della sezione head della tua pagina HTML. Aprire la pagina e individuare il tag di chiusura "< / head >". Aggiungere quanto segue prima di esso:

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

Se il file è stato salvato con un nome diverso, modificare il valore dell'attributo "href". Questo codice si presuppone che il file CSS viene memorizzato nella stessa posizione della pagina HTML.

2

Trovare le dichiarazioni CSS che si desidera spostare il vostro foglio di stile esterno. Se le dichiarazioni sono inline, appariranno elencati all'interno dei tag di apertura di elementi come segue:

< div style = "color: #FF0000; background-color: #000000; " > Ecco del testo in un elemento < / div >

Si tratta di un semplice esempio in cui testo e sfondo sono indicati colori. Evidenziare il testo elencato tra le virgolette come l'attributo di "stile", copiarlo e incollarlo nel file CSS. Eliminare l'attributo di stile tutto dall'elemento HTML quando lo avete copiato nel tuo foglio di stile.

3

Aggiungere la classe e gli attributi ID per gli elementi HTML per identificarli nel file CSS. Alter tag tua apertura "div" nuovamente, questa volta includendo un attributo ID:

< div id = "contenuto" > Ecco del testo in un elemento < / div >

Se l'elemento ha già un attributo ID, è possibile utilizzare invece di aggiungere il proprio. In alternativa, è possibile utilizzare un attributo di classe come segue:

< div class = "contenuto" > Ecco del testo in un elemento < / div >

4

Modificare il codice CSS per riflettere l'attributo ID o una classe che hai aggiunto. Attorno le dichiarazioni CSS che è stato copiato nel file CSS, posizionare un blocco che identifica la classe o l'ID che hai scelto. Per l'attributo ID, è necessario utilizzare la sintassi seguente:

contenuto

{color: #FF0000; background-color: #000000;}

Se è stato utilizzato un attributo di classe, utilizzare le seguenti operazioni:

content

{color: #FF0000; background-color: #000000;}

5

Copiare qualsiasi codice CSS da un foglio di stile interno nel file esterno. Se si dispone di codice all'interno di una sezione interna di CSS nella zona della testa della tua pagina HTML, è possibile anche trasferire al file CSS separato. Tale codice è normalmente indicato come segue:

< style type = "text/css" >

div {font-weight: bold;}

< / stile >

Copiare il codice tra i tag di "stile" e incollarlo nel file CSS. Eliminare l'area di "stile" tutto da codice HTML quando è stato copiato con successo. Salvare i file e aprire la pagina in un browser per eseguire il test.

Consigli & Avvertenze

• Archiviare le dichiarazioni CSS in un file separato consente di più elementi di stile in un sito Web in una sola volta.
• Mediante dichiarazioni CSS inline è meno efficiente rispetto all'utilizzo di file esterni, quindi è meglio evitare.