Apuntes CSS 1

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

Mtodo 1: En lnea (el atributo style)Un modo de aplicar CSS a HTML es usando el atributo de HTML style. Si ampliamosel 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 etiqueta style)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

Mtodo 3: Externo (enlace a una hoja de estilo)El mtodo recomendado es enlazar con lo que se denomina hoja de estilo externa. A lolargo de este tutorial usaremos este mtodo en todos nuestros ejemplos.

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 eldisco duro.

Por ejemplo, digamos que tu hoja de estilo se llama style.css y est localizada en unacarpeta que se llama style. Esta situacin se puede ilustrar de la siguiente manera:

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 unasencilla 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, esdecir, entre la etiqueta y . De esta manera:

Mi documento

...

Este vnculo indica al navegador que debera usar la presentacin del fichero CSS almostrar el fichero HTML. Lo realmente bueno de este mtodo es que se puedenvincular varios documentos HTML con la misma hoja de estilo. En otras palabras, sepuede usar un nico fichero CSS para controlar la presentacin del muchos documentosHTML.

Esta tcnica puede ahorrarte mucho trabajo. Si quisieras cambiar, por ejemplo, el colorde fondo de un sitio web compuesto por 100 pginas, un hoja de estilo puede ahorrarteel tener que cambiar de forma manual los 100 documentos HTML. Con CSS, el cambiose puede llevar a cabo en unos segundos modificando parte del cdigo de la hoja deestilo 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 ficheroHTML y un fichero CSS - con el siguiente contenido:

Fichero default.htm

Mi documento

Mi primera hoja de estilo

Fichero style.css

body {background-color: #FF0000;

}

Ahora coloca los dos ficheros en la misma carpeta. Recuerda grabar los ficheros con lasextensiones correctas (".htm" y ".css", respectivamente).

Abre el fichero default.htm con el navegador y observa que la pgina tiene un color defondo rojo. Enhorabuena! Acabas de crear tu primera hoja de estilo!

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 defondo. Se explicarn las siguientes propiedades CSS:

color background-color background-image background-repeat background-attachment background-position background

Color de primer plano: la propiedad 'color'La propiedad color describe el color de primer plano de un elemento.

Por ejemplo, imagina que queremos que todos los ttulos de un documento aparezcancon color rojo oscuro. Todos los ttulos estn marcados con el elemento . El cdigosiguiente establece el color de los elementos como rojo.

h1 {color: #ff0000;

}

Ver ejemploLos colores se pueden introducir como valores hexadecimales, como en el ejemploanterior: #ff0000; o se pueden usar los nombres de los colores: "red" (rojo), o bien comovalores rgb: (rgb(255,0,0)).

La propiedad 'background-color'La propiedad background-color describe el color de fondo de los elementos.

El elemento contiene todo el contenido de un documento HTML. As pues, paracambiar el color de fondo de una pgina, la propiedad background-color deberaaplicarse al elemento .

Tambin se pueden aplicar colores de fondo a otros elementos, entre ellos, a losencabezados y al texto. En el ejemplo que sigue se aplicarn diferentes colores a loselementos y .

body {background-color: #FFCC66;

}

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

}

Ver ejemplo

Fjate cmo hemos aplicado dos propiedades a separndolas por medio de unpunto y coma.

Imgenes de fondo [background-image]La propiedad CSS background-image se usa para insertar una imagen de fondo.

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 botnderecho sobre la imagen y elige "guardar imagen como..."), o bien puedes usarcualquier otra imagen.

Para insertar la imagen de la mariposa como imagen de fondo de una pgina web, aplicasencillamente la propiedad background-image al elemento y especifica lalocalizacin de la imagen.

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

}


}

Ver ejemploNOTA: Fjate cmo hemos especificado la localizacin de la imagen:url("butterfly.gif"). Esto significa que la imagen est en la misma carpeta que la hojade estilo. Tambin puedes hacer referencia a imgenes en otras carpetas usandourl("../imagenes/butterfly.gif") o incluso imgenes de internet si indicas la direccincompleta del fichero: url("http://www.html.net/butterfly.gif").

