Proprietà - Digididattica
Transcript
Proprietà - Digididattica
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 … Tecnologie di Sviluppo per il WEB 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 } Tecnologie di Sviluppo per il WEB 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 Tecnologie di Sviluppo per il WEB 5 Decorazione del testo text-decoration – Descrive il tipo di decorazione aggiunta al testo Valori – – – – – none underline overline line-through blink (non necessariamente supportata) Tecnologie di Sviluppo per il WEB 6 Spaziatura di lettere letter-spacing – Permette di specificare la spaziatura tra le lettere Valori – normal – <length> BLOCKQUOTE { letter-spacing: 0.1em } Tecnologie di Sviluppo per il WEB 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 } Tecnologie di Sviluppo per il WEB 8 Esempio Tecnologie di Sviluppo per il WEB 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 Tecnologie di Sviluppo per il WEB 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) Tecnologie di Sviluppo per il WEB 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). Tecnologie di Sviluppo per il WEB 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) } Tecnologie di Sviluppo per il WEB 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 } Tecnologie di Sviluppo per il WEB 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 Tecnologie di Sviluppo per il WEB sfondo 16 Immagine di sfondo background-image – Setta un’immagine come sfondo Valori – <uri> – none (default) Esempio – P {background-image: url(img/pic1.gif) } Tecnologie di Sviluppo per il WEB 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 Tecnologie di Sviluppo per il WEB 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} Tecnologie di Sviluppo per il WEB 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 } Tecnologie di Sviluppo per il WEB 20 Esempio 14% 14% 85% 14% 85% 85% Tecnologie di Sviluppo per il WEB 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; } Tecnologie di Sviluppo per il WEB 22 Risultato Tecnologie di Sviluppo per il WEB 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 Tecnologie di Sviluppo per il WEB 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; } Tecnologie di Sviluppo per il WEB 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 Tecnologie di Sviluppo per il WEB 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 } Tecnologie di Sviluppo per il WEB 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) Tecnologie di Sviluppo per il WEB 29 font-style Specifica lo stile di un font Valori – normal (default) – italic – oblique Non ben supportato Esempio P.uno { font-style: italic } P.due { font-style: oblique } Tecnologie di Sviluppo per il WEB 30 font-variant Specifica il modo di apparire del font Valori – normal (default) – small-caps Tecnologie di Sviluppo per il WEB 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. Tecnologie di Sviluppo per il WEB 32 Esempio Tecnologie di Sviluppo per il WEB 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 Tecnologie di Sviluppo per il WEB 34 font-size Specifica la grandezza del font Valori – <length> – <percentage> – smaller, larger – xx-small, x-small, small – medium – large, x-large, xx-large Tecnologie di Sviluppo per il WEB 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 Tecnologie di Sviluppo per il WEB 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 Tecnologie di Sviluppo per il WEB 37 Descrizione di font Per descrivere il font si usa una @-rule @font-face { <font-description> } dove <font-description> ha la forma: descrittore: valore; descrittore: valore; [...] descrittore: valore; Tecnologie di Sviluppo per il WEB 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 ) Tecnologie di Sviluppo per il WEB 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...? Tecnologie di Sviluppo per il WEB 41 es1 Esempi Q:before { content: open-quote; color: red } BODY:after { content: "The End"; display: block; margin-top: 2em; text-align: center; } Tecnologie di Sviluppo per il WEB 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 Tecnologie di Sviluppo per il WEB 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() Tecnologie di Sviluppo per il WEB 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 Tecnologie di Sviluppo per il WEB 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; } Tecnologie di Sviluppo per il WEB 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) Tecnologie di Sviluppo per il WEB 47 list-style-image Valori – none – <url> UL { list-style-image: url(marker.gif); } Tecnologie di Sviluppo per il WEB 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; } Tecnologie di Sviluppo per il WEB 49 Risultato Tecnologie di Sviluppo per il WEB 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; } Tecnologie di Sviluppo per il WEB 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 Tecnologie di Sviluppo per il WEB 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 Tecnologie di Sviluppo per il WEB 53 OL.hebrew {list-style-type: hebrew; } OL.georgian {list-style-type: lower-greek} Tecnologie di Sviluppo per il WEB 54 Esempio di list-style-position Per un controllo maggiore delle liste bisogna usare il valore marker della proprietà display – Poi lo vediamo Tecnologie di Sviluppo per il WEB 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 } Tecnologie di Sviluppo per il WEB 56