CSS – 5

Transcript

CSS – 5

Proprietà di CSS
Esistono le seguenti sei famiglie di
proprietà:
CSS – 5
– Testo
– Background e colori
– Font
– Liste
– Contenitori (box model)
– Posizionamento
Proprietà
Non sempre il supporto da parte dei
browser è uguale
Tecnologie di Sviluppo per il
WEB
Proprietà del testo
2
Indentazione del testo
Attraverso questo tipo di proprietà è
possibile modificare il modo in cui il
contenuto dei tag appare
Si può modificare la posizione del testo
in relazione al resto della linea
Si possono inserire apici e pedici
text-indent
– Permette di indentare la prima linea del
testo
Valori
– Lunghezza
– Percentuale
• Si riferisce al blocco contenitore
…
P { text-indent: 3em }
WEB
3
WEB
4
Allineamento orizzontale
Decorazione del testo
text-align
text-decoration
– Permette di allineare il contenuto (e.g.,
testo) relativamente al blocco contenitore
– Descrive il tipo di decorazione aggiunta al
testo
Valori
Valori
– left, right, center, justify
– <string>
–
–
–
–
–
• Permette di allineare relativamente ad una
stringa (e.g., text-align: “.”)
• Si applica solo alle tabelle, ma non è
supportato da Netscape o Internet Explorer
WEB
5
WEB
Ombreggiatura del testo
Esempi
Crea un’ombra in basso e verso destra
grande il 20% della grandezza di H1
H1 { text-shadow: 0.2em 0.2em }
– Indica una serie di effetti di ombreggiatura,
separati da virgola, da aggiungere al testo
Un effetto di ombreggiatura indica
– L’offset dell’ombra (a destra ed in basso)
– Il blur radius – raggio di sfuocamento (opzionale)
(opzionale)
– Il colore
H1 { text-shadow: 3px 3px 5px }
H1 { text-shadow: 3px 3px 5px red }
H2 { text-shadow: 3px 3px red,
yellow -3px 3px 2px,
3px -3px }
Valori
6
text-shadow
none
underline
overline
line-through
blink (non necessariamente supportata)
– none, <color>, <length>
Non è supportato
WEB
7
WEB
8
Spaziatura di lettere e parole
Spazio tra le parole
letter-spacing e word-spacing
word-spacing
– Permette di specificare la spaziatura tra
lettere e parole, rispettivamente
– Permette di stabilire quanto spazio lasciare
tra le parole
Valori
Valori
– normal
– <length>
– normal (default)
• Il valore dipende dal browser
– <length>
BLOCKQUOTE { letter-spacing: 0.1em }
H1 { word-spacing: 1em }
WEB
• Indica un valore da aggiungere allo spazio
lasciato di default tra le parole
9
WEB
Esempio
10
Trasformazione della forma delle lettere
text-transform
– Cambia il modo in cui compaiono le lettere in un
testo
Valori
– capitalize
• Trasforma in maiuscolo lettera iniziale di ogni
parola
– uppercase
– lowercase
– none
WEB
11
WEB
12
Spazio bianco
white-space
– specifica la gestione dei ritorni a capo e del
collassamento dei whitespace all'
interno di
un elemento
Valori
Colori e background
– normal
– pre
– nowrap
WEB
13
Colori e background
Il colore
Attraverso alcune proprietà CSS, gli autori di
pagine WEB possono specificare il colore di
sfondo e quello di primo piano di un qualsiasi
elemento.
Lo sfondo può essere un colore od
un’immagine
Le proprietà sul background permettono di
posizionare
un’immagine,
ripeterla
e
dichiarare se l’immagine è fissa o meno
rispetto al punto di vista dell’utente
(viewpoint).
WEB
15
color
– Setta il colore di primo piano del contenuto
testuale di un elemento
Valore
– <color>
Esempi
EM { color: red }
P { color: rgb(255,0,0) }
WEB
16
Esempio
Colore di sfondo
background-color
Possiamo facilmente assegnare un
colore qualsiasi ai controlli di un
modulo senza far ricorso ad una classe
È sufficiente usare i selettori attributi
Esempio
INPUT[type=“radio”] { color: #336699 }
INPUT[type=“checkbox”] { color: #963 }
– Setta il colore di sfondo di un elemento
Valori
– <color>
– trasparent (default)
Esempio
H1 { background-color: #F00 }
Suggerimento
– Quando si assegna un colore allo sfondo
assegnare anche il colore di primo piano
WEB
17
Immagine di sfondo
WEB
Ripetizione sfondo
background-image
background-repeat
– Setta un’immagine come sfondo
Valori
– <uri>
– Specifica come l’immagine di sfondo deve
essere ripetuta
Valori
– repeat (default)
– repeat-x (immagine ripetuta in orizzontale)
– repeat-y (immagine ripetuta in verticale)
– no-repeat
– none (default)
Esempio
– P {background-image: url(img/pic1.gif) }
WEB
18
19
WEB
20
Posizionamento sfondo
Esempi
background-position
background-position: 14% 85%
– Specifica la posizione iniziale dell’immagine di
sfondo
Valori
<percentage>
<percentage> <percentage>
<length>
<length> <length>
– kw1 kw2
–
–
–
–
– Il punto che si trova a 14% a destra e 85%
in basso rispetto all’immagine è allineato
con il punto che si trova a 14% a destra e
85% in basso rispetto l’area da riempire
Esempi
BODY {background-position: 100% 0% }
BODY {background-position: right top }
• dove kw1 ∈ {top , center , bottom}
• dove kw2 ∈ {left , center , right}
WEB
21
WEB
Esempio
22
Esempio
14%
14%
– Deve essere centrata rispetto alla finestra del
browser
– Deve comparire su tutta la lunghezza della
finestra
85%
BODY {
background-image: url("logo.gif");
background-position: top center;
background-repeat: y-repeat;
background-color: green;
}
14%
85%
85%
WEB
Vogliamo inserire un’immagine sullo sfondo.
23
WEB
24
Risultato
Sfondo e viewpoint
background-attachment
– Specifica se l’immagine di sfondo è fissa o
meno rispetto al punto di vista (viewpoint)
dell’utente
Valori
– scroll
– fixed
esempio
WEB
25
WEB
Tutto insieme
background
– Attraverso questa proprietà possiamo indicare
contemporaneamente ed in qualsiasi ordine tutte
le proprietà che abbiamo visto prima
BODY{background:
url("Ebollizione.jpg")
60px 200px
repeat-y
white
fixed; }
WEB
I font
27
esempio2
26
I font e CSS2
Specificare il tipo di font
CSS2 specifica i font secondo le
seguenti caratteristiche
– Font family
– Font style
– Font variant
– Font weight
– Font stretch
– Font size
font-family
– Indica una lista di nomi di font e/o nomi di
font generici separati da virgola
– I nomi che vengono prima hanno priorità
maggiore
Esempio
BODY { font-family: Baskerville,
"Heisi Mincho W3", Symbol, serif
}
WEB
29
Famiglie generiche di font
WEB
font-style
Invece di un nome di font, è possibile
indicare una famiglia generica. In
questo modo il browser sa sempre
come rendere un font
Tipi di famiglie
– serif
– sans-serif
– cursive
– fantasy
– monospace
(Times New Roman)
(MS Arial)
Specifica lo stile di un font
Valori
– italic
– oblique
Non ben supportato
Esempio
P.uno { font-style: italic }
P.due { font-style: oblique }
(wingdings )
(Courier)
WEB
30
31
WEB
32
font-variant
font-weight
Specifica il modo di apparire del font
Valori
Specifica lo spessore o peso del font
Valori:
– small-caps
– normal, bold, bolder, lighter
– 100, 200, 300, 400, 500,
– 600, 700, 800, 900
WEB
33
Per alcuni font non esistono tutti i valori
da normal a lighter oppure da 100 a
900. A gruppi differenti corrisponde lo
stesso “peso” del font.
Esempio
WEB
34
font-stretch
Indica come il testo deve disporsi in
una riga
Valori
WEB
35
– normal, wider, narrower,
– ultra-condensed, extra-condensed
– condensed, semi-condensed
– semi-expanded, expanded
– extra-expanded, ultra-expanded
Non supportato
WEB
36
font-size
font
Specifica la grandezza del font
Valori
– <length>
– <percentage>
– smaller, larger
– xx-small, x-small, small
– medium
– large, x-large, xx-large
Tramite questa proprietà si possono
indicare contemporaneamente ed in
qualsiasi ordine tutte le proprietà già
esaminate (pag 195 specificaCss2.pdf)
WEB
Possiamo indicare che il browser
utilizzi il font che usa il sistema su cui
gira (cf. pag. 209 specificaCss2.pdf)
– Valori: caption, icon, menu, message-box,
small-caption, status-bar
37
Selezione dei font
WEB
Descrizione di font
A volte pagine web che richiedono
delle
elaborazioni
tipografiche
sofisticate hanno bisogno di font che
possono non essere disponibili sul PC
dell'
utente.
Con CSS si possono specificare font
anche non disponibili, fornendo un
meccanismo per scaricarlo dal server,
oppure per trovare tra i font quello più
simile a quello specificato
WEB
38
39
Per descrivere il font si usa una @-rule
@font-face { <font-description> }
dove <font-description> ha la forma:
descrittore: valore;
[...]
WEB
40
Esempio
Per scaricarlo da un server
@font-face {
font-family: "Robson Celtic";
src: url("http://site/fonts/rob-celt")
format(“truetype”)}
Per cercare quello “più vicino”
@font-face {
src: local("Alabama Italic");
panose-1: 2 4 5 2 5 4 5 9 3 3;
font-family: Alabama, serif;
font-weight: 300, 400, 500; }
Tecnologie di Sviluppo per )
il
(cf. pg 230 SpecificaCSS2.pdf
Generazione del contenuto
numerazione automatica
le liste
41
WEB
es1
:before e :after
Esempi
Con gli pseudo-elementi :before e :after
è possibile inserire del testo prima e
dopo il contenuto di un qualsiasi
elemento
Possono essere usati in congiunzione
alla numerazione automatica per
numerare le sezioni di un documento
Questi
pseudo-elementi
sono
supportati da Netscape 7 ma non da
Internet Explorer 6
Q:before {
content: open-quote;
color: red
}
BODY:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
WEB
43
WEB
es2
(quoting)
44
content
Contatori automatici e numerazione
In CSS la numerazione automatica viene
controllata da due proprietà (non supportate
da IE6 e N7)
counter-reset
Questa proprietà è utilizzata con:before
e :after per generare del contenuto in
un documento
Valori
– <string>
– <uri>
– <counter> (lo vedremo con i contatori)
(valore dell’attributo X)
– attr(X)
– open-quote, close-quote
– no-open-quote, no-close-quote
WEB
counter-increment cnt 3
counter-reset cnt
– Setta a 0 cnt
counter-reset cnt 2
– Setta a 2 cnt
Se un elemento incrementa/decrementa un
contatore e lo usa, il contatore è usato dopo
che è avvenuto l’incremento/decremento
WEB
Per accedere al valore di un contatore si usa
la funzione counter() oppure counters()
WEB
46
Esempi
– Incrementa di un’unità cnt
opzionale
– Valori: <identifier> <integer>
none
45
counter-increment cnt
counter-increment
Incrementi e decrementi
– Valori: <identifier> <integer>
none
47
H1:before {
content: "Capitolo " counter(capitolo) ". ";
counter-increment: capitolo;
/* aggiunge 1 a capitolo */
counter-reset: sezione; /* Setta sezione a 0 */
}
H2:before {
content: counter(capitolo) "." counter(sezione) " ";
counter-increment: sezione;
}
WEB
48
Liste (poco supportate)
list-style-image
Per modificare come appaiono le liste
in CSS possiamo utilizzare tre proprietà
list-style-image
– Indica l’immagine da usare come
marcatore
Valori
– none
– <url>
list-style-type
– Specifica quale marcatore utilizzare
list-sytle-position
– outside (il marcatore è esterno all’item)
– inside (il marcatore fa parte dell’item)
WEB
UL { list-style-image: url(marker.gif); }
49
Esempio di list-style-image
WEB
50
WEB
52
Risultato
LI {
list-style-image: url(freccia.gif);
margin-left: 20px;
text-indent: 5px;
}
LI.important {
background-color:red;
width:170px;
}
WEB
51
Nota su list-style-image
Suggerimento
Se il marker è
troppo grande
bisogna lasciare
dello spazio a
sinistra di LI per
contenerlo
Bisogna lasciare dello spazio tra il
marker e il contenuto di LI
Con Netscape 7 è automatico, ci sono
dei problemi con Internet Explorer 6
Per risolvere il problema, si potrebbe
lasciare uno spazio trasparente a
destra dell’immagine
UL.lista LI {margin-left: 1.7em; }
WEB
53
list-style-type
WEB
54
OL.hebrew {list-style-type: hebrew; }
OL.georgian {list-style-type: lower-greek}
Serve a specificare il tipo di marcatore
da usare in una lista
Valori:
– none, disc, circle, square, decimal,
decimal-leading-zero, lower-roman,
upper-roman hebrew, armenian, georgian,
katakana, cjk-ideographic, hiragana,
hiragana- iroha, katakana-iroha,
– lower-alpha, lower-latin, upper-alpha,
upper-latin, lower-greek
WEB
55
WEB
56
Esempio di list-style-position
Forma abbreviata
Per un controllo
maggiore delle liste
bisogna usare il
valore marker della
proprietà display
– Setta le proprietà viste prima tutte in una
volta
Valori (non devono essere tutti
presenti)
– <’list-style-type’> <’list-style-position’>
<’list-style-image’>
– Possono comparire in qualsiasi ordine
– Maggiori dettagli in
seguito
WEB
list-style
57
UL { list-style: upper-roman inside }
UL > UL { list-style: circle outside }
WEB
58

CSS – 5

Transcript

Documenti analoghi

Sei proprio il mio Typo: La vita segreta delle font

Proprietà - Digididattica

Applicazione di un foglio di stile CSS alla pagina web

Specifiche tecniche Stampante Sistema di stampa è di tipo termico

Tag RFID per l`abbigliamento dei bambini Boboli

Untitled - EasyReading

32 MB memoria SDRAM, 8 MB memoria FLASH

corso base del webmaster

Progettazione Grafica Elaborati 2016-17