Repetir la imagen de fondo [background-repeat]En el ejemplo anterior, te fijaste en que, por defecto, la mariposa se repeta tanto en eleje horizontal como en el vertical para ocupar toda la pantalla? La propiedadbackground-repeat controla este comportamiento.

La tabla siguiente resume los cuatro valores diferentes para la propiedad background-repeat.

Valor Descripcin EjemploBackground-repeat: repeat-x

La imagen se repite en el eje horizontal Ver ejemplo

background-repeat: repeat-y

La imagen se repite en el eje vertical Ver/ejemplo

background-repeat: repeatLa imagen se repite en el eje horizontal yvertical Ver ejemplo

background-repeat: no-repeat La imagen no se repite Ver ejemplo

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

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

}


}

Ver ejemplo

Fijar la imagen de fondo [background-attachment]La propiedad background-attachment especifica si una imagen est fija o se desplazacon el elemento contenedor.

Una imagen de fondo fija no se mover con el texto cuando el lector se desplace por lapgina, mientras que una imagen de fondo no fija se desplazar con el texto de la pginaweb.

La tabla siguiente resume los dos valores posibles para la propiedad background-attachment. Haz clic en los ejemplos para ver la diferencia entre la imagen fija y laimagen que se desplaza.

Valor Descripcin Ejemplo

Background-attachment:scroll

La imagen se desplaza con la pgina - noest fija

Verejemplo

Background-attachment:fixed La imagen est fija

Verejemplo

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

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

}


}

Ver ejemplo

Ubicacin de la imagen de fondo [background-position]Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de lapantalla. La propiedad background-position te permitir cambiar este valor pordefecto y posicionar la imagen de fondo en cualquier lugar de la pantalla que quieras.

Hay muchas formas diferentes de establecer los valores de la propiedad background-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 delmargen izquierdo y a 200 pxeles del margen superior del la ventana del navegador.

Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, comounidades fijas (pxeles, centmetros, etc.) o puedes usar las palabras "top" (superior),"bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha). El modelosiguiente ilustra cmo funciona el sistema:

La tabla siguiente proporciona varios ejemplos.

Valor Descripcin Ejemplo

background-position:2cm 2cm

La imagen se posiciona a 2 cm del margen izquierdo ya 2 cm del margen superior de la pgina

Verejemplo

background-position:50% 25%

La imagen se posiciona en el centro de la pgina y un25 % del margen superior de la misma

Verejemplo

background-position:top right

La imagen se posiciona en la esquina superior derechade la pgina

Verejemplo

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

body {background-color: #FFCC66;

background-image: url("butterfly.gif");background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;

}


}

Ver ejemplo

Combinacin de propiedades [background]La propiedad background es una forma abreviada de todas las propiedades de fondolistadas a lo largo de esta leccin.

Con la propiedad background se pueden comprimir varias propiedades, y as escribiruna 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("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:

background: #FFCC66 url("butterfly.gif") no-repeat fixed rightbottom;

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 pordefecto. Por ejemplo, si se omiten las propiedades background-attachment ybackground-position del ejemplo anterior, quedando el cdigo de la siguientemanera:

background: #FFCC66 url("butterfly.gif") no-repeat;

Estas dos propiedades que no se especifican se estableceran, sin ms, con sus valorespor defecto, que, como ya sabes, son scroll y top left.

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 paraun sitio web slo se pueden ver si estn instaladas en el PC desde el que se accede adicho sitio web. Se describirn las siguientes propiedades CSS:

font-family font-style font-variant font-weight font-size font

Familia de fuentes [font-family]La propiedad font-family se usa para establecer una lista ordenada de fuentes que seusarn para mostrar un elemento determinado o una pgina web. Si la primera fuente dela lista no est instalada en el ordenador desde el que se accede al sitio, se seguirprobando con la siguiente fuente hasta encontrar una fuente apropiada.

Para clasificar las fuentes se usan dos tipos de nombres: nombres de una familia yfamilias 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 stade algunas fuentes alternativas. Se recomienda completar la lista con una familia defuentes genrica. As, al menos, la pgina se mostrar usando una fuente de la mismafamilia si ninguna de las especificadas estn disponibles.

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;}

