Il Fogli di Stile - CSS
Cosa sono i CSS ? CSS è un linguaggio mediante il quale è possibile definire la formattazione di documenti HTML, XHTML e XML ad es. siti web e relative pagine. CSS è l’acronimo di: CASCADING STYLE SHEETS In italiano: Fogli di Stile “a cascata”.
Cosa sono i CSS ? Insieme di regole che indica il tipo di formattazione da applicare. Regole contenute in un insieme di direttive (Recommendations) emanate a partire dal 1996 dal W3C (WWW Consortium) Sintassi delle regole: selettore { proprietà: valore; proprietà: valore; ... }
UTILIZZO DEI CSS (Parte 1) È possibile inserire le regole nella sezione HEAD della pagina HTML (preambolo del documento): <html> <head> <style type=“text/css”> <!-- h1 { color: red; } p { font-family: sans-serif; } --> </style> </head> <body> … (CONTENUTI CORPO DELLA PAGINA) </body> </html>
UTILIZZO DEI CSS (Parte 2) È possibile inserire le regole INLINE nel BODY della pagina HTML (per ogni singolo elemento): <html> <head> … </head> <body> <h1 style=“color: blue”> Titolo di colore blu </h1> <p> ... Paragrafo ... </p> <h1> ... Titolo non formattato ... </h1> </body> </html>
UTILIZZO DEI CSS (Parte 3) È possibile inserire le regole in un file esterno alla pagina HTML. (Attenzione: hanno minore precedenza) <html> <head> <link rel=“stylesheet” href=“file_stile.css” type=“text/css”> </head> <body> <h1>Titolo di colore blu</h1> <p> ... Paragrafo ... </p> </body> </html>
UTILIZZO DEI CSS (Parte 3bis) È possibile inserire le regole in un file esterno alla pagina HTML. (Attenzione: hanno minore precedenza) <html> <head> <style type="text/css"> @import url(file_stile.css); </style> </head> <body> <h1>Titolo di colore blu</h1> <p> ... Paragrafo ... </p> </body> </html>
FILES CSS ESTERNI (Parte 1) È possibile richiamare più di un file .CSS nella stessa pagina web: l’ultimo ha la precedenza. Una pagina web può essere visualizzata su dispositivi con caratteristiche molto diverse: PC, smartphone, palmari, stampanti, dispositivi braille, screen reader,… <head> <title> Esempio con differenti dispositivi </title> <link rel=“stylesheet” media=“screen” href=“screen.css” type=“text/css”> <link rel=“stylesheet” media=“print” href=“print.css” type=“text/css”> <link rel=“stylesheet” media=“aural” href=“screenreader.css” type=“text/css”> </head>
FILES CSS ESTERNI (Parte 2) È possibile richiamare più di un file .CSS nella stessa pagina web: l’ultimo ha la precedenza. Una pagina web può essere visualizzata su dispositivi con caratteristiche molto diverse: PC, smartphone, palmari, stampanti, dispositivi braille, screen reader,… <head> <title> Esempio con differenti dispositivi </title> <link rel=“stylesheet” media=“screen” href=“screen.css” type=“text/css”> <link rel=“stylesheet” media=“print” href=“print.css” type=“text/css”> </head>
L’ATTRIBUTO MEDIA È anche possibile utilizzare gli operatori logici come and, not e only. screen: schermo di computer; print: pagina stampata; projection: presentazioni e proiezioni; speech: dispositivi a sintesi vocale; braille: supporti basati sull’uso del braille; handheld: dispositivi mobili con schermo piccolo e in genere dotati di browser con limitate capacità grafiche; tty: dispositivi a carattere fisso come i terminali; tv: visualizzazione su schermi televisivi. <link rel=“stylesheet” media=“screen and (color) and (device-aspect-ratio: 16/9)” href=“colore.css“ />"
REGOLE DI APPLICAZIONE Uno stile applicato ad un elemento viene applicato automaticamente anche a tutti i suoi sottoelementi <body style=“color:blue”> ... testo ... <div style=“color:green”> ... testo ... </div> <div> ... testo ... </div> </body> L’ultimo DIV cambia il colore del testo interno, anche se non specificato!!
I SELETTORI (Parte 1) DI TIPO: p { font-size : 8pt} DI ATTRIBUTO: valori degli attributi class e id <style type=“text/css”> #p_idenficatore { color:blue; } .p_classe { font-weight:bold; } </style> … <p id=“p_identificatore”> Testo in blu </p> <p class=“p_classe”> Testo in grassetto </p> UNIVERSALI * { font_weight:bold; } RAGGRUPPAMENTO DI SELETTORI h1, h2 { color:blue; font-size:10pt; }
I SELETTORI (Parte 2) FIGLI E DISCENDENTI selettore di figli: h1 > p { ...} selettore di discendenza: h1 p { ...} DI ADIACENZA p + div { ...} ORDINE DI PRECEDENZA: CSS INLINE CSS esterni Impostazioni personali dell’utente Impostazioni predefinite del browser (se non definito o se il browser non supporta i CSS) Se vengono definite più regole con la stessa importanza per uno stesso elemento, l’ultima definita è quella che verrà applicata Ereditarietà: ogni figlio eredita le impostazioni del padre
I SELETTORI (Parte 3) Figli Discendenti Fratelli (adiacenza)
LE PSEUDOCLASSI: I LINK Non definisce un elemento ma un suo particolare stato Es. a:link:hover {font-size:3 cm; color:#F00;} Es2. p:first-child {font-size:12px; color:#000;} PSEUDOCLASSE :link :visited :active :hover :focus RISULTATO link non visitato link visitato link attivo vi si trova sopra il mouse elemento attivo (tab)
GLI PSEUDOELEMENTI Consentono un controllo approfondito sui formati tipografici degli elementi dei blocchi Es. p:first-letter { color:red; } Attenzione:non sempre sono supportati dai browser! PSEUDOELEMENTO :first-letter :first-line :before :after RISULTATO prima lettera di un blocco prima riga di un blocco testo da aggiungere prima o dopo un elemento
UNITÁ DI MISURA Esistono diverse unità di misura; si dividono in: relative: ex, em, percentuale assolute: cm, mm, in, pt, px, pc Unità em ex px in cm mm pt pc % Definizione Altezza media del font utilizzato Altezza della x nel font utilizzato Numero di pixel nello schermo Inch, pollici (1 in = 2,54 cm) Centimetri Millimetri Punti (1 pt = 1/72 pollici) Pica (1 pc = 12 punti) Valore in percentuale relativo a quello dell’elemento principale Esempio h1 { margin: 0.5em } h2 { margin: 1ex } p { font-size: 12px } p { font-size: 0.5in } p { font-size: 0.3cm } p { font-size: 3mm } p { font-size: 12pt } p { font-size: 1pc } p { line-height: 120% }
I COLORI Espressi con il formato RGB (Red, Green, Blue) #RRGGBB #FFFFFF bianco #FF0000 rosso #00FF00 verde #0000FF blu rgb(y,y,y) oppure rgb(y%, y%, y%) rgb(255,0,0) o rgb(100%,0%,0%) rappresentano il rosso brillante Colori predefiniti che funzionano su tutti i browser: aqua black white gray green lime fuchsia maroon purple …
IL POSIZIONAMENTO statico (tipico di HTML): ogni elemento è posizionato in base al flusso di dati del documento; assoluto: permette di astrarre il CSS dal flusso dei dati, consentendo di posizionarlo in qualsiasi punto della pagina (elementi che possono anche venire sovrapposti). relativo: non esce dal flusso di dati, nè produce alcuna modifica rispetto agli elementi posizionati in modo statico. Se vengono impostate le proprietà left e right, si spostano gli elementi a sinistra e in alto di quello che lo precede.
ATTRIBUTO ABSOLUTE <DIV STYLE="position:absolute; top:100px; left:100px;"> <IMG SRC="elemento01.gif" border="0"> </DIV>
ATTRIBUTO RELATIVE <P>Esempio di posizionamento <SPAN STYLE="position:relative; top:10px; left:10px;"><B>relativo</B></SPAN> usando il marcatore SPAN all’interno del … alla parola precedente "posizionamento". </P>
PROPRIETÀ VISIBILITY Determina se un elemento debba essere visibile o nascosto. Si applica a tutti gli elementi e non è ereditata. l’elemento non viene rimosso dal flusso del documento e occupa lo spazio relativo alle sue dimensioni (c’è ma non si vede). I valori possibili sono: visible: default, l’elemento è visibile hidden: elemento nascosto (apparirà una zona vuota) collapse: usato nelle tabelle (per righe,colonne e celle). Differente dalla proprietà “display: none”.
PROPRIETÀ Z-INDEX (Parte 1) Imposta l'ordine di posizionamento dei vari elementi sulla base di una scala di livelli. Stabilisce la disposizione degli elementi posizionati lungo l’asse perpendicolare allo schermo. Esempio: <div style="z-index: 1"> <div style="z-index: 2"> <div style="z-index: 3">
PROPRIETÀ Z-INDEX (Parte 2) Codice HTML: <BODY> <div class="div1">TESTO DEL PRIMO DIV</div> <div class="div2">TESTO DEL SECONDO DIV</div> <div class="div3">TESTO DEL TERZO DIV</div> </BODY>
PROPRIETÀ Z-INDEX (Parte 3) Codice HTML: <STYLE> div { border: #000 solid 2px; height: 200px; width: 400px; padding: 30px; position: absolute; } .div1 { background-color: #DDD; top: 20px; left: 20px; z-index: 1; visibility: visible; } .div2 { background-color: #AAA; top: 80px; left: 150px; z-index: 2; visibility: visible; } .div3 { background-color: #666; top: 160px; left: 300px; z-index: 3; </STYLE>
PROPRIETÀ Z-INDEX (Parte 4) Risultato finale: