July 30
Cascading Style Sheets, o CSS, è il nome di un linguaggio di codifica utilizzato per definire gli stili per le pagine Web, ma si riferisce anche a se stessi, chiamati fogli di stile in breve i file di .css esterno. Tre modi esistono per aggiungere CSS a una pagina Web scritta in codice XHTML. Il metodo preferito consiste incorporare un file css esterno utilizzando un tag <link>. Un altro metodo mette il codice CSS tra l'apertura e chiusura tag <style> nell'intestazione di un file HTML. Il metodo meno preferito è quello di utilizzare i CSS all'interno tag HTML definendo l'attributo style.
1 Creare un nuovo file vuoto nel vostro editor di codice, e salvarlo con l'estensione css. Entrare in questo file qualsiasi codice CSS che si desidera. Ecco un esempio di codice CSS:
h1 {font-size: 24px; font-style: italic; }
Il codice di cui sopra rende tutto il testo all'interno dei tag <h1> corsivo e 24 pixel di dimensione.
2 Trova 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 CSS. Si noti che in XHTML, i tag che non hanno un corrispondente tag di chiusura sono auto-chiuso, quindi l'aggiunta di una barra posteriore alla fine del tag. In XHTML è inoltre necessario impostare l'attributo type di "text / css" per i fogli di stile CSS.
3 Aggiungere il numero di fogli di stile di cui hai bisogno. Perché cascate di codice CSS, il browser considera l'ultimo foglio di stile nella lista come il più importante. Un avvertimento su come integrare un numero eccessivo di fogli di stile esterni è che ogni volta che un browser deve caricare un nuovo file, il sito di carico rallenta. Massimizzare la velocità del vostro sito, mantenendo il numero di fogli di stile al minimo.
4 Aprire il file HTML di una pagina Web che si desidera modificare. Trova il <head> e </ head> tag. Da qualche parte tra questi tag, aggiungere il seguente:
<Style type = "text / css">
<! -
->
</ Style>
Si noti l'uso di tag di commento tra i tag di stile. I browser moderni probabilmente non hanno bisogno di questo, ma usano "<! -" e "->" per nascondere codice CSS da browser più vecchi.
5 Aggiungere il codice CSS tra il <style> e </ style> tag. I browser non leggono il codice come testo per mettere sulla pagina, ma come codice CSS per lo stile della pagina. Se si definisce uno stile in un foglio di stile esterno e quindi di definire uno stile diverso nei tag <style>, e il browser trova un conflitto, il browser darà la preferenza al CSS all'interno dei tag <style>.
6 Aggiungere il codice aggiuntivo all'interno dello stesso <style> e </ style> tag. Non aggiungerne di nuovi. Anche se così facendo non si romperà il sito, è considerato cattiva forma. codifica Sloppy causerà errori sul tuo sito.
7 Aggiungere CSS per i tag HTML che utilizzano l'attributo style. In questo caso, aprire il file HTML per la pagina Web e trovare il tag in cui si desidera aggiungere un po 'di CSS. Ecco un esempio:
<Div style = "float: left;">
... Alcuni contenuti qui ...
</ Div>
Il codice di cui sopra rende il contenuto all'interno di tale tag <div> float a sinistra della finestra del browser. Altri elementi della pagina, come testo e immagini, si avvolgere intorno alla destra del <div>.
8 Aggiungere un altro stile allo stesso tag in questo modo:
<Div style = "float: left; text-align: right;">
Si concatenano le regole di stile come "float: left" e "text-align: right" insieme con un punto e virgola. Questo è lo stesso di come viene utilizzato in fogli esterni o tra i tag <style>, ma in questo caso non si utilizza parentesi graffe e non si può mettere ogni regola sulla propria riga.
9 Rimuovere in-tag codice CSS, quando possibile. I progettisti talvolta verificare come uno stile effettuerebbe la pagina aggiungendo in-tag, o, CSS prima in linea di spostare il codice a un foglio di stile esterno. In linea CSS è ritenuto insufficiente codifica e annulla lo scopo di fogli di stile, che sono usati per controllare lo stile di interi siti invece di singole pagine.