ovvero lo stile di internet tc-web torino, 5 settembre 2012
TRANSCRIPT
![Page 1: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/1.jpg)
ovvero lo stile di Internet
TC-WEBTorino, 5 settembre 2012
![Page 2: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/2.jpg)
Un po' di sintassi
Esempio:
div {
padding-top: 15px;
font-size: 17px;
text-transform: uppercase;
width: 180px;
clear: both;
float: left;
}
![Page 3: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/3.jpg)
Commenti
Esempio:
div {
/* Questo è un commento */
padding-top: 15px;
/* Questo è un commento
su più righe */
font-size: 17px;
}
![Page 4: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/4.jpg)
Selettori
Come selettori di stile possono essere utilizzati:
Tag HTML ID Classi
Esempio (HTML):
<div>
<span id=”questo-elemento”>Testo1</span>
<span class=”classe-di-elementi”>
Testo2
</span>
</div>
Esempio (CSS):
div {
font-size: 17px;
}
#questo-elemento {
font-size: 20px;
}
.classe-di-elementi {
font-size: 10px;
}
![Page 5: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/5.jpg)
Tre modi per inserire codice CSSin una pagina HTML (1)
In lineaUtilizzando l'attributo style di un tag html
IncorporatoUtilizzando il tag style
In un file esternoScrivendo il codice CSS in un file esterno con estensione .css
Cascata (priorità):
Default
File esterno
Incorporato
In linea
![Page 6: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/6.jpg)
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>
![Page 7: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/7.jpg)
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)
![Page 8: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/8.jpg)
Il “Box model”
NOTA: la dimensione effettiva di un elemento è la somma delle dimensioni specificate (width e height) e di tutte queste proprietà
![Page 9: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/9.jpg)
Composizione di selettori
Selettori raggruppati:
h1, #id1, .classe3 {
font-size: 20px;
}
Selettori annidati:
p .classe2 {
color: red;
}
Selettori composti:
div.classe1 {
margin-left: 30px;
}
![Page 10: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/10.jpg)
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...);
fixedIl posizionamento è calcolato rispetto alla finestra del prowser;
relativeIl 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.
![Page 11: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/11.jpg)
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.
![Page 12: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/12.jpg)
Gestire il posizionamento (3)
Allineamento di un elemento
Al centro
.center {
margin-left:auto;
margin-right:auto;
}
A destra
.right {
position:absolute;
right:0px;
}
![Page 13: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/13.jpg)
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
![Page 14: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/14.jpg)
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>
![Page 15: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/15.jpg)
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)
![Page 16: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/16.jpg)
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; }
![Page 17: Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012](https://reader035.vdocuments.pub/reader035/viewer/2022081518/5542eb59497959361e8c61b9/html5/thumbnails/17.jpg)
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)