Ver ejemplo

Los encabezados marcados con la etiqueta 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 familiasans-serif para mostrar los encabezados.

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

Estilo de la fuente [font-style]La propiedad font-style define la fuente elegida bien con el valor normal, elvaloritalic o el valor oblique. En el ejemplo que sigue, todos los encabezados marcadoscon aparecern en cursiva.

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

Ver ejemplo

Variante de fuente [font-variant]La propiedad font-variant se usa para elegir entre las variantes normal o small-caps(versalita) de una fuente. La fuente a la que se aplica el valorsmall-caps es una fuenteque usa letras en mayscula inicial ms pequeas, en vez de letras en minscula.Confuso? Veamos los ejemplos siguientes:

Si la propiedad font-variant se establece con el valor small-caps y no hay disponibleuna fuente en versalita, el navegador probablemente mostrar el texto en mayscula.

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

Ver ejemplo

Peso de la fuente [font-weight]La propiedad font-weight describe qu intensidad o "peso" en negrita debera tener lafuente. Toda fuente puede tener los valores normal o bold. Algunos navegadoressoportan, 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;}

Ver ejemplo

Tamao de la fuente [font-size]El tamao de la fuente se establece por medio de la propiedad font-size.

A la hora de describir el tamao de las fuentes, existen muchas unidades diferentes (porejemplo, pxeles y porcentajes) entre las que elegir. En este tutorial nos centraremos enlas 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;}

Ver ejemploExiste 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 alusuario ajustar el tamao de la misma segn considere oportuno. Muchos usuarios sondiscapacitados, mayores o sufren de disminuacin visual, o disponen de un monitor demala calidad.Para que tu sitio web sea accesible para todo el mundo, deberas usarunidades ajustables como, por ejemplo, '%' o 'em'.

En la imagen que sigue puedes ver cmo ajustar el tamao del texto en Mozilla Firefoxe Internet Explorer. Prubalo; es una buena caracterstica, no crees?

Combinacin de propiedades [font]Si usamos la propiedad abreviada font es posible incluir todas las propiedadesdiferentes relativas a fuentes en una nica propiedad.

Por ejemplo, imagina estas cuatro lneas de cdigo que usamos para describir laspropiedades 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 simplicar as:

p {font: italic bold 30px arial, sans-serif;

}

El orden de los valores para la propiedad font es:

font-style | font-variant | font-weight | font-size | font-family

TextoFormatear y aadir estilo al texto es un tema clave para cualquier diseador web. Enesta leccin presentaremos las increbles oportunidades que ofrece CSS a la hora deaadir presentacin al texto. Describiremos las siguientes propiedades:

text-indent text-align text-decoration letter-spacing text-transform

Sangra del texto [text-indent]La propiedad text-indent permite aadir un toque de elegancia a los prrafos de textoal aplicar sangra a la primera lnea de dicho prrafo. En el ejemplo siguiente se haaplicado una sanga de 30px a todos los prrafos de texto marcados con la etiqueta :

p {text-indent: 30px;

}

Ver ejemplo

Alineacin del texto [text-align]La propiedad CSS text-align es el equivalente al atributo align usado en versionesanteriores de HTML. Los valores posibles de esta propiedad son: left(texto alineado a laizquierda), right (texto alineado a la derecha) o center (texto con alineacin centrada).Adems, el valor justify(alineacin justificada) alargar cada lnea de forma que losmrgenes izquierdo y derecho estn justificados. Esta tipo de presentacin la habrsvisto, por ejemplo, en peridicos y revistas.

En el ejemplo que sigue, el texto de los encabezados de la tabla, , se ha alineado ala derecha, mientras que los datos de la tabla, , aparecen centrados. Adems, losprrafos de texto normales estn justificados:

th {text-align: right;

}

td {text-align: center;

}

p {text-align: justify;

}

Ver ejemplo

Decoracin del texto [text-decoration]La propiedad text-decoration permite aadir diferentes "decoraciones" o "efectos" altexto. Por ejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior.En el ejemplo siguiente, el elemento aparecer subrayado, el elemento aparecer con un subrayado por encima del texto y el elemento tendr el textotachado.

