1 / 17

ovvero lo stile di Internet

TC-WEB. Torino,. 5 settembre 2012. ovvero lo stile di Internet. Un po' di sintassi. Esempio: div { padding-top: 15px; font-size: 17px; text-transform: uppercase; width: 180px; clear: both; float: left; }. Commenti. Esempio: div { /* Questo è un commento */ padding-top: 15px;

csilla
Download Presentation

ovvero lo stile di Internet

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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 (CSS): div { font-size: 17px; } #questo-elemento { font-size: 20px; } .classe-di-elementi { font-size: 10px; } Esempio (HTML): <div> <span id=”questo-elemento”>Testo1</span> <span class=”classe-di-elementi”> Testo2 </span> </div>

  5. Tre modi per inserire codice CSSin 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 CSSin una pagina HTML (2) Esempi: In linea<div style=”color:red; font-size:12pt;”>Testo1</div> Incorporato <style> div { color:red; font-size:12pt } </style> File esterno (style.css) <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

  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. Due elementi consecutivi con stessa proprietà float impostata si disporranno uno affianco all'altro (se c'è abbastanza spazio). Si può evitare che un elemento (e i successivi) fluisca 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 <div style=”color:red;”> <span style=”color:blue;”>Testo</span> di prova </div>

  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) text-transform (upprecase, lowercase, capitalize)

More Related