CSS Cascade Style Sheets PARTE I

Introduccin a las hojas de estilo.

1. Preguntas comunes antes de iniciar 2. Nuevos tags y atributos para manejar las hojas de estilo. 3. Creando una hoja de estilo dentro de un documento, el tag <STYLE>. 4. Definiendo la apariencia de ciertos tags en una hoja de estilo. 5. El tag <SPAN> y sus usos. 6. El tag <DIV> y sus usos. 7. Definiendo estilos particulares. 8. Definiendo clases de estilos. 9. Definiendo estilos contextuales. 10. Definicin de estilos directamente o "al vuelo", el atributo "style". 11. Definicin de una hoja de estilo en un archivo externo. 12. Conclusin de este captulo.

1. PREGUNTAS COMUNES ANTES DE INICIAR.

Qu es una hoja de estilo? Una hoja de estilo es un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML. En otras palabras una hoja de estilo nos permite indicar por ejemplo el tamao de la fuente, color y estilo de cierto prrafo que nosotros indiquemos, mediante la definicin de estilos y aplicacin de los mismos. Si existen tags para formatear texto y otros elementos para qu sirven las hojas de estilo? Las hojas de estilo se usan porque tienen muchas ventajas sobre los tags tradicionales, ya que por ejemplo es posible crear una sola hoja de estilo que compartan muchos documentos, y al hacer un cambio en la hoja de estilo todos los documentos que la usan tendrn la apariencia deseada. Tambin se puede tener control sobre ciertos aspectos que antes no se tenia, por ejemplo se pueden definir los mrgenes de un documento o prrafo, o definir el espacio entre caracteres. Las hojas de estilo eliminan los tags para dar apariencia al texto HTML? Se puede decir que si, ya que la ultima especificacin del HTML, HTML 4.0, desaprueba el uso de los principales tags para formatear texto y sus atributos, como por ejemplo el tag <FONT>, <CENTER>, entre otros. El hecho de que esta especificacin desapruebe esos tags indica que posiblemente en la prxima especificacin de HTML (actualmente bajo desarrollo bajo el nombre cdigo "Cougar"), estos tags quedarn obsoletos. Cuales son las desventajas de las hojas de estilo sobre los tags tradicionales? Tericamente no existe ninguna desventaja para las hojas de estilo, ya que por donde se vea son muy superiores a los tags de estilo tradicionales. Por el momento la nica desventaja es que solo los navegadores de cuarta generacin apoyan las hojas de estilo, como por ejemplo Netscape Communicator 4.01 o posteriores, y

Microsoft Internet Explorer 4.0, Internet Explorer 3.0 tambin ofrece cierto apoyo a las hojas de estilo en cascada. Los lanzamientos de Internet Explorer 5.0 y Communicator 5.0 estandarizarn el uso de las hojas de estilo en poco tiempo. Cul es la importancia de las hojas de estilo? Las hojas de estilo son la innovacin ms importante al HTML (tambin se usan en otros lenguajes como XML y SGML), ya que le dan capacidades que nunca tuvo, entre otras mencionaremos... El uso de diversas unidades de medicin pixeles, puntos, picas, mm, en los principales elementos del HTML, como son tablas, fuentes, bordes y en general los elementos que tenan atributos como "size" "height" "width". El posicionamiento de bloques de texto en cualquier parte del documento HTML, ya que es posible definir en diversas unidades la posicin de un bloque de texto. Mejor control sobre las fuentes que es necesario para otras tecnologas relacionadas como la fuentes dinmicas. El poder cambiar las caractersticas de una hoja de estilo mediante el uso de lenguajes de programacin web como "Javascript" o "VB script". Las hojas de estilo son la base de la implementacin estndar del HTML dinmico o DHTML. Cuales son los tipos de hojas de estilo? Existen actualmente dos tipos de hojas de estilo, las hojas de estilo tipo "CSS" (cascading style sheet) y las hojas de estilo en Javascript, este tutorial bsico esta enfocado en las hojas de estilo CSS porque son mas populares, son estndar en todos los browsers que soportan hojas de estilo y adems porque no es necesario tener conocimientos de programacin para manejarlas.

2. Nuevos tags y atributos para manejar las hojas de estilo.

Para manejar las hojas de estilo se han agregado nuevos tags y atributos al HTML, afortunadamente son pocos. Los tags nuevos son: <STYLE> que sirve para definir una hoja de estilo dentro de un documento HTML. <SPAN> que sirve para definir un bloque de texto o elementos a los cuales se aplicar un estilo. Los atributos nuevos son: "style" que permite usar las caractersticas de una hoja de estilo directamente a un bloque de texto o elementos. "class" permite marcar un bloque de texto o elementos como miembro de una clase de estilo definida en una hoja de estilo. "id" sirve para identificar un bloque de elementos o texto y aplicar un estilo definido en una hoja de estilo para ese elemento. Estos tags y atributos sern explicados detalladamente mas adelante.

3. Creando una hoja de estilo dentro de un documento, el tag <STYLE>.

Para crear una hoja de estilo dentro de un documento se usa el tag <STYLE>, este tag se usa en la cabeza del documento, es decir despus del tag <HEAD> y antes del tag </HEAD>, este tag tiene un atributo que deben usarse para un mejor funcionamiento de la hoja de estilo. Esta tabla muestra el tag <STYLE> y el significado de los valores posibles de sus atributos. Atributo type Valor posible "text/css" para cascading style sheet o "text/javascript" para Javascript. Ejemplo de uso <STYLE type=text/css"> Significado Este atributo le dice al navegador que tipo de sintaxis usa la hoja de estilo.

Aunque no es necesario se recomienda usar el atributo "type". A continuacin se muestra como se usa el tag <STYLE>. Ejemplo <HTML> <HEAD> Diversos datos de la cabeza del documento..... <STYLE type="text/css"> <!-Definicin de los diversos estilos y sus caractersticas. --> </STYLE> </HEAD> <BODY> Contenido del documento... </BODY> </HTML> Como se puede ver el tag <STYLE> esta en la cabeza del documento como lo indicamos en la parte anterior, este tag debe cerrarse, porque el navegador considera todo lo que se escribe despus del primer tag como parte de un hoja de estilo.

Tambin se puede ver que se usaron los signos de comentario <!-- --> , los smbolos de comentario se usan para ocultar la hoja de estilo de los navegadores que no soportan hojas de estilo.

4. Definiendo la apariencia de ciertos tags en una hoja de estilo.