h1 {text-decoration: underline;

}

h2 {text-decoration: overline;

}

h3 {text-decoration: line-through;

}

Ver ejemplo

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 anchodeseado. Por ejemplo, si queremos un espaciado de 3px entre los caracteres de unprrafo de texto y6px entre los caracteres de los encabezados , usaramos elsiguiente cdigo:

h1 {letter-spacing: 6px;

}

p {letter-spacing: 3px;

}

Ver ejemplo

Transformacin del texto [text-transform]La propiedad text-transform controla la escritura en maysculas de un texto. Puedeselegir entre los valorescapitalize, uppercase olowercase, sin importar cmo aparece eltexto 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 lapropiedadtext-transform mencionados en el prrafo anterior:

capitalizePone en mayscula la primera letra de cada palabra. Por ejemplo, "john doe"aparecer como "John Doe".

uppercaseConvierte todas las letras a mayscula. Por ejemplo, "john doe" aparecer como"JOHN DOE".

lowercaseConvierte todas las letras a minscula. Por ejemplo, "JOHN DOE" aparecer como"john doe".

noneNo se realiza transformacin alguna; el texto se presenta tal como aparece en elcgido HTML.

Como ejemplo, usaremos una lista de nombres. Todos los nombres estn marcados conla etiqueta (de "list element", es decir, elemento de lista). Supongamos quequeremos que las iniciales de los nombres aparezcan en mayscula y los ttulos contodos los caracteres en mayscula.

chale un vistazo al cdigo fuente del ejemplo y vers que el texto aparece realmente enminscula.

h1 {text-transform: uppercase;

}

li {text-transform: capitalize;

}

Ver ejemplo

EnlacesYa 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 queCSS te permite definir estas propiedades de forma diferente dependiendo del estado delmismo, es decir, si el enlace se ha visitado, no se ha visitado, si es el enlace activo o siel cursor est sobre dicho enlace. Esto permite aadir efectos divertidos y tiles a tusitio 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 definiruna propiedad para una etiqueta HTML.

Veamos un ejemplo. Como ya sabes, los enlaces se especifican en HTML con laetiqueta . 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 usaruna pseudo-clase para asignar diferentes estilos a los enlaces visitados y no visitados.

a:link {color: blue;

}

a:visited {color: red;

}

Usa a:link y a:visited para enlaces visitados y no visitados, respectivamente. A losenlaces activos se les aplica la pseudo-clase a:active, y a:hover cuando el cursor secoloca o pasa sobre el enlace.

Vamos a repasar ahora cada una de las cuatro pseudo-clases con ejemplos y msexplicaciones.

Pseudo-clase a:link

La pseudo clase :link se usa para enlaces que dirigen a pginas que el usuario no havisitado.

En el ejemplo de cdigo que sigue, los enlaces no visitados tendrn un color azul claro.

a:link {color: #6699CC;

}

Ver ejemplo

Pseudo-clase a:visited

La pseudo clase :visited se usa para enlaces que dirigen a pginas que el usuario yaha visitado. Por ejemplo, el cdigo siguiente har que todos los enlaces visitados seande 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 seaamarillo:

a:active {background-color: #FFFF00;

}

Ver ejemplo

Pseudo-clase a:hover

La pseudo clase a:hover se usa cuando el puntero del ratn pasa por encima de unenlace.

Esta pseudo-clase se puede usar para crear efectos interesantes. Por ejemplo, siqueremos que nuestros enlaces sean de color naranja y estn en cursiva cuando el cursorpase sobre ellos, el cdigo CSS que utilizaremos ser el siguiente:

a:hover {color: orange;font-style: italic;

}

Ver ejemplo

Ejemplo 1: Efecto cuando el cursor est encima de unenlaceEs 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 letras

Como recordars de la leccin 5, el espaciado entre los caracteres se puede ajustarusando la propiedad letter-spacing. Esta propiedad se puede aplicar a los enlacespara crear un efecto especial:

