Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012.

Presentazione sul tema: "Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012."— Transcript della presentazione:

1 ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012

2 Un po' di sintassi Esempio: div { padding-top: 15px; font-size: 17px; text-transform: uppercase; width: 180px; clear: both; float: left; }

3 Commenti Esempio: div { /* Questo è un commento */ padding-top: 15px; /* Questo è un commento su più righe */ font-size: 17px; }

4 Selettori Come selettori di stile possono essere utilizzati: Tag HTML ID Classi Esempio (HTML): Testo1 Testo2 Esempio (CSS): div { font-size: 17px; } #questo-elemento { font-size: 20px; }.classe-di-elementi { font-size: 10px; }

5 Tre modi per inserire codice CSS in una pagina HTML (1) In linea Utilizzando l'attributo style di un tag html Incorporato Utilizzando il tag style In un file esterno Scrivendo il codice CSS in un file esterno con estensione.css Cascata (priorità): Default File esterno Incorporato In linea

6 Tre modi per inserire codice CSS in una pagina HTML (2) Esempi: In linea Testo1 Incorporato div { color:red; font-size:12pt } File esterno (style.css)

7 Formattazione del testo Le principali proprietà per formattare un testo sono: color ( #000000, red, rgb(0, 124, 255) ) text-align (left, right, center, justify) text-decoration (none, underline) text-transform (uppercase, lowercase, capitalize) font-size (12pt, 20px, 1.2em) font-family ("Times New Roman", Arial, serif) font-style (normal, italic) font-weight (normal, bold)

8 Il Box model NOTA: la dimensione effettiva di un elemento è la somma delle dimensioni specificate (width e height) e di tutte queste proprietà

9 Composizione di selettori Selettori raggruppati: h1, #id1,.classe3 { font-size: 20px; } Selettori annidati: p.classe2 { color: red; } Selettori composti: div.classe1 { margin-left: 30px; }

10 Gestire il posizionamento (1) position: static - default L'elemento viene sempre posizionato seguendo il flusso normale della pagina (vengono ignorate le proprietà top, left, ecc...); fixed Il posizionamento è calcolato rispetto alla finestra del prowser; relative Il posizionamento è calcolato in base alla posizione che avrebbe l'elemento nel flusso normale della pagina; absolute Il posizionamento è calcolato in base alla posizione del primo elemento padre non static; Per specificare la posizione di un elemento vengono usate le proprietà top, left, bottom e right.

11 Gestire il posizionamento (2) In caso di sovrapposizione di due o più elementi si può specificare la proprietà z-index. La proprietà float permette di spingere orizzontalmente (a sinistra o a destra) un elemento a un lato dell'elemento contenitore e di far fluire i contenuti degli elementi successivi attorno all'elemento spostato (se c'è abbastanza spazio). Due elementi consecutivi con stessa proprietà float impostata si disporranno uno affianco all'altro. Si può evitare che i contenuti di un elemento (e dei successivi) fluiscano attorno a un elemento con proprietà float specificata impostando la proprietà clear:both nel secondo elemento.

12 Gestire il posizionamento (3) Allineamento di un elemento Al centro.center { margin-left:auto; margin-right:auto; } A destra.right { position:absolute; right:0px; }

13 Proprietà visibility e display visibility: visible – l'elemento viene visualizzato hidden – l'elemento è nascosto (ATTENZIONE! E' ancora presente!) display: inline – l'elemento può essere affiancato da altri elementi block – ha un line break automatico prima e dopo none – l'elemento viene rimosso dalla pagina

14 Proprietà a cascata... Dall'alto verso il basso p { font-size: 3px; color: red; font-size: 7px; } Da file esterno a inline Browser default file esterno codice incorporato codice inline Da elemento più esterno a elemento più interno Testo di prova

15 Modificare lo stile di un collegamento ipertestuale Per modificare lo stile di tutti i link in una pagina è possibile utilizzare il tag a come selettore: Es: a { color: blue; } Esistono dei tipi particolari di selettori per modificare lo stile di un link in uno solo dei suoi possibili stati: Es: a:link { color:#FF0000; } /* unvisited link */ a:visited { color:#00FF00; } /* visited link */ a:hover { color:#FF00FF; } /* mouse over link */ a:active { color:#0000FF; } /* selected link */ Una proprietà utile nel caso dei link è: text-decoration (underline, none)

16 Modificare lo stile di una tabella I selettori dei tag da utilizzare sono: table – per lo stile dell'intera tabella th – per lo stile dell'intestazione td – per lo stile delle singole cellette Alcune proprietà utili sono: border-collapse (separate, collapse) (per il tag table) nth-child (even, odd) (per il tag tr) Esempio: table { border-collapse: collapse; } table, td, th { border:1px solid green; } th { background-color:green; color:white; } tr:nth-child(even) { background: #CCCCCC; }

17 Altre proprietà utili in CSS background-color (red, #FFFFFF, rgb(0,0,128) ) background-image ( url(image1.png) ) background-repeat (reapeat-x, repeat-y, no-repeat) background-position (200px 100px, left top) opacity (0.0 – 1.0)