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á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 .
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:
body
o p
..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">
.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.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"
).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;
}
Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.