As Cores e os Fondos con CSS

De Manuais Informática - IES San Clemente.
Ir a la navegación Ir a la búsqueda

CSS permite controlar a 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.
   p {color: #0000FF; }
   p {color: #00F; }
   p {color: rgb(0,0,255); }
   p {color: rgb(0%, 0%, 255%); }
  • 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.
    p {padding: 5px; background-color: #ccc; }

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".
    body {background-image: url(fondo.gif); }
    p#cabeceira {background-image: url(fondo-corpo.gif); }

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:
div#corpo {background-image: url(fondo.gif); background-repeat: no-repeat; }
  • Para facer que a imaxe só se repita en sentido horizontal ou en sentido vertical:
  div.horiz {background-image: url(imaxe.gif); background-repeat: repeat-x; }
  div.vert {background-image: url(imaxe.gif); background-repeat: repeat-y; }

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.
body {background-image: url(imaxe.gif); 
    background-position: top center;
    background-repeat: no-repeat; }
  • Tamén se poden empregar medidas de lonxitude. Distancias dende o extremo superior esquerda:
body {background-image: url(imaxe.gif); 
    background-position: 150px 150px;
    background-repeat: no-repeat; }
  • 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:
body {background-image: url(imaxe.gif); 
    background-position: 50% 50%;
    background-repeat: no-repeat; }

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:
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; }

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

--Manuel Vieites e -- Rafael Veiga feb 2008

Obtenido de «https://manuais.iessanclemente.net/index.php?title=As_Cores_e_os_Fondos_con_CSS&oldid=19704»