Ejemplos de Funcionamiento.

Ejemplos de Funcionamiento.
EVENTOS
Mientras estas navegando por el ciberespacio, en la ventana de tu navegador van ocurriendo ciertos
sucesos o eventos que pueden ser capturados. Por ejemplo, cuando el navegador carga una página
se está produciendo un evento, cuando carga la siguiente se producen dos: uno al descargar la
antigua y otro al cargar la nueva, etc. Cada objeto tiene sus propios eventos. Para poder capturar un
evento es necesario un manejador de eventos. El objeto window tiene los siguientes manejadores de
eventos:
onLoad Como su nombre indica, se produce cuando el navegador carga una página. Por ejemplo:
HTML
HEAD
TITLEPrueba de entrada/TITLE
SCRIPT LANGUAGE="JavaScript"
function mensaje() {
document.write('Prueba de evento onLoad')
}
/SCRIPT
/HEAD
BODY onLoad="mensaje()"
/BODY
/HTML
Y este sería el resultado:
Prueba de evento OnLoad
onUnload Funciona justo al contrario que el anterior: se activa cuando el navegador descarga la
página actual, por ejemplo al intentar ir a otra. En ese momento se produce el evento. El siguiente
ejemplo abre una ventana predeterminada siempre que se abandona la página activa:
HTML
HEAD
TITLe Prueba de entrada/TITLE
SCRIPT LANGUAGE="JavaScript"
function abrir() {
window.open('http://sestud.uv.es/manual.esp/')
}
/SCRIPT
/HEAD
BODY onUnload="abrir()"
/BODY
/HTML
onFocus Este manejador de eventos controla el evento focus que se produce cuando un objeto
window, frame o form recibe el enfoque como consecuencia de una pulsación del ratón o por ser
invocado el método correspondiente. Por ejemplo:
HTML
HEAD
TITLEPrueba de entrada /TITLE
SCRIPT LANGUAGE="JavaScript"
function abrir() {
window.open('http://sestud.uv.es/manual.esp/')
}
/SCRIPT
/HEAD
BODY onFocus="abrir()"
/BODY
/HTML
onBlur Es el inverso del anterior. Este manejador de eventos controla el evento blur que se
produce cuando un objeto window, frame o form pierde el enfoque. En el siguiente ejemplo la
función abrir() será invocada al abandonar la página:
HTML
HEAD
TITLE Prueba de entrada /TITLE
SCRIPT LANGUAGE="JavaScript"
function abrir() {
window.open('http://sestud.uv.es/manual.esp/')
}
/SCRIPT
/HEAD
BODY onBlur="abrir()"
/BODy
/HTML
onError Este manejador controla el evento error. El error puede producirse mientras el
navegador está cargando una página. Durante el proceso de carga el navegador verifica la sintaxis
del código JavaScript y carga las imágenes que indique el código HTML. Un error de sintaxis
HTML no producirá un error de carga. Tampoco es un error capturable el que un enlace a otra
página falle, ya que eso es un error de navegador (o de navegación). El siguiente ejemplo muestra
un mensaje al cargar una página que intenta mostrar un gráfico que no existe:
HTML
HEAD
TITLE Prueba de entrada/TITLE
SCRIPT LANGUAGE="JavaScript"
function mensaje() {
mensaje('Se ha producido un error de carga')
}
/SCRIPT
/HEAD
BODY
IMG SRC="noexiste.gif" onError="mensaje()"
/BODY
/HTML
No hay que confundir estos mensajes controlados con los que produce la consola javaScript del
navegador cuando detecta un error en los programas que se estan cargando.

Importación de una hoja de estilo
Una hoja de estilo puede ser importada con la sentencia @import de CSS. Esta sentencia puede usarse en un archivo CSS o dentro del elemento STYLE:
STYLE TYPE="text/css" MEDIA="screen, projection"

