Una volta che hai imparato HTML, il passo successivo è imparare CSS. CSS, o foglio di stile CSS è un linguaggio di scripting che elimina l'onere di stile e layout da HTML. Quando si utilizza CSS, è possibile modificare il vostro disegno senza modificare il contenuto. Questo è un vantaggio distinto sopra disegni solo HTML, consentendo per lo sviluppo web più flessibile. In CSS 2, nuove opzioni di layout sono inclusi, consentendo ai progettisti di allontanarsi dal design HTML. CSS viene utilizzata la terminologia che è simile a HTML e ha standard secondo il World Wide Web Consortium (W3C).

Istruzioni

1

Link a file CSS. Il file di base, inserire il seguente codice dopo il tag del titolo, ma prima la/pers tag.
< link rel = "stylesheet" href="stylesheet.css" type = "text/css" / >

Questo dice al browser dove trovare il file CSS.

2

Creare sezioni nel file HTML. In ordine per CSS da applicare al file HTML, è necessario collegare i file insieme e aggiungere le sezioni appropriate e ID. Nel file HTML si utilizzerà il tag DIV. Questi tag creano le sezioni nel documento. Un browser non li riconosce individualmente ma quando accoppiato con tag CSS ad esempio ID, il browser li collegano con il tuo file CSS e applicare il layout.

Il vostro file di base di nuovo, inserire tag div intorno a ogni sezione. Questo file avrà tre sezioni ovvi: un'intestazione, un menu e il contenuto principale. Dare a ciascuno dei tag DIV un ID utilizzando la seguente sintassi: < div id = "header" >< / div >.

3

Creare un nuovo file nel testo dell'editor. Il nome StyleSheet. CSS e salvarlo nella stessa cartella come file HTML. Questo è dove metterete il codice CSS. Ogni elemento segue la stessa sintassi:

Selettore (se qualsiasi) nome {stile: tipo;}

Il file HTML contiene due tipi di elementi che possiamo selezionare per stile: Tag, che non hanno nessun selettore, e ID, che utilizzare il # per indicare se stessi in un file CSS.

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

Stile un tipo ID digitando:

intestazione {stile: tipo;} 4

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

Aprire il selettore colore. Scegliere il colore che si desidera utilizzare per lo sfondo e notare il relativo codice esadecimale. Un codice esadecimale è un simbolo di # con un numero di sei cifre. Perché non ha colore, nero sarebbe #000000. Perché è tutti i colori, il bianco avrebbe #FFFFFF. Altri colori sarà una combinazione di numeri e lettere A-F.

body {background: #000000;}

Lo stile di sfondo consente di che scegliere un colore per lo sfondo. Aggiungere alcuni ulteriori stili da applicare a tutto ciò che nel tag body.

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

Il colore indica il colore del testo, in questo caso rosso, i tag body. Di azzeramento margin e padding, ci assicuriamo che la pagina si estenderà per adattarla alla finestra del browser. La dimensione del carattere farà tutto il testo non-Heading Hold 12 pixel in altezza.

5

Stile gli ID nel file html. Primo layout per ogni ID di modo da avere un quadro chiaro di che cosa avete bisogno.

intestazione {} menu {} {} principale

Non importa quale ordine che si mette gli elementi nel file. Vogliamo che l'intestazione di allungare all'interno della pagina e avere uno sfondo bianco con testo blu.

intestazione {width: 100%; background: #ffffff; color: #006699; text-align: center;}

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

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

Lo stile di posizione dà istruzioni del browser per consentire il div a fluire in un certo modo. Facendola relativo, la posizione prenderà in considerazione i div sopra e sotto di esso nel file HTML. Ciò manterrà gli elementi galleggianti da coprendo l'intestazione. Float permette l'elemento da spostare nella direzione specificata.

6

Salvare il file. È possibile visualizzare il file HTML in un browser e chiamerà al file CSS e mostrarvi il layout.

Consigli & Avvertenze

• È possibile utilizzare 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 per lavorare in diversi browser.