Proprietà - Digididattica

Transcript

CSS – 5
Proprietà
Proprietà di CSS
 Esistono
proprietà:
le seguenti sei famiglie di
– Testo
– Background e colori
– Font
– Liste
– Contenitori (box model)
– Posizionamento
 Non
sempre il supporto da parte dei
browser è uguale
Tecnologie di Sviluppo per il WEB
2
Proprietà 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
…
3
Indentazione del testo
 text-indent
– Permette di indentare la prima linea del
testo
 Valori
– Lunghezza
– Percentuale
• Si riferisce al blocco contenitore
P { text-indent: 3em }
4
Allineamento orizzontale
 text-align
– Permette di allineare il contenuto (e.g.,
testo) relativamente al blocco contenitore
 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
5
Decorazione del testo
 text-decoration
– Descrive il tipo di decorazione aggiunta al
testo
 Valori
–
–
–
–
–
none
underline
overline
line-through
blink (non necessariamente supportata)
6
Spaziatura di lettere
 letter-spacing
– Permette di specificare la spaziatura tra le
lettere
 Valori
– normal
– <length>
BLOCKQUOTE { letter-spacing: 0.1em }
7
Spazio tra le parole
 word-spacing
– Permette di stabilire quanto spazio lasciare
tra le parole
 Valori
– normal (default)
• Il valore dipende dal browser
– <length>
• Indica un valore da aggiungere allo spazio
lasciato di default tra le parole
 H1
{ word-spacing: 1em }
8
Esempio
9
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
10
Spazio bianco
 white-space
– specifica la gestione dei ritorni a capo e del
collassamento dei whitespace all'interno di
un elemento
 Valori
– normal (va a capo quando necessario)
– pre (considera i line-break nel sorgente)
– nowrap (ignora i line break)
11
Background e colori
Colori e background



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).
13
Il colore
 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) }
14
Esempio
 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 }
15
Colore di sfondo
 background-color
– Setta il colore di sfondo di un elemento
 Valori
– <color>
– trasparent (default)
 Esempio
H1 { background-color: #F00 }

Suggerimento
– Quando si assegna un colore allo
assegnare anche il colore di primo piano
sfondo
16
Immagine di sfondo
 background-image
– Setta un’immagine come sfondo
 Valori
– <uri>
– none (default)
 Esempio
– P {background-image: url(img/pic1.gif) }
17
Ripetizione sfondo
 background-repeat
– 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
18
Posizionamento sfondo

background-position
– Specifica la posizione iniziale dell’immagine di
sfondo

Valori
–
–
–
–
–
<percentage>
<percentage> <percentage>
<length>
<length> <length>
kw1 kw2
• dove kw1 ∈ {top , center , bottom}
• dove kw2 ∈ {left , center , right}
19
Esempi
 background-position:
85% 14%
– Il punto dell’immagine che si trova 85% in
basso e a 14% a destra , è allineato con il
punto che si trova a 85% in basso e 14%
a destra rispetto l’area da riempire
 Esempi
BODY {background-position: 0% 100% }
È equivalente a:
BODY {background-position: top right }
20
Esempio
14%
14%
85%
14%
85%
85%
21
Esempio

Vogliamo inserire un’immagine sullo sfondo.
– Deve essere centrata rispetto alla finestra del
browser
– Deve comparire su tutta la altezza della finestra
BODY {
background-image: url("logo.gif");
background-position: top center;
background-repeat: y-repeat;
background-color: green;
}
22
Risultato
23
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
esempio2
24
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
Esempio
fixed; }
25
I font
I font e CSS2
 CSS2
specifica i font secondo le
seguenti caratteristiche
– Font family
– Font style
– Font variant
– Font weight
– Font stretch
– Font size
27
Specificare il tipo di font
 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
}
28
Famiglie generiche di font
 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)
(wingdings    )
(Courier)
29
font-style
 Specifica
lo stile di un font
 Valori
– italic
– oblique
 Non
ben supportato
 Esempio