a:hover {letter-spacing: 10px;font-weight:bold;color:red;

}

Ver ejemplo

Ejemplo 1b: MAYSCULAS y minsculasEn la leccin 5 examinamos la propiedad text-transform, que sirve para intercambiarentre letras en mayscula y minscula. Esto se puede usar tambin para crear undeterminado efecto en los enlaces:

a:hover {text-transform: uppercase;font-weight:bold;color:blue;background-color:yellow;

}

Ver ejemploEstos dos ejemplos dan una idea sobre las posibilidades casi infinitas al combinardiferentes propiedades. Ya puedes ir creando tus propios efectos... intntalo!

Ejemplo 2: Quitar el subrayado de los enlaces

Una pregunta muy recurrente es: cmo quito el subrayado de los enlaces?

Deberas considerar cuidadosamente la necesidad de quitar el subrayado, pues estopodra disminuir la usabilidad de tu sitio web de forma significativa. La gente estacostumbrada al subrayado azul de los enlaces en las pginas web y saben que puedenhacer clic en ellos. Incluso mi abuelita lo sabe! Si cambias el subrayado y el color delos enalces, existe una buena posibilidad de que los usuarios se confundan y, por lotanto, no saquen todo el provecho al contenido de tu sitio web.

Dicho esto, es muy sencillo quitar el subrayado de los enlaces. Como recordars de laleccin 5, la propiedad text-decoration se puede usar para determinar si el textoaparece subrayado o no. Para quitar el subrayado, establece el valor de text-decoration a none.

a {text-decoration:none;

}

De forma alternativa, puedes establecer la propiedad text-decoration junto con otraspropiedades 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;

}

Ver ejemplo

Identificacin y agrupacin de elementos (class e id)A veces querrs aplicar un estilo especial a un elemento concreto o a un grupo concretode elementos. En esta leccin examinaremos cmo usar los atributos class e id paraespecificar propiedades para los elementos seleccionados.

Como se puede dar color a un ttulo concreto de forma diferente a los otros ttulos de tusitio web? Cmo se pueden agrupar los enlaces en diferentes categoras y dar a cadacategora un estilo especial? Estas dos preguntas son un ejemplo de las preguntas a lasque daremos respuesta en esta leccin.

Agrupacin de elementos con el atributo classDigamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados parael vino tinto y el blanco. El cdigo HTML sera el siguiente:

Uvas para el vino blanco:

RieslingChardonnayPinot Blanc

Uvas para el vino tinto:

Cabernet SauvignonMerlotPinot Noir

Ver ejemploAs pues, queremos que los enlaces relativos al vino blanco sean amarillos, los enlacesrelacionados con el vino tinto sean rojos, y el resto de enlaces de la pgina web sigansiendo azules.

Para lograr esto, dividiremos los enlaces en dos categoras. Esto se hace asignando unaclase para cada tipo de enlace, usando el atributo class.

Intentemos especificar algunas clases en el ejemplo anterior:

Uvas para el vino blanco:

RieslingChardonnayPinot Blanc

Uvas para el vino tinto:

CabernetSauvignon

MerlotPinot Noir

A partir de aqu, podemos definir propiedades especiales para los enlaces que hacenreferencia al vino tinto y al vino blanco, respectivamente.

a {color: blue;

}

a.whitewine {color: #FFBB00;

}

a.redwine {color: #800000;

}

Ver ejemploComo se muestra en el ejemplo, se pueden definir las propiedades para los elementosque pertenecen a una clase unsando.nombredelaclase en la hoja de estilo deldocumento.

Identificacin de un elemento usando el atributo idAdems de agrupar elementos, podras necesitar identificar un elemento nico. Esto sehace con el atributo id.

Lo que hace especial al atributo id es que no pueden existir dos elementos dentro delmismo documento con el mismo id. Cada id tiene que ser nico. En cualquier otrocaso, se debera usar el atributo class en su lugar. Ahora, examinemos un ejemplo deun posible uso del atributo id:

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 documentodividido en captulos y prrafos. Sera normal asignar un id a cada captulo de lasiguiente 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 CSSnecesario, se podra hacer as:

