Color

Aquesta 茅s la 8th secci贸 del tutorial CSS Getting Started tutorial;explica com especificar el color en CSS. En la vostre fulla d'estil d'exemple, s'introdueix colors de fons.

Informaci贸: Color

En aquest tutorial fins al moment, s'ha utilitzat un nombre limitat de colors amb nom. CSS2 suporta 17 colors amb nom en tots. Alguns dels noms pot ser que no sigui l'esperat:

  negre (black)   gris (gray)   plata (silver)   blanc (white)  
primaris vermell (red)   Llima (lime)   blau (blue)  
secundaris groc (yellow)   aigua (aqua)   f煤csia (fuchsia)  
  marr贸 (maroon)   taronge (orange)   oliva (olive)   porpra (purple)   verd (green)   blau mar铆 (navy)   verd blav贸s (teal)  

 

Detalls

El vostre navegador pot suportar molts m茅s colors amb nom, com:

dodgerblue   peachpuff   tan   firebrick   aquamarine  

Per a m茅s detalls d'aquesta llista ampliada, consulteu: SVG color keywords en CSS 3 m貌dul de colors. Aneu amb compte d'utilitzar noms de colors que els lectors dels navegadors no siguin compatibles.

Per a una paleta gran, especifiqueu els components vermell, verd i blau del color que desitgeu mitjan莽ant l'煤s d'un signe de nombre (hash) i tres d铆gits hexadecimals en el rang de 0 - 9, a - f. Les lletres a - f representen els valors de 10 - 15:

negre (black)   #000
vermell (pure red)   #f00
verd (pure green)   #0f0
blau (pure blue)   #00f
blanc (white)   #fff


Per a la paleta completa, especificar dos d铆gits hexadecimals per a cada component:

negre (black)   #000000
vermell (pure red)   #ff0000
verd (pure green)   #00ff00
blau (pure blue)   #0000ff
blanc (white)   #ffffff

Normalment, es poden obtenir aquests codis hexadecimals de sis d铆gits d'un programa de gr脿fics o alguna altra eina.

Exemple

Amb una mica de pr脿ctica, podeu ajustar els colors de tres d铆gits manualment per a la majoria de prop貌sits:

Comenceu amb el vermell pur :   #f00
Perqu猫 sigui m茅s clar, afegir una mica de verd i blau :   #f77
Perqu猫 sigui m茅s taronja, afegir una mica de verd addicional:   #fa7
Per enfosquir, reduir tots els seus components:   #c74
Per reduir la saturaci贸, fer els seus components m茅s iguals:   #c98
Si feu tots ells exactament iguals, s'obt茅 gris:   #ccc

Per un to past铆s com el blau p脿l路lid:

Comenceu amb blanc pur:   #fff
Reduir els altres components una mica:   #eef
M茅s detalls

Tamb茅 podeu especificar un color utilitzant valors decimals RGB en el rang de 0-255 o percentatges.

Per exemple, aquest 茅s de color granat (vermell fosc):

rgb(128, 0, 0)

Per a m茅s detalls sobre com especificar els colors, consulteu: Colors en l'especificaci贸 CSS.

Per obtenir informaci贸 sobre l'adequaci贸 dels colors del sistema de Men煤 i ThreeDFace, consulteu: Colors del Sistema en CSS2 en l'especificaci贸 CSS.

Propietats de color

Ja heu utilitzat la propietat color en el text.

Tamb茅 podeu utilitzar la propietat background-color per canviar el fons dels elements.

Els fons els podeu configurar com transparent per eliminar de forma expl铆cita qualsevol color, deixant al descobert el fons de l'element pare.

Exemple

Les caixes d'exemple en aquest tutorial utilitza aquest fons de color groc p脿l路lid:

background-color: #fffff4;

Les caixes de M茅s detalls utilitza aquest color gris p脿l路lid:

background-color: #f4f4f4;

 

Acci贸: L'煤s dels codis de color

Color de la p脿gina

  1. Editeu l'arxiu CSS.
  2. Feu el canvi que es mostra aqu铆 sota, per donar a les lletres inicials d'un fons blau p脿l路lid. (La disposici贸 i comentaris a l'arxiu probablement difereixen de l'arxiu que es mostra aqu铆. Mantenir la disposici贸 i els comentaris de la manera que preferiu.)
  3. Contingut HTML

    <p id = "first"> <strong>C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets</p>
    <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</p>
    

    Contingut CSS

    /*** CSS Tutorial: Color page ***/
    
    /* page font */
    body {
      font: 16px "Comic Sans MS", cursive;
    }
    
    /* paragraphs */
    p {
      color: blue;
    }
    #first {
      font-style: italic;
    }
    
    /* initial letters */
    strong {
      background-color: #ddf;
      color: red;
      font: 200% serif;
    }
    
    .spinach {
      color: green;
      background-color: #ddf;
    }
    
    
  4. Deseu el fitxer i actualitzeu el navegador per veure el resultat.
  5. El resultat ha de ser com aquest:

Repte

A l'arxiu CSS, canviar els noms de colors als codis de color de 3 d铆gits sense afectar el resultat.

Aix貌 no es pot fer exactament, per貌 es pot aconseguir aproximadament. Per fer-ho exactament es necessita codis de 6 d铆gits, i cal buscar l'especificaci贸 CSS o utilitzar una eina gr脿fica per a que coincideixi amb els colors.

Possible solution

The following values are reasonable approximations of the named colors:

strong {
  color: #f00; /* red */
  background-color: #ddf; /* pale blue */
  font: 200% serif;
}

.carrot {
  color: #fa0; /* orange */
}

.spinach {
  color: #080; /* dark green */
}

p {
  color: #00f; /* blue */
}

 

Hide solution
Veure la soluci贸 per el repte.

I ara qu猫?

El document d'exemple i la seva fulla d'estil d'exemple separen el contingut de l'estil de forma estricta. La seg眉ent secci贸 explica com es pot fer excepcions a aquesta estricta separaci贸.