Hojas de estilo en cascada Manual práctico de Hojas de Estilo en cascada Introducción

Introducción  Razones

y objetivos del uso de la tecnología de Hojas de Estilo en cascada El lenguage HTML tiene limitaciones al momento de darle formato a los documentos.  Utiliza etiquetas para formatear el contenido que se mostrará al usuario.  En el código HTML vienen mezcladas e incrustadas otras etiquetas y otras técnicas para mejorar la presentación del contenido al usuario.  El programador mantiene control absoluto sobre el formato del documento 

Introducción  Para

el programador, estas aparentes ventajas resultan ser inconvenientes debido al enorme peso de las páginas web (por el excesivo código de formateo en cada página) y a lo difícil que resulta depurar errores cuando se presentan.  Una desventaja principal resalta con la actualización de las páginas.

CSS  CSS

significa:

 Cascade

Style Sheet ó  Hojas de Estilo en Cascada  Esta

tecnología se desarrolló y se ha utilizado principalmente en los EEUU debido a la necesidad de desarrollar modelos más eficientes de comunicación durante el desarrollo de las diversas etapas de la guerra.

Características de las CSS  El

usuario puede definir mediante una sintaxis especial la forma de presentar los documentos de:  Una

página web  Una Web entera (múltiples páginas)  Una etiqueta específica, llegando hasta la definición de varios estilos para una misma etiqueta.

Ventajas de las CSS  Permite

aplicar al documento formato de modo más exacto.  Se puede colocar elementos con mayor precisión, eliminando la posibilidad de errores y ahorrando tiempos en la depuración.  Con HTML se definen atributos de las páginas con pixels y porcentajes.  Con CSS podemos definir los atributos además de los indicados para HTML, con pulgadas (in), puntos (pt) y Centimetros (cm).

Navegadores - Soporte  No

todos los navegadores soportan la tecnología CSS.  Lo soportan:  Netscape

versiones de la 4.0 en adelante  Microsoft Internet Explorer de la 3.0 en adelante.  Nota:  No

todos los navegadores implementan las mismas funcionalidades de estilos.

Recomendación  Se

recomienda el uso de las CSS con mucho cuidado.  No deje de observar que los usuarios pueden tener equipos con navegadores anteriores a las versiones recomendadas.  Utilice Hojas de Estilo cuando éstas no supongan un problema.

Hojas de Estilo  Son

un conjunto de etiquetas adicionales que describen el aspecto de etiquetas HTML individuales.  Las etiquetas de la hoja de estilos describen la fuente, el color, la alineación de los párrafos y otros atributos de etiquetas HTML comunes, como títulos, párrafos y listas.  Estas etiquetas pueden formar parte de un documento o incluirse en un archivo de texto independiente.

Hojas de Estilo  Cuando

se incluye una hoja de estilos en la página Web, todas las etiquetas de esta última que contengan entradas correspondientes en la hoja de estilos reciben formato automáticamente de acuerdo con la descripción de la hoja de estilos.  Si las etiquetas se incluyen en un archivo de texto por separado, pueden aplicarse a uno o más documentos HTML.

Hojas de Estilo  Una

sola hoja de estilos puede aplicarse a uno o más documentos HTML.  Los exploradores de Web no compatibles con las hojas de estilo en cascada (CSS) omiten la información que contienen.

Tipos de Hojas de Estilo  Actualmente

existen dos tipos de Hojas

de Estilo:  Hojas

de Estilo Tipo CSS (Cascade Style Sheet), y;  Las Hojas de Estilo en JavaScript.

Nuevas etiquetas en HTML  Las

etiquetas que se utilizan son las siguientes:  <STYLE>

Que sirve para definir las hojas de Estilo dentro de un documento HTML  <SPAN> Que sirve para definir un Bloque de Texto o elementos a los cuales se les aplicará un estilo.

Nuevos atributos en HTML  “style”

Que permite usar las características de una de estilo directamente a un bloque de texto o elementos  “class” Que 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.

Crear una Hoja de Estilo 



Para crear una hoja de estilo dentro de un documento se usa la etiqueta <style> en la cabecera del documento dentro de las estiquetas . Así tenemos:         

<style>….. Instrucciones ……..

Probando estilos

Valores posibles de sus atributos  Atributo  Valor  

type:

posible:

“text/css” Para Cascade Style Sheet “text/JavaScript” para JavaScript

 Ejemplo

de uso:

 <STYLE

type=“text/css”>  Este Atributo le dice al navegador que tipo de sintaxis usa la Hoja de Estilo

Definiendo la apariencia de algunas Etiquetas  <style

type=“text/css”>


H1 { Definición de la apariencia }  P { Definición de la apariencia }  //  

Definiendo la Apariencia  <style

type=“text/css”>


H1 {  color: #FFCCAA;  font-style: italic;  text-align: center;  }  //  

Definiendo las propiedades  El

nombre de la propiedad de la etiqueta debe escribirse en minúsculas  A continuación deben usarse dos puntos “:”  A la derecha del símbolo de dos puntos debe escribirse el valor del atributo  Al final cuando se usen varias propiedades debe utilizarse “;” después de cada una.

Ejemplo                 

<style type=“text/css”>

Prueba de estilos

Esta pruebe puedes ponerla en funcionamiento

Incluir la Hoja de Estilo dentro del documento html:    

Se usa la etiqueta en la cabeza del documento, junto con ciertos atributos: La etiqueta tiene diversos usos. Es importante definir que se esta usando para insertar un estilo, en tal sentido, 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.

Varias Hojas de Estilo en una misma página.  <STYLE

type="text/css" src="estilos/style1.css">  <STYLE type="text/css" src="estilos/style2.css">   <STYLE type="text/css">

Fin de la Primera Sesión Muchas Gracias