March 1
CSS (Cascading Style Sheet) le dichiarazioni dettano la formattazione, il layout e l'aspetto degli elementi della pagina Web. È possibile includere dichiarazioni CSS in più posizioni in un file HTML, tra cui in linea, internamente ed eventualmente in un file esterno. regole CSS in linea sono indicati come parte del tag di un elemento usando l'attributo "style" di apertura. È possibile includere i fogli di stile interne all'interno di una sezione "stile" nella zona della testa di una pagina. È possibile collegare a file foglio di stile esterno all'interno della zona della testa pagina. Il passaggio da linea a fogli di stile esterni è generalmente semplice.
1 Creare il file CSS esterno. Aprire un nuovo file in un editor di testo e salvarlo con estensione "css" - per esempio, "mypagestyle.css" o qualsiasi altro nome che si preferisce. Aggiungere un link al tuo foglio di stile all'interno della sezione head della pagina HTML. Aprire la pagina e guardare per la chiusura "</ head>" tag. Aggiungere la seguente prima:
<Link rel = "stylesheet" type = "text / css" href = "mypagestyle.css" />
Modificare il valore "href" attributo se è stato salvato il file con un nome diverso. Questo codice presuppone che il file CSS è memorizzato nella stessa posizione della pagina HTML.
2 Trova le dichiarazioni CSS che si desidera spostare al vostro foglio di stile esterno. Se le dichiarazioni sono in linea, appariranno elencati all'interno dei tag di elementi di apertura come segue:
<Div style = "color: # FF0000; background-color: # 000000;"> Ecco una parte di testo in un elemento </ div>
Questo è un semplice esempio in cui sono indicati testo e sfondo. Evidenziare il testo elencato tra le virgolette come l'attributo "style", copiarlo e incollarlo nel vostro file CSS. Eliminare l'intera attributo style dall'elemento HTML quando lo avete copiato nel vostro foglio di stile.
3 Aggiungi classe ed attributi ID per gli elementi HTML per identificarli nel file CSS. Modificare il vostro tag di apertura "div" di nuovo, questa volta con un attributo ID:
<Div id = "content"> Ecco una parte di testo in un elemento </ div>
Se il vostro elemento ha già un attributo ID, si può utilizzare invece di aggiungere il proprio. In alternativa, è possibile utilizzare un attributo di classe come segue:
<Div class = "content"> Ecco una parte di testo in un elemento </ div>
4 Modificare il vostro codice CSS in modo da riflettere l'ID o classe di attributo è stato aggiunto. Intorno alle dichiarazioni CSS copiati nel file CSS, inserire un blocco che identifica la classe o ID che hai scelto. Per l'attributo ID, utilizzare la seguente sintassi:
contenuto
{color: # ff0000; background-color: # 000000; }
Se è stato utilizzato un attributo di classe, utilizzare il seguente:
.contenuto
{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 CSS interno nella zona della testa della pagina HTML, è possibile anche trasferire al vostro file CSS separato. Tale codice viene normalmente indicato come segue:
<Style type = "text / css">
div {font-weight: bold;}
</ Style>
Copiare il codice tra i tag "stile" e incollarlo nel vostro file CSS. Eliminare l'intera area "stile" dal codice HTML quando è stato copiato. Salvare i file e aprire la pagina in un browser per testarlo.