#c1-2 {color: red;

}

Ver ejemploComo se muestra en el ejemplo anterior, se pueden definir las propiedades de unelemento especfico usando #nombredelidentificador en la hoja de estilo deldocumento.

Agrupacin de elementos (span y div)Los elementos y se usan para agrupar y estructurar un documento, y seusarn, a menudo, junto con los atributos class e id.

En esta leccin revisaremos el uso de los elementos y , ya que estos doselementos 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 aadenada al documento en s. Pero con CSS se puede usar para aadir caractersticasvisuales 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 nopasarse todo el da durmiendo, aparezca enfatizado en rojo. Para este fin, podemosmarcar dichas ventajas con el elemento . A cada elemento span se le aade elatributo class, 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.benefit {color:red;

}

Ver ejemplo

Por supuesto, se puede usar tambin el atributo id para aadir estilo a los elementosdefinidos con . Pero recuerda que tendrs que aplicar siempre un atributo id

nico para cada uno de los tres elementos , tal como aprendimos en la leccinanterior.

Agrupacin con el elemento Mientras que se usa dentro de un elemento a nivel de bloque como vimos en elejemplo anterior, se usa para agrupar uno o ms elementos a nivel de bloque.

Aparte de esta diferencia, la agrupacin con funciona ms o menos igual.Veamos un ejemplo con dos listas de presidentes de los EE.UU., divididas segn sufiliacin poltica.

Franklin D. RooseveltHarry S. TrumanJohn F. KennedyLyndon B. JohnsonJimmy CarterBill Clinton

Dwight D. EisenhowerRichard NixonGerald FordRonald ReaganGeorge BushGeorge W. Bush

En nuestra hoja de estilo podemos utilizar la agrupacin del mismo modo que antes:

#democrats {background:blue;

}

#republicans {background:red;

}

Ver ejemplo

En los ejemplos anteriores, slo hemos usado y con cosas muy sencillascomo, por ejemplo, texto y colores de fondo. Ambos elementos tienen el potencial pararealizar cosas ms avanzadas. Sin embargo, esto no se presentar en esta leccin; loveremos ms adelante a lo largo del tutorial.

El modelo de cajaEl modelo de caja en CSS describe las cajas que se generan a partir de los elementosHTML. El modelo de caja tambin contiene opciones detalladas en lo referente al ajustede mrgenes, bordes, relleno (padding) y contenido de cada elemento. La siguienteimagen 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 usarel modelo en un caso real con un encabezado y algo de texto. El cdigo HTML denuestro ejemplo es el siguiente (extrado de la Declaracin Universal de los DerechosHumanos):

Artculo 1:

Todos los hombres nacen librese iguales en diginidad y derechos. Estndotados de razonamiento y consciencia ydeberan de comportarse entre s conespritu de hermandad.

si aadimos algo de color e informacin sobre la fuente, el ejemplo se podra presentaras:

El ejemplo contiene dos elementos: el elemento y el elemento . El modelo decaja para los dos elementos se puede ilustrar como sigue:T

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

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 laspropiedades margin y padding.

Establecer el mrgen de un elemento Establecer el relleno de un elemento

Establecer el mrgen de un elementoTodo elemento tiene cuatro lados: derecho, izquierdo, superior e inferior. La propiedadmargin hace referencia a la distancia desde cada lado respecto al elemento colindante (orespecto a los bordes del documento). Vase el diagrama de la leccion 9 para ver unaimagen ilustrativa.

En un primer ejemplo, veremos cmo definir los mrgenes del documento en s, esdecir, del elemento . La imagen siguiente muestra cmo queremos que sean losmrgenes 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 de margin, que queda como ms elegante:

body {margin: 100px 40px 10px 70px;

}

Ver ejemploSe puede establecer los mrgenes de casi todos los elementos del mismo modo. Porejemplo, podemos elegir definir mrgenes para todos los prrafos de texto marcados conel elemento :

body {margin: 100px 40px 10px 70px;

}

p {margin: 5px 50px 5px 50px;

}

Ver ejemplo

