Ver el código de «As Cores e os Fondos con CSS»

CSS permite controlar a [http://es.wikipedia.org/wiki/Colores_HTML cor] e os fondos cunhas posibilidades que están a anos luz dos efectos posibles empregando tan só extensións HTML.
== Cor de primeiro plano ==
* A propiedade '''''color''''' emprégase para configurar a cor do texto (é dicir "a cor do primeiro plano") dun elemento.
* A cor do borde coincide coa cor do primeiro plano a non ser que se especifique.
<source lang="css">
   p {color: #0000FF; }
   p {color: #00F; }
   p {color: rgb(0,0,255); }
   p {color: rgb(0%, 0%, 255%); }
</source>
* CSS tamén recoñece 16 nomes de cor válidos: ''aqua'', ''black'', ''blue'', ''fuchsia'', ''gray'', ''green'', ''lime'', ''maroon'', ''navy'', ''olive'', ''purple'', ''red'', ''silver'', ''teal'', ''white'' e ''yellow''.
* A propiedade ''color'' hérdase.
* Se engadimos cor ao primeiro plano dunha imaxe, seguirase vendo a imaxe pero aplicarase para o borde dela.
* A propiedade '''''border-color''''' ignora a propiedade ''color''.
* Para configurar a cor de todo un documento aplique a propiedade ''color'' ao elemento ''body''.
* Non funciona ben en todos os navegadores aplicar ''color'' a elementos de formulario.

== Cor de fondo ==
* Con CSS non só se pode proporcionar unha cor de fondo para toda a páxina, senón que tamén para calquera elemento do documento, tanto a nivel de bloque como de liña.
* Recoméndase empregar caixas de cor para substituír as táboas.
* A cor de fondo declárase có atributo '''''background-color'''''.
* As propiedades de fondo non son herdadas pero como o valor predeterminado é ''transparent'', a cor de fondo do elemento pai aparecerá ao traveso dos seus elementos fillos.
<source lang="css">
    p {padding: 5px; background-color: #ccc; }
</source>

== Imaxes de fondo ==
* Emprégase a propiedade '''''background-image'''''.
* Pódese configurar o punto de partida da imaxe, os patróns de repetición, posicionar a imaxe dentro dun elemento calquera e evitar que a imaxe se deslice fora da páxina.
* Se configuramos ''background-color'' e ''background-imaxe'' "gana" ''background-image".
<source lang="css">
    body {background-image: url(fondo.gif); }
    p#cabeceira {background-image: url(fondo-corpo.gif); }
</source>
=== Repetir a imaxe de fondo ===
* Coa propiedade '''''background-repeat''''' evítase que a imaxe de fondo se repita ou para facer que só se repita nunha dirección.
* Para facer que a imaxe só apareza unha vez:
<source lang="css">
div#corpo {background-image: url(fondo.gif); background-repeat: no-repeat; }
</source>
* Para facer que a imaxe só se repita en sentido horizontal ou en sentido vertical:
<source lang="css">
  div.horiz {background-image: url(imaxe.gif); background-repeat: repeat-x; }
  div.vert {background-image: url(imaxe.gif); background-repeat: repeat-y; }
</source>
=== Posición do fondo ===
* Coa propiedade '''''background-position''''' especifícase a posición da primeira imaxe no fondo do elemento.
* Para o posicionamento podemos empregar as seguintes palabras clave: ''left'', ''right'', ''top'', ''bottom'' e ''center''.
** Estas palabras úsanse, normalmente, de dúas en dúas. A orde non é importante.
** Se só se indica unha, suponse que a outra é ''center''.
<source lang="css">
body {background-image: url(imaxe.gif); 
    background-position: top center;
    background-repeat: no-repeat; }
</source>
* Tamén se poden empregar medidas de lonxitude. Distancias dende o extremo superior esquerda:
<source lang="css">
body {background-image: url(imaxe.gif); 
    background-position: 150px 150px;
    background-repeat: no-repeat; }
</source>
* Outro xeito é con valores porcentuais. 
** Estes valores indícanse en parellas horizontal/vertical. 
** Se só se indica un valor asúmese que o outro é 50%.
** Cada valor porcentual aplícase ao contedor da imaxe e á imaxe en si. Por exemplo, a seguinte imaxe ten colocado o seu centro no centro do elemento body:
<source lang="css">
body {background-image: url(imaxe.gif); 
    background-position: 50% 50%;
    background-repeat: no-repeat; }
</source>

=== Fixar a imaxe de fondo ===
* Coa propiedade ''background-attachment'' pódese fixar a imaxe nunha posición.
* Pode ter tres valores: ''scroll'', ''fixed'' e ''inherit''.
* O valor por defecto é ''scroll''.
* Con ''fixed'' permanecerá sempre na mesma posición visual.

== A propiedade ''background'' ==
Con esta propiedade combínanse todas as propiedades de fondo nunha regra de estilo única.
* Non ten valores requiridos e os valores poden aparecer en calquera orde.
* A única restrición é que se a posición se indica con dous valores deben aparecer estes xuntos e có valor horizontal en primeiro lugar, seguido inmediatamente polo vertical.
* Se só se da un valor o outro suponse que ten o valor "center".
* Uns exemplos válidos:
<source lang="css">
body {background: url(imaxe.gif) fixed top center no-repeat; }
div.cabeceira {background: repeat-x url(imaxe.gif) red; }
p {background: #ccc; }
#contido span.im-data {background: url("imaxes/im-data.gif") 0 50% no-repeat; } 
</source>

== Opacidades ==
* Pódese configurar a opacidade dun elemento para que esta non sexa nin completa de todo nin transparente de todo.
* Para configuralo temos:
** ''opacity'': con valores decimais entre 0 (invisible) e 1 (opaco). Tódolos navegadores compatibles con CSS3.
** ''moz-opacity'': tamén con valores decimais entre 0 e 1. Para Firefox.
** ''filter'': é unha propiedade de IE (5.5+) e trae varios efectos (degradacións, desenfocado, sombras, etc). Para lograr a transparencia emprégase o filtro ''alpha'', con valores entre 0 e 100.

<source lang="css">
<html>
<head>
<style type="text/css">
body {background: #00f; color: black}
#body {background: white;
    width: 400px; height: 400px;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5; }
</style>
</head>
<body>
<div id="body"> <h1>¡Ola!</h1> </div>
</body>
</source>

* Enlace interesante sobre [http://www.mandarindesign.com/opacity.html opacidades].

--[[Usuario:Vieites|Manuel Vieites]] e -- [[Usuario:Veiga|Rafael Veiga]] feb 2008