Al: 2 revisiones: Artículos técnicos

2014-01-11T22:35:57Z

2 revisiones: Artículos técnicos

Al: 1 revisión: Primera columna hasta IMlog

2009-04-21T12:12:15Z

1 revisión: Primera columna hasta IMlog

Ál: /* Referencias */

2007-05-03T10:45:21Z

‎Referencias

Página nueva

{{en desarrollo}}
=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 [http://www.w3c.org 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==
# 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.
# 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
}

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

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

==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:

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

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:

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

=Referencias=
*Validar si el CSS está correcto: http://jigsaw.w3.org/css-validator/
*Validar si el xhtml está correcto: http://validator.w3.org/
*[http://www.excesomedia.com/blog/crear-un-rollover-usando-css/ Crear un “rollover” usando CSS]
*[http://www.scourdesign.com/articulos/tutoriales/css/css10.php Centrar imágenes con CSS], de Carlos Carmona
[[Categoría:Diseño]]

← Revisión anterior	Revisión de 22:35 11 ene 2014
(Sin diferencias)

← Revisión anterior	Revisión de 12:12 21 abr 2009
(Sin diferencias)

CSS - Historial de revisiones

Al: 2 revisiones: Artículos técnicos

Al: 1 revisión: Primera columna hasta IMlog

Ál: /* Referencias */