Hojas de Estilo y DHTML
Anuncio
Hojas de Estilo
Hojas de estilo
• Proveen control en la composición de hojas
• Separan la estructura del documento de su
presentación
• Flexibilidad para mostrar en diferentes
dispositivos
• Estándar CSS1
– Hojas de estilo en cascada
Hojas de estilo
• Crean una presentación para un elemento o
un conjunto de elementos
– Esquema: elemento {especificación de estilo}
• EJ de una regla:
– H1 {font-family: Impact; font-size: 28pt}
• Hoja de estilo es una colección de reglas
• Especificación CSS1:
– http://www.w3.org/TR/REC-CSS1
Añadir estilo al documento
• Enlazar a una hoja de estilo
• <LINK REL=“STYLESHEET”
HREF=“corpstyle.css” MEDIA=“screen”
TYPE=“text/css”>
Ejemplo Hoja pre-definida
BODY
H1
H2
P
A:link:
A:visited:
A:active:
.important
#note
{font: 10pt;
font-family: Serif;
color: black;
background: white}
{font: 24 pt;
font-family: Sans-Serif;
color: black}
{font: 16 pt;
font-family: Sans-Serif;
color: black}
{text-ident: 0.5 in;
margin-left: 50px;
margin-right: 50px}
{color: blue}
{color: red}
{color: red}
{background: yellow;
font-weight: extra-bold}
{background: orange}
Estilo en línea
• Directamente en cada elemento
• Ej:
– <H1 STYLE=“font-size: 48 pt; font-family:
Arial; color: green”>Prueba de estilo</H1>
Estilo de documento amplio
• <STYLE> … </STYLE> dentro del elemento
<HEAD>
• Uso de <!-- --> para los exploradores que no
entienden hojas de estilo
• <STYLE TYPE=“text/css” MEDIA=“PRINT”>
Uso de identificadores
• Para aplicar a un elemento concreto (no en
línea). Ejemplo:
• En hoja de estilo
– #segundoParrafo {background: green}
• En elementos:
– <P>El primer párrafo</P>
– <P ID=“segundoParrafo”>Este es el segundo
párrafo</P>
– <P>El tercer párrafo</P>
Uso de clases
• Para aplicar a un grupo de elementos (no tienen
que ser del mismo tipo). Ejemplo:
• En hoja de estilo (Note el punto):
– .important {background: yellow}
• En elementos:
–
–
–
–
<H1 CLASS=“important”>Ejemplo</H1>
<P CLASS=“important”>Primer párrafo: importa</P>
<P>Segundo párrafo sin importancia</P>
<P CLASS=“important”>Tercer párrafo: importa</P>
• Ejemplo de hojas de estilo
DHTML
• HTML Dinámico
• Extiende los elementos actuales
• Permite acceso y modificación de HTML con un
lenguaje de script
• Acceso a etiquetas de una página a través de DOM
(Domain Object Model)
– Documento como colección de objetos individuales:
imágenes, párrafos, caracteres, etc
• ID y NAME
• Propiedades (Atributos de HTML)
• Métodos (ej:submit()) y eventos(ej:onmouseover)
DOM
HEAD
HTML
BODY
TITLE
H1
Mi Compañía
Mi Compañía Inc.
BGCOLOR=“WHITE”
<HTML>
<HEAD>
<TITLE>Mi Compañía</TITLE>
</HEAD>
<BODY BGCOLOR=“WHITE”>
<H1 ALIGN=“CENTER”>Mi Compañía Inc.</H1>
<HR>
<P>Esto es un párrafo de texto</P>
<UL>
<LI><A HREF=“acerca.html”>Acerca</A>
<LI><A HREF=“prod1.html”>Productos</A>
</UL>
</BODY
</HTML>
HR
UL
LI
P
Esto es un
párrafo
de texto
A HREF=“acerca.html
Acerca
LI
A HREF=“prod1.html
Productos
Ejemplo con DHTML
Ejemplo
Ejemplo
