WEB I FOGLI DI STILE Gabriele Murara 1
Cosa sono e a cosa servono HTML dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento Cosa sono: (Cascading Style Sheets - Fogli di stile a cascata) sono gli strumenti che utilizziamo per dare una veste grafica alle pagine scritte in HTML. a cosa servono: servono per dividere la struttura della pagina dalla grafica. 2
Come si usano Ci sono diversi modi per scrivere dei fogli di stile: 1) Internal: vengono dichiarati all'interno del tag <style></ style> nell' <head> del documento e valgono solo per il documento. 2) Inline: vengono dichiarati all'interno del tag interessato : <p style= color: red; >esempio</p> 3
Come si usano(2) 3) External: vengono dichiarati nel tag <head> in questo modo: <link rel= stylesheet type= text/css href= filechecontienelostile.css /> NB: filechecontienelostile.css è un file che contiene tutte le regole di presentazione del documento 4
Regole: unita di misura Le unità di misura sono le seguenti: mm oppure cm : millimetri o centimetri in : pollici; ex : la dimensione di una x; pt : punti; px : pixel; % : percentuale; 5
Regole (internal, external) Le regole di stile hanno la forma selettore { proprietà: valore; } nelle pagine seguenti sono elencate le principali regole di stile 6
Regole: formattazione del testo font-family: arial, verdana, courier; decide di che tipo sara' il testo visualizzato in base al nome inserito. color: red; oppure color: #234321; decide di che colore sara' il testo visualizzato. font-size: 10pt; decide la dimensione del testo (in punti - pt o pixel - px ) word-spacing: 2px; decide la spaziatura tra una parola e l'altra letter-spacing: 2px; decide la spaziatura tra una lettera e l'altra 7
Regole: formattazione del testo (2) font-style: (può assumere i valori) normal; testo normale oblique; testo obliquo italic; testo in corsivo font-weight: normal; bold; testo in grassetto 8
Regole: formattazione del testo (3) text-decoration: (può assumere i valori) underline; testo sottolineato overline; testo sbarrato blink; testo intermittente font-align: (allinea il testo all'interno del contenitore) left; right; center; allinea: a sinistra; a destra; al centro; justify; giustifica il testo all'interno del contenitore; 9
Regole: sfondo background-color: #colore; background-image: url('nome file'); imposta come sfondo l'immagine specificata. background-repeat: (puo assumere i valori): repeat; repeat-x; affianca l'immagine in orizzontale; repeat-y; affianca l'immagine in verticale; repeat-no; non affianca l'immagine in nessun senso; 10
Regole: margin margin: valore (pt, px, %); sposta l'elemento dal bordo del suo contenitore in base al valore inserito; margin-left: valore (pt, px, %); margine sinistro; margin-right: valore (pt, px, %); margine destro; margin-top: valore (pt, px, %); margine superiore; margin-bottom: valore (pt, px, %); margine inferiore; 11
Regole: padding padding: valore (pt, px, %); sposta il contenuto dell'elemento dal bordo dell'elemento stesso in base al valore inserito; padding-left: valore (pt, px, %); dal margine sinistro; padding-right: valore (pt, px, %); dal margine destro; padding-top: valore (pt, px, %); dal margine superiore; padding-bottom: valore (pt, px, %); dal margine inferiore; 12
Regole: border border: spessore (pt, px), stile, colore; imposta il bordo dell'elemento in base alle regole specificate; (border-left, border-right, border-top, border-bottom) permettono di impostare il bordo per uno solo dei lati dell'elemento. 13
Regole: dimensioni width: dimensione (pt, px); imposta la larghezza del'elemento; height: dimensione (pt, px); imposta l'altezza del'elemento; 14
Regole: posizionamento position: relative; l'elemento sarà contenuto nell'elemento padre a si adatterà al suo contenitore; absolute; l'elemento sarà posizionato in maniera assoluta. fixed; l'elemento sarà fissato sullo schermo e rimarrà nella stessa posizione anche se scorriamo il documento. 15
Regole: floating float: left: L'elemento viene spostato sul lato sinistro del box contenitore, il contenuto scorre a destra; right: L'elemento viene spostato sul lato destro, il contenuto scorre a sinistra; none: Valore iniziale e di default in mancanza di una dichiarazione esplicita. L'elemento mantiene la sua posizione normale. 16