CSS corso base (classi seconde, mod 1)

CSS
corso base
Formattare e gestire
graficamente l’HTML
Matteo Ziviani – scuolagrafica.sanzeno.org
CSS Cascading Sheet Style
*
Laboratorio Multimediale
Classi seconde

Introduzione
I CSS permettono di definire e formattare elementi HTML.
Questi attributi di formattazione possono essere definiti in 3 modi:
1. Esternamente
2. Internamente
3. In-line
Quest’anno ci focalizzeremo solo su CSS ESTERNI. 2

CSS Esterni
I 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 CSS
Uno 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 TESTUALE
Selettore: h1
Regole: 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

I selettori
I selettori possono essere di diverso tipo
1. Tag
2. 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 selettori
Combinando 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 #1
1 <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>
9 </article>
10 </section>
13 </section>
14 </body>
12
Come posso formattare
con un unico stile solo gli
<h1> di riga 5 e 7?

Esempio #2
1 <body>
4 <article>
9 </article>
10 </section>
13 </section>
14 </body>
13
<h1> di riga 5 e 7?
Cosa succede se utilizzo
un selettore di questo
tipo?
h1 {
attributo: valore;
}

Esempio #2
1 <body>
4 <article>
9 </article>
10 </section>
13 </section>
14 </body>
14
<h1> di riga 5 e 7?
Cosa succede se utilizzo
un selettore di questo
tipo?
h1 {
attributo: valore;
}

Esempio #3
1 <body>
4 <article>
5 <h1 id=”t1”>titolo ...</h1>
7 <h1 id=”t2”>titolo 2….</h1>
9 </article>
10 </section>
13 </section>
14 </body>
15
<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 #4
1 <body>
4 <article>
5 <h1>titolo ...</h1>
7 <h1>titolo 2….</h1>
9 </article>
10 </section>
13 </section>
14 </body>
16
<h1> di riga 5 e 7?
USO I SELETTORI
COMBINATI
1) DOM
2) COSTRUZIONE DEL
SELETTORE

Esempio DOM #5
17
body
section#capitolo1 section#capitolo2
h1 article h1
h1 p h1 p

Esempio DOM #6
18
body
h1 article h1
h1 p h1 p
<h1> da gestire tramite CSS

Esempio SELETTORE #7
19
body
h1 article h1
h1 p h1 p
Segui il percorso per arrivare ai tag

20
body
h1 article h1
h1 p h1 p
#capitolo1
id

21
body
h1 article h1
h1 p h1 p
#capitolo1 article
id tag

22
body
h1 article h1
h1 p h1 p
#capitolo1 article h1
id tag tag

23
id tag tag
Tutti i tag H1 dentro
ad un tag ARTICLE

24
id tag tag
Tutti i tag H1 dentro
ad un tag ARTICLE
il tag ARTICLE
dentro ad un tag con
id CAPITOLO1

ESERCIZIO
1 <body>
4 <article>
5 <h1>titolo ...</h1>
7 <h1>titolo 2….</h1>
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?
Prova a schematizzare il
DOM

ESERCIZIO #2
1 <body>
4 <article>
5 <h1>titolo ...</h1>
7 <h1>titolo 2….</h1>
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?

CSS
corso base
Attributi
● box model
● testo, font e colore
● sfondo
● liste
● pseudoclassi
● varie

Box model
Capire il box model permette di poter gestire correttamente le
dimensioni
28
oggetto (tag)

Box model
dimensioni
29
padding (margine interno)

Box model
dimensioni
30
margin (margine esterno)

Box model
dimensioni
31
width (larghezza)
border (bordo)
height (altezza)

Box model
dimensioni
32
altezza reale = padding top + padding bottom + height + border top + border bottom
larghezza reale = padding left + padding right + width + border left + border right

Esercizio
Calcola la larghezza e l’altezza reale
33
height: 28px;
width: 50px; border: 2px;
margin: 10px;
padding: 5px;

Esercizio
34
height: 28px;
margin: 10px;
padding: 5px;
altezza reale = padding top + padding bottom + height + border top + border bottom
42 = 5 + 5 + 28 + 2 + 2

Esercizio
35
height: 28px;
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
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
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 misure
Nei 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 flottanti
Per affiancare due tag blocco si usa l’attributo float
40
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 esercizi
2.1
2.2
2.3
2.4

Font e testo
43
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
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
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

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
2.5
2.6

Liste
47
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

Esercizio
Svolgere il seguente esercizio
2.7

Varie
49
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

Selettori vari
50
: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)
Altri SELETTORI si possono trovare sul pdf “css3 cheatsheet”

Esercizio
Svolgere il seguente esercizio
2.8

Stili con lo stesso selettore
Quando 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-size: 20px;
}
h1 {
color: #06eb22;
font-size: 25px;
text-align: left;
}
h1 {
color: #06eb22;
font-size: 25px;
text-align: left;
}
1. Leggere gli stili dall’alto verso il basso
2. Gli stili uguali si sovrascrivono
3. Gli stili diversi si aggiungono

Esercizio
54
p {
color: #000000;
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
2.9
2.10
2.11

CSS corso base (classi seconde, mod 1)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a CSS corso base (classi seconde, mod 1)

Similar a CSS corso base (classi seconde, mod 1) (20)

CSS corso base (classi seconde, mod 1)

Notas del editor