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:

  • Si queremos formatear todas las apariciones de una etiqueta, utilizamos la etiqueta como selector. Por ejemplo, body o p.
  • Para formatear determinados elementos, podemos definir clases. Para definir una clase, utilizamos el signo . seguido del nombre (descriptivo) que queramos dar a la clase. Por ejemplo .resaltado. De esta forma, creamos una clase genérica, y el estilo afectará a todos los elementos, sean del tipo que sean, que tengan esa clase. También podemos especificar cómo se comporta la clase para cada elemento, con el formato etiqueta.clase. Por ejemplo p.resaltado. Por último, para aplicar la clase a los elementos, no hay más añadirles el atributo class con el nombre de la clase deseada. Por ejemplo <p class="resaltado">.
  • Para darle estilo a un elemento en concreto, podemos utilizar su atributo id. En el selector, precedemos el id por el signo #. Por ejemplo, #logo. De forma opcional, podemos preceder el identificador con el tipo de elemento de que se trata. Esto puede ser útil para ayudarnos a recordar de qué elemento se trata.
  • También podemos anidar selectores, separándolos por espacios. En este caso, el estilo sólo afectará a los elementos contenidos en el selector que haya más a la izquierda. Por ejemplo, el selector p.resaltado span sólo afectara a las etiquetas span que estén dentro de algún párrafo (p) que tenga la clase resaltado (class="resaltado").
  • Al definir estilos, podemos utilizar varios selectores a la vez, si los separamos por comas. Por ejemplo, utilizando el selector p, h2, h1 podemos definir a la vez el estilo de las etiquetas p, h1 y h2.

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





.