Stile Caratteri - EINAUDI
Transcript
Stile Caratteri - EINAUDI
Proprietà css ‘font’: lo stile css dei caratteri La proprietà css font permette di raggruppare tutte le proprietà del testo in una unica dichiarazione nel seguente ordine, separate da un spazio o da una virgola tra le differente valore per la famiglia del font: font-style font-variant font-weight font-size font-family Il ‘font-family’ La proprietà css ‘font-family’ specifica la famiglia del carattere da usare per il nostro testo. Può contenere come valore più nomi specifici (es:arial) e/o nomi di famiglia generica (es:serif). Di buona regola, meglio specificare più valori, separati da una virgola e in ordine di preferenza, aggiungendo per ultimo, un nome generico. Nel caso il primo font impostato non è installato sul sistema del utente, il browser passerà al secondo valore e cosi via per tutti i valori, fino a trovare uno giusto da utilizzare o usando un font di default appartenendo alla famiglia generica specificata. Esempio di regola css: font-family: Times, "Times New Roman", Palatino, serif; Un paragrafo con font-family:Times, “Times New Roman”, Palatino, serif; Nota bene che i nomi di font composti da più parole, come nel caso di Times New Roman, vengono inseriti tra quote. Es:"Times New Roman" Il ‘font-size’ La proprietà css ‘font-size’ permette di precisare la misura dei caratteri in modo assoluto di dimensione fissa con parole chiave (da xx-small a xx-large) ed unità di misura (le più diffuse essendo in pixel/px per l’uso online e point/pt per l’uso in stampa) o in modo relativo alle dimensione del testo dell’elemento genitore con parole chiave (smaller, larger) ed in percentuale (% o em, utile per avere un font ridimensionabile alle preferenze del utente). 1. Valore assoluto con parole chiave, in ordine di grandezza dal più piccolo (xx-small) al più grande (xx-large): font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; Lo stile css dei caratteri 1 1. Valore assoluto in unità di misura pixel: font-size: 24px; 2. Valore relativo con parole chiave smaller (più piccolo) e larger (più grande): font-size: smaller; font-size: larger; 3. Valore relativo in percentuale con % e em (Nota che 100%=1em): font-size: 2em; font-size: 200%; Il ‘font-style’ La proprietà css font-style permette di impostare lo stile del carattere in modo italico o no. normal: il valore di default, utile per azzerare un altro valore preimpostato italic: per un carattere in italico (corsivo) Un paragrafo con font-style :italic; Il ‘font-weight’ La proprietà css font-weight permette di specificare la consistenza visiva del carattere in modo assoluto con parole chiave (bold) o valori numerici definiti (da 100 a 900) o in modo relativo al testo del suo elemento genitore con parole chiave (bolder e lighter). normal: il valore di default, utile per azzerare un altro valore preimpostato. Nota che il valore normale è pare al valore numerico 400. Valore assoluto con parole chiave ‘bold’. Nota che il valore bold è pare al valore numerico 700. Un paragrafo con font-weight:bold; Valori assoluti numerici da 100 a 900: Un paragrafo con font-weight:100; Un paragrafo con font-weight:200; Un paragrafo con font-weight:300; Un paragrafo con font-weight:400; pare al valore ‘normal’ Un paragrafo con font-weight:500; Un paragrafo con font-weight:600; Lo stile css dei caratteri 2 Un paragrafo con font-weight:700; pare al valore ‘bold’ Un paragrafo con font-weight:800; Un paragrafo con font-weight:900; Valori relativi con parole chiave ‘bolder’ (più pesante) e ‘lighter’ (meno pesante): Un paragrafo con font-weight:bolder; Un paragrafo con font-weight:lighter; Il ‘font-variant’ La proprietà css font-variant con il suo valore ‘small-caps’ converte i caratteri minuscoli in caratteri maiuscoli ma conservando la loro altezza originale. Nota: per rendere un testo completamente in maiuscolo, usare la proprietà del testo text-transform con il valore ‘uppercase’. normal: il valore di default, utile per azzerare un altro valore preimpostato small-caps UN PARAGRAFO CON FONT-VARIANT:SMALL-CAPS; Generatore di css per il testo Il ‘Font-Color’ La proprietà che permette di impostare il colore del font è font-color , seguita da un colore come ad esempio red per il rosso, white per il bianco, black per il nero, usando il codice esadecimale come ad esempio #999999 per il grigio o i suoi valori RGB Il ‘Text-align’ E’ la proprietà che permette di definire l’allineamento di un testo. Può assumere i seguenti valori: right; left; center; justify. La proprietà text-align si applica solo agli elementi HTML di tipo blocco. Gli elementi in linea seguono l’allineamento del blocco in cui sono inseriti. ‘line-height’ (interlinea) Il line-height specifica l' altezza di linea del testo, definendo così implicitamente la spaziatura tra due linee di testo successivo. La proprietà line-height accetta valori specificati in tutte le unità di misura, ma i modi più diffusi per specificarlo sono sostanzialmente px, %, em e numeri puri. Procediamo ora con vedere un semplice esempio. La seguente regola specifica un line-height di 18 pixel per tutti i paragrafi: p {line-height: 18px} Lo stile css dei caratteri 3 Utilissimo il fatto che la proprietà line-height possa essere inclusa nello shorthand font. Dopo il font-size, basterà riportare una slash / e il line-height. Vediamo un esempio: p {font:12px/150% Arial, sans-serif} In questo caso quindi viene definito un font-size di 12 pixel e un line-height del 150% del font-size, che risulterà quindi 18 pixel. Text-indent (rientri) Se vogliamo rientrare il testo rispetto al margine, possiamo usare la proprietà text-indent, seguita da un valore numerico con le solite unità di misura. p {text-indent: 8px} http://www.maniegrafiche.it/css-text/index.php Lo stile css dei caratteri 4