Para definir las caractersticas o apariencia de un tag en una hoja de estilo, se debe usar el nombre del tag acompaado de los smbolos "{" y "}" de la siguiente forma: <STYLE> <!-H1 {Definicin de la apariencia de este tag...} P {Definicin de la apariencia para este tag...} --> </STYLE> Como se puede ver la definicin del estilo para el tag debe incluirse entre los tags <STYLE> y los signos de comentario, luego se escribe el nombre del tag (sin usar los smbolos "<" y ">"), un espacio despus o junto se abren las llaves "{" y "}" dentro de las cuales se incluirn los atributos de estilo que se indiquen. Se pueden definir varios estilos para diversos tags, en el ejemplo anterior los estilos que se definieran se aplicaran a los tags <H1> y <P>. Ejemplo: <STYLE> <!-H3 {color:#ff0000; font-style:italic; text-align:center;} /*Esta hoja define la apariencia para el tag <H3> */ --> </STYLE> Luego en el documento se usa el tag por ejemplo de la siguiente forma: <H3>Tag headline 3 color rojo y centrado.</H3> el navegador interpreta el tag usando la definicin de la hoja de estilo de la siguiente forma. Tag headline 3 color rojo y centrado. Como puede verse el navegador usa algunas caracteristicas predeterminadas del tag <H3> adems de usar las que se definieron en la hoja de estilo.

En el ejemplo hay un comentario escrito entre los smbolos "/*" y "*/" (signos familiares en C/C++, Java y Javascript), estos smbolos sirven para incluir comentarios dentro de una hoja de estilo, todo lo que se escriba dentro de estos smbolos se considerara comentario y no tendr ningn efecto dentro del estilo. Lo que se incluye entre las llaves "{" y "}" son las propiedades del estilo, en este ejemplo "color:#ff0000" se refiere al color del texto, "font-style:italic" indica que la fuente ser cursiva, "text-align:center" indica que el texto va centrado. Quiz no queden claro del todo estas propiedades, mas adelante explicaremos las diversas propiedades y sus posibles valores. A continuacin explicaremos como deben escribirse las propiedades de un estilo estilo {propiedad:valor; propiedad:valor; propiedad:valor; propiedad:valor; propiedad:valor;} El nombre de la propiedad debe escribirse en minsculas, a continuacin deben usarse dos puntos ":", el valor del atributo debe escribirse a la derecha del smbolo ":" y cuando se termine de indicar el valor se debe usar el smbolo ";" punto y coma, cuando se usen varias propiedades, estas deben separarse con espacios. o ponerse en otro rengln. A continuacin se presenta otro ejemplo: <HTML> <HEAD> <TITLE>Un simple ejemplo</TITLE> <STYLE type="text/css"> <!--H1{color:red;} BLOCKQUOTE{color:blue;} CENTER{color:olive;} --> </STYLE> </HEAD> <BODY>

<H1>Tag Headline 1 con texto rojo.</H1> <BLOCKQUOTE>Aplicacin del tag "blockquote" con texto azul.</BLOCKQUOTE> <CENTER>Texto centrado de color verde oliva.</CENTER> </BODY> </HTML> El navegador interpreta el documento anterior as: Tag Headline 1 con texto rojo. Aplicacin del tag "blockquote" con texto azul. Texto centrado de color verde oliva. Espero que con los anteriores ejemplos haya quedado claro como aplicar estilo a los tags existentes en HTML, de lo contrario lea por favor otra vez la parte anterior, tambin puede enviarme un e-mail para aclarar sus dudas a lunamatic@yahoo.com. Recuerde que mas adelante se explicarn con detalle las diversas propiedades de los estilos.

5. El tag <SPAN> y sus usos.

Como lo mencionamos anteriormente el tag <SPAN> es uno de los nuevos tags que se han agregado al HTML para poder manejar y aplicar estilos, este tag se usa para marcar bloques de texto, por ejemplo: <SPAN> El veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu. </SPAN> El tag <SPAN> por si mismo no tiene ningn efecto, hasta que se usa alguno de sus atributos, la siguiente tabla muestra esos atributos. Atributo id Valor Una palabra que identifique el nombre de un estilo Una palabra que de nombre a una clase de estilo. Ejemplo <SPAN id="rojillo"> Significado En este ejemplo se asigna el estilo llamado "rojillo" . En este ejemplo se identifica como miembro de la clase "describe" a cierto bloque de texto En el ejemplo anterior se aplica directamente un estilo a cierto bloque de texto.

class

<SPAN class="describe">

style

Diversos atributos en formato CSS

<SPAN style="color:red; textalign:center;">

Los atributos "id" y "class" no son exclusivos del tag <SPAN>, se pueden usar el mayora de los tags del HTML, el atributo "style" tambin se puede usar en la mayora de los tags, este ultimo se explicar mas adelante.

6. El tag <DIV> y sus usos.

El tag <DIV> no es del todo nuevo, en HTML 4 este tag tambin funciona con los atributos "id", "class" y "style", el tag <DIV> se puede usar como alternativa al tag <SPAN>, la nica diferencia entre estos dos tags es que el tag <DIV> provoca un salto de linea al terminar de definir un prrafo, y el tag <SPAN> deja el texto que va despus de su uso inmediatamente despus que este termina.

7. Definiendo estilos particulares.

A veces es necesario definir un estilo que solo se aplicar en una parte del documento y no a todos los tags de cierto tipo u otras partes del documento. Para solucionar el problema anterior se definen estilos particulares de la siguiente forma: #Nombre_de_estilo{diversos atributos del estilo... }

1. Se usa el smbolo "#" antes del nombre de estilo e inmediatamente despus

(sin espacios) el nombre del estilo. 2. Se puede usar cualquier nombre de estilo de una sola palabra, siempre y cuando no exista ya un estilo con ese nombre. 3. Se usan las llaves "{" y "}" de la misma forma que en los ejemplos anteriores. 4. Para aplicar el estilo se debe de usar un tag con el atributo "id" cuyo valor sea el nombre del estilo, para un estilo particular no se puede usar el atributo "class". Por ejemplo <STYLE> <!-#mi_estilo{color:red; text-align:left;} --> </STYLE> Luego se aplica el estilo en el documento. <SPAN id="mi_estilo">Este prrafo usa un estilo definido</SPAN> Como se puede ver se define el estilo en la hoja de estilo y posteriormente se debe aplicar a travs de un atributo "id" en cualquier tag solo una vez. A continuacin se muestra otro ejemplo: <HTML>

<HEAD> <TITLE>Otro estilo</TITLE> <STYLE type="text/css"> <!-BODY{background-color:gray;} #estilouno{color:navy; text-align:center;} #estilodos{color:red; text-align:right;} #estilotres{color:blue;} --> </STYLE> </HEAD> <BODY> <SPAN id="estilouno">Este texto esta definido usando un estilo</SPAN> <DIV id="estilodos">Este texto tambin esta definido usando un estilo.</DIV> <P id="estilotres">Este texto tambin.</P> </BODY> </HTML> El navegador interpretara el documento anterior as: Este texto esta definido usando un estilo. Este texto tambin esta definido usando un estilo. Este texto tambin. Como se puede ver en la hoja de estilo se definieron tres estilos particulares que despus se aplicaron usando el atributo "id" en diversos tags, tambin se defini el estilo del tag <BODY> que define las caracteristicas del cuerpo del documento.

8. Definiendo clases de estilos.

Se puede definir un estilo que no se aplicar solo a cierta parte del documento o a ciertos tags, si no a muchos otros elementos de un documento, esto se logra definiendo una clase de estilo de la siguiente forma: .mi_estilo{caracteristicas del estilo...}

1. Una clase de estilo se define usando un punto e inmediatamente despus el

nombre que tendr la clase de estilo, tambien se puede usar un "*" antes del punto. Se podra usar la palabra "all" antes del punto, pero esto no trabaja con Microsoft Internet Explorer 5.0. 2. Se usan las llaves y propiedades de la misma forma que en los ejemplos anteriores. 3. El estilo se aplica en diversas partes del documento a travs del atributo "class" usado en varios tags, el valor del atributo "class" ser el nombre de la clase de estilo. Ejemplo: <STYLE type="text/css"> <!-.nuestro_estilo{color:blue; text-align:center;} --> </STYLE> Luego se aplica el estilo usando el atributo "class" en uno o mas tags. <DIV class="nuestro_estilo">Nuestro estilo aplicado aqui</DIV> <P class="nuestro_estilo">Estilo aplicado otra vez.</P> <H1 class="nuestro_estilo">Otra vez aplicamos el estilo.</H1> Un ejemplo mas complejo es: <HTML> <HEAD> <TITLE>Un ejemplo mas</TITLE> <STYLE> <!- BODY{background-color:red;} .nuestro_estilo{color:white; text-align:center;} #titulo{color:yellow;} .otro{color:aqua;} -->

</STYLE> </HEAD> <BODY> <DIV id="titulo">TITULO</DIV> <SPAN class="nuestro_estilo"> El veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu. </SPAN> <p class="otro"> Otro estilo, otro estilo, otro estilo</p> <SPAN class="nuestro_estilo"> Otra vez aplicamos nuestro estilo</span> <DIV class="otro">Aplicar estilos</DIV> </BODY> </HTML> El navegador interpretar el documento anterior as: TITULO El veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu. Otro estilo, otro estilo, otro estilo Otra vez aplicamos nuestro estilo Aplicar estilos En el ejemplo anterior se definieron dos clases de estilos y un estilo particular ademas del estilo del cuerpo del documento.

9. Definiendo estilos contextuales.

Ya vimos como especificar la apariencia de ciertos tags, como crear un estilo y aplicarlo a diversas partes del documento, y como crear un estilo exclusivo de cierta parte del documento, sin embargo a veces se quiere tener un estilo que se aplique en casos aun ms especficos. Por ejemplo se desea que solo los tags <BLOCKQUOTE> dentro de tags <P> tengan texto de color rojo, o por ejemplo se desea que solo los tags <H3> de cierta clase dentro de tags <BLOCKQUOTE> tengan determinado color. Esto es posible usando un criterio de seleccin contextual en la definicin de la hoja de estilo, por ejemplo. P BLOCKQUOTE {color:red;} La definicin del estilo anterior indica que los tags <BLOCKQUOTE> usaran texto color rojo cuando estn dentro o anidados dentro de tags <P>.

El estilo se define usando los nombres de los tags separados por espacios, el criterio para la aplicacin del estilo se le de derecha a izquierda, como en el ejemplo anterior el estilo se aplica a los tags <BLOCKQUOTE> que estn dentro de tags <P>, otro ejemplo seria. BLOCKQUOTE P UL LI{color:blue; font-weight:bold;} En el ejemplo anterior se indica que se utilizara letra azul de tipo negrita en los tags <LI> de listas que estn dentro de tags <P> que a su vez estn dentro de tags <BLOCKQUOTE>. Tambin es posible definir un clase de criterio contextual, por ejemplo: H1.miencabezado{color:blue; text-align:center;} El estilo anterior indica que solo se aplicara el mismo a los tags <H1> que sean de la clase "miencabezado". Para aplicar el estilo se tendra que escribir en el documento el tag <H1> de la siguiente forma: <H1 class="miencabazado">Este es mi encabezado.</H1> Un ejemplo mas complejo de las diversas formas de usar la seleccin contextual de estilos es: <HTML> <HEAD> <TITLE>Otro ejemplo mas</TITLE> <STYLE> <!-BODY{background-color:silver;} H1 H3 BLOCKQUOTE EM{color:purple; font-style:italic; font-weight:bold;} P H1.tu_estilo{color:maroon;} --> </STYLE> </HEAD> <BODY> <H1>Esta parte del documento esta usando el tag heading 1<H3>Ahora estamos usando el tag heading 3 . <BLOCKQUOTE>Ahora usamos una sangra<EM>Ahora usamos texto con nfasis al cual se le aplica un estilo contextual</EM>Volvemos al texto con sagria</BLOCKQUOTE>volvemos al texto heading3</H3> volvemos al texto de heading 1

</H1> <H1>Texto heading 1 sin un estilo contextual asignado</H1> <P><H1 class="tu_estilo">Este es tu estilo</H1></P> <EM>Texto con nfasis sin un estilo contextual aplicado. </EM> </BODY> </HTML>

Esta parte del documento esta usando el tag heading 1

Ahora estamos usando el tag heading 3 .
Ahora usamos una sangra Ahora usamos texto con nfasis al cual se le aplica un estilo contextual, Volvemos al texto con sangra volvemos al texto heading3

volvemos al texto de heading 3

Texto heading 1 sin un estilo contextual asignado Este es tu estilo

Texto con nfasis sin un estilo contextual aplicado.
Como se puede ver el estilo se aplica solo en los estilos cuyo contexto cumple con el criterio especificado.

10. Definicin de estilos directamente o "al vuelo", el atributo "style".

Es posible definir un estilo directamente dentro de cierto tag, esto se hace cuando se desea definir un estilo sencillo o que no se va a usar en otro lado. Para definir estilos directamente se usa la palabra "style" como atributo dentro de casi todos los tags estndar del HTML, por ejemplo: <H1 style="color:red; font-weight:bold;">Heading 1 color rojo y letra tipo negrita</H1> Como se puede ver se usa el atributo style de la siguiente forma:

< TAG style="atributo:valor; atributo:valor; atributo:valor;">

1. Se escribe el atributo dentro de cualquier tag que lo soporte. 2. Mediante un signo igual y comillas se asignan los diversos atributos del
estilo.

3. Los atributos se escriben igual que como los hemos venido usando, es decir
nombre del atributo, dos puntos, valor del atributo, punto y coma. Si se usan varios atributos se separan con espacio o se ponen en otro rengln. 4. Es necesario cerrar el tag en el cual se aplic el estilo. Un ejemplo de uso es: <P style="text-align:center; font-style:italic; font-weight:bold; color:purple;">Estilo definido directamente mediante el uso del atributo "style".</P> El navegador interpretar los tags anteriores de la siguiente forma: Estilo definido directamente mediante el uso del atributo "style" En general se recomienda definir un estilo en la hoja de estilo, solo en algunos casos es til definir el estilo directamente.

11. Definicin de una hoja de estilo en un archivo externo.

Es posible crear un hoja de estilo en un archivo externo y mediante un tag aplicarla a cierto documento, esta caracterstica de las hojas de estilo ofrece muchas ventajas, ya que es posible que diversos documentos compartan la misma hoja de estilo. Para definir en un archivo externo una hoja de estilo se usa el siguiente procedimiento.

1. Se crea un archivo de texto sin formato. 2. Se omite el tag <STYLE> y los smbolos de comentario <!-- -->, as como

cualquier tag HTML 3. Se nombra el documento con cualquier nombre, se recomienda que el documento tenga la extensin "css" que es la caracterstica de los archivos de hoja de estilo en cascada. Por ejemplo la siguiente hoja de estilo /*newstyle.css elaborada por Jorge Luna Rivero*/ .textnecio{font-family:helvetica; text-align:justify;} .fecha{font-family:helvetica; font-weight:bold; font-size:9pt; color:#ffffff; background-color:#000070; padding:3,2,3,2; width:485; float:top;

text-align:center;} .lateral{font-family:helvetica; text-align:center; font-size:8pt; color:#ffffff; padding:3,10,3,10;} .credits{ font-family:helvetica; font-size:8pt; text-align:center;} .titulo2{ color:#ff0000; font-family:helvetica; font-size:14pt;} .cuerpos{ font-family:helvetica; text-align:justify;}

Como se puede ver la hoja de estilo no incluye ningn tag HTML, esta hoja de estilo es un hoja de estilo real que yo uso en este website, incluye muchos atributos que trataremos en el siguiente captulo. Para incluir esta hoja de estilo dentro del documento HTML, se usa el tag <LINK> en la cabeza del documento, junto con ciertos atributos de la siguiente manera: <LINK rel="stylesheet" type="text/css" href="url de la hoja de estilo"> El tag <LINK> tiene diversos usos, por lo que es importante definir que se esta usando para insertar un estilo, por eso siempre se debe usar el atributo "rel" con el valor "stylesheet" cuando se usa para insertar una hoja de estilo, el atributo type con el valor "text/css" (para el caso de las hojas de estilo CSS), y el atributo "href" que especificara la ubicacin y nombre de la hoja de estilo. Por ejemplo el siguiente documento HTML. <HTML> <HEAD> <TITLE>Otro ejemplo</TITLE> <LINK rel="stylesheet" type="text/css" href="estilos/newstyle.css"> </HEAD> <BODY> Contenido del cuerpo del documento...

</BODY> </HTML> El documento anterior usara la hoja de estilo de ejemplo de esta seccin. Es posible usar varias hojas de estilo externas e internas en un documento HTML, esto se hace de la siguiente forma. <STYLE type="text/css" src="estilos/newstyle.css"></STYLE> <STYLE type="text/css" src="estilos/mainstyle.css"></STYLE> <STYLE type="text/css"> <!-.nuestro_estilo{color:blue; text-aling:center;} #mi_estilo{font-weight:bold; text-align:center; color:blue;} --> </STYLE> Como se puede ver se pueden especificar archivos externos usando el atributo "src" (cuyo valor ser el nombre y la ubicacin de la hoja de estilo) dentro del tag <STYLE>, tambin se pueden crear una hoja de estilo dentro del documento. Cuando se usa una sola hoja de estilo se debe usar el tag <LINK>. Lo que sucede al usar varias hojas de estilo es que las caracteristicas de las hojas de estilo pierden importancia de abajo hacia arriba, es decir la ultima definicin de la hoja de estilo, sobreescribe las caracteristicas de las hojas que se insertan antes de ella.

12. Conclusin de este captulo.

En esta parte hemos tratado los aspectos generales de las hojas de estilo, hemos manejado propiedades muy elementales con el fin de familiarizarnos primero con la sintaxis de las hojas de estilo y su aplicacin. Si tiene dudas lea detenidamente cada seccin, recuerde que puede enviarme un e-mail. Hasta ahora los ejemplos que hemos visto han sido sencillos y para presentarlos hemos usado emulacin mediante los tags tradicionales de HTML, la segunda parte ya emplea las hojas de estilo, por lo que es recomendable usar un navegador de cuarta generacin para que los ejemplos funcionen como por ejemplo Netscape Communicator 4.01 o posterior y Microsoft Internet Explorer 4.0 o posterior.

PARTE II
Algunas propiedades para definir estilos.
1. Introduccin al formato a nivel de bloque. 1.1 Elementos de nivel bloque. 1.2 Elementos en linea. 1.3 Formato de los elementos a nivel bloque. 2. Propiedades para elementos a nivel de bloque. 2.1 Color de fondo. 2.2 Color del texto del bloque. 2.3 Tapiz de fondo. 2.4 Mrgenes. 2.5 Margenes internos. 2.6 Ancho del bloque. 2.7 Alineacin de un bloque. 2.8 La propiedad "clear". 2.9 Ancho de bordes. 2.A Color del borde. 2.B Estilo del borde. 2.C Ejemplo de uso de los atributos de bloque. 3.Propiedades de las fuentes. 3.1 3.2 3.3 3.4 3.5 Tipo de fuente. Letra cursiva. Peso de la fuente. Tamao de la fuente. Ejemplo de los diversos atributos de las fuentes.

4. Propiedades para el texto. 4.1 Altura de un rengln "line-height". 4.2 Decoracin del texto, la propiedad "text-decoration". 4.3 La propiedad "text-transform". 4.4 Alineacin del texto, la propiedad "text-align". 4.5 Sangra de la primera linea, la propiedad "text-indent". 4.6 Ejemplo de las propiedades para estilos de texto. 5. Miscelneos. 5.1 Unidades. 5.2 Herencia. 5.3 Acerca de las recomendaciones CSS-1 y CSS-2. 6. Fin de este captulo.

1. Introduccin al formato a nivel de bloque.

1.1 Elementos de nivel bloque.
Un elemento a nivel bloque es aquel que provoca una ruptura de linea antes y despus de su aplicacin, por ejemplo los tags de encabezado (<H1>,<H2>,<H3>,<H4>,<H5> y <H6>), el tag <P>, e incluso el tag <BODY>.

1.2 Elementos en linea.

Un elemento en linea es aquel que conserva el texto que esta antes y despus de el en la misma linea, por ejemplo el tag <EM>, <STRONG>, entre otros.

1.3 Formato de los elementos a nivel bloque.

En las hojas de estilo se considera a los elementos a nivel de bloque como si estuvieran encerrados en una caja, mediante esta metfora es posible definir mrgenes, bordes y la apariencia de los mismos, color de fondo, papel tapiz, alineacin del texto, ancho del bloque, entre otras caracteristicas.

2. Propiedades para elementos a nivel de bloque.

2.1 Color de fondo.
Es posible definir el color de fondo de un bloque, mediante el uso de la propiedad "background-color", el color de fondo se puede especificar de diversas formas, como una palabra clave, como un valor RGB hexadecimal, como un valor RGB decimal y como un valor rgb porcentual, por ejemplo: ESTILO{ background-color:#ff0000; } ESTILO{ background-color:red; } ESTILO{ background-color:rgb(255, 0, 0);} ESTILO{ background-color:rgb(100%, 0%, 0%);} En los cuatro ejemplos anteriores la palabra "ESTILO" representa la definicin de estilo (clase, particular o contextual), los cuatro ejemplos representan al color rojo. Cuando se indica el color de forma hexadecimal nicamente basta con escribir el valor del color en su representacin hexadecimal (ejemplo 1). Cuando se indica el color como palabra clave se escribe una de las 16 palabras claves de la paleta estndar de Windows (ejemplo 2). Para indicar el color en forma rgb, solo basta con separar los valores de los colores rojo, verde y azul con comas, el valor de cada color puede varia de 0 a 255 (ejemplo 3). Para indicar el color en forma porcentual solo basta con separar los valores de los colores rojo, verde y azul con comas, indicandolos como pocentajes de 0% a 100%. Si tiene dudas sobre la paleta de Windows, colores RGB o como convertirlos a valores hexadecimales consulte la apndice "colors.htm" incluida en este curso.

2.2 Color del texto del bloque.

Para especificar el color del texto del bloque se usa la propiedad "color" con su valor fijado a una de las diversas formas de manejar color igual que cuando se usa la propiedad background-color. Por ejemplo: ESTILO{color:navy;}

2.3 Tapiz de fondo.

Es posible especificar una imagen que se usara como fondo de un elemento a nivel bloque, para especificar un tapiz de fondo se usa el atributo "background-image" de la siguiente forma: ESTILO{ background-image:url(fondo.jpg);} Como en los ejemplos de esta seccin la palabra "ESTILO" se refiere a la definicin de estilo, una clase, un estilo particular o uno contextual. El atributo backgroundimage, toma siempre el valor "url(nombre y ubicacin de la imagen...)", dentro de los parentesis se debe escribir el nombre y ubicacin de la imagen.

2.4 Mrgenes.
Es posible fijar los margenes de un bloque (en este caso el margen es la distancia de los lados del bloque a los bordes del documento) usando cualquiera de los cuatro atributos que a continuacin se muestran. margin-top (margen superior). margin-bottom (margen inferior). margin-left (margen izquierdo). margin-right (margen derecho). Se pueden usar los cuatro atributos o solo uno, el valor de estos atributos puede ser de puntos, pixeles o porcentajes, por ejemplo: margin-top:20pt; (Indica el tamao del margen superior en puntos). margin-left:34px; (Indica el tamao del margen izquierdo en pixeles). margin-right:23%; (Indica el tamao del margen derecho como valor porcentual). Es importante que para mejores resultados siempre se usen los sufijos "pt" para puntos, "px" para pixeles y el smbolo "%" para los porcentajes ya que si no se indica nada algunos navegadores como Communicator 4.0+ pueden tener problemas para presentar la pgina. Tambin es posible fijar todos los margenes de una sola vez usando el atributo "margin", margin:superiorderecho inferiorizquierdo; Se especifica el tamao de cada margen separandolos por un espacio en el orden que se indic anteriormente: ejemplo: ESTILO {margin:20pt 30pt 20pt 40pt;}

2.5 Margenes internos.

Para especificar el ancho de los margenes internos de un bloque, es decir la distancia del contenido de un bloque a los bordes del mismo, se usa el atributo "padding" de la siguiente forma:

padding:superiorderechoinferiorizquierdo; Por ejemplo: padding:10pt20pt 10pt 20pt; Tambin es posible lado por lado usando los siguientes atributos: "padding-top" (superior), "padding-bottom" (inferior), "padding-left" (izquierdo) y "padding-right" (derecho). Otra opcin cuando todos los margenes son del mismo tamao es usar el atributo padding de la siguiente forma: paddding:20pt; que automticamente fija todos los margenes internos a 20 puntos, como en el caso de los margenes del documento es posible usar diversas formas para especificar el tamao como es el uso de pixeles(px), puntos(pt) o porcentajes(%), en algunos casos es posible usar picas(pc), centmetros(cm), pulgadas(in) y milimetros(mm). Recuerde siempre especificar la unidad puesto que en algunos navegadores pueden no presentar adecuadamente el estilo si no se especifican las unidades.

2.6 Ancho del bloque.

Es posible indicar el ancho de un bloque usando el atributo "width", tambin es posible especificar las unidades del ancho o usar un valor porcentual. Para fijar el ancho de un bloque se usa el atributo "width" de la siguiente forma: ESTILO { width:valor;}

2.7 Alineacin de un bloque.

Alineacin de un bloque es posible alinear un bloque con respecto a su "elemento padre", es decir un bloque con respecto al documento en el que esta, o un bloque con respecto a otro bloque dentro del cual se encuentra. Para alinear el bloque se usa el atributo "float" con alguno de los siguientes valores: "left, right, o none". Esto es muy parecido a usar el atributo "align" dentro de algn elemento como <IMG> o <TABLE>, que indicaba el lado hacia el cual flotara (saldra del flujo normal del texto) una imagen o tabla. ESTILO { float:valor;} Por ejemplo:

2.8 La propiedad clear.

La propiedad "clear", puede tomar los siguientes valores "none", "left", "right" o "both", esta propiedad sirve pare evitar que haya elementos flotando a la derecha, izquierda, o ambos lados, o que se permita la flotacin de elementos a cualquier lado. La siguiente tabla explica los cuatro valores posibles. valor de "clear" "both" ejemplo clear:both; significado Cuando se tiene este valor no se permite que haya flotando elementos en ningn lado del bloque. Cuando se tiene este valor no esta permitido que haya elementos flotando a a la izquierda del bloque. Cuando se tiene este valor no esta permitido que haya elementos flotando a la derecha del bloque. En este caso se permite que haya elementos flotando a cualquier lado del bloque. Este es el valor predeterminado.

"left"

clear:left;

"right"

clear:right;

"none"

clear:none;

Es importante decir que no es necesario usar este atributo siempre.

2.9 Ancho de bordes.

Es posible especificar el ancho de los bordes de un bloque usando el atributo "border-width", por ejemplo: ESTILO {border-width:12px;} En este caso se indica que el ancho del borde de un bloque es de doce pixeles. Tambin es posible fijar el ancho de cada lado del borde usando uno o todos los siguientes atributos: "border-top-width" (ancho del borde superior). "border-bottom-width"(ancho del borde inferior).

"border-left-width" (ancho del borde izquierdo). "border-right-width" (ancho del borde derecho). Los atributos anteriores se pueden usar por ejemplo de la siguiente manera: ESTILO {border-top-width:12px; border-bottom-width:10px; border-left-width:5px; border-right-width:4px;}

2.A Color del borde.

Es posible especificar el color del borde de un elemento a nivel bloque usando el atributo "border-color" de la siguiente manera: ESTILO{border-color:color;} El valor del atributo "border-color" puede ser cualquier valor de color especificado usando diversas formas, tal como las que se usan en el atributo "backgroundcolor".

2.B Estilo del borde.

Existe un atributo mas para los bordes de un bloque, el atributo "border-style", permite seleccionar uno de los ya varios estilos de bloque predefinidos, los cuales se pueden seleccionar usando uno de seis valores: "solid", "double", "inset", "outset", "groove" y "ridge", puede ver los diversos estilos de borde haciendo click en el vinculo ejemplo.

2.C Ejemplo de uso de los atributos de bloque.

Aqu se puede ver el cdigo de un documento en el que se muestran todos los atributos mostrados anteriormente. <HTML> <HEAD> <TITLE>Ejemplo 1</TITLE> <STYLE type="text/css"> <!-P{background-color:black; color:purple; width:400px; border-color:blue; border-width:12px;} .tuestilo{background-image:url(greenmar.gif); color:yellow; border-style:inset; border-width:5pt; float:left; width:60px;}

H1{background-color:#afaefd; width:40px; clear:both; padding-right:10px; padding-top:12px; color:navy;} H3{background-color:blue; margin-left:14px; margin-top:35px;} --> </STYLE> </HEAD> <BODY> <P>Este bloque debe tener texto purpura con un fondo negro y ancho de 400 pixeles, asi como un borde azul con un ancho de 12 pixeles. Ya que definimos en la hoja de estilo la apariencia que se usar con el tag P </P> <DIV class="tuestilo">Este bloque usar la clase de estilo que nombramos "tuestilo", usar una imagen como fondo asi como un borde estilo "inset" con un ancho de 5 puntos, permitir que haya elementos flotando a su derecha y tendr un ancho de 60 pixeles.</DIV> <H1>Entre otras caracteristicas este bloque tiene un margen interno superior de 12 pixeles y un margen interno derecho de 10 pixeles.</H1> <H3>Este bloque usar un margen izquierdo de 14 pixeles y uno superior de 35 pixeles</H3> </DIV> </BODY> </HTML> Para visualiza el ejemplo haga click en el vnculo ejemplo 1. Si vio el ejemplo habr podido notar que no se obtienen los resultados deseados del todo, esto se debe a los errores que tiene cada navegador, este ejemplo 1 se aproxima a lo que se desea usando Netscape Communicator y Explorer 5.0, en todos los casos se definieron los estilos como indica la especificacin CSS-1, sin embargo no se interpretan correctamente. De cualquier forma siempre es posible a base de ensayo y error obtener los resultados deseados, adems incluiremos una apndice con las trampas, trucos y bugs de cada browser.

3. Propiedades de las fuentes.

Existen cuatro propiedades para manejar fuentes en las hojas de estilo, el uso de uno varias propiedades nos permite controlar todos los aspectos de las fuentes que se pueden manejar por ejemplo en un procesador de textos. La siguiente tabla explica estas propiedades.

Propiedad "font-size"

valor posible Una cantidad de unidades, por ejemplo pixeles, puntos, etc. la palabra "italic"

ejemplo font-size:12pt;

significado A travs de este atributo se especifica el tamao de la fuente a usar en un estilo determinado. A travs de este atributo se especifica que la fuente ser cursiva, si no se usa o no se fija no suceder nada. Mediante este atributo se indica el "peso" de la fuente, es decir que tan "negrita" va a ser, si no se usa, la fuente sera normal. Este atributo especifica el tipo de fuente que se usar en un estilo.

"font-style"

font-style:italic;

"font-weight"

Las palabras "bold", font-weight:bold; "bolder", "lighter", o un nmero de 100 a 900, donde 100 es lo mas "ligero" y 900 lo ms "pesado". El nombre de la fuente que se usar, o varias fuentes alternativas separadas por comas. font-family:Arial;

"font-family"

A continuacin se explica cada propiedad de la tabla.

3.1 Tipo de fuente.

Se usa la propiedad "font-family" para especificar que fuente se usar en el estilo, es posible especificar varias fuentes a usar, en caso de que el usuario no tenga la fuente deseada, por ejemplo: ESTILO{font-style:Arial, courier, fantasy;} En el ejemplo anterior se especifica que el estilo usar fuente arial, si esta no esta disponible en el sistema del usuario se usar la fuente courier, si no esta disponible la fuente courier se usar la fantasy. Hay fuentes que son populares, por lo que no es necesario especificar fuentes alternas como en el ejemplo anterior.

3.2 Letra cursiva.

Para especificar que se usar fuente cursiva se usa la propiedad "font-style", con su nico valor "italic" de la siguiente forma: ESTILO {font-style:italic;}

3.3 Peso de la fuente.

Para especificar el peso de la fuente, es decir que tan "negrita" ser, se usa la propiedad "font-weight", con uno de los siguientes valores: "bold" (negrita). "bolder" (mas negrita). "lighter" (ligera). O usando un nmero de 100 a 900, donde 100 es equivalente a "lighter" y 900 a "bolder". Un ejemplo es: ESTILO {font-weight:bold;} Generalmente se usa este atributo con el valor "bold", puesto que casi nunca es necesario manejar un aspecto diferente del peso de la fuente.

3.4 Tamao de la fuente.

Para indicar el tamao de la fuente se usa la propiedad "font-size", como en todas las propiedades de las hojas de estilo que manejan tamao, es posible usar diversas unidades, por ejemplo: ESTILO {font-size:12pt;} fija el tamao de la fuente a 12 puntos, nuevamente quiero decir que se debe especificar siempre la unidad que se usar, puesto que de no hacerlo puede no interpretarse correctamente el estilo.

3.5 Ejemplo de los diversos atributos de las fuentes.

El siguiente documento muestra el uso de las fuentes. <HTML> <HEAD> <TITLE>UN SIMPLE EJEMPLO </TITLE> <STYLE TYPE="text/css"> <!-.miestilo{font-size:14pt; font-family:Comic Sans MS; font-weight:Bold; fontstyle:italic;} H3 {font-size:25px; font-family:Symbol; font-weight:bold;} --> </STYLE> </HEAD>

<BODY> <DIV class="miestilo">Estas lineas estn usando el estilo llamado "mi_estilo".</DIV> <H3>Esta linea aplica un estilo para el tag Heading 3.</H3> </BODY> </HTML> Para visualizar el ejemplo haga click este ejemplo debe trabajar sin problemas en todas las versiones de Netscape Communicator a partir de la 4.01 y en Microsoft Internet Explorer a partir de la versin 4.

4. Propiedades para el texto.

Adems de la posibilidad de controlar las fuentes con un estilo tambin es posible controlar otros aspectos, esto se puede hacer a travs de los atributos: "lineheight", "text-decoration", "text-transform", "text-align" y "text-indent".

4.1 Altura de un rengln "line-height".

Mediante este atributo se puede especificar la altura de una linea de texto como su nombre lo indica o podramos decir que define la distancia que hay entre las dos lineas base de dos renglones adyacentes. Este atributo puede tener tres valores, un valor porcentual, un nmero entero, un valor absoluto (en pixeles, puntos, etc.). ESTILO{line-height:1.5;} ESTILO{line-height:150%;} ESTILO{line-height:200px;} El primer ejemplo dice que la altura de la linea de texto actual ser 1.2 veces el tamao de la fuente del rengln actual, el segundo ejemplo dice que la altura de la linea sera 150% del tamao de la fuente del rengln actual, el tercer ejemplo dice que la altura de la linea o rengln ser de 200 pixeles, en este ultimo caso tambin era posible usar otras unidades de medicin como puntos o picas.

4.2 Decoracin del texto, la propiedad "text-decoration".

Esta propiedad controla la decoracin del texto, especficamente controla cuatro posibles formas de presentar el texto: normal, subrayado, con una linea encima, tachado (con una linea en medio del rengln), o parpadeante. Esto se logra a travs de cuatro valores posibles: "none", "underline", "overline", "line-through" y "blink", el valor "overline" es posible que no funcione en Netscape Communicator y algunas versiones de IE ya que se este valor se defini en la especificacin CSS-2 (que por el momento tiene mas apoyo de IE 5.0), el valor "blink" no funciona en ninguna versin de MSIE hasta la 5.0. Si no se usa esta propiedad el texto sera presentado normalmente. Ejemplo:

ESTILO{text-decoration:none;} ESTILO{text-decoration:underline;} ESTILO{text-decoration:line-through;} ESTILO{text-decoration:overline;} ESTILO{text-decoration:blink;}

4.3 La propiedad "text-transform".

Mediante esta propiedad se pueden lograr tres efectos, que la letra inicial de cada palabra sea mayscula, que una o mas palabras se presenten forzosamente en maysculas o que se presenten en minsculas. Ejemplo: ESTILO{text-transform:capitalize;} ESTILO{text-transform:uppercase;} ESTILO{text-transform:lowercase;} El primer ejemplo hace que en el prrafo donde se aplico el estilo la primera letra de cada palabra sea mayscula, el segundo ejemplo hace que todas las palabras de un prrafo al que se haya aplicado el estilo se presenten en maysculas, el tercer ejemplo trabaja en forma contraria al segundo al hacer que las palabras se presenten en minsculas.

4.4 Alineacin del texto, la propiedad "text-align".

Mediante esta propiedad se puede controlar la alineacin del texto en un rengln o prrafo donde se haya aplicado un estilo, este atributo puede tener los cuatro valores posibles que son comunes en los procesadores de texto: izquierda, derecha, centrado o justificado, aunque en todas las versiones de Netscape Communicator hasta la 4.5 no es posible tener texto justificado. Los valores que puede tomar esta propiedad son: "left", "right", "center", "justify". Ejemplo: ESTILO{text-align:left;} ESTILO{text-align:right;} ESTILO{text-align:center;} ESTILO{text-align:justify;} Los cuatro ejemplos alinean texto en el orden en que se presentan, alineado a la izquierda, alineado a la derecha, centrado y justificado.

4.5 Sangra de la primera linea, la propiedad "text-indent".

Mediante esta propiedad es posible definir el sangrado de la primera linea del texto de una parte de un documento donde se aplico un estilo.

Esta propiedad solo admite valores de largos absolutos (puntos, pixeles, etc) y largos relativos (porcentajes). Por ejemplo: ESTILO{text-indent:100px;} ESTILO{text-indent:5%;} El primer ejemplo indica que la primera linea de un prrafo estar sangrada 100 px, o separada 100 pixeles del margen izquierdo del elemento que la contiene, el segundo ejemplo indica que estar separada del margen izquierdo del elemento que la contiene 5% del ancho de dicho elemento.

4.6 Ejemplo de las propiedades para estilos de texto.

Un ejemplo de todas estas propiedades de texto es: <HTML> <HEAD> <TITLE> MAS EJEMPLOS </TITLE> <STYLE type="text/css"> .subrayado{text-decoration:underline; color:red;} .tachado{text-decoration:line-through; color:blue;} .testado{text-decoration:overline; color:purple;} .parpadea{text-decoration:blink; color:green;} .sangria{text-indent:100px; color:navy;} .centrado{text-align:center; color:olive;} .capitales{text-transform:capitalize; color:silver;} .mayusculas{text-transform:uppercase; color:#aace34;} .demoaltura{line-height:150%; color:#eeee44;} </STYLE> </HEAD> <BODY> <SPAN class="subrayado">SUBRAYADO</SPAN> <SPAN class="tachado">TACHADO</SPAN> <SPAN class="testado">OVERLINE</SPAN> <SPAN class="parpadea">Parpadea</span>

<BR><BR><DIV class="sangria">SANGRIA abcdefghijklmnopqrstuvwxyz, abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz, abcdefghijklmnopqrstuvwxyz, abcdefghijklmnopqrstuvwxyz</DIV> <br> <DIV class="centrado">CENTRADO</Div> <br> <DIV class="capitales">capitales, abcdef, ghijkl, mnopq, rstuvw, xyz, capitales.</diV> <br> <DIV class="mayusculas">abcdefghijklmnopqrstuvwxyz</DIV> <p class="demoaltura"> AAAAAAAAAA<br>BBBBBBBB<br>CCCCCCCCC<br>DDDDDDDDD </p> </BODY> </HTML> El documento anterior se puede ver haciendo click en el link ejemplo. Este ejemplo trabaja en todas las versiones de Communicator a partir de la 4.01 y todas las de MSIE a partir de la 4.00, con las excepciones que se mencionaron en cada caso.

5. Miscelneos.
5.1 Unidades.
En todas la propiedades de las hojas de estilo que controlan el tamao de algo es posible usar dos tipos de unidades de medicin: absolutas y relativas. La siguiente tabla muestra las unidades relativas: Sufijo em Ejemplo line-height:3em; Significado Se refiere a la altura de la fuente del rengln actual, generalmente se usa como referencia la M. En el ejemplo se indica que la altura del rengln sera 3 veces la altura mxima de las fuentes de ese rengln. Se refiere a la mitad de la altura de la fuente usada en el rengln actual, generalmente se usa la X como referencia. En el ejemplo se indica que la altura del

ex

line-height:4ex;

rengln sera 4 veces la mitad de la altura mxima de la fuente usada. % width:12%; Este valor porcentual se toma con respecto al elemento que contiene el prrafo o rengln donde se aplico el estilo, como por ejemplo la ventana del navegador o la celda de una tabla. En este caso se indica que la fuente del estilo tendr doce pixeles de tamao, esta es una unidad relativa porque depende de la resolucin y el tamao del monitor en que se visualiza el documento. Aunque tambin podra considerarse como unidad absoluta.

px

font-size:12px;

La siguiente tabla muestra las unidades absolutas. Sufijo "pt" "pc" "in" "mm" "cm" Ejemplo font-size:12pt; textindent:12pc; width:7in; fontsize:20mm; width:23cm; Significado Al usar el sufijo "pt" se trabaja con puntos, una conocida unidad tipogrfica. Al usa el sufijo "pc se trabaja con picas que tambin son muy usadas en el mundo de la tipografa y el diseo. Mediante este sufijo se trabaja con pulgadas. Milimetros Centmetros.

5.2 Herencia.
Un elemento HTML que contiene otro elemento es considerado padre de tal elemento, de esta forma un elemento es considerado hijo del elemento que lo contiene. Por ejemplo: <BODY> <BLOCKQUOTE>Esta <STRONG>es una</STRONG>linea de texto,</BLOCKQUOTE> </BODY> En el anterior ejemplo los elementos <STRONG> y <BLOCKQUOTE> son hijos del elemento <BODY>, el elemento <STRONG> es hijo del elemento <BLOCKQUOTE>, el elemento <BODY> es padre de todos los elementos y el elemento <BLOCKQUOTE> es padre del elemento <STRONG>. Lo anterior es importante porque la mayora de las veces el elemento hijo hereda las caractersticas del elemento padre, por ejemplo: <BLOCKQUOTE style="font-size:12pt; color:red">Esta <STRONG>es</STRONG> una linea.</BLOCKQUOTE>

En el ejemplo anterior el tag <STRONG> proporcionara sus caracteristicas predeterminadas a la palabra "es", pero heredar de su elemento padre (el tag <BLOCKQUOTE>) un tamao de fuente de doce puntos. La mayora de las propiedades son heredables, por ejemplo si se desea que todo un documento use la fuente Arial, se puede hacer lo siguiente; <BODY style="font-family:Arial;"> De esta forma todos los elementos que sean hijos del tag <BODY> usarn fuente Arial. En general podemos decir que si un elemento hijo no especifica sus propio estilo hereda el estilo de su elemento padre.

5.3 Acerca de las recomendaciones CSS-1 y CSS-2.

Por aqu debimos empezar los captulos dedicados a las hojas de estilo. Las recomendaciones del W3C (world wide web consortium), son lineamientos este organismo publica con respecto a ciertas tecnologas que estn en desarrollo relacionadas con la Internet. Las recomendaciones CSS-1 y CSS-2 son lineamientos acerca de un lenguaje cuyo nico objetivo es definir estilos para otros lenguajes como el HTML, XML (extensible markup language), e incluso SGML (padre del HTML). Los fabricantes de los browsers de cuarta generacin dicen apoyar la especificacin CSS-1 y parte de la CSS-2 (en lo concerniente al pocisionamiento de texto). Los fabricantes de browsers prometen que la quinta generacin de sus productos apoyar totalmente la recomendacin CSS-2 que es la mas reciente, de hecho Microsoft Internet Explorer 5.0 hasta donde hemos visto cumple esta promesa. En los captulos de este curso concernientes a las hojas de estilo tratamos la especificacin CSS-1 y parte de la CSS-2. Usted puede consultar estas especificaciones en los siguientes links: Recomendacin CSS-1 Recomendacin CSS-2 De esta forma puede estudiar puntos que no tratamos por omisin voluntaria o por ignorancia. De cualquier forma este es solo un curso bsico.

6. Fin de este captulo.

En el siguiente captulo se tratar el pocisionamiento de bloques usando hojas de estilo, esta ultima caracterstica de las hojas de estilo es la base de la implementacin estndar del HTML dinmico, que no es un lenguaje nuevo sino una combinacin de HTML 4.0, hojas de estilo CSS y Javascript, Jscript o ECMAscript (estos ltimos tres lenguajes de alguna forma son lo mismo).

PARTE III
Colocacin de bloques usando CSS.
1. Introduccin al posicionamiento (o colocacin) de bloques. 2. Tipos de posicionamiento. Especificando la posicin las propiedades "left" y "top". Colocacin absoluta. Colocacin relativa. Combinaciones. Altura y ancho de un bloque, las propiedades "width" y "height". 3. Control de ciertos aspectos de los bloques. Orden de colocacin, la propiedad "z-index". Control del sobreflujo, la propiedad "overflow". Visibilidad, la propiedad "visibility". 4. Ejemplos de las propiedades tratadas en este captulo. Ejemplo de Colocacin absoluta. Ejemplo de Colocacin relativa. Ejemplo del orden de colocacin "z-index". Ejemplo del manejo del sobreflujo. 5. Fin de este captulo. Puntos a recordar para la colocacin de bloques.

1. Introduccin al posicionamiento (o colocacin) de bloques.

Uno de los aspectos mas importantes de las hojas de estilo es el hecho de que a travs de estas es posible colocar un bloque de texto en casi cualquier lugar de un documento HTML, sin importar que dicho bloque quede fuera del flujo del texto o que encime otro bloque del documento. Lo anterior es la base de la implementacin estndar del HTML dinmico, que combina el posicionamiento de bloques con la facultad que tienen las hojas de estilo de ser modificadas a travs de algn lenguaje de programacin web. No trataremos esto ltimo ya que relativamente no es tan sencillo adems de que seria necesario un curso dedicado.

2. Tipos de posicionamiento.
Bsicamente existen dos tipos de posicionamiento, el posicionamiento absoluto y el posicionamiento relativo. El posicionamiento absoluto permite colocar un bloque de texto en cualquier parte del documento sin importar el flujo del texto, este posicionamiento toma como referencia la esquina superior izquierda del elemento padre del bloque.

El posicionamiento relativo conserva el bloque en el flujo normal del texto y solo es posible definir la distancia de los bordes superior e izquierdo al elemento mas cercano. Para definir el tipo de posicionamiento o colocacin de un bloque se usa la propiedad "position" con uno de dos valores: "absolute" para colocacin absoluta, "relative" para colocacin relativa. Ejemplo: ESTILO {position:absolute;} ESTILO {position:relative;} Cabe mencionar que cuando hablamos de bloque nos referimos a la parte del documento donde se aplica un estilo usando los tags <DIV> y <SPAN>.

2.1 Especificando la posicin las propiedades "left" y "top".

Como lo mencionamos en ambos tipos de colocacin (relativa o absoluta) la posicin del bloque se define con respecto a los bordes izquierdo y superior del mismo, esto se hace usando las propiedades "left" y "top". La tabla siguiente explica estas dos propiedades. Propiedad Valor posible top Ejemplo Significado de la propiedad. Define la distancia entre el borde superior del bloque que se colocar y el borde superior de su elemento padre. Define la distancia entre el borde izquierdo del bloque que se colocar y el borde izquierdo de su elemento padre.

left

En ambos casos una top:0px; cantidad especificada usando una unidad relativa o absoluta o la palabra "auto" que left:230px; es equivalente a no usar la propiedad.

Estas dos propiedades se usan junto con la propiedad "position" ya que no trabajan por si solas. Un ejemplo de uso es: <STYLE type="text/css"> #mibloque{position:absolute; top:20px; left:25px;} </STYLE> Si la definicin de estilo anterior se aplicara a un bloque seria interpretada de la siguiente forma:

En el caso de la colocacin absoluta no importa que el bloque una vez colocado quede encima de otro bloque.

2.2 Colocacin absoluta.

La colocacin absoluta como lo hemos venido mencionando se establece a partir de usar la propiedad "position" con el valor "absolute". Esta colocacin se hace con respecto la distancia entre los bordes izquierdo y superior del elemento al que se aplica el estilo y su elemento padre.

2.3 Colocacin relativa.

Este tipo de colocacin se considera relativa porque se toma como referencia el lugar que le correspondera al elemento al que se aplica el estilo si este se conservara en el flujo normal del texto. La colocacin relativa se establece usando la propiedad "position" con el valor "relative". En este caso la posicin se define a travs de la distancia que existe entre los bordes izquierdo y superior del elemento al que se aplica el estilo y el elemento mas cercano en el flujo del texto. Ejemplo: <STYLE type="text/css"> #tubloque{position:relative; top:30px; left:40px;} </STYLE> Si el estilo anterior se aplicara a un bloque se vera as en un navegador.

2.4 Combinaciones.
Es posible que existan elementos con colocacin absoluta anidados dentro de un elemento con colocacin relativa o que haya elementos con colocacin relativa anidados dentro de un elemento con colocacin absoluta. Por ejemplo: <STYLE type="text/css"> #miestilo{position:relative; top:12px; left;12px;} #tuestilo{position:absolute; top:20px; left:15px;} </STYLE> Los estilos definidos se aplicaran en un documento as: <SPAN id="miestilo"> Mi estilo <DIV id="tuestilo">Tu estilo</DIV> </SPAN> Al ser interpretados se veran as:

2.5 Altura y ancho de un bloque, las propiedades "width" y "height".

Es posible especificar el ancho y la altura de un bloque, esto se hace utilizando las propiedades "height" y "width", estas propiedades se usan de la forma que mencionamos en el captulo anterior, por ejemplo: #miestilo{position:absolute; top:20px; left:20px; height:60px; width:60px;} Si el estilo se aplicara a un bloque en un documento se vera as:

Como estas propiedades ya se mencionaron en el captulo anterior solo mencionaremos que en Netscape Communicator y Microsoft Internet Explorer 4 el valor por default de estas propiedades es 100%, en Internet Explorer 5 el valor por default es "auto" que significa que el ancho del bloque se ajustar a su contenido.

3. Control de ciertos aspectos de los bloques.

3.1 Orden de colocacin, la propiedad "z-index".

Como lo hemos venido mencionando es posible encimar varios bloques de texto, para controlar que bloque quedara al frente de los otros bloques se usa la propiedad "z-index" que se basa en la convencin que el eje "z" es el eje que va del monitor al usuario, por lo que un bloque con un "z-index" mayor se coloca adelante de aquel bloque cuyo "z-index" sea menor. La propiedad "z-index" solo puede tener valores numricos enteros relativos al orden de colocacin como lo hemos mencionado un valor mayor sita al bloque adelante de los bloques cuyo "z-index" sea menor, por ejemplo: #miestilo{position:absolute; z-index:20;}

3.2 Control del sobreflujo, la propiedad "overflow".

Es lgico que cuando se define un bloque de cierto tamao su contenido puede exceder el tamao del bloque, para controlar la conducta que tomar el browser se usa la propiedad "overflow" con uno de cuatro valores posibles: "hidden", "visible", "auto", "scroll". A continuacin una tabla explica el significado de cada valor. Valor "hidden" Ejemplo Significado

overflow:hidden; En este caso se indica que cuando el contenido del bloque exceda el tamao de este debe ocultarse todo lo que quede fuera de las dimensiones del bloque. overflow:visible; En este caso se indica que cuando el contenido del bloque exceda el tamao especificado para este, se deber modificar la altura o anchura del bloque como se requiera. En este caso cuando el contenido exceda las dimensiones del bloque, el browser debe mostrar barras de desplazamiento para poder visualizar el sobreflujo. En este caso sin importar que haya o no sobreflujo el bloque mostrara barras de desplazamiento.

"visible"

"auto"

overflow:auto;

"scroll"

overflow:scroll;

La propiedad "overflow" es posible que solo trabaje con todos los valores mencionados en Microsoft Internet Explorer 5.0, en Communicator 4.x y algunas versiones de IE 4.0 no funcionan los valores "auto" y "scroll".

3.3 Visibilidad, la propiedad "visibility".

Esta propiedad permite hacer que un bloque sea visible o que este oculto, solo tiene dos valores posibles la palabra "visible" para un bloque visible y "hidden" para un bloque oculto. En condiciones normales esta propiedad no tiene gran utilidad, su utilidad solo se aprecia cuando se usa un lenguaje de programacin web para hacer DHTML.

4. Ejemplos de las propiedades tratadas en este captulo.

Los siguientes ejemplos muestran las diferentes propiedades tratadas en este captulo:

4.1 Ejemplo de Colocacin absoluta.

<HTML> <HEAD> <STYLE type="text/css"> #bloque1{position:absolute; color:white; top:25px; left:50px; height:150; width:100; background-image:url(greenmar.gif);} #bloque2{position:absolute; color:yellow; top:150px; left:150px; height:150; width:200; background-image:url(greenmar.gif);} </STYLE> </HEAD> <BODY> <DIV id="bloque1"> Bloque 1 usando el estilo llamado "bloque1"</DIV> <DIV id="bloque2">Bloque 2 usando el estilo llamado "bloque2"</</DIV> </BODY></HTML> Para ver este ejemplo haga click aqu.

4.2 Ejemplo de Colocacin relativa.

<HTML> <HEAD> <STYLE type="text/css"> #bloque1{position:relative; top:20px; left:20px; height:100; width:100; background-color:#ffeeee;} #bloque2{position:relative;

top:15px; left:70px; height:150; width:150; background-color:#eeeeff;} </STYLE> </HEAD> <BODY> Flujo del texto, flujo del texto, flujo del texto, <SPAN id="bloque1"> Bloque 1 con posicin relativa al flujo del texto</SPAN> Flujo del texto, <BR> flujo del texto, flujo del texto, flujo del texto, <SPAN id="bloque2">Bloque 2 con pocisin relativa al flujo del texto</</SPAN> flujo del texto, flujo del texto, </BODY> </HTML> Para ver este ejemplo haga click aqu.

4.3 Ejemplo del orden de colocacin "z-index".

<HTML> <HEAD> <STYLE type="text/css"> #bloque1{position:absolute; top:20px; left:20px; height:70; width:300; z-index:1; font-family:helvetica; font-size:17pt; color:red;} #bloque2{position:absolute; top:30px; left:30px;

height:70; width:300; z-index:4; font-family:Comic Sans MS; font-size:18pt; color:blue;} #bloque3{position:absolute; top:40px; left:40px; height:70; width:300; z-index:2; font-weight:bold; font-size:19pt; color:olive;} #bloque4{position:absolute; top:50px; left:50px; height:70; width:300; z-index:3; font-style:italic; font-weight:bold; font-size:16pt;} </STYLE> </HEAD> <BODY> <SPAN id="bloque1">Bloque 1 con "z-index" 1</SPAN> <SPAN id="bloque2">Bloque 2 con "z-index" 4</SPAN> <SPAN id="bloque3">Bloque 3 con "z-index" 2</SPAN> <SPAN id="bloque4">Bloque 4 con "z-index" 3</SPAN> </BODY> </HTML> Para ver este ejemplo haga click aqu.

4.4 Ejemplo del manejo del sobreflujo.

<HTML>

<HEAD> <STYLE type="text/css"> #bloque1{position:absolute; top:20px; left:20px; height:100; width:100; overflow:visible; font-family:helvetica; font-size:10pt; color:red; background-color:#eeeeee;} #bloque2{position:absolute; top:20px; left:200px; height:100; width:100; overflow:hidden; font-family:Comic Sans MS; font-size:10pt; color:blue; background-color:#ffffee;} #bloque3{position:absolute; top:200px; left:20px; height:100; width:100; overflow:auto; font-weight:bold; font-size:10pt; color:olive; background-color:#eeffff;} #bloque4{position:absolute; top:200px; left:200px; height:100; width:100; overflow:scroll;

font-weight:bold; font-size:10pt; background-color:#ffeeee;} </STYLE> </HEAD> <BODY> <SPAN id="bloque1"> Sobreflujo visible, sobreflujo visible, sobreflujo visible. Sobreflujo visible, sobreflujo visible, sobreflujo visible. Sobreflujo visible, sobreflujo visible, sobreflujo visible. </SPAN> <SPAN id="bloque2"> Sobreflujo oculto, sobreflujo oculto, sobreflujo oculto. sobreflujo oculto, sobreflujo oculto, sobreflujo oculto. sobreflujo oculto, sobreflujo oculto, sobreflujo oculto. </SPAN> <SPAN id="bloque3"> Sobreflujo controlado con auto, sobreflujo controlado con auto, sobreflujo controlado con auto, sobreflujo controlado con auto, sobreflujo controlado con auto, sobreflujo controlado con auto, sobreflujo controlado con auto, sobreflujo controlado con auto, sobreflujo controlado con auto, sobreflujo controlado con auto, sobreflujo controlado con auto, sobreflujo controlado con auto. </SPAN> <SPAN id="bloque4"> Sobreflujo controlado usando "scroll". </SPAN>

</BODY> </HTML> Para ver este ejemplo haga click aqu.

5. Fin de este captulo.

5.1 Puntos a recordar para la colocacin de bloques.
Para la colocacin de bloques la definicin del estilo de este debe ser particular, ya que como es lgico no es posible que mas de un bloque tenga el mismo valor al mismo tiempo en las propiedades "top", "left", "z-index" y "visibility". Los estilos se deben aplicar usando los tags <DIV> o <SPAN>, y como se trata de estilos particulares se debe usar el atributo "id" dentro del tag. Las propiedades usadas en los estilos deben estar bien escritas de lo contrario se ignorarn. La propiedad "overflow" no funciona con los valores "auto" y "scroll" en ninguna versin de Netscape Communicator hasta la 4.5 y en algunas versiones de Microsoft Internet Explorer 4.0. No olvide consultar la apndice donde se incluyen algunos de los "bugs" (errores de programacin), trucos y trampas de los browsers que soportan CSS. Las propiedades de este captulo son la base de la implementacin estndar del HTML dinmico, ya que todas son modificables a travs de algn lenguaje de scripts como Javascript. A pesar de que no tratamos el HTML dinmico en este curso las propiedades tratadas en este captulo tienen mucha utilidad aun sin tomar en cuenta sus aspectos dinmicos.

APENDICE 1
Cmo usar colores? Sumario de esta apndice.
Como aplicar color en HTML. Paleta de colores estndar. Como usar valores hexadecimales. Como obtener el valor RGB hexadecimal de cualquier color? Ejercicios. Para finalizar.

Como aplicar color en HTML.

Existen muchas formas de usar colores en HTML. El color generalmente es especificado en un atributo o propiedad de algn tag. Generalmente estos atributos o propiedades pueden ser "bgcolor" que se usa en los tags <BODY>, <TABLE>, <TD>, <TR> o tambin el atributo "color" que se usa dentro del tag <FONT>. Por ejemplo: <BODY bgcolor="#FFFFFF"> En el ejemplo de arriba el atributo o propiedad "bgcolor" se aplica al cuerpo del documento es decir en el tag <BODY>, en este caso "#FFFFFF" se refiere al color blanco en nmeros hexadecimales. Tambin se pudo haber escrito de la siguiente forma: <BODY bgcolor="White"> Otro ejemplo: <FONT color="#FF0000">Letras rojas</FONT> En este ultimo ejemplo se usa la propiedad o atributo "color" dentro del tag <FONT> se usa para asignar un color a la frase "Letras rojas", en este caso el color es rojo cuyo valor hexadecimal es "#FF0000". Tambin se pudo haber escrito de la siguiente forma: <FONT color="Red">Letras rojas</FONT>

Paleta de colores estndar.

Abajo se muestra una tabla con las palabras clave de los colores y su representacin hexadecimal, que se usa con los atributos de los elementos HTML que soportan color o las propiedades de las hojas de estilo CSS.

Nombres de colores y valores RGB en nmeros hexadecimales: Black = "#000000" Silver = "#C0C0C0" Gray = "#808080" White = "#FFFFFF" Maroon = "#800000" Red = "#FF0000" Purple = "#800080" Fuchsia = "#FF00FF" Green = "#008000" Lime = "#00FF00" Olive = "#808000" Yellow = "#FFFF00" Navy = "#000080" Blue = "#0000FF" Teal = "#008080" Aqua = "#00FFFF"

Usted puede usar cualquiera de las palabras clave o nmeros hexadecimales mostrados en la tabla de arriba. La desventaja de usar palabras clave es que usted esta sujeto solo a 16 colores, yo recomiendo usar valores hexadecimales, ya que permiten hasta 16 millones de colores, es decir permiten usar color real o color de 24 bits. La paleta de colores que se usa en HTML es del tipo RGB, es decir manipulando la intensidad de tres colores: rojo, verde o azul se puede obtener cualquier color de una gama de 16 millones.

Como usar valores hexadecimales.

No es difcil usar nmeros hexadecimales, si usted tiene que ver algo con el mundo de la electrnica o la programacin de computadoras, seguramente estar familiarizado con su uso. Aun si usted no ha trabajado nunca con nmeros hexadecimales tambin le parecer fcil. Para usar nmeros hexadecimales como valor de los atributos "bgcolor" o "color" se usa la siguiente "sintaxis": #RRGGBB Se usa el smbolo "#" para indicar que se trata de un valor y no una palabra clave. Los dos primeros dgitos "RR" se usan para el valor hexadecimal del color rojo que puede ser cualquier nmero hexadecimal de 00 a FF. El par de dgitos del centro "GG" se usa para los valores del color verde que tambin puede ser cualquier nmero hexadecimal de 00 a FF. El ltimo par de dgitos "BB" se usa para el valor del color azul tambin puede ser cualquier nmero hexadecimal de 00 a FF. Por ejemplo para el color rojo "#FF0000" se puede notar que el primer par de dgitos que se refieren al color rojo esta en su valor mximo que en este caso es FF, los otros dgitos estn en su valor mas bajo que en este caso es el 00, por eso se visualiza el color rojo. Como obtener el valor RGB hexadecimal de cualquier color? Para obtener el valor RGB en nmeros hexadecimales de cualquier color primero es necesario obtener el valor RGB en nmeros decimales, el valor en nmeros hexadecimales se puede obtener en cualquier programa de dibujo o de edicin de mapa de bits. Abajo se muestra como ejemplo la forma de obtener los valores RGB

en nmeros hexadecimales en un software shareware de edicin de mapa de bits,

en este caso "Paint Shop Pro 4.14": Como se puede ver se trata de un tipo de color naranja cuyos valores RGB son rojo=200, verde=120, y azul=055. El siguiente paso es convertir estos valores a nmeros hexadecimales, esto se puede hacer con cualquier calculadora, a continuacin muestro como hacer este procedimiento para el valor rojo del color mostrado en la figura , en la calculadora de Windows95, usted puede usar cualquier calculadora para el proceso. 1. El primer paso es introducir el valor en la calculadora, en este caso es el nmero

200. Como puede ver en la parte marcada con el "ovalo" rojo se puede ver que esta seleccionada la opcin "Dec", esto le dice a la calculadora que todos los valores que se escriben en ella son nmeros decimales. 2. El siguiente paso es des seleccionar la opcin "Dec" y seleccionar la opcin "Hex", para indicar a la calculadora que queremos usar nmeros hexadecimales.

Como se puede ver al seleccionar la opcin "Hex" el nmero 200 automticamente cambia a su representacin hexadecimal que es "C8". 200 Dec = C8 Hex Para obtener la equivalencia hexadecimal de los otros valores RGB tiene que usar el mismo procedimiento que hicimos para obtener el equivalente hexadecimal del valor rojo de nuestro color. Recuerde fijar la calculadora a nmeros decimales antes de introducir el nmero decimal. El equivalente hexadecimal del valor rojo que en nmeros decimales es 200, es C8 . Abajo muestro las equivalencias hexadecimales de los otros valores, verde=120 y azul=55. 120 decimal=78 hexadecimal 55 decimal=37 hexadecimal

Poniendo juntos los valores obtenidos tenemos: 200120055 #RRGGBB #C87837 La representacin hexadecimal del color es #C87837. #C87837 Como puede ver el color obtenido es igual al color de la imagen que usamos para

este ejemplo, se puede ver abajo: Usando el procedimiento anterior es decir convirtiendo cada valor RGB a su equivalente hexadecimal, es posible obtener cualquier color. Recuerde que cada valor RGB puede ser un nmero hexadecimal de 00 a FF, o en nmeros decimales de 0 a 255. Tambin los editores de mapas de bits mas recientes presentan una opcin que nos muestra la representacin hexadecimal de un color sin necesidad de hacer conversiones, por ejemplo Paint Shop Pro 5 y superiores:

Ejercicios.
Obtenga la representacin hexadecimal para HTML de un color cuyos valores RGB en nmeros decimales son: Rojo=25 Verde=145 Azul=250. Obtenga la representacin hexadecimal para HTML de un color cuyos valores RGB en nmeros decimales son: Rojo=125 Verde=23 Azul=54.