/STYLE
Note que otras reglas de CSS pueden aún estar incluidas en el elemento STYLE, pero todas las sentencias @import deben ocurrir al inicio de la hoja de estilo. Cualquier regla especificada en la misma hoja de estilo prevalecerá sobre reglas contradictorias en las hojas de estilo importadas. Por ejemplo, inclusive si una de las hojas de estilo importadas contuviera DT { background: aqua}, los términos de definición aún tendrían un fondo amarillo.
El orden en el que las hojas de estilo son importadas es importante para determinar como trabajan en cascada. En el ejemplo de arriba, si la hoja de estilo importada estilo.css especifica que los elementos STRONG se muestren en rojo y la hoja de estilo punk.css especifica que los elementos STRONG se muestren en amarillo, la última regla prevalecería, y los elementos STRONG serían amarillos.
Las hojas de estilo importadas son útiles para fines de modularidad. Por ejemplo, un sitio puede separar diferentes hojas de estilo por los selectores usados. Puede haber una hoja de estilo simple.css que dé las reglas para elementos comunes como BODY, P, H1y H2. Además, puede haber una hoja de estilo extra.css que de reglas para los elementos menos comnes como CODE, BLOCKQUOTE y DFN. Una hoja de estilo tablas.css puede usarse para definir reglas para elementos tabla. Estas tres hojas de estilo podrían ser incluidas en documentos HTML con la sentencia @import. Las tres hojas de estilo también podrían ser combinadas mediante el elemento LINK.


Propiedades.
• Fuentes
– font-family: lista de nombres de familias
• sans-serif, serif, cursive, fantasy, monospace, “Times New Roman”, ...
– font-size: small, larger, ... nº absoluto (10pt), relativo: 150%,
– font-stretch: wider, narrower, expanded,...
– font-style: oblique, italic
– font-weight: bold, light, nº
– font-variant: small-caps
– Se pueden simplificar las declaraciones con la propiedad única “font”
– Texto
• letter-spacing: número (2px, 1mm,...), auto
• line-height: número (2px, 1mm,...), porcentaje
• text-align: left, right, center, justify,...
• word-spacing: número
• Alineación (valign, halign): top, middle, bottom, baseline
• Sangrado: text-indent: (número, porcentaje)
• text-decoration: none, underline, blink, overline, line-through
• text-shadow: none, color, longitudes
– Bordes
• border-width: thin, thick, medium, número
• border-style: none, groove, inset, outset, ridge, dotted, dashed, double,
hidden
• border-color: identificador de color, color RGB, transparent
• border-collapse: separate, collapse
• Se pueden simplificar en una sola propiedad del tipo:
– border: anchura estilo color
– Contornos (outline)
• Son parecidos a los bordes pero no ocupan espacio y pueden no ser
rectangulares
– Márgenes (margin)
– Relleno (padding)
– Fondo (background)
• background-attachment: scroll, fixed
• background-color: nombre de color, valor rgb
• background-image: url(“valor de url”)
• background-position: porcentaje, top, right, left, center, ...
• background-repeat: repeat, repeat-x, repeat-y, no-repeat
• Se pueden combinar en una propiedad única
– background: attachment color image position repeat





Estilo en línea
Puede usarse estilos en línea mediante el atributo STYLE. El atributo STYLE puede ser aplicado a cualquier elemento BODY (incluyendo el mismo BODY) excepto para BASEFONT, PARAM y SCRIPT. El atributo toma como su valor, cualquier número de declaraciones CSS, donde cada declaración está separada por un punto y coma. Ejemplo:
P STYLE="color: red; font-family: 'New Century Schoolbook', serif" Este párrafo usa estilos en rojo con la fuente New Century Schoolbook, si está disponible./P
Note que New Century Schoolbook está en comillas simples en el atributo STYLE, ya que las comillas dobles se usan para contener las declaraciones de estilo.
El estilo en línea es mucho más inflexible que los otros métodos. Para suar estilo en línea, se debe declarar un único lenguaje de hojas de estilo para el documento completo usando la extensión de cabecera HTTP Content-Style-Type. Con CSS en línea, un autor debe enviar text/css como la cabecera HTTP Content-Style-Type o incluir la siguiente etiqueta en la cabecera HEAD:
META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"
Los estilos en línea pierden muchas de las ventajas de las hojas de estilo al mezclar contenido con presentación. Así mismo, los estilos en línea se aplican implícitamente a todos los medios, ya que no hay un mecanismo para especificar el medio deseado para un estilo en línea. Este método debería usarse con moderación, como cuando se aplica un estilo en todos los medios para una sola ocurrencia de un elemento. Si el estilo debe aplicarse a un único elemento pero solo con cierto medio, use el atributo ID en lugar del atributo STYLE.

