MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Color

This translation is incomplete. Please help translate this article from English.

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ó.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,