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


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?


13


Cosa succede se utilizzo un selettore di questo tipo?

h1 {attributo: valore;

}


14


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


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


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


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

#capitolo1id


21

body


h1 article h1

h1 p h1 p

#capitolo1 articleid tag


22

body


h1 article h1

h1 p h1 p

#capitolo1 article h1id tag tag


23


Tutti i tag H1 dentro ad un tag ARTICLE


24


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


Box modelCapire il box model permette di poter gestire correttamente le dimensioni

28

oggetto (tag)


29

padding (margine interno)


30

margin (margine esterno)


31

width (larghezza) border (bordo)

height (altezza)


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;


34

height: 28px;


padding: 5px;

altezza reale = padding top + padding bottom + height + border top + border bottom

42 = 5 + 5 + 28 + 2 + 2


35

height: 28px;


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


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


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

Svolgere i seguenti esercizi2.52.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)

Quelli presentati sono una sintesi. Altri SELETTORI si possono trovare sul pdf “css3 cheatsheet”

Esercizio

Svolgere il seguente esercizio 2.8


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


CSS corso base (classi seconde, mod 1)

Internet

Transcript of CSS corso base (classi seconde, mod 1)