Última revisión de 23:35 11 ene 2014

Este artículo necesita desarrollarse más. Ampliándolo ayudarás a mejorar Guifi.net.
Tal vez puedas ayudarte con los wikis catalán, o inglés si tienen una página equivalente.

Definición, uso

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

Ejemplos

Crear un rollover

1. Primero generaremos una imagen para el estado de reposo, que se mostrará cuando carguemos nuestra página, y luego otra que va a sustituir a ésta cuando desplacemos el ratón por encima de ella. Las vamos a llamar imagen.jpg e imagen_hover.jpg respectivamente, y van a tener un tamaño de 70×70 píxeles.
2. Seguidamente crearemos las siguientes clases en nuestra hoja de estilos:

   .rollover {
   background: url(imagenes/imagen.jpg) no-repeat top left;
   width: 70px;
   height: 70px;
   display:block
   }

   .rollover:hover {
   background: url(imagenes/imagen_hover.jpg) no-repeat top left
   }

   .rollover a{
   width: 70px;
   height: 70px;
   display:block
   }

   .rollover a span{
   visibility:hidden
   }

1. Y por último insertaremos el código HTML necesario, es decir

   <a href="http://www.enlace.com" title="Enlace">
   Nuestro Enlace
   </a>

Centrar una imagen

Centrar el texto en una web es facil, solo hay que aplicar el estilo text-align: center; sin embargo, esto no funciona si se lo aplicamos a una imagen, ¿Por qué? por que el valor del atributo text-align de css afecta al contenido de la etiqueta, no a la etiqueta en sí a la que se lo apliquemos, por lo tanto, si se especifica esta propiedad para un parrafo:

   p {
   text-align: center;
   }

Lo que se centrará será el contenido de la etiqueta, no la etiqueta:

<p>Este es el contenido al que afectará la propiedad</p>

Por lo tanto, como la etiqueta img es una etiqueta vacía, es decir, no podemos poner:

   <img>ruta_de_la_imagen_</img>

En cuyo caso sí que funcionaría el text-align, para centrar una imagen con CSS deberemos tomar otros caminos. Basicamente hay 2:

1. El más correcto sería hacer que la etiqueta img sea tratada como elemento de bloque y darle a la propiedad margin un valor de auto, de modo que el navegador asignará margenes proporcionales en referencia a la caja padre que contenga a la imagen:

img {
display: block;
margin: auto;
}

2.La otra opción consiste en restar al margin el ancho y alto de la imagen para centrarla.

.centrado {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /*Restamos la mitad de alto*/
margin-left: -118px; /*Restamos la mitad de ancho*/
}

Y finalmente la clase .centrado se aplica sobre el div que contiene la foto:

<div class="centrado">
 <img src="imagen.jpg" alt="foto" width="236" height="50" border="0"/></div>

Referencias

• Validar si el CSS está correcto: http://jigsaw.w3.org/css-validator/
• Validar si el xhtml está correcto: http://validator.w3.org/
• Crear un “rollover” usando CSS
• Centrar imágenes con CSS, de Carlos Carmona