Post on 12-Apr-2017
CSS corso base
Formattare e gestire graficamente l’HTML
Matteo Ziviani – scuolagrafica.sanzeno.org
CSS Cascading Sheet Style*
Laboratorio MultimedialeClassi seconde
IntroduzioneI CSS permettono di definire e formattare elementi HTML.
Questi attributi di formattazione possono essere definiti in 3 modi:1. Esternamente2. Internamente3. In-line
Quest’anno ci focalizzeremo solo su CSS ESTERNI. 2
CSS EsterniI css esterni sono composti da uno o più file con estensione css che possono essere collegati a più pagine.
Cambiando uno stile grafico nel css si cambierà la visualizzazione di tutti i file html collegati
3
index.html dove-siamo.html altri file html
layout.css
Collegare i CSS esterni
Per poter collegare uno stile css esterno è necessario utilizzare il tag <link> all’interno della <head>
<link rel=”stylesheet” href=”percorso” media=”media” />
Nell’attributo href va specificato il percorso di dove si trova il file css mentre nell’attributo media si specifica per quale media deve essere applicato lo stile (screen, print, all ecc…)
Se si vuole implementare uno stile internamente si utilizza, sempre nella <head> il tag <style>
•<style > </style>
Definizione CSSUno stile grafico CSS può essere gestito definendo due opzioni.
1. selettore: permette di selezionare l’elemento html da gestire graficamente
2. regole grafiche: permettono di definire le varie caratteristiche grafiche di colore, font, dimensione ecc… dell’elemento selezionato precedentemente mediante selettore. Le regole non hanno un ordine di scrittura.
ESEMPIO TESTUALESelettore: h1Regole: colore rosso, font Arial ecc...
5
Grammatica
selettore {attributo: valore;attributo: valore;attributo: valore;[ecc..]
}
Per le parentesi graffe {} ALT+SHIFT+[ALT+SHIFT+] 6
CSS corso base
Selettori
Matteo Ziviani – scuolagrafica.sanzeno.org
I selettoriI selettori possono essere di diverso tipo1. Tag2. ID (#)3. Classi (.)4. Combinazioni dei precedenti (bisogna conoscere il DOM del
documento HTML)
8
Esempio selettore TAG
h1 {attributo: valore;attributo: valore;attributo: valore;[ecc..]
}
Esempio di selettore di tag.In questo caso tutti i tag h1 della pagina (e dei documenti collegati in caso di css esterno) verranno formattati secondo gli attributi specificati 9
Esempio selettore ID
#pubblicita {attributo: valore;attributo: valore;attributo: valore;[ecc..]
}
Esempio di selettore di ID.In questo caso il tag con attributo id uguale a “pubblicita” verrà formattato secondo gli attributi specificati
10
Esempio html
<aside id=”pubblicita”>
</aside>
Combinazioni di selettoriCombinando i vari selettori id, tag e classi è possibile creare dei percorsi di selezione che verranno applicati ad una sezione particolare di html.
Per poterli definire correttamente è necessario conoscere il DOM del documento.
11
Esempio #11 <body>2 <section id=”capitolo1”>3 <h1>Titolo della sezione</h1>4 <article>5 <h1>titolo dellarticolo</h1>6 <p>testo di paragrafo</p>7 <h1>titolo 2 dell’articolo</h1>8 <p>testo di paragrafo</p>9 </article>10 </section>11 <section id=”capitolo2”>12 <h1>Titolo della sezione</h1>13 </section>14 </body>
12
Come posso formattare con un unico stile solo gli <h1> di riga 5 e 7?
Esempio #21 <body>2 <section id=”capitolo1”>3 <h1>Titolo della sezione</h1>4 <article>5 <h1>titolo dellarticolo</h1>6 <p>testo di paragrafo</p>7 <h1>titolo 2 dell’articolo</h1>8 <p>testo di paragrafo</p>9 </article>10 </section>11 <section id=”capitolo2”>12 <h1>Titolo della sezione</h1>13 </section>14 </body>
13
Come posso formattare con un unico stile solo gli <h1> di riga 5 e 7?
Cosa succede se utilizzo un selettore di questo tipo?
h1 {attributo: valore;
}
Esempio #21 <body>2 <section id=”capitolo1”>3 <h1>Titolo della sezione</h1>4 <article>5 <h1>titolo dellarticolo</h1>6 <p>testo di paragrafo</p>7 <h1>titolo 2 dell’articolo</h1>8 <p>testo di paragrafo</p>9 </article>10 </section>11 <section id=”capitolo2”>12 <h1>Titolo della sezione</h1>13 </section>14 </body>
14
Come posso formattare con un unico stile solo gli <h1> di riga 5 e 7?
Cosa succede se utilizzo un selettore di questo tipo?
h1 {attributo: valore;
}
Esempio #31 <body>2 <section id=”capitolo1”>3 <h1>Titolo della sezione</h1>4 <article>5 <h1 id=”t1”>titolo ...</h1>6 <p>testo di paragrafo</p>7 <h1 id=”t2”>titolo 2….</h1>8 <p>testo di paragrafo</p>9 </article>10 </section>11 <section id=”capitolo2”>12 <h1>Titolo della sezione</h1>13 </section>14 </body>
15
Come posso formattare con un unico stile solo gli <h1> di riga 5 e 7?
Se uso un selettore di id cosa dovrei fare?
#t1 {attributo: valore;
}
#t2 {attributo: valore;
}
Se uso due selettori quali sono gli svantaggi?
Esempio #41 <body>2 <section id=”capitolo1”>3 <h1>Titolo della sezione</h1>4 <article>5 <h1>titolo ...</h1>6 <p>testo di paragrafo</p>7 <h1>titolo 2….</h1>8 <p>testo di paragrafo</p>9 </article>10 </section>11 <section id=”capitolo2”>12 <h1>Titolo della sezione</h1>13 </section>14 </body>
16
Come posso formattare con un unico stile solo gli <h1> di riga 5 e 7?
USO I SELETTORI COMBINATI
1) DOM2) COSTRUZIONE DEL
SELETTORE
Esempio DOM #5
17
body
section#capitolo1 section#capitolo2
h1 article h1
h1 p h1 p
Esempio DOM #6
18
body
section#capitolo1 section#capitolo2
h1 article h1
h1 p h1 p
<h1> da gestire tramite CSS
Esempio SELETTORE #7
19
body
section#capitolo1 section#capitolo2
h1 article h1
h1 p h1 p
Segui il percorso per arrivare ai tag
Esempio SELETTORE #8
20
body
section#capitolo1 section#capitolo2
h1 article h1
h1 p h1 p
#capitolo1id
Esempio SELETTORE #9
21
body
section#capitolo1 section#capitolo2
h1 article h1
h1 p h1 p
#capitolo1 articleid tag
Esempio SELETTORE #10
22
body
section#capitolo1 section#capitolo2
h1 article h1
h1 p h1 p
#capitolo1 article h1id tag tag
Esempio SELETTORE #11
23
#capitolo1 article h1id tag tag
Tutti i tag H1 dentro ad un tag ARTICLE
Esempio SELETTORE #12
24
#capitolo1 article h1id tag tag
Tutti i tag H1 dentro ad un tag ARTICLE
il tag ARTICLE dentro ad un tag con id CAPITOLO1
ESERCIZIO1 <body>2 <section id=”capitolo1”>3 <h1>Titolo della sezione</h1>4 <article>5 <h1>titolo ...</h1>6 <p>testo di paragrafo</p>7 <h1>titolo 2….</h1>8 <p>testo di paragrafo</p>9 </article>10 <article>11 <h1>titolo….</h1>12 </article>13 </section>14 </body>
25
Utilizzando il selettore appena visto, a cosa si applicherebbe lo stile se avessimo questo codice?
#capitolo1 article h1
Prova a schematizzare il DOM
ESERCIZIO #21 <body>2 <section id=”capitolo1”>3 <h1>Titolo della sezione</h1>4 <article>5 <h1>titolo ...</h1>6 <p>testo di paragrafo</p>7 <h1>titolo 2….</h1>8 <p>testo di paragrafo</p>9 </article>10 <article>11 <h1>titolo….</h1>12 </article>13 </section>14 </body>
26
Utilizzando il selettore appena visto, a cosa si applicherebbe lo stile se avessimo questo codice?
#capitolo1 article h1
CSS corso base
Attributi● box model● testo, font e colore● sfondo● liste● pseudoclassi● varie
Matteo Ziviani – scuolagrafica.sanzeno.org
Box modelCapire il box model permette di poter gestire correttamente le dimensioni
28
oggetto (tag)
Box modelCapire il box model permette di poter gestire correttamente le dimensioni
29
padding (margine interno)
Box modelCapire il box model permette di poter gestire correttamente le dimensioni
30
margin (margine esterno)
Box modelCapire il box model permette di poter gestire correttamente le dimensioni
31
width (larghezza) border (bordo)
height (altezza)
Box modelCapire il box model permette di poter gestire correttamente le dimensioni
32
altezza reale = padding top + padding bottom + height + border top + border bottom
larghezza reale = padding left + padding right + width + border left + border right
EsercizioCalcola la larghezza e l’altezza reale
33
height: 28px;
width: 50px; border: 2px;margin: 10px;
padding: 5px;
EsercizioCalcola la larghezza e l’altezza reale
34
height: 28px;
width: 50px; border: 2px;margin: 10px;
padding: 5px;
altezza reale = padding top + padding bottom + height + border top + border bottom
42 = 5 + 5 + 28 + 2 + 2
EsercizioCalcola la larghezza e l’altezza reale
35
height: 28px;
width: 50px; border: 2px;margin: 10px;
padding: 5px;
larghezza reale = padding left + padding right + width + border left + border right
64 = 5 + 5 + 50 + 2 + 2
Attributi box model
36
attributo costruzione definizione
height auto, px, % altezza
width auto, px, % larghezza
margin-top auto, px, % margine superiore
margin-left auto, px, % margine sinistro
margin-bottom auto, px, % margine inferiore
margin-right auto, px, % margine destro
padding-top auto, px, % margine interno superiore
padding-left auto, px, % margine interno sinistro
padding-bottom auto, px, % margine interno inferiore
padding-right auto, px, % margine interno destro
Attributi box model
37
attributo costruzione definizione
border-top width(px) style1 color bordo superiore
border-left width(px) style1 color bordo sinistro
border-bottom width(px) style1 color bordo inferiore
border-right width(px) style1 color bordo destro
border-top-right-radius px, % arrotondamento angolo alto destra
border-top-left-radius px, % arrotondamento angolo alto sinistra
border-bottom-right-radius px, % arrotondamento angolo basso destra
border-bottom-left-radius px, % arrotondamento angolo basso sinistra
background-color px, % colore di sfondo
box-shadow o(px) h(px) blur(px) colore ombra del box
1 none, dotted, dashed, solid
Attributi box model
38
attributo costruzione definizione
border width(px) style color tutti e quattro i bordi
margin top(px) right(px) bottom(px) left(px) tutti e quattro i margini
padding top(px) right(px) bottom(px) left(px) tutti e quattro i margini interni
Quelli presentati sono una sintesi. Altri attributi si possono trovare sul pdf “css3 cheatsheet”
Alcune abbreviazioni
Colori e misureNei file CSS i colori possono essere definiti con diversi metodi.● #nnnnnn● rgb(n,n,n)● rgba(n,n,n,0-1)
Per quanto riguarda le misure esistono diverse metriche.Quest’anno ci focalizzeremo sull’utilizzo di misure assolute● px
Per tutti gli stili che utilizzano le misure è necessario specificare sempre la metrica.
h1 {width: 34px;
} 39
Box flottantiPer affiancare due tag blocco si usa l’attributo float
40
attributo costruzione definizione
float left, right flottare un oggetto a sinistra o destra
Esempio
h1 {width: 500px;height: 40px;margin: 20px 40px 20px 40px;padding: 0px 0px 0px 0px;border: 1px solid #000000;
float: left;}
41
Esercizi
Svolgere i seguenti esercizi2.12.22.32.4
Matteo Ziviani – scuolagrafica.sanzeno.org
Font e testo
43
attributo costruzione definizione
font-family nome, nome ecc, generico1 carattere
font-size px, em, % dimensione carattere
font-weight normal, bold rimozione o aggiunta di bold da stile
color colore colore del testo
Quelli presentati sono una sintesi. Altri attributi si possono trovare sul pdf “css3 cheatsheet”
attributo costruzione definizione
text-align left, right, center carattere
text-decoration none, underline, overline, line-through
decorazioni di carattere
text-shadow o(px) h(px) blur(px) colore ombra di testo
line-height px, em interlinea
1 serif, sans-serif, monospace
Colonne
44
attributo costruzione definizione
column-count numero numero di colonne di un test
column-gap px, em, % distanza tra le colonne
column-rule width(px) style1 color linea tra le colonne
1 none, dotted, dashed, solid
Quelli presentati sono una sintesi. Altri attributi si possono trovare sul pdf “css3 cheatsheet”
Esempio
h1 {font-family: Arial, Verdana, sans-
serif;font-size: 20px;text-align: center;line-height: 20px;text-shadow: 3px 3px 5px #000000;
color: #ffff66;}
45
Esercizi
Svolgere i seguenti esercizi2.52.6
Matteo Ziviani – scuolagrafica.sanzeno.org
Liste
47
attributo costruzione definizione
list-style-type disc, circle,decimal, decimal-leading-zero, lower-alpha, lower-greek, lower-roman, upper-alpha, upper-roman, none
definisce il tipo di simbolo della lista
list-style-image url(‘path/img.ext’), none immagine per il punto elenco
list-style-position inside, outside allineamento testo punto elenco
Quelli presentati sono una sintesi. Altri attributi si possono trovare sul pdf “css3 cheatsheet”
Esercizio
Svolgere il seguente esercizio 2.7
Matteo Ziviani – scuolagrafica.sanzeno.org
Varie
49
attributo costruzione definizione
display inline, block, inline-block, none
forza la visualizzazione se in linea, blocco o non visualizzato
min-width px, em, % larghezza minima
min-height px, em, % altezza minima
background-image url(‘imm.ext’), none immagine di sfondo
background-attachment fixed, scroll definisce come viene applicata l’immagine di sfondo
background-repeat repeat, repeat-x, repeat-y, no-repeat
se e come ripetere l’immagine di sfondo
background-position x(px) y(px), left top, left, center, left bottom, right top, ecc...
posizione dell’immagine di sfondo
Quelli presentati sono una sintesi. Altri attributi si possono trovare sul pdf “css3 cheatsheet”
Selettori vari
50
attributo costruzione definizione
:hover tag:hover, #id:hover stile di un oggetto quando il mouse ci passa sopra
:first-line tag:fist-line, #id:first-line stile per la prima riga di un testo
:focus tag:focus, #id:focus stile di un oggetto quando è in focus (url #id)
Quelli presentati sono una sintesi. Altri SELETTORI si possono trovare sul pdf “css3 cheatsheet”
Esercizio
Svolgere il seguente esercizio 2.8
Matteo Ziviani – scuolagrafica.sanzeno.org
Stili con lo stesso selettoreQuando si scrive uno stile è sempre bene verificare se esiste già un selettore specifico altrimenti si rischia di avere più selettori uguali e creare confusione.
52
h1 {color: #ff9895;font-family: Arial, sans-serif;font-size: 20px;
}
h1 {color: #06eb22;font-size: 20px;text-align: left;
}
Se il css è scritto in questo modo, che stile verrà applicato ad h1?
Stili con lo stesso selettore
53
h1 {color: #ff9895;font-family: Arial, sans-serif;font-size: 20px;
}
h1 {color: #06eb22;font-size: 25px;text-align: left;
}
h1 {color: #06eb22;font-family: Arial, sans-serif;font-size: 25px;text-align: left;
}
1. Leggere gli stili dall’alto verso il basso2. Gli stili uguali si sovrascrivono3. Gli stili diversi si aggiungono
Esercizio
54
p {color: #000000;font-family: Arial, sans-serif;font-size: 20px;line-height: 22px;
}
#articolo p {font-size: 15px;text-align: left;text-shadow: 3px 3px 5px
#000000;}
Se il css è scritto in questo modo, che stile verrà applicato ad p dentro ad un tag con id “articolo”?
Esempio selettore classe
.testorosso {attributo: valore;attributo: valore;attributo: valore;[ecc..]
}
Esempio di selettore di classe.Questo selettore permette di applicare lo stile a qualsiasi tag mediante l’attributo class
55
Esempio html
<p class=”testorosso”>
</p>
Esercizi
Svolgere i seguenti esercizi2.92.102.11
Matteo Ziviani – scuolagrafica.sanzeno.org