Unidad 3. Aspecto de la página. Estilos básicos (VI)


3.5. Fondo

Otro aspecto que podemos personalizar es el fondo, con la propiedad background.

background-color nos permite establecer el color de fondo del elemento. Por ejemplo, background-color: green;.

También podemos utilizar una imagen, con la propieadad background: url(graficos/fondo.png);. En url() introducimos la dirección de la imagen que queremos utilizar.

Si utilizamos una imagen podemos configurar otras propiedades:

background-repeat, determina si el fondo se repite. Puede tomar los valores no-repeat si no queremos que se repita, repeat-x para que se repita en horizontal, repeat-y para que lo haga en vertical o repeat para que llene todo el fondo, que es el valor que toma si no le indicamos otra cosa.

Si no se repite la imagen de fondo, podemos posicionarla con background-position. Podemos darle los valores de los cuatros lados (top, right, bottom y left), combinarlos para colocarla en las esquinas, por ejemplo top left, o centrarla con el valor center. También podemos introducir medidas, donde el primer valor se refiere a la posición horizontal y el segundo al vertical, por ejemplo background-position: 50% 50%;.

<html>
<head>
<title>Bordes y m&aacute;rgenes</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </head>
<body style="background-image: url(graficos/fondo_ladrillos.jpg); background-color: #C9B2AC;
background-repeat: repeat-y; background-position: center">
<h1 style="background-color: #CC9999; color: #FFFFFF;">Fondos</h1>
<p style="background-color: #CC9999; color: #FFFFFF;">Ve cambiando los valores de background-repeat y background-position.</p>
</body>
</html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .

3.6. Cómo declarar un estilo

Hasta ahora hemos aplicado los estilos directamente sobre el elemento, utilizando el atributo style. Esto es lo que se denomina estilos incrustados. Esto es útil cuando tenemos que dar un estilo muy concreto a un elemento puntual. Pero no cuando queremos aplicarlos a todos los elementos de una página. Por ejemplo, imaginemos una página con 20 párrafos. Sería muy costoso cambiar definirlo para cada uno. Y volver a hacerlo cada vez que queramos hacer un cambio.

Para evitar esto, podemos declarar un estilo.

Un estilo se declara con un selector y un bloque de declaración, siguiendo el formato selector {bloque de declaración;}.

El selector identifica al elemento al que se le aplica el estilo. Puede hacerlo de las siguientes maneras:

El bloque de declaración, es la relación de cada propiedad del estilo con el valor que toma. Es decir, contendrá lo que colocaríamos en la etiqueta style del propio elemento. El bloque de declaración lo colocaremos detrás del selector, encerrado entre llaves { }. Lo normal es formatearlo para que nos sea fácil de leer. Para ello podemos utilizar saltos de línea, espacios o tabulaciones, ya que son ignorados. Una forma común de formatear el estilo, es como vemos en el siguiente ejemplo:

p {
    color: blue;
    background-color: #F7F0E2;
font-style: oblique;
}

Enero-2010
Pág. 3.6
Atrás Inicio Adelante





Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.