Introduccin - Tutorial CSS bsico.

Las hojas de estilo en cascada (CSS, acrnimo deCascadingStyleSheets) son una herramienta para aadir presentacin a los sitios web. Pueden ahorrarte mucho tiempo y te permitirn disear sitios web de un modo totalmente nuevo. La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un documento de su presentacin.

Qu software necesito?Todo lo que necesitas es un editor de texto sencillo y gratuito.

Leccin 1: Qu es CSS?CSS es el acrnimo deCascadingStyleSheets (es decir, hojas de estilo en cascada).

Qu puedo hacer con CSS?CSS es un lenguaje de estilo que define la presentacin de los documentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores, mrgenes, lneas, altura, anchura, imgenes de fondo, posicionamiento avanzado y muchos otros temas. Es posible usar HTML, o incluso abusar del mismo, para aadir formato a los sitios web. Sin embargo, CSS ofrece ms opciones y es ms preciso y sofisticado. CSS est soportado por todos los navegadores hoy da.

Qu diferencia hay entre CSS y HTML?HTML se usa para estructurar el contenido; CSS se usa para formatear el contenido previamente estructurado.A medida que la Web fue ganando popularidad, los diseadores empezaron a buscar posibilidades para aadir formato a los documentos en lnea. Para satisfacer esta reclamacin, los fabricantes de los navegadores (en ese momento, Netscape y Microsoft) inventaron nuevas etiquetas HTML, entre las que se encontraban, por ejemplo,, que se diferenciaba de las etiquetas originales HTML en que definan el formato... y no la estructura.Esto tambin llev a una situacin en la que las etiquetas estructurales originales, por ejemplo, , se usaban cada vez ms de manera incorrecta para dar formato a las pginas en vez de para aadir estructura al texto. Muchas nuevas etiquetas que aadan formato, por ejemplo, , slo las soportaban un tipo determinado de navegador. "Necesitas el navegador X para visualizar esta pgina" se convirti en una declaracin de descargo comn en los sitios web.CSS se invent para remediar esta situacin, proporcionando a los diseadores web con sofisticadas oportunidades de presentacin soportadas por todos los navegadores. Al mismo tiempo, la separacin de la presentacin de los documentos del contenido de los mismos, hace que el mantenimiento del sitio sea mucho ms fcil.

Qu beneficios me ofrece CSS?CSS fue toda una revolucin en el mundo del diseo web. Entre los beneficios concretos de CSS encontramos: 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.

Leccin 2: Cmo funciona CSS?Muchas de las propiedades que se usan en las hojas de estilo en cascada (CSS) son parecidas a las de HTML. As pues, si ests acostumbrado a usar HTML para cuestiones de presentacin, lo ms probable es que reconozcas gran parte del cdigo usado. Examinemos un ejemplo concreto.