Atributo CLASS
El atributo CLASS se usa para especificar la clase de estilo a la cual pertenece el elemento. Por ejemplo, la hoja de estilo puede haber creado las clases punk y advertencia:
.punk { color: lime; background: #ff80c0 }
P.advertencia { font-weight: bolder; color: red; background: white }
Se podría hacer referencia a estas clases en HTML con el atributo CLASS:
H1 CLASS=punk Extensiones proprietaria/H1
P CLASS=advertencia Muchas extensiones proprietarias pueden tener efectos laterales negativos, tanto en los navegadores que las soportan como en los que no lo hacen...
En este ejemplo, la clase punk puede aplicarse a cualquier elemento BODY ya que no tiene un elemento HTML asociado con ella en la hoja de estilo. Al usar la hoja de estilo del ejemplo, la clase advertencia solo puede aplicarse al elemento P.
Una buena práctica es llamar a las clases de acuerdo a su función y no por su apariencia. La clase advertencia de ejemplo anterior, podría haberse llamado red (rojo), pero este nombre perdería significación si el autor decidiera cambiar el estilo de la clase aun color diferente, o si el autor quisiera definir un estilo aural para quienes usan sintetizadores de voz.
Las clases pueden ser un método muy eficaz para aplicar diferentes estilos a secciones estructuralmente idénticas de un documento HTML. Por ejemplo, esta página usa clases para dar un estilo diferente al código CSS y al código HTML.

Atributo ID
El atributo ID se usa para definir un estilo único para un elemento. Una regla CSS como
#wdg97 { font-size: larger }
puede aplicarse en HTML mediante el atributo ID:
P ID=wdg97¡Bienvenido al Web Design Group!/P
Cada atributo ID debe tener un valor único a través del documento. El valor debe ser una letra inicial seguida por letras, dígitos o guiones. Las letras solo pueden ser A-Z y a-z.
Note que HTML 4.0 permite puntos en valores del atributo ID, pero CSS1 no permite puntos en selectores ID. Note también que CSS1 permite los caracteres Unicode 161-255 así como los caracteres de escape Unicode como códigos numéricos, pero HTML 4.0 no permite estos caracteres en el valor de atributo ID.
El uso de ID es apropiado cuando una hoja de estilo solo necesita ser aplicada una vez en algún documento. ID contrasta con el atributo STYLE en que el primero permite estilos específicos al medio y también puede aplicarse a múltiples documentos (aunque sólo uno en cada documento).
Cuando se definen hojas de estilo, se pueden crear estilos individuales con nombre. Un elemento puede usar clases de estilos y además usar estos estilos individuales con nombre. Con ellos podemos crear excepciones a las clases de estilos para definir un estilo individual con nombre, en sintaxis CSS se utiliza el signo #, mientras que en JavaScript se utiliza el selector ID. En ambos casos se utiliza el atributo ID para especificar el estilo de un elemento HTML. En los nombres de los ID's se distingue entre mayúsculas y minúsculas. En el siguiente ejemplo se define la clase calor, que hace a los párrafos ser de color rojo y estar en negrita. También se crea un nombre de estilo, frío, que es de color azul. Se muestra cómo utilizar frío para crear una excepción a calor.

Sintaxis JavaScript

style type="text/javascript"
classes.calor.p.col or="red";
classes.calor.p.fon tWeight="bold";
ids.frio.color="blue";
style

Uso de la hoja de estilo:

p class="calor"Un párrafo caliente.../p
p class="calor" id="frio" Un párrafo frio.../p