I valori nel CSS

i-valori-nei-css

Oggi parliamo delle proprieta’ dei CSS che sono molto importanti per la costruzione di una pagina web solida ed efficente.

Vediamo i tipi di valore che e’ possibile assegnare alle diverse proprieta’ dei CSS. I tipi di valore sono:

  • la parola chiave inherit;
  • numeri;
  • lunghezze;
  • valori percentuali;
  • URI;
  • colori;
  • la parola chiave auto.

La parola chiave auto

la parola chiave auto indica al programma che dovra’ utilizzare il valore previsto per quella specifica proprieta’ cui il valore auto e’ stato assegnato. Esempio:

#testa div{height:auto;}

Il valore auto puo’ essere anche utilizzato per sovrascrivere impostazioni di un’altra regola, il cui selettore si riferisce al medesimo elemento:

#testa div{height:200px;}

#testa div.box{height:auto;}

Numeri

Alcune proprieta’ ammettono come valore semplicemente un numero che puo’ essere espresso in pixel, em in percentuale ecc… o senza una grandezza specifica.

#testo{

font-size:12px;

line-height: 1px;

z-index: 100;

}

Lunghezze

Le lunghezze sono costituite da un numero intero (0,1,2,3…..) o reale positivo (0.25,1.75,…), negativo o nullo, cui deve essere associata un’unita’ di misura. Le unita’ di misura si dividono in due categorie:

  1. relative
  2. assolute

– unita’ di misura relative

Le unita’ di misura relative sono:

  • em-> equivalente alle dimensioni del carattere di riferimento
  • ex -> equivalente all’altezza del carattere x del carattere di riferimento
  • px -> il pixel dello schermo

Quindi le misure relative dipendono dalle impostazioni del browser, del sistema operativo e dalla dimensione dello schermo.

– unita’ di misura assolute

Le unita’ di misura assolute sono:

  • in: pollici (1in=2.54cm)
  • cm: centimetri
  • mm: millimetri
  • pt:punti(nei CSS, 1pt=1/72in)
  • pc:picas (1pc=12pt)

Le unita’ di misura assolute sono riconducibili al metro, senza la necessita’ di conoscere fattori relativi al programma utente.

Valori percentuali

Le percentuali sono costituite da un valore numero seguito dal simbolo %.

URI

GLi URI servono ad indicare l’indirizzo in cui si trova l’oggetto.

url('http://sito/file')

url("http://sito/file")

url('/file')

url('../file')

Colori

Essenzialmente i colori possono essere espressi in due modi, attraverso parole chiave e attraverso i valori RGB.

Le parole chiave non sono altro che i nomi dei colori stessi: black, blue, grey, green, lime, aqua, maroon…

I valori RGB, sono disponibili in diverse sintassi:

  • # seguito da sei cifre esadecimali (#000000); le prime 2 cifre indicano la quantita’ di rosso. la terza e la quarta, la quantita’ di verde e le ultime indicano la quantita’ di blu
  • # seguito da tre cifre esadecimali(#000)
  • operatore RGB() richiede tre valori divisi da virgola [rgb(0,255,255) oppure rgb(0,100%,100%)]

La parola chiave inherit

Assegnando ad una proprieta’ il valore inherit si indica al browser che il valore da assegnare alla proprieta’ deve essere ereditato dal piu’ prossimo elemento progenitore cui e’ stata assegnata tale proprieta’.

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *