Una volta appreso HTML, il passo successivo è quello di imparare i CSS. CSS o foglio di stile CSS, è un linguaggio di scripting che rimuove l'onere di stile e il layout da HTML. Quando si utilizzano i CSS, è possibile modificare il disegno senza modificare il contenuto. Questo è un vantaggio rispetto disegni HTML sola, consentendo sviluppo web più flessibile. In CSS 2, nuove opzioni di layout sono inclusi, consentendo ai progettisti di allontanarsi dalla progettazione HTML. CSS utilizza una terminologia che è simile a HTML e ha gli standard in conformità con il World Wide Web Consortium (W3C).

istruzione

1 Link al vostro file CSS. Sul vostro file di base, inserire il seguente codice dopo il tag del titolo, ma prima del tag / testa.
<Link rel = "stylesheet" href = "stylesheet.css" type = "text / css" />

Questo dice al browser dove trovare il file CSS.

2 Creare sezioni nel file HTML. Al fine di CSS da applicare al file HTML, è necessario collegare i file insieme e aggiungere le sezioni appropriate, e ID. Nel file HTML che si intende utilizzare i tag DIV. Questi tag creano sezioni nel documento. Un browser non riconoscerà loro singolarmente, ma quando accoppiato con i tag CSS, come ID, il browser collegarli con il vostro file CSS e applicare il layout.

Sul vostro file di base di nuovo, inserire tag div in tutto ogni sezione. Questo file avrà tre sezioni evidenti: un colpo di testa, un menu e il contenuto principale. Dare ciascuno dei tag div un ID utilizzando la seguente sintassi: <div id = "header"> </ div>.

3 Creare un nuovo file nel vostro editor di testo. Nome esso stylesheet.css e salvarlo nella stessa cartella del file HTML. Questo è dove si mettere il codice CSS. Ogni elemento segue la stessa sintassi:

Selettore (se del caso) Nome {stile: tipo;}

Il file HTML contiene due tipi di elementi che possiamo scegliere di stile: i tag, che non hanno selettore, e ID, che utilizzano il # per denotare se stessi in un file CSS.

Stile un tag digitando:
body {stile: tipo;}

Stile un tipo di ID digitando:

intestazione {stile: tipo;}

4 Scrivere il codice CSS per creare il layout. Un layout semplice per una pagina web sarebbe un colore di sfondo, un'intestazione, con un proprio colore, e due colonne, una per il menu e una per il contenuto.

Aprire il selettore colore. Scegli il colore che si desidera utilizzare per lo sfondo e annotare il suo codice esadecimale. Un codice esadecimale è un simbolo # con un numero a sei cifre. Nero sarebbe # 000000 perché non ha nessun colore. Bianco sarebbe #FFFFFF perché è tutti i colori. Altri colori saranno una combinazione di numeri e lettere AF.

body {background: # 000000;}

Lo stile di fondo permette di scegliere un colore per lo sfondo. Aggiungere un paio di stili da applicare a tutto nel tag body.

body {background: # 000000; color: # ff0000; margin: 0; padding: 0; font-size: 12px;}

Colore indica il colore del testo, in questo caso rosso, nei tag body. Con l'azzeramento dei margini e padding, facciamo in modo che la pagina si estendono alle dimensioni della finestra del browser. Il font-size farà tutto il testo non-titolo 12 pixel in altezza.

5 Stile gli ID nel file html. In primo luogo il layout ogni ID in modo da avere quadro chiaro di che cosa avete bisogno.

intestazione {} menu {} {} principale

Non importa in che ordine si mette gli elementi nel file. Vogliamo che l'intestazione di allungare in tutta la pagina e hanno uno sfondo bianco con testo blu.

intestazione {width: 100%; sfondo: #FFFFFF; color: # 006699; text-align: center;}

Lo stile width indica la larghezza div e utilizzando una percentuale, ci consentirà pagina restringersi e crescere con la dimensione del browser. Lo stile text-align permette di scegliere l'allineamento del testo nel div, in questo caso il centro. Ora vogliamo il menu a destra e il principale sulla sinistra.

menu {position: relative; float: right; width: 160px;} principale {position: relative; float: left; width: 400px;}

Lo stile di posizione dà istruzioni del browser per consentire il div di fluire in un certo modo. Rendendo relativa, la posizione prenderà in considerazione le DIV sopra e sotto di esso nel file HTML. Ciò manterrà gli elementi galleggianti di coprire l'intestazione. Float permette l'elemento di muoversi nella direzione specificata.

6 Salvare il file. È possibile visualizzare il file HTML in un browser e sarà chiamata al file CSS e vi mostrerà il layout.

Consigli e avvertenze

• È possibile utilizzare i CSS per ogni tag nel file HTML. Ci sono molti altri stili disponibili per i CSS.
• CSS non funziona lo stesso in tutti i browser. Potrebbe essere necessario modificare il file CSS di lavorare in diversi browser.