CSS 4. Tipi di dati, lunghezze ed unità di misura

Transcript

1 CSS 4 Tipi di dati, lunghezze ed unità di misura

2 Tipi di dati in CSS Esistono i seguenti tipi di dati <number> <length> <percentage> <string> <uri> <color> <angle> Tecnologie di Sviluppo per il WEB 2

3 Numeri <number> Interi Cifre comprese tra 0 e 9 Decimali Cifre comprese tra 0 e 9 separate dal punto Sia numeri interi che decimali possono essere preceduti dal segno + oppure Alcune proprietà possono restringere il tipo di valori che assumono (e.g., interi positivi) Tecnologie di Sviluppo per il WEB 3

4 Lunghezze <length> Si riferiscono a misure verticali od orizzontali Il formato di una lunghezza è un valore Subito dopo il valore deve essere indicata un unità di misura P { font-size: 12px; } Non si può lasciare uno spazio tra lunghezza ed unità di misura Dopo la lunghezza di valore 0 l unità di misura è opzionale Tecnologie di Sviluppo per il WEB 4

5 Tipi di lunghezze Lunghezza Relativa Il suo valore è relativo ad un altra lunghezza o proprietà H1 { margin: 0.5em } Lunghezza Assoluta Il suo valore è indicato attraverso un unità di lunghezza assoluta H1 { margin: 3mm } Si usano quando sono note le proprietà fisiche del media di output e.g., un foglio A4 Tecnologie di Sviluppo per il WEB 5

6 Lunghezze relative 1 em È uguale alla grandezza del font in uso nell elemento o a quella dell elemento padre SPAN {width: 2em; } a volte si fa riferimento ad essa come altezza della lettera m minuscola H1 { font-size: 1.2em; } La grandezza del font dell elemento H1 sarà il 20% più grande di quella ereditata dall elemento stesso Tecnologie di Sviluppo per il WEB 6

7 Lunghezze relative 2 ex Pari all altezza del carattere x minuscolo (chiamata a volte x- height) definita anche per font che non hanno la lettera x P { margin: 1ex } I margini di ogni paragrafo saranno ampi quanto è alta la x-height Tecnologie di Sviluppo per il WEB 7

8 Lunghezze relative 2 px Unità di misura relativa alla risoluzione del dispositivo con cui è visualizzato il documento (pixel) P { font-size: 12px } La grandezza del font di ogni paragrafo sarà pari a 12 pixel Tecnologie di Sviluppo per il WEB 8

9 Lunghezze assolute in: pollici (1in = 2.54cm) cm: centimetri mm: millimetri pt: punti pc: picas (1pt = 1/72 di pollice) (1pc = 12pt) Tecnologie di Sviluppo per il WEB 9

10 Esempi H1 { margin: 0.5in } H2 { line-height: 3cm } H3 { word-spacing: 4mm } H4 { font-size: 12pt } H4 { font-size: 1pc } Tecnologie di Sviluppo per il WEB 10

11 Percentuali <percentage> Numero seguito dal simbolo % Sono valori relativi ad altri valori Nello standard CSS, per proprietà che ammettono dei valori espressi in percentuale, è indicato rispetto a cosa calcolare la percentuale P { font-size: 120% } /* 120% di font-size */ att.ne: consultate la specifica, per maggiori dettagli Tecnologie di Sviluppo per il WEB 11

12 Stringhe <string> Alcune proprietà possono assumere come valori delle stringhe e.g., lo pseudoelemento :before P:before {content: Paragrafo! } Una stringa viene posta tra virgolette semplici o doppie Si usa il backslash per includere le virgolette nella stringa. "Io mi chiamo \"ambrogio\"" Tecnologie di Sviluppo per il WEB 12

13 URL <url> Ad alcune proprietà è possibile assegnare come valore un URL Per denotare un URL si usa la notazione url() L indirizzo può essere racchiuso tra apici singoli o doppi oppure essere indicato senza apici BODY { background: url(" } Tecnologie di Sviluppo per il WEB 13

14 Colori <color> 1 È possibile far riferimento ai colori in vari modi, Per nome color: blue; Per valore esadecimale color: #0000FF; oppure color: #00F Per valore RGB color: rgb(0,0,255); Per percentuale RGB color: rgb(0%,0%,100%); Tecnologie di Sviluppo per il WEB 14

15 Colori <color> 2 Quando, negli ultimi due casi, si specificano valori superiori al massimo consentito (255 o 100%) o negativi il browser li sostituisce con il massimo e con il minimo, rispettivamente Si ricordi che esistono 216 colori mostrati allo stesso modo (o quasi) da tutti i browser su qualsiasi monitor web safe color Usano i valori esadecimali: 00, 33, 66, 99, CC, ed FF Tecnologie di Sviluppo per il WEB 15

16 Colori <color> 3 Possiamo far riferimento a 16 colori tramite il nome black green silver C0C0C0 lime 00FF00 gray olive white FFFFFF yellow FFFF00 maroon navy red FF0000 blue Tecnologie di Sviluppo per il WEB 16

17 Esempi BODY {color: black; background: white } H1 { color: maroon } H2 { color: olive } EM { color: #f00 } EM { color: #ff0000 } Tecnologie di Sviluppo per il WEB 17

18 Valori per fogli di stile aural the aural rendering of a document, already commonly used by the blind and print-impaired communities, combines speech synthesis and "auditory icons." Utilizzati da sintetizzatori vocali Angoli <angle> deg, grad, rad Tempi ms, s Frequenze Hz, khz Tecnologie di Sviluppo per il WEB 18

19 Valori e parole chiave A volte è possibile esprimere dei valori attraverso delle parole chiave Ad esempio font-size: x-large; font-size: larger; font-style: italic; border-style: solid; border-color: red; overflow: auto; Tecnologie di Sviluppo per il WEB 19