Establecer el relleno de un elementoLa propiedad padding puede entenderse como "relleno". Esto tiene sentido puesto queel 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 propiedad padding se puede ilustrar viendo un sencillo ejemplo en el quetodos los ttulos tienen diferentes colores de fondo:

h1 {background: yellow;

}

h2 {background: orange;

}

Ver ejemplo

Al deninir el padding para los ttulos, cambiamos la cantidad de "relleno" que habralrededor del texto en cada uno de ellos:

h1 {background: yellow;padding: 20px 20px 20px 80px;

}

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

}

Ver ejemplo

BordesLos bordes se pueden usar para muchas cosas, por ejemplo, como elemento decorativo opara subrayar la separacin entre dos cosas. CSS te ofrece opciones sin fin a la hora deusar bordes en tus pginas. En esta leccin vamos a examinar las siguientes propiedadesCSS:

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 propiedad border-width, que disponede los valores thin, medium y thick, o de un valor numrico indicado en pxeles. Lasiguiente imagen ilustra cmo funciona el sistema:

Color del borde [border-color]

La propiedad border-color define el color del borde. Los valores de esta propiedadson 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 deborde segn los interpreta Internet Explorer 5.5. Todos los ejemplos se muestran con elvalor del color a "oro" y el valor de la anchura a "thick", pero se pueden mostrar, porsupuesto, en otros colores y grosores.

Si no queremos mostrar ningn borde, se puede usar los valores none o hidden.

Ejemplos de definicin de bordesLas tres propiedades descritas anteriormente se pueden unir para cada elemento y asproducir diferentes bordes. Para ilustrar esto, veremos un documento en el quedefinimos diferentes bordes para los elementos , , y . El resultadopuede que no sea demasiado bonito pero ilustra grficamente algunas de las muchasposibilidades:

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 ejemploTambin 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

Combinacin de propiedades [border]Como ocurre con muchas otras propiedades, usando la propiedad border se puedencombinar 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;

}

Altura y anchuraHasta ahora, no hemos prestado demasiada atencin a las dimensiones de los elementoscon los que hemos estado trabajando. En esta leccin examinaremos lo fcil que esdefinir la altura y anchura de un elemento. Para lo cual usaremos las propiedades:

width height

Estableciendo la propiedad widthCon la propiedad width se puede definir la anchura concreta de un elemento.

El sencillo ejemplo que sigue nos proporciona una caja en la que se puede introducirtexto:

div.box {width: 200px;border: 1px solid black;background: orange;

}

Ver ejemplo

Estableciendo la propiedad heightFjate cmo en el ejemplo anterior la altura de la caja queda establecida por el contenidode la misma. Se puede influir en la altura de un elemento con la propiedad height. Porejemplo, probemos a fijar la altura de la caja en 500px:

div.box {height: 500px;width: 200px;border: 1px solid black;background: orange;

}

Ver ejemplo

Elementos flotantes (la propiedad float)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 undocumento (o de la caja contenedora) [vase la leccin 9 que describe el modelo decaja]. La siguiente imagen muestra este principio:

Por ejemplo, si quisiramos texto con ajuste de lnea alrededor de una imagen, elresultado sera el siguiente:

Cmo se hace?El cdigo HTML del ejemplo anterior es el siguiente:

causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...

Para conseguir que la imagen flote a la izquierda y el texto se ajuste a su alrededor, slohay que definir el ancho de la caja que rodea la imagen y, despus de eso, fijar lapropiedad float con el valor left:

#picture {float:left;width: 100px;

}

Ver ejemplo

Otro ejemplo: columnasLa propiedad float tambin se puede usar para crear columnas en un documento. Paracrear dichas columnas tendrs que estructurar las columnas deseadas en el cdigoHTML con la etiqueta , como se muestra a continuacin:

Haec disserens qua de re agaturet in quo causa consistat non videt...

causas naturales et antecedentes,idciro etiam nostrarum voluntatum...

nam nihil esset in nostrapotestate si res ita se haberet...

Ahora, el ancho deseado de las columnas se fija, por ejemplo, en un porcentajeequivalente a un 33%, y luego simplemente se flota cada columna a la izquierdadefiniendo la propiedad float:

