![]() |
|
||||||
|
|||||||
|
|
|
|
|
Tutorial elaborado por Jorge
Luna Rivero
PARTE IIntroducción a las hojas de estilo.1. Preguntas comunes antes de iniciar 1. PREGUNTAS COMUNES ANTES DE INICIAR.¿Qué es una hoja de estilo? ¿Si existen tags para formatear
texto y otros elementos para qué sirven las hojas de estilo? ¿Las hojas de estilo eliminan los
tags para dar apariencia al texto HTML? ¿Cuales son las desventajas de las
hojas de estilo sobre los tags tradicionales? ¿Cuál es la importancia de las
hojas de estilo? ¿Cuales son los tipos de hojas de
estilo? 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 características 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 serán 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 después 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.
Aunque no es necesario se recomienda usar el atributo "type". A continuación se muestra como se usa el tag <STYLE>. Ejemplo <HTML> <HEAD> Diversos datos de la cabeza del documento..... <STYLE type="text/css"> <!-- Definición de los diversos estilos y sus características. --> </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 después del primer tag como parte de un hoja de estilo. También se puede ver que se usaron los signos de comentario <!-- --> , los símbolos 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 características o apariencia de un tag en una hoja de estilo, se debe usar el nombre del tag acompañado de los símbolos "{" y "}" de la siguiente forma: <STYLE> <!-- H1 {Definición de la apariencia de este tag...} P {Definición de la apariencia para este tag...} --> </STYLE> Como se puede ver la definición 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 símbolos "<" y ">"), un espacio después o junto se abren las llaves "{" y "}" dentro de las cuales se incluirán 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 aplicarían 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 definición 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> además de usar las que se definieron en la hoja de estilo. En el ejemplo hay un comentario escrito entre los símbolos "/*" y "*/" (signos familiares en C/C++, Java y Javascript), estos símbolos sirven para incluir comentarios dentro de una hoja de estilo, todo lo que se escriba dentro de estos símbolos se considerara comentario y no tendrá ningún 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 continuación explicaremos como deben escribirse las propiedades de un estilo estilo {propiedad:valor; propiedad:valor;El nombre de la propiedad debe escribirse en minúsculas, a continuación deben usarse dos puntos ":", el valor del atributo debe escribirse a la derecha del símbolo ":" y cuando se termine de indicar el valor se debe usar el símbolo ";" punto y coma, cuando se usen varias propiedades, estas deben separarse con espacios. o ponerse en otro renglón. A continuación se presenta otro ejemplo:
El navegador interpreta el documento anterior así:
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, también puede enviarme un e-mail para aclarar sus dudas a lunamatic@yahoo.com. Recuerde que mas adelante se explicarán con detalle las diversas propiedades de los estilos. 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 ningún efecto, hasta que se usa alguno de sus atributos, la siguiente tabla muestra esos atributos.
Los atributos "id" y "class" no son exclusivos del tag <SPAN>, se pueden usar el mayoría de los tags del HTML, el atributo "style" también se puede usar en la mayoría de los tags, este ultimo se explicará mas adelante. El tag <DIV> no es del todo nuevo, en HTML 4 este tag también 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 párrafo, y el tag <SPAN> deja el texto que va después de su uso inmediatamente después 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... }
<STYLE> <!-- #mi_estilo{color:red; text-align:left;} --> </STYLE> Luego se aplica el estilo en el documento. <SPAN id="mi_estilo">Este párrafo usa un estilo definido</SPAN> Como se puede ver se define el estilo en la hoja de estilo y posteriormente se debe aplicar a través de un atributo "id" en cualquier tag solo una vez. A continuación se muestra otro ejemplo:
El navegador interpretaría el documento anterior así:
Como se puede ver en la hoja de estilo se definieron tres estilos particulares que después se aplicaron usando el atributo "id" en diversos tags, también 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...}
<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:
El navegador interpretará el documento anterior así:
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 más específicos. 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 selección contextual en la definición de la hoja de estilo, por ejemplo. P BLOCKQUOTE {color:red;} La definición del estilo anterior indica que los tags <BLOCKQUOTE> usaran texto color rojo cuando estén dentro o anidados dentro de tags <P>. El estilo se define usando los nombres de los tags separados por espacios, el criterio para la aplicación del estilo se le de derecha a izquierda, como en el ejemplo anterior el estilo se aplica a los tags <BLOCKQUOTE> que estén 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 estén dentro de tags <P> que a su vez estén dentro de tags <BLOCKQUOTE>. También 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 tendría 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 selección contextual de estilos es:
Como se puede ver el estilo se aplica solo en los estilos cuyo contexto cumple con el criterio especificado. 10. Definición 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 estándar 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;">
<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. Definición 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 característica 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.
Como se puede ver la hoja de estilo no incluye ningún 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 capítulo. 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 ubicación y nombre de la hoja de estilo. Por ejemplo el siguiente documento HTML.
El documento anterior usaría la hoja de estilo de ejemplo de esta sección. 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 ubicación de la hoja de estilo) dentro del tag <STYLE>, también 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 definición de la hoja de estilo, sobreescribe las caracteristicas de las hojas que se insertan antes de ella. 12. Conclusión de este capítulo. 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 aplicación. Si tiene dudas lea detenidamente cada sección, recuerde que puede enviarme un e-mail. Hasta ahora los ejemplos que hemos visto han sido sencillos y para presentarlos hemos usado emulación 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 generación para que los ejemplos funcionen como por ejemplo Netscape Communicator 4.01 o posterior y Microsoft Internet Explorer 4.0 o posterior. Volver al sumario de esta parte.
|
Alojado en: Recomienda esta pagina a un amigo Servicios Gratuitos
Articulos relacionados
Enlaces recomendados |
|
|
||
|
Descargas
de manuales¦ Ejemplos
de código ¦ Artículos
mas visitados ¦ Envía
tu articulo ¦ Foros ¦ |
||
|
© 2001-Hasta hoy Pedro Rufo Martín contactar |
||