Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » Tips

Tips


CSS e colori

Con i CSS ci sono cinque modi per attribuire valori di colore. Vediamo quali sono:

#RRGGBB :: Notazione esadecimale familiare agli sviluppatori HTML. La prima coppia di lettere corrisponde al canale rosso, la seconda al verde e la terza al blu. Ogni coppia può assumere i valori tra 00 e FF. Ad esempio il nero è rappresentato da #000000 ed il bianco da #FFFFFF.

#RGB :: È la forma compressa del sistema #RRGGBB. In questo caso ogni valore viene replicato per ottenere un valore a sei cifre:#F90 corrisponde a #FF9900.

rgb(rrr.rr%, ggg.gg%,bbb.bb%) :: Questo formato specifica i valori RGB in termini percentuali da 0% a 100%, compresi i valori decimali. Il bianco ad esempio è rgb(100%,100%,100%) ed il rosso "puro" è rgb(100%,0%,0%).

rgb(rrr,ggg,bbb) :: Questo formato specifica i valori RGB utilizzando valori da 0 a 255. In pratica, questa gamma di valori è l’equivalente decimale dello notazione esadecimale. Ad esempio il nero è rgb(0,0,0) ed il verde "puro" è rgb(0,255,0).

Keyword :: Si tratta delle 16 parole chiave basate sui colori originali VGA di windows: aqua, black, blue, fucsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow. I browser possono riconoscere altre parole chiave, ma soltanto queste sedici sono contenute nelle specifiche del W3C.

Impostare il colore di sfondo con i CSS

Utilizzando i fogli di stile di stile CSS è molto semplice definire un colore di sfondo per ogni elemento di una pagina web. Vogliamo ad esempio definire un colore di sfondo per BODY, H1 e P; quindi nel nostro foglio di stile (interno o esterno) basterà scrivere:

body {background-color: #999999}
h1 {background-color: #FF9900}
p {background-color: #FFFFFF}

e questo è il risultato.

Data di ultima modifica

A volte può essere utile inserire nelle nostre pagine web la data di ultima modifica. Un modo molto semplice per farlo è inserire questo codice:

<script language="JavaScript">
document.write(document.lastModified)
< /script>

nella parte della pagina dove vogliamo che la data sia visualizzata. Esempio.

Impostare un immagine di sfondo con i CSS

I CSS ci consentono di definire un immagine di sfondo per gli elementi delle nostro pagine web. Ad esempio se vogliamo che una pagina web abbia come sfondo una determinata immagine "image.jpg" basterà scrivere nel nostro foglio di stile (interno o esterno):

body {background-image: url("image.jpg")}

Ricordatevi che bisogna sempre prestare attenzione all'esatto percorso dell’immagine. Quindi se la nostra image.jpg si trova nella directory images il codice diventa:

body {background-image: url("images/image.jpg")}

Esempio.

» Vai alle prossime tre tips
» Torna all'indice delle tips

^Top


Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 3