Académique Documents
Professionnel Documents
Culture Documents
Puede que ya hayas odo hablar de CSS sin saber realmente qu es. En esta leccin aprenders ms cosas sobre CSS y qu puede hacer por ti. CSS es el acrnicmo de CascadingStyle Sheets (es decir, hojas de estilo en cascada).
control de la presentacin de muchos documentos desde una nica hoja de estilo; control ms preciso de la presentacin; aplicacin de diferentes presentaciones a diferentes tipos de medios (pantalla, impresin, etc.); numerosas tcnicas avanzadas y sofisticadas.
<body bgcolor="#FF0000">
Con CSS el mismo resultado puede lograrse as:
Pero dnde se sita el cdigo CSS? Eso, precisamente, es lo que vamos a estudiar ahora mismo.
<html> <head>
<title>Ejemplo</title> </head> <body style="background-color: #FF0000;"> <p>Esta es una pgina con fondo rojo</p> </body> </html>
<html> <head> <title>Ejemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Esta es una pgina con fondo rojo</p> </body> </html>
El truco consiste en crear un vnculo desde el documento HTML (por ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vnculo se puede crear con una sencilla lnea de cdigo HTML:
Fjate cmo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo href. La lnea de cdigo debe insertarse en la seccin de encabezado del cdigo HTML, es decir, entre la etiqueta <head> y </head>. De esta manera:
<html> <head> <title>Mi documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...
Este vnculo indica al navegador que debera usar la presentacin del fichero CSS al mostrar el fichero HTML. Lo realmente bueno de este mtodo es que se pueden vincular varios documentos HTML con la misma hoja de estilo. En otras palabras, se puede usar un nico fichero CSS para controlar la presentacin del muchos documentos HTML.
Esta tcnica puede ahorrarte mucho trabajo. Si quisieras cambiar, por ejemplo, el color de fondo de un sitio web compuesto por 100 pginas, un hoja de estilo puede ahorrarte el tener que cambiar de forma manual los 100 documentos HTML. Con CSS, el cambio se puede llevar a cabo en unos segundos modificando parte del cdigo de la hoja de estilo principal. Vamos a llevar a la prctica lo que acabamos de aprender.
Prubalo t mismo
Abre el Bloc de notas (o el editor de texto que utilices) y crea dos ficheros - un fichero HTML y un fichero CSS - con el siguiente contenido:
h1 { color: #ff0000; }
Ver ejemplo Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: #ff0000; o se pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).
La propiedad 'background-color'
La propiedad background-color describe el color de fondo de los elementos. El elemento <body> contiene todo el contenido de un documento HTML. As pues, para cambiar el color de fondo de una pgina, la propiedad background-color debera aplicarse al elemento <body>. Tambin se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarn diferentes colores a los elementos <body> y<h1>.
Ver ejemplo Fjate cmo hemos aplicado dos propiedades a <h1> separndolas por medio de un punto y coma.
Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves ms abajo. Puedes descargar la imagen para usarla en tu propio ordenador (haz clic con el botn derecho sobre la imagen y elige "guardar imagen como..."), o bien puedes usar cualquier otra imagen.
Para insertar la imagen de la mariposa como imagen de fondo de una pgina web, aplica sencillamente la propiedad background-image al elemento <body> y especifica la localizacin de la imagen.
Ver ejemplo NOTA: Fjate cmo hemos especificado la localizacin de la imagen: url("butterfly.gif"). Esto significa que la imagen est en la misma carpeta que la hoja de estilo. Tambin puedes hacer referencia a imgenes en otras carpetas usando url("../imagenes/butterfly.gif") o incluso imgenes de internet si indicas la direccin completa del fichero:url("http://www.html.net/butterfly.gif").
background-repeat.
Valor
Descripcin
Background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: repeat
background-repeat: no-repeat
La imagen no se repite
Por ejemplo, para evitar que se repita un imagen de fondo, el cdigo que tendramos que usar sera el siguiente:
body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }
Ver ejemplo
Valor
Descripcin
Valor
Descripcin
Background-attachment: scroll
Background-attachment: fixed
body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }
Ver ejemplo
Valor
Descripcin
Ver ejemplo
background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;
Usando background se puede lograr el mismo resultado con una nica lnea de cdigo:
Estas dos propiedades que no se especifican se estableceran, sin ms, con sus valores por defecto, que, como ya sabes, son scroll y top left.
Leccin 4: Fuentes
En esta leccin aprenders nociones sobre fuentes y cmo se aplican usando CSS. Tambin veremos cmo solucionar el tema de que las fuentes especficas elegidas para un sitio web slo se pueden ver si estn instaladas en el PC desde el que se accede a dicho sitio web. Se describirn las siguientes propiedades CSS:
Al listar fuentes para el sitio web, por supuesto se empieza por la preferida, seguida sta de algunas fuentes alternativas. Se recomienda completar la lista con una familia de fuentes genrica. As, al menos, la pgina se mostrar usando una fuente de la misma familia si ninguna de las especificadas estn disponibles. Un ejemplo de lista de fuentes por orden de prioridad podra tener este aspecto:
Ver ejemplo Los encabezados marcados con la etiqueta <h1> se mostrarn usando la fuente "Arial". Si esta fuente no est instalada en el ordenador de usuario, se usar en su lugar la fuente "Verdana". Si ambas fuentes no estn disponibles, se usar una fuente de la familia sans-serif para mostrar los encabezados. Fjate cmo el nombre de fuente "Times New Roman" contiene espacios y, por lo tanto, se lista usando comillas.
h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;}
Ver ejemplo
Si la propiedad font-variant se establece con el valor small-caps y no hay disponible una fuente en versalita, el navegador probablemente mostrar el texto en mayscula.
Ver ejemplo
p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Ver ejemplo
font-size.
A la hora de describir el tamao de las fuentes, existen muchas unidades diferentes (por ejemplo, pxeles y porcentajes) entre las que elegir. En este tutorial nos centraremos en las unidades ms comunes y adecuadas. Como ejemplo, podemos incluir:
Ver ejemplo Existe una diferencia clave entre las cuatro unidades anteriores. Las unidades ' px' y 'pt' establecen el tamao de la fuente de forma absoluta, mientras que '%' y 'em' permiten al usuario ajustar el tamao de la misma segn considere oportuno. Muchos usuarios son discapacitados, mayores o sufren de disminuacin visual, o disponen de un monitor de mala calidad.Para que tu sitio web sea accesible para todo el mundo, deberas usar unidades ajustables como, por ejemplo, '%' o 'em'. En la imagen que sigue puedes ver cmo ajustar el tamao del texto en Mozilla Firefox e Internet Explorer. Prubalo; es una buena caracterstica, no crees?
Resumen
A lo largo de esta leccin has aprendido ciertas nociones sobre algunas de las posibilidades relacionadas con las fuentes. Recuerda que una de las principales ventajas de CSS a la hora de especificar las fuentes, es que, en cualquier momento, puedes cambiar la fuente de un sitio web completo en solo unos minutos. CSS ahorra tiempo y te facilita la vida. En la leccin siguiente examinaremos propiedades CSS relativas al texto.
Leccin 5: Texto
Formatear y aadir estilo al texto es un tema clave para cualquier diseador web. En esta leccin presentaremos las increbles oportunidades que ofrece CSS a la hora de aadir presentacin al texto. Describiremos las siguientes propiedades:
p { text-indent: 30px; }
Ver ejemplo
La propiedad CSS text-align es el equivalente al atributo align usado en versiones anteriores de HTML. Los valores posibles de esta propiedad son: left(texto alineado a la izquierda), right (texto alineado a la derecha) o center (texto con alineacin centrada). Adems, el valor justify(alineacin justificada) alargar cada lnea de forma que los mrgenes izquierdo y derecho estn justificados. Esta tipo de presentacin la habrs visto, por ejemplo, en peridicos y revistas. En el ejemplo que sigue, el texto de los encabezados de la tabla, <th>, se ha alineado a la derecha, mientras que los datos de la tabla, <td>, aparecen centrados. Adems, los prrafos de texto normales estn justificados:
Ver ejemplo
Ver ejemplo
Ver ejemplo
Leccin 6: Enlaces
Ya puedes aplicar lo que aprendiste en las lecciones anteriores a los enlaces (es decir, cambiar colores, fuentes, subrayado, etc.). La novedad respecto a los enlaces es que CSS te permite definir estas propiedades de forma diferente dependiendo del estado del mismo, es decir, si el enlace se ha visitado, no se ha visitado, si es el enlace activo o si el cursor est sobre dicho enlace. Esto permite aadir efectos divertidos y tiles a tu sitio web. Para controlar estos efectos se usan lo que se ha denominado como pseudo-clases.
Qu es una pseudo-clase?
Una pseudo-clase te permite tener en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML. Veamos un ejemplo. Como ya sabes, los enlaces se especifican en HTML con la etiqueta <a>. Por lo tanto, podemos usar a como selector en CSS:
a { color: blue; }
Todo enlace tiene diferentes estados. Por ejemplo, visitado o no visitado. Puedes usar una pseudo-clase para asignar diferentes estilos a los enlaces visitados y no visitados.
Usa a:link y a:visited para enlaces visitados y no visitados, respectivamente. A los enlaces activos se les aplica la pseudo-clase a:active, y a:hover cuando el cursor se coloca o pasa sobre el enlace. Vamos a repasar ahora cada una de las cuatro pseudo-clases con ejemplos y ms explicaciones.
Pseudo-clase a:link
La pseudo clase :link se usa para enlaces que dirigen a pginas que el usuario no ha visitado. En el ejemplo de cdigo que sigue, los enlaces no visitados tendrn un color azul claro.
Ver ejemplo
Pseudo-clase a:visited
La pseudo clase :visited se usa para enlaces que dirigen a pginas que el usuario ya ha visitado. Por ejemplo, el cdigo siguiente har que todos los enlaces visitados sean de color prpura oscuro:
a:visited {
color: #660099; }
Ver ejemplo
Pseudo-clase a:active:
La pseudo clase :active se usa para enlaces que estn activos. El cdigo de este ejemplo hace que el color de fondo para los enlaces activos sea amarillo:
Ver ejemplo
Pseudo-clase a:hover
La pseudo clase a:hover se usa cuando el puntero del ratn pasa por encima de un enlace. Esta pseudo-clase se puede usar para crear efectos interesantes. Por ejemplo, si queremos que nuestros enlaces sean de color naranja y estn en cursiva cuando el cursor pase sobre ellos, el cdigo CSS que utilizaremos ser el siguiente:
Ver ejemplo
letter-spacing.
Ver ejemplo
Ver ejemplo Estos dos ejemplos dan una idea sobre las posibilidades casi infinitas al combinar diferentes propiedades. Ya puedes ir creando tus propios efectos... intntalo!
a { text-decoration:none; }
a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; }
<p>Uvas para el vino blanco:</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul> <p>Uvas para el vino tinto:</p> <ul> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a></li> </ul>
Ver ejemplo As pues, queremos que los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la pgina web sigan siendo azules. Para lograr esto, dividiremos los enlaces en dos categoras. Esto se hace asignando una clase para cada tipo de enlace, usando el atributo class. Intentemos especificar algunas clases en el ejemplo anterior:
<p>Uvas para el vino <ul> <li><a href="ri.htm" <li><a href="ch.htm" <li><a href="pb.htm" </ul> <p>Uvas para el vino <ul> <li><a href="cs.htm" <li><a href="me.htm" <li><a href="pn.htm" </ul>
blanco:</p> class="whitewine">Riesling</a></li> class="whitewine">Chardonnay</a></li> class="whitewine">Pinot Blanc</a></li> tinto:</p> class="redwine">Cabernet Sauvignon</a></li> class="redwine">Merlot</a></li> class="redwine">Pinot Noir</a></li>
A partir de aqu, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.
Ver ejemplo Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que pertenecen a una clase unsando.nombredelaclase en la hoja de estilo del documento.
Adems de agrupar elementos, podras necesitar identificar un elemento nico. Esto se hace con el atributo
id.
Lo que hace especial al atributo id es que no pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene que ser nico. En cualquier otro caso, se debera usar el atributo class en su lugar. Ahora, examinemos un ejemplo de un posible uso del atributo id:
<h1>Captulo ... <h2>Captulo ... <h2>Captulo ... <h1>Captulo ... <h2>Captulo ... <h3>Captulo ...
El cdigo anterior podra hacer referencia a encabezados de cualquier documento dividido en captulos y prrafos. Sera normal asignar un id a cada captulo de la siguiente manera:
<h1 ... <h2 ... <h2 ... <h1 ... <h2 ... <h3 ...
id="c1">Captulo 1</h1> id="c1-1">Captulo 1.1</h2> id="c1-2">Captulo 1.2</h2> id="c2">Captulo 2</h1> id="c2-1">Captulo 2.1</h2> id="c2-1-2">Captulo 2.1.2</h3>
Digamos que el ttulo del captulo 1.2 tiene que estar en rojo. Usando el cdigo CSS necesario, se podra hacer as:
Ver ejemplo Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento especfico usando #nombredelidentificador en la hoja de estilo del documento.
Resumen
En esta leccin hemos aprendido que usando los atributos especficos.
En la leccin siguiente, examinaremos dos elementos HTML muy usados en relacin con CSS:
<p>El que pronto se acuesta y pronto se levanta, es hombre saludable, rico y sabio.</p>
Digamos que queremos que lo que el seor Franklin considera como las ventajas de no pasarse todo el da durmiendo, aparezca enfatizado en rojo. Para este fin, podemos marcar dichas ventajas con el elemento<span>. A cada elemento span se le aade el atributo class, que podemos definir as en nuestra hoja de estilo:
<p>El que pronto se acuesta y pronto se levanta, es hombre <span class="ventaja">saludable</span>, <span class="ventaja">rico</span> y <span class="ventaja">sabio</span>.</p>
span.benefit { color:red; }
Ver ejemplo Por supuesto, se puede usar tambin el atributo id para aadir estilo a los elementos definidos con <span>. Pero recuerda que tendrs que aplicar siempre un atributo id nico para cada uno de los tres elementos<span>, tal como aprendimos en la leccin anterior.
Aparte de esta diferencia, la agrupacin con <div> funciona ms o menos igual. Veamos un ejemplo con dos listas de presidentes de los EE.UU., divididas segn su filiacin poltica.
<div id="democrats"> <ul> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div> <div id="republicans"> <ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul> </div>
En nuestra hoja de estilo podemos utilizar la agrupacin del mismo modo que antes:
Ver ejemplo En los ejemplos anteriores, slo hemos usado <div> y <span> con cosas muy sencillas como, por ejemplo, texto y colores de fondo. Ambos elementos tienen el potencial para realizar cosas ms avanzadas. Sin embargo, esto no se presentar en esta leccin; lo veremos ms adelante a lo largo del tutorial.
Resumen
En la leccin 7 y 8 has aprendido nociones sobre los selectores
Ahora ya deberas de ser capaz de agrupar e identificar, ms o menos, todas las partes de un documento, lo que supone dar un gran paso adelante hacia el dominio de CSS. En la leccin 9 te presentaremos el modelo de caja.
A primera vista, la imagen anterior puede parecer muy terica, as que intentemos usar el modelo en un caso real con un encabezado y algo de texto. El cdigo HTML de nuestro ejemplo es el siguiente (extrado de la Declaracin Universal de los Derechos Humanos):
<h1>Artculo 1:</h1> <p>Todos los hombres nacen libres e iguales en diginidad y derechos. Estn
si aadimos algo de color e informacin sobre la fuente, el ejemplo se podra presentar as:
El ejemplo contiene dos elementos: el elemento <h1> y el elemento <p>. El modelo de caja para los dos elementos se puede ilustrar como sigue:T
Aunque puede parecer un poco complicado, la imagen muestra cmo cada elemento HTML est rodeado por cajas, cajas que se pueden ajustar usando CSS.
Resumen
En esta leccin hemos introducido el modelo de caja. En las tres lecciones siguientes examinaremos ms detenidamente cmo crear y controlar elementos del modelo de caja.
<body>. La imagen
O podras elegir usar la versin combinada de margin, que queda como ms elegante:
body {
Ver ejemplo Se puede establecer los mrgenes de casi todos los elementos del mismo modo. Por ejemplo, podemos elegir definir mrgenes para todos los prrafos de texto marcados con el elemento <p>:
body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; }
Ver ejemplo
Ver ejemplo Al deninir el padding para los ttulos, cambiamos la cantidad de "relleno" que habr alrededor del texto en cada uno de ellos:
Ver ejemplo
Resumen
Ya ests en el camino de dominar el modelo de caja en CSS. En la siguiente leccin, examinaremos cmo establecer los bordes con colores diferentes y cmo dar forma a tus elementos.
Se puede elegir entre diferentes estilos de borde. Ms abajo se muestran 8 estilos de borde segn los interpreta Internet Explorer 5.5. Todos los ejemplos se muestran con el valor del color a "oro" y el valor de la anchura a "thick", pero se pueden mostrar, por supuesto, en otros colores y grosores. Si no queremos mostrar ningn borde, se puede usar los valores none o hidden.
h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; }
p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }
Ver ejemplo Tambin es posible declarar propiedades especiales para el borde superior (top), inferior (bottom), derecho (right) e izquierdo (left). En el siguiente ejemplo vemos cmo:
h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }
Ver ejemplo
Resumen
En esta leccin has aprendido las opciones casi infinitas que CSS te ofrece a la hora de usar bordes en tus pginas. En la leccin siguiente, examinaremos cmo definir las dimensiones del modelo de caja, es decir, la altura y la anchura de la caja.
width height
Ver ejemplo
div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }
Ver ejemplo
Resumen
La leccin 9, 10, 11 y 12 han servido para presentarte el modelo de caja en CSS. Como probablemente imaginars, el modelo de caja te ofrece muchas opciones nuevas. Es probable que, hasta este momento, hayas estado usando tablas de HTML para crear la presentacin de tus documentos; con CSS y el modelo de caja ya deberas de ser capaz de lograr elegantes presentaciones con mayor precisin y conformes con las recomendaciones del W3C.
Por ejemplo, si quisiramos texto con ajuste de lnea alrededor de una imagen, el resultado sera el siguiente:
Cmo se hace?
El cdigo HTML del ejemplo anterior es el siguiente:
<div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>
Para conseguir que la imagen flote a la izquierda y el texto se ajuste a su alrededor, slo hay que definir el ancho de la caja que rodea la imagen y, despus de eso, fijar la propiedad float con el valor left:
Ver ejemplo
et in quo causa consistat non videt...</p> </div> <div id="column2"> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> </div> <div id="column3"> <p>nam nihil esset in nostra potestate si res ita se haberet...</p> </div>
Ahora, el ancho deseado de las columnas se fija, por ejemplo, en un porcentaje equivalente a un 33%, y luego simplemente se flota cada columna a la izquierda definiendo la propiedad float:
#column1 { float:left; width: 33%; } #column2 { float:left; width: 33%; } #column3 { float:left; width: 33%; }
Ver ejemplo La propiedad float se puede establecer con los siguientes valores: left (izquierda), right (derecha) o none (ninguna).
La propiedad clear
La propiedad clear se usa para controlar cmo se comportarn los elementos que siguen a los elementos flotados de un documento. Por defecto, los elementos siguientes se mueven hacia arriba para rellenar el espacio disponible que quedar libre al flotar una caja hacia un lado. Echa un vistazo al ejemplo anterior en el que el texto se desplaza de forma automtica hacia arriba junto a la imagen de Bill Gates. La propiedad clear puede tomar los valores:left, right, both o none. El principio consiste en que, si clear, por ejemplo, se fija en bothpara una caja, el borde del margen superior de esta caja siempre estar debajo del borde del margen inferior para las posibles cajas flotantes que vengan de arriba.
<div id="picture">
<img src="bill.jpg" alt="Bill Gates"> </div> <h1>Bill Gates</h1> <p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>
Para evitar que el texto flote hacia arriba junto a la imagen, podemos aadir lo siguiente al cdigo CSS:
Ver ejemplo
Resumen
La propiedad float es muy til en muchas situaciones y a menudo se usar junto con el posicionamiento. En la leccin siguienteexaminaremos cmo posicionar una caja, bien de forma relativa o absoluta.
Los principios que rigen el posicionamiento CSS consisten en que se puede colocar cualquier caja en cualquier lugar del sistema de coordenadas. Digamos que queremos posicionar un ttulo. Usando el modelo de caja (vase la leccin 9) el ttulo aparecer as:
Si queremos posicionar la cabecera a 100 px del borde superior y a 200px del borde izquierdo del documento, tendramos que escribir el siguiente cdigo CSS:
Como puedes observar, el posicionamiento con CSS es una tcnica muy precisa a la hora de colocar elementos. Es mucho ms sencillo que intentar usar tablas, imgenes transparentes o cualquier otra cosa.
Posicionamiento absoluto
El elemento que se posiciona de forma absoluta no ocupa espacio alguno en el documento. Esto significa que no deja un espacio vaco despus de ser posicionado. Para posicionar un elemento de forma absoluta, la propiedad position se establece como absolute. Posteriormente puedes usar las propiedades left, right, top, y bottom para colocar la caja. Como ejemplo de posicionamiento absoluto, vamos a colocar 4 cajas en cada esquina del documento:
#box1 { position:absolute; top: 50px; left: 50px; } #box2 { position:absolute; top: 50px; right: 50px; } #box3 { position:absolute; bottom: 50px; right: 50px; }
Ver ejemplo
Posicionamiento relativo
Para posicionar un elemento de forma relativa, la propiedad position se establece como relative. La diferencia entre posicionamiento absoluto y relativo consiste en cmo se calcula la posicion. La posicin para un elemento que se posiciona de forma relativa se calcula desde la posicin original en el documento.. Esto significa que se mueve el elemento hacia la derecha, la izquierda, arriba o abajo. De este modo, el elemento sigue ocupando espacio en el documento despus de haberse posicionado. Como ejemplo de posicionamiento relativo, podemos intentar posicionar tres imgenes de forma relativa respecto a su posicin original en la pgina. Fjate cmo las imgenes dejan espacios vacos en sus posiciones originales en el documento:
#dog1 { position:relative; left: 350px; bottom: 150px; } #dog2 { position:relative; left: 150px; bottom: 500px; } #dog3 { position:relative; left: 50px; bottom: 700px; }
Ver ejemplo
Resumen
En las dos lecciones anteriores, hemos aprendido a flotar y posicionar elementos. Estos dos mtodos proporcionan muchas oportunidades de construir tus pginas sin tener que usar mtodos anticuados como usar tablas o imgenes transparentes en HTML; en lugar de estos mtodos anticuados, usa CSS: es ms preciso, ofrece ms ventajas y, adems, es mucho ms fcil de mantener.
Supongamos que estamos jugando al poquer y tenemos una escalera de color. La mano se puede presentar de tal manera que cada carta tiene un nmero asignado por medio de z-index:
En este caso, los nmeros son consecutivos (yendo del 1 al 5), aunque se puede lograr el mismo resultado usando cinco numeros diferentes. Lo importante es la secuencia cronolgica de los nmeros (el orden). El cdigo del ejemplo de las cartas quedara as:
#diez_de_diamantes { position: absolute; left: 100px; top: 100px; z-index: 1; } #sota_de_diamantes { position: absolute; left: 115px; top: 115px; z-index: 2; } #reina_de_diamantes { position: absolute; left: 130px; top: 130px; z-index: 3;
} #rey_de_diamantes { position: absolute; left: 145px; top: 145px; z-index: 4; } #as_de_diamantes { position: absolute; left: 160px; top: 160px; z-index: 5; }
Ver ejemplo El mtodo es relativamente sencillo pero las posibilidades que ofrece son mltiples. Es posible colocar imgenes sobre el texto, texto sobre imgenes, etc.
Resumen
Las capas se pueden usar en muchas situaciones diferentes. Por ejemplo, intenta usar la propiedad z-index para crear efectos en los ttulos en lugar de crear grficos. Por un lado, es ms rpido cargar texto, y por otro, proporciona una clasificacin potencialmente mejor en los motores de bsqueda.
Validador CSS
Para hacer ms fcil el cumplimiento con el estndar CSS, el W3C ha creado lo que se ha denominado como validador, que es un programa que interpreta las hojas de estilo y devuelve un informe de estado en el que se listan los errores y avisos, en el caso de que el cdigo CSS no sea vlido.
Para facilitarte la validacin de tus hojas de estilo, lo puedes hacer directamente desde esta pgina. Reemplaza sin ms la URL que aparece en el cuadro de texto con la URL de tu hoja de estilo y haz clic para validarla. Posteriormente, se te informar desde el sitio del W3C si se han encontrado errores. http://www.html.net/site/style/default.screen.css
Si el validador no encuentra ningn error, se mostrar la imagen siguiente, que podrs poner en tu sitio web para demostrar que usas cdigo validado: