Embed Size (px)
Citation preview
ovvero lo stile di Internet
TC-WEBTorino, 5 settembre 2012
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;
/* Questo è un commento
su più righe */
font-size: 17px;
}
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;
}
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
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>
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)
Il “Box model”
NOTA: la dimensione effettiva di un elemento è la somma delle dimensioni specificate (width e height) e di tutte queste proprietà
Composizione di selettori
Selettori raggruppati:
h1, #id1, .classe3 {
font-size: 20px;
}
Selettori annidati:
p .classe2 {
color: red;
}
Selettori composti:
div.classe1 {
margin-left: 30px;
}
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.
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.
Gestire il posizionamento (3)
Allineamento di un elemento
Al centro
.center {
margin-left:auto;
margin-right:auto;
}
A destra
.right {
position:absolute;
right:0px;
}
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
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>
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)
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; }
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)
