0
JAVASCRIPT II
Realizado por Diana Alfaro
1
Contenido del Programa
Proyecto: Desarrollo avanzado de herramientas Web
Compatibilidad del Navegador
¿Qué son las hojas de estilo?
Importación
Estilos
Propiedades
Jerarquías
Manejo de Imágenes con Java Script
Manejo del mouse
Manejo de eventos
Manejo del scroll
Detección de botones del Mouse
Manejo de captura de teclado
Identificar las teclas presionadas
Validación de formularios con eventos de teclado
Control de propiedades de los elementos HTML
Frames
Tablas
Fuentes
Encabezados
Botones
El Objeto Eval
El objeto Time
Lectura de Cookies
Cookies y JavaScript
Obtención de información de una cookie
Diseño de Objetos
Manejo de errores
2
JAVA SCRIPT NIVEL 2
COMPATIBILIDAD DEL NAVEGADOR
¿QUÉ SON LAS HOJAS DE ESTILO?
Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que
permiten aplicar formato a los documentos escritos en HTML (y en otros lenguajes
estructurados, como XML) separando el contenido de las páginas de su apariencia. Para
el diseñador, esto significa que la información estará contenida en la página HTML,
pero este archivo no debe definir cómo será visualizada esa información. Las
indicaciones acerca de la composición visual del documento estarán especificadas en el
archivo de la CSS.
CÓMO FUNCIONAN
Veamos primero como trabaja el código HTML. En HTML, las etiquetas (tags) le
indican al navegador los elementos que componen la página y éste aplica el formato a
cada elemento en particular, por ejemplo:
<H1>Título</H1>
3
especifica que el texto "Título" es un Encabezado (Heading) de nivel 1 dentro de los 6
niveles definidos por HTML. El navegador aplicará a ese texto el formato
predeterminado (que varía un poco si se trata de Internet Explorer, Netscape, o si
usamos Windows, Mac o Linux).
Si quisiéramos componer los encabezados H1 con tipografía Arial, de 19 puntos,
en color azul y alineación central, deberíamos especificarlo del siguiente modo:
<H1 ALIGN="center">
<FONT FACE="Arial" COLOR="#0000FF" SIZE="5">
Título</FONT>
</H1>
Por supuesto, esto debería repetirse en cada encabezado H1 de cada página de
nuestro sitio.
IMPORTACIÓN
Las Hoja de Estilo no utilizan el archivo de la página Web para especificar el
formato de la página (en realidad, a veces pueden hacerlo, como veremos más adelante).
En su lugar, usan un archivo de texto puro con extensión .CSS que luego se vincula a la
página.
Este archivo contiene reglas que constan de un selector (en este ejemplo, H1) y una
o más declaraciones (en el ejemplo tenemos cuatro declaraciones). Cada declaración
tiene dos partes: una propiedad (por ejemplo, FONT SIZE) y un valor (en este caso,
19pt). Estas reglas son las que determinan cómo deberá mostrarse la página.
Nuevamente, si quisiéramos componer los encabezados H1 con tipografía Arial, de
19 puntos, en color azul y alineación central, el archivo CSS debería contener el
siguiente texto:
H1 {
font-family: Arial, Sans-serif;
font-size: 19pt;
color: #0000FF;
text-align: center;
}
Luego, en cada página de nuestro sitio agregamos un link a la Hoja de Estilo:
<LINK REL="stylesheet" HREF="hoja_de_estilo.css" TYPE="text/css">
El elemento LINK especifica:
1. el tipo de vínculo: a una hoja de estilo ("stylesheet")
2. la ubicación de la hoja de estilo a través del atributo "href"
3. el tipo de hoja de estilo que se vincula: "text/css"
4
Ahora, todos los encabezados H1 de las páginas que contienen la referencia al
archivo de la CSS tendrán el aspecto que hemos definido.
HOJAS DE ESTILO INCRUSTADAS
Hemos visto cómo las reglas de estilo se especifican en un archivo externo. Este
método es el más recomendable y el que permite mayor flexibilidad: los estilos pueden
cambiarse sin tocar el código HTML y la CSS puede ser compartida por varias páginas.
También existe la posibilidad de poner la hoja de estilo dentro de una página
HTML usando el elemento STYLE.
<HTML>
<HEAD>
<TITLE>CSS incrustada</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Título color azul</H1>
<P>Un párrafo cualquiera...
</BODY>
</HTML>
Como se ve en el ejemplo, el elemento STYLE se usa dentro del encabezado
(<HEAD></HEAD>) de la página, especificando el tipo de hoja de estilo:
<STYLE type="text/css">
H1 { color: blue }
... (aquí se agregan todas las reglas de estilo) ...
</STYLE>
Este método permite aplicar la hoja de estilo solamente a la página que la
contiene. Si bien no es tan práctico como usar una CSS externa, resulta útil cuando en
nuestro sitio tenemos algunas pocas páginas que usan un formato distinto al resto.
En muchos casos convendrá usar ambos métodos simultáneamente: poner un
link a una hoja externa para aplicar un estilo general y luego crear una hoja incrustada
en la que solamente deberemos definir las reglas específicas para esa página. Por las
leyes de cascada de las CSS, en caso de existir una misma regla (una en la hoja externa,
otra en la hoja incrustada) con distintos valores, tiene preponderancia la definida en la
hoja incrustada.
HOJAS DE ESTILO EN LÍNEA
5
Por último, también es posible aplicar el estilo directamente en la etiqueta
HTML:
<P STYLE="text-align: left; text-indent: 1em">
Por supuesto, la definición del estilo dentro de la propia etiqueta (tag) no es la
manera más eficaz de utilizar las hojas de estilo, pero pueden existir casos que lo
justifiquen. La existencia de una regla como la del último ejemplo constituye por sí
misma una hoja de estilo por lo que debemos declarar en el encabezado de la página el
tipo de CSS que estamos usando.
<STYLE type="text/css"></STYLE>
Esta declaración no será necesaria si en la misma página estamos usando una
hoja de estilo incrustada o si existe una referencia a una hoja externa.
Esta forma de aplicar la hoja de estilo directamente en la etiqueta es similar al
modo usado en el código HTML, pero con dos importantes diferencias:
1. El conjunto de propiedades que se pueden aplicar es mucho mayor.
2. Los estilos especificados en una hoja de estilo (cualquiera sea su origen) tienen
preferencia por sobre los formatos aplicados con HTML.
Esto significa que si en nuestra hoja de estilo hemos definido:
P {text-align: left}
Todos los párrafos quedarán alineados por la izquierda y, si en un párrafo
determinado, usamos:
<P align="center">
El párrafo seguirá estando alineado por la izquierda porque las reglas de las CSS
tienen más fuerza que el formato aplicado con HTML.
PROPIEDADES
Ahora que ya hemos visto cómo se definen estilos en un documento HTML, así
como todas las posibilidades en cuanto a jerarquías, clases, nos vamos a centrar en qué
es lo que podemos poner en cada una de esas parejas propiedad:valor que decíamos que
definen un estilo.
Para facilitar su identificación, los vamos a dividir en las siguientes categorías:
Propiedes:
Formato de bloque
Las fuentes
Texto
Color y fondo
Listas
6
Hay propiedades en las que necesitaremos especificar alguna longitud (por
ejemplo, en los márgenes). Para ello, usaremos esta notación:
[-]NNtipo
- es el signo, y es opcional (es lo que quieren decir los corchetes, que se trata de
algo opcional, los corchetes no hay que ponerlos).
NN es la cantidad, y tipo es la magnitud. Esta última puede ser relativa o absoluta.
Las magnitudes relativas son em (el alto de la M mayúscula), ex (la mitad de la
altura de la M mayúscula, que viene a ser aproximadamente la altura de la x
minúscula), px (píxel). Las magnitudes absolutas son pt (puntos), pc(picas), in (inches,
es decir, pulgadas), mm(milímetros), cm (centímetros).
Hay otras propiedades en las que tendremos que especificar un color; para ello hay
tres posibilidades: escribiéndolo de la misma forma que en HTML, con la
notación #RRGGBB,
las
componentes roja, verde y azul del color, usando algún nombre predefinido, o usando la
función rgb(R,G,B), donde R, G, B son los valores en decimal de las componentes roja,
verde y azul del color.
siendo RR, GG, BB los valores en hexadecimal de
Un último detalle a comentar antes de pasar al estudio de las propiedades y sus
posibles valores, es el siguiente: desde el punto de vista de las hojas de estilo, existen
tres tipos de elementos HTML: de bloque (que son los que hacen empezar línea nueva,
como <P>, las cabeceras, ...), incrustados en línea (que no alteran la línea en la que se
encuentran, como <B>, <I>, ...) y de lista (que son los elementos de una lista
delimitados por <LI>). Todo elemento de bloque se considera rodeado por una caja, con
propiedades de márgenes, borde, padding y fondo. Además, la caja que lo rodea tiene un
cierto ancho, y una cierta alineación con respecto al documento.
VENTAJAS (Y DESVENTAJAS) DE LAS HOJAS DE ESTILO
Si consideramos los ejemplos anteriores, resultan evidentes algunas ventajas:
Con una Hoja de Estilo podemos alterar la presentación de cada elemento sin tocar
el código HTML, ahorrando esfuerzo y tiempo de edición. Si quisiéramos alinear a la
izquierda los encabezados H1 de nuestras páginas, bastaría con cambiar en la CSS la
declaración "text
Crear cuenta
Comentarios de: JAVASCRIPT II (0)
No hay comentarios