Lez.13 - Corso Base Css

Gestione del Colore - la Proprietà color e la Proprietà background in un foglio di stile Css

Colore di Sfondo e Colore del Testo

Il Colore nei Css .
Oggi vedremo rapidamente il Colore nei Css.

I colori possono essere definiti, in diversi modi all'interno di una regola CSS.

Parola Chiave. Si tratta di inserire la parola chiave come valore alla proprietà color, in definitiva è la traduzione in inglese del colore che vogliamo assegnare, e vale solo per i colori pincipali e non per tutte le centinaia di sfumature di colore.
Sintassi con Parola Chiave:
p { color: red; }

Notazione Esadecimale.
Essa si compone con 3 coppie di lettere o numeri precedute da un cancelletto #
La prima coppia corrisponde ai valori del colore rosso (RED) la seconda coppia corrisponde ai valori del colore verde (GREEN), l’ultima coppia corrisponde ai valori del colore blue (BLUE).
Sintassi con Notazione Esadecimale:
p { color: #FFFFFF; }
Notazione RGB
E' una notazione abbreviata in cui i valori per il rosso, il verde e il blue sono definiti solo da una lettera o numero ed è sempre preceduta dal cancelletto.
Sintassi con Notazione RGB:
p { color: #C00; }

Notazione decimale con RGB
Un altro modo per definire i colori è quello di usare per i tre colori base i valori separati da una virgola.
Questi valori possono essere rappresentati con una percentuale che va da 0% a 100%, o con una scala di numeri che vanno da 0 a 255.
Per rappresentare il colore nero, nelle due versioni, procederemo in questa maniera.
Sintassi con Notazione decimale con RGB:
p { color: rgb(0%, 0%, 0%); }
p { color: rgb(0, 0, 0); }

Colore del Testo.
Per dare un colore ad un testo in una pagina html si usa la proprietà color in questa maniera:
selettore {color: valore;}
Esempio:
p {color: black;}
p {color: #CC0000;}
Colore di Sfondo.
La proprietà che definisce il colore di sfondo è background-color sintassi:
p { background-color: red; } con questa regola stiamo definendo il colore di sfondo del paragrafo che sarà di colore rosso.

Proprietà backgrond.
E' una proprietà ampia e complessa che definisce con precisione lo sfondo che vogliamo per un elemento html.
Per il momento, e per questa parte del corso, vediamo solo la lista delle proprietà per lo sfondo senza entrare nel particolare dei diversi valori e significati:
background-color

background-image

background-repeat

background-attachment

background-position

Ora vediamo il codice della proprietà color e della proprietà background-color:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Gestione del Colore</title>
  <meta charset="utf-8">
  <style type="text/css">
    #p1 {
        color: red;
        background-color: red;
    }
    #p2 {
        color: #007FFF;
        background-color: yellow;
    }
  </style>
 </head>
 <body>			    
   <h1>Gestione del Colore, Colore di Sfondo e Colore del Testo</h1>
   <p id="p1">Paragrafo 1</p>
   <p id="p2">Paragrafo 2</p>
 </body>               
</html>