P.uno { font-style: italic }
P.due { font-style: oblique }
30
font-variant
 Specifica
il modo di apparire del font
 Valori
– small-caps
31
font-weight
 Specifica
lo spessore o peso del font
 Valori:
– normal, bold, bolder, lighter
– 100, 200, 300, 400, 500,
– 600, 700, 800, 900
 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.
32
Esempio
33
font-stretch
 Indica
riga
 Valori
come il testo deve disporsi in una
– normal, wider, narrower,
– ultra-condensed, extra-condensed
– condensed, semi-condensed
– semi-expanded, expanded
– extra-expanded, ultra-expanded
 Non
supportato
34
font-size
 Specifica
la grandezza del font
 Valori
– <length>
– <percentage>
– smaller, larger
– xx-small, x-small, small
– medium
– large, x-large, xx-large
35
font
 Tramite
questa proprietà si possono
indicare contemporaneamente ed in
qualsiasi ordine tutte le proprietà già
esaminate (pag 195 specificaCss2.pdf)
 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
 Sezione
“altro” del sito del corso
36
Selezione dei 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
37
Descrizione di font
 Per
descrivere il font si usa una @-rule
@font-face { <font-description> }
dove <font-description> ha la forma:
descrittore: valore;
[...]
38
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; }
(cf. pg 230 SpecificaCSS2.pdf )

39
Generazione del contenuto:
numerazione automatica
le liste
:before e :after
 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
 e da Internet Explorer...?
41
es1
Esempi
Q:before {
content: open-quote;
color: red
}
BODY:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
es2
(quoting)
42
content
 Questa
proprietà è utilizzata con:before
e :after per generare del contenuto in
un documento
 Valori
– <string>
– <uri>
– <counter> (lo vedremo con i contatori)
– attr(X)
(valore dell’attributo X)
– open-quote, close-quote
– no-open-quote, no-close-quote
43
Contatori automatici e numerazione


In CSS la numerazione automatica viene
controllata da due proprietà (non supportate
da IE6 e N7)
counter-reset
– Valori: <identifier> <integer>
none

counter-increment
opzionale
– Valori: <identifier> <integer>
none

Per accedere al valore di un contatore si usa
la funzione counter() oppure counters()
44
Incrementi e decrementi

counter-increment cnt
– Incrementa di un’unità cnt


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
45
Esempi
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;
}
46
Liste
 Per
modificare come appaiono le liste in
CSS possiamo utilizzare tre proprietà
 list-style-image
– Indica l’immagine da usare come
marcatore
 list-style-type
– Specifica quale marcatore utilizzare
 list-sytle-position
– outside (il marcatore è esterno all’item)
– inside (il marcatore fa parte dell’item)
47
list-style-image
 Valori
– none
– <url>
UL { list-style-image: url(marker.gif); }
48
Esempio di list-style-image
LI {
list-style-image: url(freccia.gif);
margin-left: 20px;
text-indent: 5px;
}
LI.importante {
background-color:red;
width:170px;
}
49
Risultato
50
Nota su list-style-image
 Se
il marker è
troppo grande
bisogna lasciare
dello spazio a
sinistra di LI per
contenerlo
UL.lista LI {margin-left: 1.7em; }
51
Suggerimento
 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
52
list-style-type
 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
53
OL.hebrew {list-style-type: hebrew; }
OL.georgian {list-style-type: lower-greek}
54
Esempio di list-style-position
 Per
un controllo
maggiore delle liste
bisogna usare il
valore marker della
proprietà display
– Poi lo vediamo
55
Forma abbreviata
 list-style
– 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
UL { list-style: upper-roman inside }
UL > UL { list-style: circle outside }
56

Proprietà - Digididattica

Transcript

Documenti analoghi

Sei proprio il mio Typo: La vita segreta delle font

corso base del webmaster

CSS – 5

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

Progettazione Grafica Elaborati 2016-17

yearbook Termine inglese per annuario. yogh [ʒ]. Lettera dell