CSS 4. Tipi di dati in CSS. Numeri <number> Lunghezze <length> Tipi di dati, lunghezze ed unità di misura. Esistono i seguenti tipi di dati

Transcript

1 CSS 4 Tipi di dati, lunghezze ed unità di misura Tipi di dati in CSS Esistono i seguenti tipi di dati <number> <length> <percentage> <string> <uri> <color> <angle> 2 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) 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 3 4

2 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 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 5 6 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 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 7 8

3 Lunghezze assolute in: pollici (1in = 2.54cm) cm: centimetri mm: millimetri pt: punti (1pt = 1/72 di pollice) pc: picas (1pc = 12pt) Esempi H1 { margin: 0.5in } H2 { line-height: 3cm } H3 { word-spacing: 4mm } H4 { font-size: 12pt } H4 { font-size: 1pc } 9 10 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: 10pt } P { line-height: 120% } /* 120% di font-size */ 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 la barra rovesciata per includere le virgolette nella stringa. "Io mi chiamo \"ambrogio\"" 11 12

4 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(" } 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%); 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 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 0000FF purple teal fuchia FF00FF aqua 00FFFF 15 16

5 Esempi BODY {color: black; background: white } H1 { color: maroon } H2 { color: olive } EM { color: #f00 } EM { color: #ff0000 } 17 Valori per fogli di stile aural the aural rendering of a document, already commonly used by the blind and printimpaired communities, combines speech synthesis and "auditory icons." Utilizzati da sintetizzatori vocali Angoli <angle> deg, grad, rad Tempi ms, s Frequenze Hz, khz 18 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; 19