#column1 {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 clearLa propiedad clear se usa para controlar cmo se comportarn los elementos quesiguen a los elementos flotados de un documento.

Por defecto, los elementos siguientes se mueven hacia arriba para rellenar el espaciodisponible que quedar libre al flotar una caja hacia un lado. Echa un vistazo al ejemploanterior en el que el texto se desplaza de forma automtica hacia arriba junto a laimagen de Bill Gates.

La propiedad clear puede tomar los valores:left, right, both o none. El principioconsiste en que, si clear, por ejemplo, se fija en both para una caja, el borde delmargen superior de esta caja siempre estar debajo del borde del margen inferior paralas posibles cajas flotantes que vengan de arriba.

Bill Gates

causas naturales et antecedentes,idciro etiam nostrarum voluntatum...

Para evitar que el texto flote hacia arriba junto a la imagen, podemos aadir lo siguienteal cdigo CSS:

#picture {float:left;width: 100px;

}

.floatstop {clear:both;

}

Ver ejemplo

Posicionamiento de elementosCon posicionamiento CSS, se puede colocar un elemento en el lugar exacto que sequiera de la pgina. Junto con las flotaciones [propiedad float] (vase la leccin 13), elposicionamiento proporciona muchas posibilidades de crear presentaciones avanzadas yprecisas.

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 colocarcualquier caja en cualquier lugar del sistema de coordenadas.

Digamos que queremos posicionar un ttulo. Usando el modelo de caja (vase la leccin9) el ttulo aparecer as:

Si queremos posicionar la cabecera a 100 px del borde superior y a 200px del bordeizquierdo 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 lahora de colocar elementos. Es mucho ms sencillo que intentar usar tablas, imgenestransparentes o cualquier otra cosa.

Posicionamiento absolutoEl elemento que se posiciona de forma absoluta no ocupa espacio alguno en eldocumento. Esto significa que no deja un espacio vaco despus de ser posicionado.

Para posicionar un elemento de forma absoluta, la propiedad position se establececomo absolute. Posteriormente puedes usar las propiedades left, right, top, y bottompara colocar la caja.

Como ejemplo de posicionamiento absoluto, vamos a colocar 4 cajas en cada esquinadel 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;

}

Ver ejemplo

Posicionamiento relativoPara posicionar un elemento de forma relativa, la propiedad position se establececomo relative. La diferencia entre posicionamiento absoluto y relativo consiste en cmose calcula la posicion.

La posicin para un elemento que se posiciona de forma relativa se calcula desde laposicin original en el documento.. Esto significa que se mueve el elemento hacia laderecha, la izquierda, arriba o abajo. De este modo, el elemento sigue ocupando espacioen el documento despus de haberse posicionado.

Como ejemplo de posicionamiento relativo, podemos intentar posicionar tres imgenesde forma relativa respecto a su posicin original en la pgina. Fjate cmo las imgenesdejan 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

Capa sobre capa con z-index (Capas)CSS funciona sobre tres dimensiones: altura, anchura y profundidad. En las leccionesanteriores hemos examinado las dos primeras dimensiones. En esta leccin,aprenderemos cmo hacer que diferentes elementos se conviertan en capas. En pocaspalabras, esto hace referencia al orden en que los elementos se superponen unos conrespecto a otros.

Para tal propsito, se puede asignar a cada elemento un nmero por medio de lapropiedad z-index. El sistema consiste en que el elemento con un nmero mayor sesuperpone al elemento con un nmero menor.

Supongamos que estamos jugando al poquer y tenemos una escalera de color. La manose puede presentar de tal manera que cada carta tiene un nmero asignado por medio dez-index:

En este caso, los nmeros son consecutivos (yendo del 1 al 5), aunque se puede lograr elmismo resultado usando cinco numeros diferentes. Lo importante es la secuenciacronolgica 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 ejemploEl mtodo es relativamente sencillo pero las posibilidades que ofrece son mltiples. Esposible colocar imgenes sobre el texto, texto sobre imgenes, etc.

Apuntes CSS 1

Documents