La sintaxis bsica de CSSDigamos que queremos un color rojo como fondo de nuestra pgina web:UsandoHTMLpodramos haberlo conseguido as: ConCSSel mismo resultado puede lograrse as:body {background-color: #FF0000;}Como vers, el cdigo usado es ms o menos idntico para HTML y CSS. El ejemplo anterior te muestra adems el modelo CSS fundamental:

Aplicando CSS a un documento HTMLPodemos aplicar CSS a un documento HTML de tres maneras diferentes. Todos estos mtodos se explican a continuacin. Te recomendamos que te centres en el tercero, es decir, el externo.

Mtodo 1: En lnea (el atributostyle)Un modo de aplicar CSS a HTML es usando el atributo de HTMLstyle. Si ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede aplicar as: Ejemplo Esta es una pgina con fondo rojo Mtodo 2: Interno (la etiquetastyle)Otra forma es incluir el cdigo CSS usando la etiqueta HTML. Por ejemplo, as: Ejemplo body {background-color: #FF0000;} Esta es una pgina con fondo rojo

Nota: type="text/css" porque el archivo es de texto, en sintaxis CSS.Mtodo 3: Externo (enlace a una hoja de estilo)El mtodo recomendado es enlazar con lo que se denomina hoja de estilo externa. Una hoja de estilo externa es sencillamente un fichero de texto con la extensin.css. Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro.Por ejemplo, digamos que tu hoja de estilo se llamastyle.cssy est localizada en una carpeta que se llamastyle. Esta situacin se puede ilustrar de la siguiente manera:El truco consiste en crear un vnculo desde el documento HTML (por ejemplo, edu.html) con la hoja de estilo (estilo.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 atributohref.La lnea de cdigo debe insertarse en la seccin de encabezado del cdigo HTML, es decir, entre la etiquetay. De esta manera:

Mi documento

...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 de 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 mismoAbre el Bloc de notas (o el editor de texto que utilices) y crea dos ficheros - un fichero edu.html y un fichero estilo.css - con el siguiente contenido:Fichero edu.html

Mi documento

Mi primera hoja de estilo

Fichero estilo.cssbody { background-color: #FF0000;}Ahora coloca los dos ficheros en la misma carpeta. Recuerda grabar los ficheros con las extensiones correctas (".html" y ".css", respectivamente).

Leccin 3: Colores y fondosEn esta leccin aprenders a aplicar colores y colores de fondo a tus sitios web. Examinaremos tambin mtodos avanzados para posicionar y controlar imgenes de fondo. Se explicarn las siguientes propiedades CSS: color background-color background-image background-repeat background-attachment background-position backgroundColor de primer plano: la propiedad 'color'La propiedadcolordescribe el color de primer plano de un elemento.Por ejemplo, imagina que queremos que todos los ttulos de un documento aparezcan con color rojo oscuro. Todos los ttulos estn marcados con el elemento. El cdigo siguiente establece el color de los elementoscomo rojo.

h1 {color: #ff0000;}La propiedad 'background-color'La propiedadbackground-colordescribe el color de fondo de los elementos.El elementocontiene todo el contenido de un documento HTML. As pues, para cambiar el color de fondo de una pgina, la propiedad background-colordebera aplicarse al elemento.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 elementosy.

body {background-color: #FFCC66;}

h1 {color: #990000;background-color: #FC9804;}Se ha aplicado dos propiedades aseparndolas por medio de un punto y coma.

Imgenes de fondo [background-image]La propiedad CSSbackground-imagese usa para insertar una imagen de fondo.Para el ejemplo de la imagen de fondo, se usar la mariposa que est ms abajo. Descarga la imagen para usarla en tu carpeta de trabajo (haciendo clic con el botn derecho sobre la imagen y elige "guardar como imagen ..." y asgnele el nombre mariposa), o bien puede usarse cualquier otra imagen.

Para insertar la imagen de la mariposa como imagen de fondo de una pgina web, aplica sencillamente la propiedadbackground-imageal elemento y especifica la localizacin de la imagen.

body {background-color: #FFCC66;background-image: url("mariposa.gif");}

h1 {color: #990000;background-color: #FC9804;}NOTA: SE ha especificado la localizacin de la imagen:url("mariposa.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 usandourl("../imagenes/mariposa.gif")o incluso imgenes de internet si indicas la direccin completa del fichero:url("http://www.algo.net/mariposa.gif").Repetir la imagen de fondo [background-repeat]En el ejemplo anterior, la mariposa se repite tanto en el eje horizontal como en el vertical para ocupar toda la pantalla. La propiedadbackground-repeatcontrola este comportamiento.La tabla siguiente resume los cuatro valores diferentes para la propiedadbackground-repeat.

ValorDescripcinbackground-repeat: repeat-xLa imagen se repite en el eje horizontal.background-repeat: repeat-yLa imagen se repite en el eje vertical.background-repeat: repeatLa imagen se repite en el eje horizontal y vertical.background-repeat: no-repeatLa imagen no se repite.

Por ejemplo, para evitar que se repita una imagen de fondo, el cdigo sera el siguiente:

body {background-color: #FFCC66;background-image: url("butterfly.gif");background-repeat: no-repeat;}

h1 {color: #990000;background-color: #FC9804;}Fijar la imagen de fondo [background-attachment]La propiedadbackground-attachmentespecifica si una imagen est fija o se desplaza con el elemento contenedor.Una imagen de fondo fija no se mover con el texto cuando el lector se desplace por la pgina, mientras que una imagen de fondo no fija se desplazar con el texto de la pgina web.La tabla siguiente resume los dos valores posibles para la propiedadbackground-attachment.

ValorDescripcinbackground-attachment: scrollLa imagen se desplaza con la pgina - no est fijabackground-attachment: fixedLa imagen est fija

Por ejemplo, el siguiente cdigo fijar la imagen de fondo.

body {background-color: #FFCC66;background-image: url("mariposa.gif");background-repeat: no-repeat;background-attachment: fixed;}

h1 {color: #990000;background-color: #FC9804;}

Ubicacin de la imagen de fondo [background-position]Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. La propiedadbackground-positionte permitir cambiar este valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla que quieras.Hay muchas formas diferentes de establecer los valores de la propiedadbackground-position. Sin embargo, todas ellas se formatean como un conjunto de coordenadas. Por ejemplo, el valor '100px 200px' posiciona la imagen de fondo a 100 pxeles del margen izquierdo y a 200 pxeles del margen superior de la ventana del navegador.Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (pxeles, centmetros, etc.) o puedes usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha). El modelo siguiente ilustra cmo funciona el sistema:

El ejemplo de cdigo siguiente posiciona la imagen de fondo en la esquina inferior derecha:

body {background-color: #FFCC66;background-image: url("mariposa.gif");background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;}

h1 {color: #990000;background-color: #FC9804;}

Combinacin de propiedades [background]La propiedadbackgroundes una forma abreviada de todas las propiedades de fondo listadas a lo largo de esta leccin.Con la propiedadbackgroundse pueden comprimir varias propiedades, y as escribir una hoja de estilo de forma ms abreviada, lo que facilitar su lectura.Por ejemplo, observa estas cinco lneas de cdigo:

background-color: #FFCC66;background-image: url("mariposa.gif");background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;Usandobackgroundse puede lograr el mismo resultado con una nica lnea de cdigo:

background: #FFCC66 url("mariposa.gif") no-repeat fixed right bottom;El orden en que deben aparecer las propiedades individuales es el siguiente:[background-color]|[background-image]|[background-repeat]|[background-attachment]|[background-position]Si se omite alguna propiedad, de forma automtica sta se establecer con su valor por defecto. Por ejemplo, si se omiten las propiedadesbackground-attachmentybackground-positiondel ejemplo anterior, quedando el cdigo de la siguiente manera:

background: #FFCC66 url("mariposa.gif") no-repeat;Estas dos propiedades que no se especifican se estableceran, sin ms, con sus valores por defecto, que, como ya sabes, sonscrollytop left.

Leccin 4: FuentesEn 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: font-family font-style font-variant font-weight font-size font

La propiedadfont-familyse usa para establecer una lista ordenada de fuentes que se usarn para mostrar un elemento determinado o una pgina web. Si la primera fuente de la lista no est instalada en el ordenador desde el que se accede al sitio, se seguir probando con la siguiente fuente hasta encontrar una fuente apropiada.Para clasificar las fuentes se usan dos tipos de nombres: nombres de una familia y familias genricas. Estos dos trminos se explican a continuacin.La diferencia se puede ilustrar as:

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 est disponible.Un ejemplo de lista de fuentes por orden de prioridad podra tener este aspecto:

h1 {font-family: arial, verdana, sans-serif;}h2 {font-family: "Times New Roman", serif;}

Los encabezados marcados con la etiquetase 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 familiasans-serifpara mostrar los encabezados.

El nombre de fuente "Times New Roman" contiene espacios y, por lo tanto, se lista usando comillas.

Estilo de la fuente [font-style]La propiedadfont-styledefine la fuente elegida bien con el valornormal, el valor italico el valoroblique. En el ejemplo que sigue, todos los encabezados marcados conaparecern en cursiva.

h1 {font-family: arial, verdana, sans-serif;}h2 {font-family: "Times New Roman", serif; font-style: italic;}Variante de fuente [font-variant]La propiedadfont-variantse usa para elegir entre las variantesnormalosmall-caps(versalita) de una fuente. La fuente a la que se aplica el valor small-capses una fuente que usa letras en mayscula inicial ms pequeas, en vez de letras en minscula. Veamos los ejemplos siguientes:

Si la propiedadfont-variantse establece con el valorsmall-capsy no hay disponible una fuente en versalita, el navegador probablemente mostrar el texto en mayscula.

h1 {font-variant: small-caps;}h2 {font-variant: normal;}

Peso de la fuente [font-weight]La propiedadfont-weightdescribe qu intensidad o "peso" en negrita debera tener la fuente. Toda fuente puede tener los valoresnormalobold. Algunos navegadores soportan, incluso, el uso de nmeros entre 100 y 900 (de cien en cien) para describir elpeso de dicha fuente.

p {font-family: arial, verdana, sans-serif;}td {font-family: arial, verdana, sans-serif; font-weight: bold;}Tamao de la fuente [font-size]El tamao de la fuente se establece por medio de la propiedadfont-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:

h1 {font-size: 30px;}h2 {font-size: 12pt;}h3 {font-size: 120%;}p {font-size: 1em;}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 disminucin visual, o disponen de un monitor de mala calidad. Para que tu sitio web sea accesiblepara todo el mundo, deberas usar unidades ajustables como, por ejemplo, '%' o 'em'.

Combinacin de propiedades [font]Si usamos la propiedad abreviadafontes posible incluir todas las propiedades diferentes relativas a fuentes en una nica propiedad.Por ejemplo, imagina estas cuatro lneas de cdigo que usamos para describir las propiedades de fuente para la etiqueta:

p {font-style: italic;font-weight: bold;font-size: 30px;font-family: arial, sans-serif;}Usando la propiedad abreviada, el cdigo se puede simplificar as:

p {font: italic bold 30px arial, sans-serif;}El orden de los valores para la propiedadfontes:font-style|font-variant|font-weight|font-size|font-family

Leccin 5: TextoFormatear 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: text-indent text-align text-decoration letter-spacing text-transform

Sangra del texto [text-indent]La propiedadtext-indentpermite aadir un toque de elegancia a los prrafos de texto al aplicar sangra a la primera lnea de dicho prrafo. En el ejemplo siguiente se ha aplicado una sangra de30pxa todos los prrafos de texto marcados con la etiqueta:p {text-indent: 30px;}Alineacin del texto [text-align]La propiedad CSStext-alignes el equivalente al atributoalignusado en versiones anteriores de HTML. Los valores posibles de esta propiedad son: left(texto alineado a la izquierda),right(texto alineado a la derecha) ocenter(texto con alineacin centrada). Adems, el valorjustify (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,, se ha alineado a la derecha, mientras que los datos de la tabla,, aparecen centrados. Adems, los prrafos de texto normales estn justificados:th {text-align: right;}

td {text-align: center;}

p {text-align: justify;}Decoracin del texto [text-decoration]La propiedadtext-decorationpermite aadir diferentes "decoraciones" o "efectos" al texto. Por ejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior. En el ejemplo siguiente, el elemento aparecer subrayado, el elementoaparecer con un subrayado por encima del texto y el elementotendr el texto tachado.h1 {text-decoration: underline;}

h2 {text-decoration: overline;}

h3 {text-decoration: line-through;}Espaciado entre caracteres [letter-spacing]El espaciado entre los caracteres de texto se puede especificar usando la propiedadletter-spacing. El valor de esta propiedad corresponde, sencillamente, al ancho deseado. Por ejemplo, si queremos un espaciado de3pxentre los caracteres de un prrafo de textoy 6pxentre los caracteres de los encabezados, usaramos el siguiente cdigo:h1 {letter-spacing: 6px;}

p {letter-spacing: 3px;}Transformacin del texto [text-transform]La propiedadtext-transformcontrola la escritura en maysculas de un texto. Puedes elegir entre los valores capitalize,uppercaseo lowercase, sin importar cmo aparece el texto original en el cdigo HTML.Un ejemplo podra ser la palabra "ttulo" que se puede presentar al usuario como "TTULO" o "Ttulo". A continuacin ofrecemos una explicacin de los valores de la propiedadtext-transformmencionados en el prrafo anterior:

capitalizePone en mayscula la primera letra de cada palabra. Por ejemplo, "juana petronila" aparecer como "Juana Petronila".uppercaseConvierte todas las letras a mayscula. Por ejemplo, "juana petronila" aparecer como "JUANA PETRONILA".lowercaseConvierte todas las letras a minscula. Por ejemplo, "JUANA PETRONILA" aparecer como "juana petronila".noneNo se realiza transformacin alguna; el texto se presenta tal como aparece en el cdigo HTML.Como ejemplo, usaremos una lista de nombres. Todos los nombres estn marcados con la etiqueta(de "list element", es decir, elemento de lista). Supongamos que queremos que las iniciales de los nombres aparezcan en mayscula y los ttulos con todos los caracteres en mayscula.chale un vistazo al cdigo fuente del ejemplo y vers que el texto aparece realmente en minscula.h1 {text-transform: uppercase;}

li {text-transform: capitalize;}

Leccin 6: EnlacesSe puede aplicar todo lo anterior 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. Por lo tanto, podemos usaracomo 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.a:link {color: blue;}

a:visited {color: red;}Usaa:linkya:visitedpara enlaces visitados y no visitados, respectivamente. A los enlaces activos se les aplica la pseudo-clasea:active, ya: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-clasea:linkLa pseudo clase:linkse 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.a:link {color: #6699CC;}Pseudo-clasea:visitedLa pseudo clase:visitedse 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;}Pseudo-clasea:active:La pseudo clase:activese usa para enlaces que estn activos.El cdigo de este ejemplo hace que el color de fondo para los enlaces activos sea amarillo:a:active {background-color: #FFFF00;}Pseudo-clasea:hoverLa pseudo clasea:hoverse 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:a:hover {color: orange;font-style: italic;}Ejemplo 1: Efecto cuando el cursor est encima de un enlaceEs bastante popular crear diferentes efectos cuando el cursor est encima de un enlace. Por lo tanto, examinaremos unos cuantos ejemplos ms relacionados con la pseudo-clase:hover.

Example 1a: Espaciado entre letrasComo recordars, el espaciado entre los caracteres se puede ajustar usando la propiedadletter-spacing. Esta propiedad se puede aplicar a los enlaces para crear un efecto especial:a:hover {letter-spacing: 10px;font-weight:bold;color:red;}Ejemplo 1b: MAYSCULAS y minsculasEn la propiedadtext-transform, que sirve para intercambiar entre letras en mayscula y minscula. Esto se puede usar tambin para crear un determinado efecto en los enlaces:a:hover {text-transform: uppercase;font-weight:bold;color:blue;background-color:yellow;}Estos dos ejemplos dan una idea sobre las posibilidades casi infinitas al combinar diferentes propiedades.

Ejemplo 2: Quitar el subrayado de los enlacesUna pregunta muy recurrente es: cmo quito el subrayado de los enlaces?Deberas considerar cuidadosamente la necesidad de quitar el subrayado, pues esto podra disminuir la usabilidad de tu sitio web de forma significativa.La gente est acostumbrada al subrayado azul de los enlaces en las pginas web y saben que pueden hacer clic en ellos. Si cambias el subrayado y el color de los enlaces, existe una buena posibilidad de que los usuarios se confundan y, por lo tanto, no saquen todo el provecho al contenido de tu sitio web.Dicho esto, es muy sencillo quitar el subrayado de los enlaces. Como recordars, la propiedadtext-decorationse puede usar para determinar si el texto aparece subrayado o no. Para quitar el subrayado, establece el valor detext-decorationanone.a {text-decoration:none;}De forma alternativa, puedes establecer la propiedadtext-decorationjunto con otras propiedades para las cuatro pseudo clases.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;}En html:

Ejemplo 2: Quitamos el subrayado a los enlaces Este es un ejemplo de enlace sin subrayado!

Leccin 7: Identificacin y agrupacin de elementos (class e id)A veces querrs aplicar un estilo especial a un elemento concreto o a un grupo concreto de elementos. En esta leccin examinaremos cmo usar los atributosclasseidpara especificar propiedades para los elementos seleccionados.Cmo se puede dar color a un ttulo concreto de forma diferente a los otros ttulos de tu sitio web? Cmo se pueden agrupar los enlaces en diferentes categoras y dar a cada categora un estilo especial? Estas dos preguntas son un ejemplo de las preguntas a las que daremos respuesta en esta leccin.Agrupacin de elementos con el atributoclassDigamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El cdigo HTML sera el siguiente:Uvas para el vino blanco:

Riesling

Chardonnay

Pinot Blanc

Uvas para el vino tinto:

Cabernet Sauvignon

Merlot

Pinot Noir

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 atributoclass.Intentemos especificar algunas clases en el ejemplo anterior:Uvas para el vino blanco:

Riesling

Chardonnay

Pinot Blanc

Uvas para el vino tinto:

Cabernet Sauvignon

Merlot

Pinot Noir

A partir de aqu, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.a {color: blue;}

a.whitewine {color: #FFBB00;}

a.redwine {color: #800000;}Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que pertenecen a una clase unsando.nombredelaclaseen la hoja de estilo del documento.Identificacin de un elemento usando el atributoidAdems de agrupar elementos, podras necesitar identificar un elemento nico. Esto se hace con el atributoid.Lo que hace especial al atributoides que no pueden existir dos elementos dentro del mismo documento con el mismoid. Cadaidtiene que ser nico. En cualquier otro caso, se debera usar el atributoclassen su lugar. Ahora, examinemos un ejemplo de un posible uso del atributoid:Captulo 1...Captulo 1.1...Captulo 1.2...Captulo 2...Captulo 2.1...Captulo 2.1.2...El cdigo anterior podra hacer referencia a encabezados de cualquier documento dividido en captulos y prrafos. Sera normal asignar unida cada captulo de la siguiente manera:Captulo 1...Captulo 1.1...Captulo 1.2...Captulo 2...Captulo 2.1...Captulo 2.1.2...Digamos que el ttulo del captulo 1.2 tiene que estar en rojo. Usando el cdigo CSS necesario, se podra hacer as:#c1-2 {color: red;}Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento especfico usando#nombredelidentificadoren la hoja de estilo del documento.

Leccin 8: Agrupacin de elementos (span y div)Los elementos y se usan para agrupar y estructurar un documento, y se usarn, a menudo, junto con los atributosclasseid.En esta leccin revisaremos el uso de los elementos y , ya que estos dos elementos de HTML son, precisamente, de importancia clave en lo que se refiere a CSS. Agrupacin con el elemento Agrupacin con el elemento

Agrupacin con El elemento es lo que se podra denominar un elemento neutro que no aade nada al documento en s. Pero con CSS se puede usar para aadir caractersticas visuales distintivas a partes especficas de texto en los documentos.Un ejemplo de esto podra ser esta cita de Benjamin Franklin:El que pronto se acuesta y pronto se levanta,es hombre saludable, rico y sabio.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. A cada elementospanse le aade el atributoclass, que podemos definir as en nuestra hoja de estilo:El que pronto se acuesta y pronto se levanta,es hombre saludable,ricoy sabio.El cdigo CSS necesario para producir este efecto es el siguiente:span.ventaja {color:red;}Por supuesto, se puede usar tambin el atributoidpara aadir estilo a los elementos definidos con. Pero recuerda que tendrs que aplicar siempre un atributoidnico para cada uno de los tres elementos, tal como aprendimos en la leccin anterior.

Agrupacin con el elemento Mientras quese usa dentro de un elemento a nivel de bloque como vimos en el ejemplo anterior,se usa para agrupar uno o ms elementos a nivel de bloque.Aparte de esta diferencia, la agrupacin confunciona ms o menos igual. Veamos un ejemplo con dos listas de presidentes de los EE.UU., divididas segn su filiacin poltica.

Franklin D. Roosevelt

Harry S. Truman

John F. Kennedy

Lyndon B. Johnson

Jimmy Carter

Bill Clinton

Dwight D. Eisenhower

Richard Nixon

Gerald Ford

Ronald Reagan

George Bush

George W. Bush

En nuestra hoja de estilo podemos utilizar la agrupacin del mismo modo que antes:#democratas {background:blue;}

#republicanos {background:red;}

Leccin 9: El modelo de cajaEl modelo de caja en CSS describe las cajas que se generan a partir de los elementos HTML. El modelo de caja tambin contiene opciones detalladas en lo referente al ajuste de mrgenes, bordes, relleno (padding) y contenido de cada elemento. La siguiente imagen muestra cmo se construye el modelo de caja:

El modelo de caja en CSS

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):Artculo 1:

Todos los hombres nacen libres e iguales en dignidad y derechos. Estn dotados de razonamiento y consciencia y deberan de comportarse entre s con espritu de hermandad.Si aadimos algo de color e informacin sobre la fuente, el ejemplo se podra presentar as:

El ejemplo contiene dos elementos: el elementoy el elemento. El modelo de caja para los dos elementos se puede ilustrar como sigue:

Aunque puede parecer un poco complicado, la imagen muestra cmo cada elemento HTML est rodeado por cajas, cajas que se pueden ajustar usando CSS.

Leccin 10: Margen y relleno (padding)En la leccin anterior te presentamos el concepto de modelo de caja. En sta, examinaremos cmo cambiar la presentacin de los elementos estableciendo las propiedadesmarginypadding. Establecer el margen de un elemento Establecer el relleno de un elemento

Establecer el margen de un elementoTodo elemento tiene cuatro lados: derecho, izquierdo, superior e inferior. La propiedadmarginhace referencia a la distancia desde cada lado respecto al elemento colindante (o respecto a los bordes del documento). En un primer ejemplo, veremos cmo definir los mrgenes del documento en s, es decir, del elemento. La imagen siguiente muestra cmo queremos que sean los mrgenes de nuestras pginas.

El cdigo CSS necesario para esto es el siguiente:body {margin-top: 100px;margin-right: 40px;margin-bottom: 10px;margin-left: 70px;}O podras elegir usar la versin combinada demargin, que queda como ms elegante:body {margin: 100px 40px 10px 70px;}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:body {margin: 100px 40px 10px 70px;}

p {margin: 5px 50px 5px 50px;}Establecer el relleno de un elementoLa propiedadpaddingpuede entenderse como "relleno". Esto tiene sentido puesto que el relleno (padding) no afecta a la distancia de un elemento respecto a otros elementos, sino que slo define la distancia interior entre el borde y el contenido del elemento.El uso de la propiedadpaddingse puede ilustrar viendo un sencillo ejemplo en el que todos los ttulos tienen diferentes colores de fondo:h1 {background: yellow;}

h2 {background: orange;}Al definir elpaddingpara los ttulos, cambiamos la cantidad de "relleno" que habr alrededor del texto en cada uno de ellos:h1 {background: yellow;padding: 20px 20px 20px 80px;}

h2 {background: orange;padding-left:120px;}

Leccin 11: BordesLos bordes se pueden usar para muchas cosas, por ejemplo, como elemento decorativo o para subrayar la separacin entre dos cosas. CSS te ofrece opciones sin fin a la hora de usar bordes en tus pginas. En esta leccin vamos a examinar las siguientes propiedades CSS: border-width border-color border-style Ejemplos de definicin de bordes Border Anchura del borde [border-width]La anchura del borde se define por medio de la propiedadborder-width, que dispone de los valores thin,mediumythick, o de un valor numrico indicado en pxeles. La siguiente imagen ilustra cmo funciona el sistema:

Color del borde [border-color]

La propiedadborder-colordefine el color del borde. Los valores de esta propiedad son los valores de color normales, por ejemplo, "#123456" (en notacin hexadecimal), "rgb(123,123,123)" (en notacin RGB) o "yellow" (por nombre del color).

Estilo de borde [border-style]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 valoresnoneohidden.

Ejemplos de definicin de bordesLas tres propiedades descritas anteriormente se pueden unir para cada elemento y as producir diferentes bordes. Para ilustrar esto, veremos un documento en el que definimos diferentes bordes para los elementos,,

y. El resultado puede que no sea demasiado bonito pero ilustra grficamente algunas de las muchas posibilidades: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;}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;}Combinacin de propiedades [border]Como ocurre con muchas otras propiedades, usando la propiedadborderse pueden combinar otras muchas propiedades en una sola. Veamos un ejemplo:p {border-width: 1px;border-style: solid;border-color: blue;}La declaracin anterior se puede combinar as:p {border: 1px solid blue;}

Leccin 12: Altura y anchuraHasta ahora, no hemos prestado demasiada atencin a las dimensiones de los elementos con los que hemos estado trabajando. En esta leccin examinaremos lo fcil que es definir la altura y anchura de un elemento. Para lo cual usaremos las propiedades: width heightEstableciendo la propiedadwidthCon la propiedadwidthse puede definir la anchura concreta de un elemento.El sencillo ejemplo que sigue nos proporciona una caja en la que se puede introducir texto:div.box {width: 200px;border: 1px solid black;background: orange;}En html:

Elemento de 200px de ancho con texto informacin del ejemplo

Estableciendo la propiedadheightFjate cmo en el ejemplo anterior la altura de la caja queda establecida por el contenido de la misma. Se puede influir en la altura de un elemento con la propiedadheight. Por ejemplo, probemos a fijar la altura de la caja en 500px:div.box {height: 500px;width: 200px;border: 1px solid black;background: orange;}En html:

Elemento de 200px de ancho y 500px de alto con texto Copiar un texto

Leccin 13: Elementos flotantes (la propiedadfloat)Los elementos se pueden hacer flotar a la derecha o a la izquierda usando la propiedadfloat. Es decir, que la caja con su contenido flota bien a la derecha o la izquierda de un documento (o de la caja contenedora) [vase la leccin 9que describe el modelo de caja]. La siguiente imagen muestra este principio:

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:

Toda la informacin necesaria para el ejercicio...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 propiedadfloatcon el valorleft:#picture {float:left;width: 100px;}Otro ejemplo: columnasLa propiedadfloattambin se puede usar para crear columnas en un documento. Para crear dichas columnas tendrs que estructurar las columnas deseadas en el cdigo HTML con la etiqueta, como se muestra a continuacin:Informacin de la columna uno...

Informacin de la columna dos...

Informacin de la columna tres...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 propiedadfloat:#column1 {float:left;width: 33%;}

#column2 {float:left;width: 33%;}

#column3 {float:left;width: 33%;}

La propiedadfloatse puede establecer con los siguientes valores:left(izquierda),right(derecha) onone(ninguna).La propiedadclearLa propiedadclearse 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 propiedadclearpuede tomar los valores: left,right,bothonone. El principio consiste en que, siclear, por ejemplo, se fija enbothpara 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.

Bill Gates

La informacin necesaria para ver el ejercicio...Para evitar que el texto flote hacia arriba junto a la imagen, podemos aadir lo siguiente al cdigo CSS:#picture {float:left;width: 100px;}

.floatstop {clear:both;}

Leccin 14: Posicionamiento de elementosCon posicionamiento CSS, se puede colocar un elemento en el lugar exacto que se quiera de la pgina. Junto con las flotaciones [propiedadfloat] (vase la leccin 13), el posicionamiento proporciona muchas posibilidades de crear presentaciones avanzadas y precisas.

En esta leccin analizaremos lo siguiente: Principios que rigen el posicionamiento CSS Posicionamiento absoluto Posicionamiento relativo Principios que rigen el posicionamiento CSSImagina la ventana de un navegador como un sistema de coordenadas:

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:h1 {position:absolute;top: 100px;left: 200px;}El resultado ser el siguiente:

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 absolutoEl 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 propiedadpositionse establece comoabsolute. Posteriormente puedes usar las propiedadesleft,right,top, ybottompara 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;}

#box4 {position:absolute;bottom: 50px;left: 50px;}En html:

Box 1

Box 2

Box 3

Box 4

Posicionamiento relativoPara posicionar un elemento de forma relativa, la propiedadpositionse establece comorelative. La diferencia entre posicionamiento absoluto y relativo consiste en cmo se calcula la posicion.La posicin para un elemento que se posiciona de forma relativase 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;}En html:

Caracteristicas de los perros

Por Juana Sinforosa Informacion sobre el perro. Informacion sobre el perro 2. Informacion sobre el perro 3. Informacion sobre el perro 4. Informacion sobre el perro 5. Informacion sobre el perr 6. Informacion sobre el perro 7. Informacion sobre el perro 8. Informacion sobre el perro 9. Informacion sobre el perro 10. Informacion sobre el perro 11. Informacion sobre el perro 12. Informacion sobre el perro 13. Informacion sobre el perro 14.

Leccin 15: Capa sobre capa conz-index(Capas)CSS funciona sobre tres dimensiones: altura, anchura y profundidad. En las lecciones anteriores hemos examinado las dos primeras dimensiones. En esta leccin, aprenderemos cmo hacer que diferentes elementos se conviertan en capas. En pocas palabras, esto hace referencia al orden en que los elementos se superponen unos con respecto a otros.Para tal propsito, se puede asignar a cada elemento un nmero por medio de la propiedadz-index. El sistema consiste en que el elemento con un nmero mayor se superpone al elemento con un nmero menor.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 dez-index:

En este caso, los nmeros son consecutivos (del 1 al 5), aunque se puede lograr el mismo resultado usando cinco nmeros 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;}En html:

Escalera de color

El mtodo es relativamente sencillo pero las posibilidades que ofrece son mltiples. Es posible colocar imgenes sobre el texto, texto sobre imgenes, etc.C&C Consultores Informticos C.A.Pgina 5