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:
 Notodos 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

 Lasetiquetas 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 <head> </head>.
 Así tenemos:
 <html>
 <title>Página de Prueba de estilos</title>
 <head>
 <style>….. Instrucciones ……..</style>
 </head>
 <body>
 <p>Probando estilos</p>
 </body>
 </html>
Valores posibles de sus
atributos
 Atributo type:
 Valor 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 }
 //
 </style>
Definiendo la Apariencia
 <style type=“text/css”>
 <!—
 H1 {
 color: #FFCCAA;
 font-style: italic;
 text-align: center;
 }
 //
 </style>
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
 <html>
 <title>Otra prueba</title>
 <head>
 <style type=“text/css”>
 <!—
 H1 {
 color: red;
 }
 BLOCKQUOTE {
 color: blue;
 }
 CENTER {
 color: olive;
 }
 //-
 </style>
 <body><h1>Prueba de estilos</h1><blockquote>Esta pruebe puedes ponerla en
funcionamiento</blockquote></body></html>
Incluir la Hoja de Estilo dentro del
documento html:
 Se usa la etiqueta <LINK> en la cabeza del
documento, junto con ciertos atributos:
 <LINK rel="stylesheet" type="text/css" href="url de
la hoja de estilo">
 La etiqueta <LINK> 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>
 <STYLE type="text/css"
src="estilos/style2.css"></STYLE>
 <link rel=“Stylesheet” type=“text/css”
href=“estilos/style3.css”>
 <STYLE type="text/css">
Fin de la Primera Sesión
Muchas Gracias