Primi elementi di... Cascading Style Sheet (o Fogli di Stile)

Transcript

1 ISIS Giordano Bruno - BUDRIO Primi elementi di... Cascading Style Sheet (o Fogli di Stile) Lezioni del Prof. Gianluigi Roveda

2 Caratteristiche dei Fogli di Stile Divide la descrizione del contenuto del testo dalla rappresentazione grafica e dalla formattazione; Facilita la replicazione esatta su più pagine delle stesse scelte stilistiche; Comprende tutte le possibilità grafiche, di formattazione e stilistiche già presenti in HTML e le estende;

3 Come utilizzare i CSS Tre modi: In-line: all'interno del body, nei tag della pagina; Interno: nell'head, separatamente dal body; Esterno: in un'altro file;

4 CSS In Line Si specificano le caratteristiche grafiche, stilistiche e di formattazione nei vari tag tramite l'attributo STYLE; Il valore di style è una stringa complessa organizzata, a sua volta in una sequenza di coppie proprietà-valore; Le proprietà sono separate dai loro valori tramite il simbolo : ; Le coppie proprietà-valore sono separate le une dalle altre dal simbolo ;. Proprietà valore Esempio: <h1 style="color: red; background: yellow;"> Dieci Piccoli Indiani </h1> Mostra un titolo di livello 1 con la scritta Dieci Piccoli Indiani in rosso su sfondo giallo. P.S.: i colori possono essere dati anche in base alla paletta RGB, es.: ##FFCC99

5 CSS-Interno Qui ritroviamo la parola riservata style non come attributo ma come tag; STYLE come tag viene posto nella testa della pagina; All'interno vengono elencati tutti i tag di cui si vuole precisare lo stile; L'attributo type ha valore fisso: 'text/css'; L'attributo media ha per valore il dispositivo di visualizzazione (es.: screen, print, all, ecc); Lo stile di un tag è definito tra graffe; Tra le graffe, per ogni tag, vi sono elencate le coppie proprietà-valore; Nel CSS i tag di cui si definisce lo stile si dice SELETTORE; <style type= text/css media= all > h1 { color:red; background:yellow; </style> p{ color:blue;

6 CSS-Esterno Nell'head pongo: <link href="stile1.css" rel="stylesheet" type="text/css" /> Oppure, tra tag url("nome_file_schermo.css") screen; Possono venir caricati anche più di un foglio di stile: Le caratteristiche dello stile sono salvate in un file a parte con estensione CSS stile1.css h1 { color:red; background:yellow; p{ url("stile_schermo.css") url("stile_stampa.css") print; Sempre tra tag style.

7 Iterazione tra Fogli di Stile CSS in-line CSS Interno CSS Esterno Se lo stile di H1 è definito sia in-line e sia in un CSS interno, allora lo stile di H1 viene descritto dal CSS in-line. Se lo stile di p è definito sia in un CSS interno sia in un CSS esterno, allora lo stile di p dipende dal CSS interno.

8 Margin Definire le distanze dagli elementi vicini body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; Oppure body { margin: 100px 40px 10px 70px;

9 Padding Definisce la distanza tra il contenuto e i margini dell'area delimitata dal tag h1 { background: yellow; padding: 20px 20px 20px 80px; Mettere lo sfondo a giallo mi permette di vedere che l'area di H1 non è solo lo spazio occupato dalla scritta, ma che tra la scritta e l'area colorata vi è la distanza determinata dalla proprietà padding.

10 Border Spessore Tipo di linea h1 { border-width: thick; border-style: dotted; border-color: gold; colore Oppure h1 { border-width: 4px; border-style: dotted; border-color: gold;

11 Definire il font di un tag Proprietà relative ai font: font-family: font di caratteri adottato dal tag associato al selettore(es. Ariel); font-style: normal italic oblique; font-variant: normal small-caps (a dare l effetto "maiuscoletto" al testo) font-weight: normal bold bolder lighter ; font-size: <dimensione> xx-small x-small small medium large x-large xx-large larger smaller h1 { font-family: Georgia, serif; font-style: italic; font-weight: bolder; font-size:small;

12 Proprietà dei Testi ALLINEAMENTO text-align: left center right justify Esempi: p{ text-align:justify; DECORAZIONE text-decoration: none underline overline line-through blink Esempi: p {text-decoration:underline; TRASFORMARE TUTTO UN TESTO IN MAIUSCOLO O IN MINUSCOLO text-transform: none uppercase lowercase capitalize INTERLINEA line-height: normal <valore> <valore percentuale Esempi: {line-height: 20px; ALLINEAMENTO VERTICALE vertical-align: baseline bottom middle sub super text-bottom text-top top <valore> <percentuale>

13 ID & CLASS Se voglio usare testo1 per più tag: <style type="text/css">.testo1 { font: 12px arial, Helvetica, sans-serif; color: #FF0000; </style> <p class="testo1"> CIAO </p> <pre class= testo1 > CIAO </pre> Se voglio usare testo1 per un solo tag e in una sua sola occorrenza: #testo2 {color: blue; <p id= testo2 > CIAO </p>

14 SPAN & DIV Contenitori a cui si può associare uno stile. Il primo non prevede che si vada a capo al suo termine, il secondo sì. <span style="font-weight : bold;">grassetto</span> <div id="testo2"> Buonanotte </div>

15 Position Posizione di un blocco Valori della proprietà position:static, absolute, fixed e relative. Esempio: #div2 { background: Silver; width: 300px; position: absolute; top: 400px; left: 400px; static: posizione dovuta al flusso del documento; absolute:il posizionamento avviene relativamente alla pagina o relativamente al primo blocco non statico (con position associato a valore differente da static) che lo contiene; fixed: le coordinate sono sempre rispetto alla finestra principale del browser; relative: posizionato in base alle coordinate rispetto al tag contenitore dell'elemento;

16 Sovraposizione di Blocchi Proprietà z-index <div style= width:150px; height:150px; position:relative; > <div style= width:100px; height:100px; background-color:#cccc00; position:absolute; > </div> <div style= width:100px; height:100px; background-color:#ff9900; position:absolute; top:50px; left:50px; > </div> </div> <div style= width:150px; height:150px; position:relative; > <div style= width:100px; height:100px; background-color:#cccc00; position:absolute; z-index:2; > </div> <div style= width:100px; height:100px; background-color:#ff9900; position:absolute; top: 50px; left: 50px; z-index:1; > </div> </div> z-index pari a 2 z-index pari a 1