Introducción Al HTML Dinámico

c Introducción al HTML Dinámico
¯ Introducción a las Hojas de Estilo

¯ Introducción al Posicionamiento de Contenidos
¯ Introducción a las Fuentes Descargables
c Hojas de Estilo
¯ Definición de Estilos mediante Hojas de Estilo en Cascada
¯ Definición de Estilos mediante el Modelo de Objetos Documento de JavaScript
¯ Ejemplos
¯ Herencia de Estilos
c Creación y uso de Hojas de Estilo
¯ Definición de Hojas de Estilo con la etiqueta <STYLE>
¯ Definición de Hojas de Estilo en Ficheros Externos
¯ Definición de Clases de Estilo
¯ Definición de Estilos Individuales con Nombre
¯ so de Criterios de Selección Contextual
¯ Especificacion de Estilos para Elementos Individuales
¯ Combinando Hojas de Estilo
c Propiedades de Formato de Elementos de Bloque
¯ Formato de Bloques: Introducción y Ejemplos
¯ Márgenes
¯ Bordes
¯ êlleno
¯ Herencia de Propiedades de Formato de Bloque
c Fuentes Descargables
¯ Como sar Fuentes Descargables
¯ Herramientas de Diseño
c Manual de êferencia de Hojas de Estilo
¯ Comentarios en las Hojas de Estilo
¯ Nuevas etiquetas HTML
¯ Nuevos atributos para las etiquetas HTML
¯ Nuevas propiedades de objetos JavaScript
¯ Propiedades de las Hojas de Estilo
¯ nidades
c Ejemplos de diseño
c Enlaces
S
Bajo el nombre de HTML Dinámico se engloba un conjunto de técnicas con dos objetivos claros:
proporcionar un control absoluto al diseñador de páginas HTML y romper con el carácter estático de este
tipo de documentos. Hasta ahora, una vez mostrado un documento HTML, nada podía hacerse para
modificarlo.
Los tres componentes del HTML Dinámico son:
c Hojas de Estilo
c Posicionamiento de Contenidos
c Fuentes Descargables
Las hojas de estilo permiten especificar atributos para los elementos de su página web. Con el
posicionamiento de contenidos se puede asegurar que las diferentes partes serán mostradas exactamente
donde usted quiera que aparezcan y podrá modificar su aspecto y posicion tras ser mostrada. Con las
fuentes descargables podemos asegurar que siempre se utilizara la fuente correcta, pues podemos enviar
la fuente junto con la página.
S

Antes de la introducción de las hojas de estilo, los creadores de páginas web sólo tenían un control parcial
sobre el aspecto final de sus páginas. Por ejemplo, se podía especificar que cierto texto debia verse como
una cabecera, pero no se podían colocar márgenes a una página ni escoger un borde decorado para un
texto.
Las hojas de estilo nos permiten un mayor control sobre el aspecto de nuestros documentos. Con ellas
podemos especificar muchos atributos tales como colores, márgenes, alineación de elementos, tipos y
tamaños de letras, y muchos más. Podemos utilizar bordes para hacer que ciertos elementos resalten del
resto de un documento. Podemos especificar que se utilicen diferentes fuentes para diferentes elementos
tales como párrafos o cabeceras.
Además podemos emplear hojas de estilo como patrones o páginas maestras de forma que múltiples
páginas puedan tener el mismo aspecto.
Las hojas de estilo pueden crearse empleando dos tipos de sintaxis, CSS (Cascade Style Sheets) y
JavaScript.
S

Ya no se está restringido al posicionamiento secuencial de los elementos sobre la página. Especi ficando la
posición de los bloques podemos decidir donde se mostrara cada elemento en vez de dejar esta tarea al
arbitrio del navegador. Por ejemplo, podemos colocar un bloque en la esquina superior izquierda, y otro
en la inferior derecha. También podemos hacer que varios bloques compartan espacio, de forma que se
puedan solapar. Ahora se puede decidir la posición exacta de los elementos.
tilizando JavaScript podemos cambiar el aspecto de la página dinámicamente. Podemos hacer que los
elementos aparezcan o se desvanezcan, podemos cambiar su color y su posición, etc. Podemos añadir
animaciones dentro de nuestras páginas moviendo y modificando ciertas partes de la misma.
El uso conjunto las hojas de estilo y el posicionamiento de contenidos nos permite crear páginas web que
utilicen diferentes estilos en diferentes partes de la página.
Para el posicionamiento de contenidos también podemos utilizar dos tipos de sintaxis: CSS y JavaScript.
S

tilizando fuentes descargables podemos adjuntar fuentes con nuestras páginas web. De esta forma se
garantiza que las página siempre serán mostradas con la fuente que deseemos. Ya no es necesario emplear
las fuentes genéricas para conseguir que sus páginas tengan aproximadamente el mismo aspecto en todas
las plataformas. Tampoco estaremos restringidos por las características propias de las fuentes en cada
plataforma.
Para protejer los derechos de autor de los diseñadores de fuentes, estas están protegidas de forma que es
imposible que el usuario las copie y las pueda usar de nuevo. Asi podemos incluir fuentes en nuestras
páginas sin tener que preocuparnos de que los usuarios las puedan copiar.

En esta sección se introduce el uso de las hojas de estilo. Se da un breve resumen de los diferentes tipos
de sintaxis que se pueden emplear para definir estilos, se muestran algunos ejemplos y se explica la
herencia de propiedades.

na hoja de estilo consiste en una o más definiciones de estilo. En sintaxis CSS, los nombres de las
propiedades y los valores se encierran entre llaves {}.
El criterio de selección determina a que elementos se aplica, o es aplicable, el estilo. Si el criterio de

selección es un elemento HTML, el estilo es aplicado a todos las instancias de dicho elemento. El criterio
de selección también puede ser una clase, un ID o contextual. Cada una de estos criterios de selección se
verán a continuación.
En una definicion de estilo cada propiedad es seguida por dos puntos y el valor de dicha propiedad. Cada
par propiedad/valor está separado del siguiente por un punto y coma (;).
Por ejemplo, la siguente hoja de estilo en cascada contiene dos definiciones de estilos. El primero
especifica que todos los párrafos, , se veran en negrita y en color blanco. El segundo hará que todas
las cabeceras, , aparezcan centradas.

La definición de estilos se puede encerrar entre commentarios (), de esta forma los navegadores
que no reconozcan la etiqueta la ignorarán.
Es importante no incluir dobles comillas en la especificacion de valores de atributos en sintaxis CSS.
CSS exige un estricto cumplimiento de sus normas de sintaxis. Asegurese de no omitir ningun punto y
coma entre los pares nombre/valor. Si lo hace se ignorara por completo la definición de estilo. De igual
forma, si accidentalmente se añade un simbolo extraño la definición será ignorada.

Mediante JavaScript también es posible definir hojas de estilo utilizando el modelo de objetos documento.
Este modelo ve una página web como un objeto con propiedades que pueden ser consultadas y
modificadas. En el siguiente ejemplo se cambia el valor de de la etiqueta de la
propiedad del objeto :
!!!

La propiedad siempre se aplica al objeto del documento actual, por eso algunos
navegadores permiten omitir en la expresion ! .
El siguiente ejemplo usa JavaScript para crear una hoja de estilo que contiene dos definiciones de estilo.
El primero especifica que todos los párrafos se veran en negrita y en color blanco. El segundo hará
que todas las cabeceras aparezcan centradas.

"#
! !

! !

!!$

No se pueden encerrar entre comentarios () los contenidos de una hoja de estilo creada
mediante JavaScript.
También se puede utilizar para abreviar la definición de estilos para elementos sobre los que hay
que modificar varias propiedades. Este ejemplo especifica que todas las etiquetas serán verdes,
negritas, cursivas y usaran la fuente helvética.
%! &

'

(

)
#

sando hojas de estilo se pueden especificar muchos atributos de estilo. Algunas de estas características
son el alineación, indentación y color del texto, la familia, peso y estilo de las fuentes,... Podemos
seleccionar una imagen o un color de fondo para cualquier elemento. También podemos escoger el color
y estilo de las marcas de lista.
Se pueden poner márgenes y especificar bordes para elementos de bloque, escoger el relleno de los
elementos que tienen bordes, indicar la distancia entre el borde y el contenido del elemento.
El siguiente ejemplo muestra una hoja de estilo sencilla descrita mediante sintaxis CSS y JavaScript. En
ella se especifica que todos los elementos tendran márgenes derecho e izquierdo y que su texto
estará centrado. Todos los elementos * estarán subrayados y en verde. Todos los elementos + se
mostraran en mayúsculas, tendran un borde con aspecto 3D sobresaliente de 4 puntos de ancho y color
rojo. Su texto será rojo y el fondo amarillo. Finalmente, los ,- serán azules y en cursiva,
su altura de línea (interlínea) será un 150% mayor que por defecto y su primera línea estará indentado un
10%.
Sintaxis CSS

./0
./0
*
+

*
, *

,-

!+ /0

Sintaxis JavaScript

"#
%! &

$
1
./0 2

./0

%!*& 3

%!+&

4

'
* (

,5
%* &
5

%!,-&

(

6
!+ 7
./

so de la hoja de estilo
*4 *

,-
8 -! 9 - :
;
; :; <
=
! 4 > < !
,-
+4 + +
8 : : ! 4 >

: ?-!
êsultado del ejemplo

~

d

~S~ !" ! " #$
Este párrafo
está
centrado.
También
tiene unos
amplios
márgenes
derecho e
izquierdo.

n elemento HTML que contenga a otro se considera como el padre del elemento que contiene, y el
elemento contenido se considera el elemento hijo.
Por ejemplo, en el siguiente texto HTML, el elemento es el padre del elemento , que a su
vez es padre del elemento .

@8

En muchos casos, los hijos adquieren o heredan el estilo de los elementos de sus padres. Por ejemplo,
supongamos que asignamos a el estilo color azul:

@8

En este caso el elemento hijo hereda el estilo de su padre, que es el elemento . Asi la palabra
"es" apareceria en color azul. Supongamos ahora que previamente se habia especificado para el
color rojo. En este caso la palabra "es" apareceria en rojo porque las propiedades del hijo tienen
preferencia sobre las que hereda del padre.
La herencia comienza desde el elemento de más alto nivel. En HTML, este elemento es , que es
seguido de .
Para establecer las propiedades de estilo por defecto para todos los elementos de un documento lo normal
es asignárselas al elemento . Por ejemplo, el siguiente código fija el color por defecto del texto a
verde:
Sintaxis CSS

Sintaxis JavaScript

"#
!!

Muy pocas propiedades no son heredadas de padres a hijos, pero en la mayoría de los casos el resultado
final es el mismo que si lo hiciesen. Por ejemplo, la propiedad color de fondo no se hered a. Si un hijo no
especifica un color de fondo propio, se vera el color de fondo del padre a través suyo, tal como ocurriria
si heredase la propiedad. Para más información sobre las propiedades que se heredan y cuales no,
dirigirse al manual de referencia del final de este tutorial.

En esta sección se verán las diferentes formas de definir estilos y como aplicar esos estilos a los
elementos HTML.
na hoja de estilo es una serie de una o más definiciones de estilo. Podemos definir una hoja de estilos en
el interior del documento que la utiliza, pero también podemos utilizar hojas de estilo desde un
documento externo. Por ejemplo, podemos emplear una única hoja de estilo para definir el estilo
empleado por un grupo de personas en sus páginas.
Si la hoja de estilos no va a ser aplicada a otros documentos, es más conveniente definirla en el interior de
dicho documento para asi tener la hoja de estilo y el contenido de la página todo en un mismo sitio.

%
(4A18
Para definir una hoja de estilo directamente dentro de un documento se utiliza la

etiqueta dentro de la sección !!! . La etiqueta abre la hoja de
estilo, y la etiqueta la cierra. Asegurese de utilizar antes de .
Cuando use podrá especificar el atributo para indicar que tipo de sintaxis se va a
emplear. Los dos valores posibles son y "# . EL valor por defecto
es .
El siguiente ejemplo define una hoja de estilo que especifica que todos los titulos de nivel 4 serán en
mayúsculas y azules, y todos los bloques en cursiva y rojos:
Sintaxis CSS

*
,-

!!!

Sintaxis JavaScript

"#
!*!4

!*!

!,-!(

!,-!

!!!

*8 ? ! *

,-8 - # "!,-
~ ~S~ !& " ~! !" !'
d

( )
Se puede definir una hoja de estilo en un fichero distinto del que contiene la página y despues enlazarlos.
Las ventajas de este método son que podremos utilizar la hoja de estilo desde cualquier documento
HTML. Se podría pensar en una hoja de estilo asi definida como en un patrón que pudiera aplicarse a
cualquier documento. De esta forma, se puede aplicar un estilo a todas las páginas servidas desde un sitio
web sin más que incluir un enlace al fichero con la hoja de estilo en cada página.
La sintaxis para definir estilos en ficheros es identica a la que se usa para definirlos en el propio
documento, excepto que no es necesario incluir la etiqueta <style>. He aquí un ejemplo:
Sintaxis CSS
B " ! B

!CD13C1E8
F

B B
Sintaxis JavaScript
B " ! B
!CD13C1E8!!

!CD13C1E8!!'

!!6
F
! !

B B
Para utilizar esta hoja de estilo, se usa la etiqueta , como se muestra en el siguiente ejemplo:
Sintaxis CSS

8
,

!

Sintaxis JavaScript

8
,

"#

!"

Si un documento incluye o se enlaza con una hoja de estilo, todos los estilos definidos en dicha hoja
podrán utilizarse en cualquier punto del documento. Si la hoja de estilo especifica el estilo de una etiqueta
HTML, entonces todos las etiquetas de ese tipo en el documento utilizarán dicho estilo.
Puede haber casos en que interese aplicar un estilo selectivamente. Por ejemplo, se puede querer que los
párrafos de un documento sean unas veces rojos y otras veces azules. En este caso definir un estilo que se
aplique a todos los párrafos no será la solucion correcta. Podemos obtener el efecto deseado definiendo
una clase de estilo y especificando cuando queremos que sea utilizada.
Para aplicar una clase de estilo a un elemento HTML, primero se debe definir la clase en la hoja de estilo,
y después se utilizará empleando el atributo en cualquier elemento.
Sintaxis CSS

!G2889CD13

Sintaxis JavaScript

"#
!G2889CD13!!

!G2889CD13!!'

H
G2889CD138 # H

G2889CD13
8 : G2889CD13! (

?

- 64I1!

,-
G2889CD13
8 - G2889CD13! 8
;
# : ! J K -
-
:!
,-

*

+$ #' ,

% ~'
%

+$ #'
- *
'
.

(
% %

*
'
Con sintaxis JavaScript no se pueden utilizar guiones "-". La razón es que el guión es un operador de
JavaScript. Los nombres de clases no pueden contener tampoco operadores como: -, +, *, /, %, ...
Cuando se definen clases de estilo se puede especificar a que elementos se podrán aplicar dicha clase, o
usaremos la palabra clave para indicar que todos los elementos podrán utilizarla.
En el siguiente ejemplo se crea una clase de estilo naranja que podrá utilizar cualquier elemento HTML.
También se crea una clase rojo que sólo podrán utilizar párrafos y bloques.
Sintaxis CSS

!"
!"
,-!"

Sintaxis JavaScript

"#
!"!!

!"!!'

!"! !

!"! !'

!"!,-!

!"!,-! '


"8 : "!
8 : ;
- ? "
,-
"8 - "!
,-
*
"
8 ";
:
*

"8 :
*
"
8 " - "
*
*
'
Este párrafo es del color por defecto, porque no utiliza la clase rojo
%

'

- *
*

%

n elemento HTML sólo puede utilizar una clase de estilo. Si se especifican dos o más clases, se
utilizaran la primera. Por ejemplo, en el siguiente código un párrafo intenta usar las clases rojo y naranja.
Como resultado final se acaba empleando la clase rojo que es la primera que se especifica.
Ejemplo:

"
"D : "!
êsultado:
*
'
S

Se pueden crear estilos individuales con nombre. Los elementos HTML pueden utilizar un clase de estilo
y un estilo individual con nombre. Normalmente estos se utilizan para expresar excepciones de estilo. Por
ejemplo, si un párrafo utiliza la clase de esti lo PÎNCIPAL, podemos usar el estilo con nombre AZL1
para expresar alguna diferencia respecto a la clase PÎNCIPAL.
También son útiles para definir capas de contenidos HTML posicionadas de forma precisa.
Parar definir estilos con nombre, en sintaxis CSS, se precede el nombre con el signo ´. En JavaScript se
utiliza la propiedad .
Para aplicar el estilo a un elemento, se utiliza el nombre de estilo individual como valor del atributo 73.
En el siguiente código se define una clase de estilo PÎNCIPAL. Esta clase especifica una fuente de 15
puntos, negrita y de color rojo, y una interlínea de 20 puntos. También se define un estilo con nombre
llamado AZL1 cuyo color es azul.
Sintaxis CSS

!J27957J$1

./
?+

´$LE1

Sintaxis JavaScript

"#
%!J27957J$1!&

6
./
(?
+
'

!$LE1!


J27957J$1
$-M # " !
8
: < N
!

J27957J$1
$LE1
8 : ! 8:
! $-

J27957J$1 ? - ?
$LE1!

!%/ )

' *

/

0

(

'
*

'

(

' ! %

$S S!
, % ,
!& '
)

Se pueden definir estilos para utilizarse con todos los elementos HTML de una clase particular. Si se
necesita un mayor control sobre el uso de estilos podemos hacer que estos se apliquen selectivamente.
Podriamos, por ejemplo, querer que el texto enfatizado sea de color verde, pero sólo si este está en el
interior de un título de tamaño 4.
Se puede conseguir este nivel control sobre la aplicacion de estilos usando los criterios de selección
contextual. Estos, en general, permiten especificar que un estilo se aplicara sólo si un elemento se
encuentra anidado dentro de un elemento de otro cierto tipo.
Mediante la sintaxis, CSS esto se consigue listando ordenadamente los elementos HTML antes de las
llaves. Con sintaxis JavaScript es necesario utilizar el método %& .
Sintaxis CSS

*

Sintaxis JavaScript

"#
%!*; ! &!

*8 ?

#! *
8 ?
#!
)
,
'
En cambio este no es verde.
Ahora veremos otro ejemplo que hace que las marcas los elementos de lista que hereden de al menos dos
listas desordenadas sean de color azul.
Sintaxis CSS

Sintaxis JavaScript
%!; !; !&!

Se pueden utilizar los criterios de selección contextual para buscar etiquetas, clases, ids o combinaciones
de estos. En el siguiente ejemplo se crea la clase MAGENTA que lo colorea todo de magenta. Todos los
párrafos MAGENTA que estén dentro de un # estarán en cursiva. Además los textos dentro
de anidados dentro de párrafos dentro de un # en MAGENTA usaran una fuente grande.
Sintaxis CSS

!I$G894$
# !I$G894$
# !I$G894$ ?

Sintaxis JavaScript

"#
!I$G894$!!

%!#; !I$G894$! &!(

%! #; !I$G894$! ;
!&!(?

#
I$G894$
* 4 * I$G894$ *
8 : #! $
# ! 5

=
#

I$G894$8 : # I$G894$;

- #;
#!
~ (1 !+ ~!
d

!
"

Este párrafo todavia es MAGENTA, pero como no esta dentro de un bloque <div>, no es cursivo.

S

De igual forma que se puden definir hojas de estilo, podemos utilizar el atributo de cualquier
etiqueta HTML para definir un estilo que le será aplicado solamente a ella. Esta aproximación puede ser
útil en situaciones en que necesitemos utilizar un estilo en un sitio y no sea necesario volver a utilizarlo.
Sin embargo, en general, es mejor definir todos los estilo usados en un documento en un único lugar. Asi
es más fácil realizar modificaciones en su estilo sin tener que recorrerlo. Si se necesita hacer algun
cambio sólo es necesario hacerlos una vez y el cambio automáticamente se aplica a todo el documento.
A veces, sin embargo, se necesita especificar el estilo de un elemento y la forma más fácil de hacerlo es
mediante el atributo . En el ejemplo se especifica un estilo para el elemento . También se
muestra el uso de para aplicar un estilo a varios elementos.
Sintaxis CSS

./0 ./0
8 :; = :; #;
!

8 : ;

!

Sintaxis JavaScript

OO '
OO
2
O./0O 1
O./0O
8 :; = :; #;
:!

8 : ;

(

!


*
-

*
-
-

* '
Este párrafo es del color habitual, pero esta es diferente al resto.

Se puede utilizar más de una hoja de estilo para fijar las características de un documento. Esto es deseable
si se tienen varias hojas de estilos parciales, de forma que cada una de ellas define diferentes estilos.
Supongamos, por ejemplo, que estamos escribiendo un informe sobre los beneficios de un producto de
red de una compañia llamada AlpargataNet. Puede que se necesite usar tres hojas de estilo: una
definiendo el estilo habitual de los informes, otra que defina el estilo de los productos de red, y otra que
defina el estilo de la compañia SneakerNet.
El siguiente ejemplo muestra el uso de varias hojas de estilo en un mismo documento.

P
! !
P
P

,

% ! ! &
,

% &
,

% &
B "
B
Entre las hojas de estilo externas, la última tiene precedencia s obre las demás. Asi, en caso de conflicto,
se escoge el estilo de la última hoja de estilo especificada.
Los estilos definidos para elementos individuales tienen precedencia sobre los definidos en el
elemento y sobre los definidos en las hojas externas. En general, los estilos locales se
sobreponen a los generales, como se muestra en el siguiente ejemplo.
Sintaxis CSS

Sintaxis JavaScript

"#
! !

!!

4 < :

?;
#

8 :

?;

# ; -
!
Tal y como debería ser este párrafo es de color azul,

Este otro párrafo no es de color azul,

- porque se ha usado style
para cambiarles el color.

#%
En esta sección se exponen las opciones de formato de los elementos de bloque. Los elementos de bloque
comienzan en una nueva línea. Por ejemplo, y son elementos de bloque, pero no lo es.
Comenzaremos presentando unos ejemplos que muestren las posibilidades de formato de los elementos de
bloque. Despues se discutirá cada opción de formato en detalle. Para finalizar se echará un vistazo a su
comportamiento respecto a la herencia de propiedades.

#%2 S
Las hojas de estilo tratan a cada elemento de bloque como si estuviera rodeado de una caja. Cada caja
puede tener características de estilo propias tales como márgenes, bordes, relleno y una imagen o color de
fondo.
Los márgenes indican la separación entre el borde de la caja y el borde del documento. Estos bordes
pueden tener apariencia plana o tridimensional. El relleno ("padding") indican la separación entre el borde
de los elementos y el contenido de los mismos.
También se puede fijar la anchura de los elementos de bloque, bien mediante un valor especifico, o bien
mediante un porcentaje de la anchura total del documento. En este caso es redundante fijar los márgenes
derecho o izquierdo y la anchura.
Si se especifican la anchura y los dos márgenes, el valor de del margen izquierdo tiene prioridad sobre los
demás valores en caso de conflicto. En este caso el valor del margen derecho especifica la distancia
máxima desde el borde derecho de elemento que lo contiene. El valor del anchura es utilizado sólo si no
sobrepasa los limites de anchura del elemento que lo contiene.
El alineación horizontal puede a izquierda, derecha o centrado. Esto se consige usando la

propiedad en CSS o la propiedad en JavaScript.
En los siguientes ejemplos se muestra el uso de márgenes, relleno, bordes, fondos y alineación.
Sintaxis CSS

´ B B
B : B
./0 ./0
B B
/ /
+ +
B B

B B
/ /
./ ./

H
B = B

B N B
? *
, % !" &
B F/0 B
F/0

B
B
/
B B
+0

Sintaxis JavaScript

"#
%! &
B : B
1
./0 2
./0
B B
4 '
/ C '
/
2'
+ 1'
+
B B
(
5

B B
4
/ C
/
2
./ 1
./

%!H&
B = B
$

B N B
(?
* '

,7
!"
B F/0 B

F/0
5
(

B
B
'%/ &
B B
%+0&

H4 H = H

1 ! J " ;
-
: - !
8 : ! 4
; ;

!
~ (3
Los bordes
se usan muy
a menudo.
Por ejemplo,
si un bloque
tiene borde
resalta
mucho más
que si no lo
tiene.
Este es otro
párrafo con
borde. Ten
cuidado con
los bordes,
no los hagas
demasiado
anchos, pues
de lo
contrario
ocuparan
demasido
espacio.
*
Los márgenes indican la separación entre el borde del bloque y el borde del documento, o elemento padre.
Se pueden fijar los márgenes derecho, izquierdo, superior e inferior. Para ello se deben utilizar las
siguientes nombres de propiedad:
Sintaxis CSS
c
c
c
c
c
Sintaxis JavaScript
c 4
c C
c 1
c 2
c %&
En vez de especificar los dos márgenes se puede utilizar la propiedad . Se pueden utilizar valores
específicos, como 200 puntos, o valores relativos, como el 50% de la anchura del elemento padre. Es
redundante fijar los dos márgenes y la anchura, pues dos de estos tres valores implican el tercero.
Para especificar los márgenes por defecto para un documento se deben especificar para la
etiqueta . En el siguiente ejemplo se fijan dichos márgenes en 20 puntos a derecha e izquierda.
Sintaxis CSS

./ ./

Sintaxis JavaScript

"#
%!& 1
./
2
./

Ejercicio: intente replicar el modelo de márgenes que puede objservar en la siguiente imagen:
#
Los bordes se pueden utilizar para muchas cosas, como por ejemplo, separar elementos o destacar ciertas
partes de un documento. Para que un borde se muestre es necesario darle anchura y color. A continuación
describimos como hacerlo. Se puede fijar la anchura del borde que rodea un elemento de bloque usando
las siguientes propiedades:
Sintaxis CSS
c
c
c
c
c
Sintaxis JavaScript
c 4 '
c C '
c 1'
c 2'
c '%&
Los valores que pueden tomar son tanto numéricos como palabras reservadas como thin, medium y thick.
Vea una muestra:
Se puede fijar el estilo del borde usando la propiedad de CSS o la

propiedad ( de JavaScript. Los valores que pueden tomar son ; ;
; ; #; ; y .
dotted dashed solid double
groove ridge inset outset
Las propiedades de borde se puede expresar de dos formas, por separado como hasta ahora, o combinadas
como se muestra en el siguiente ejemplo:
Por separado:

Combinadas:

$
El relleno indican la distancia entre el borde de un elemento y su contenido. El relleno se muestra incluso
si el borde del elemento no lo hace.
Se puede fijar el tamaño del relleno de un elemento de bloque utilizando las siguientes propiedades.
Sintaxis CSS
c
c
c
c
Sintaxis JavaScript
c 4
c C
c 1
c 2
Ejercicio: cree un estilo que aplicado a una tabla consiga que los elementos en el interior de las celdas
tengan un relleno de 16 pixels a izquierda y derecha y 8 pixels arriba y abajo.

#%
La características de anchura, márgenes, bordes y relleno de los elementos padre no son heredadas por sus
hijos. Sin embargo, a primera vista, a veces puede parecer que si son heredados, pues los valores los
elementos padre afectan a sus elementos hijos.
Supongamos que a un elemento # le fijamos un margen izquierdo de valor 10 puntos. De esta forma
la caja que le rodea se encuentra desplazada 10 puntos hacia la derecha. Además supondremos que no
tiene bordes ni relleno. Todos sus elementos hijo estarán pegados a su margen izquierdo, que como esta
10 puntos desplazado hacia la derecha, causara un efecto parecido a si ellos mismos también tuviesen
borde izquierdo.
Pensemos en que ocurriria si los hijos heredasen estas características de sus padres. El bloque <div> esta
indentado 10 puntos. Sus hijos a su vez estarán indentados otros 10 puntos con respecto a el, con lo cual
el aspecto global es que los hijos estarian indentados 20 puntos.
Algo parecido ocurriría con una imagen de fondo. Si se heredase esta propiedad en vez de ver una sola
copia de la imagen de fondo, normalmente apliacada a body, veriamos muchas copias de la esquina
superior izquierda si no se cambia la alineación por defecto de la imagen.

Las fuentes cargables consisten en la posibilidad de incluir en el documento HTML la definición de las
fuentes empleadas por si éstas no se encontraran disponibles en el sistema de destino. Di cha definición
consiste en un fichero que se debe colocar en la máquina servidora, al igual que el documento o las
imágenes.
Los ficheros de fuentes, como otros muchos recursos, se pueden conseguir en Internet, pero el usuario no
las puede grabar en disco (como puede hacer con el documento o las imágenes). Por otro lado, hay que
tener en cuenta que las fuentes están sujetas a las "leyes de derechos de autor", por lo que, antes de
utilizarlas dentro de nuestras páginas deberemos asegurarnos de tener permiso para hacerlo.
Para que todo funcione correctamente, al servidor habrá que añadirle un nuevo tipo MIME para que
reconozca este tipo de archivos. El nuevo tipo es , asociado a la
extensión ! .

'
na vez se dispone del fichero de definición de fuentes, por ejemplo, fuente.pfr, se pueden asociar al
documento a través de un estilo, por medio de la palabra , por ejemplo:

P ! ! !

o también con la etiqueta #$:
,

! ! !
na vez que el fichero ha sido cargado desde el servidor donde están las páginas, imágenes, fuentes, etc.,
para utilizar estas fuentes, modificaremos el valor del atributo de la etiqueta , por ejemplo:

G
Q G

o bien definiendo un estilo CSS, utilizando la propiedad :

G ;

!!!
!!!
#
8
G #
Este párrafo utilizará el tipo de fuente Gutemberg si está disponible, sino utilizará la sans -serif.
Podemos ver algunos ejemplos de fuentes descargables en la página

de http://www.myfonts.com/bestsellers.html . En tenemos otros ejemplos de fuentes descargables en la
página de TrueDoc. Esta es la fuente EyeBall. He aquí una muestra de la fuente Amelia tomada
directamente desde su servidor: ABCDEFGHIJKLMNOPQ^STVWXYZ

0
Dos programas que sirven para crear este tipo de ficheros son:
c Font Creator de High Logic

c Font Editorde SibCode
c FontLab Studio de Font Lab
Al crear el fichero de definición de fuente, podemos especificar el dominio de la red en el que permitimos
que se use dicha fuente.

$

En las hojas de estilo en cascada y en las hojas de estilo en JavaScript se pueden usar comentarios al
estilo C. Por ejemplo:
B ? : " B

! !
B ? : "
B
JavaScript además permite usar comentarios al estilo de C++. Por ejemplo:
! !
? : "
Los comentarios no pueden anidarse.

%
~
En esta sección se veran las nuevas etiquetas que han sido añadidas para trabajar con estilos.
4S56
Las etiquetas 37Q y 37Q se usan para agrupar elementos de bloque y poder aplicarles un cierto
estilo que nos interese. Esta etiueta de por sí no produce ningún cambio en el contenido de un documento.
Es equivalente a 37Q, sólo que esta se utiliza con elementos en línea.
Ejemplos:
E : !!!

#

E : !!!
D : !!!
#
E : !!!
D : !!!
4~"6
Las etiquetas (4A18 y (4A18 se usan para crear una hoja de estilo. En su interior podemos
especificar estilos para elementos, deficir clases e identificadores y en general establecer los estilos que se
utilizaran en todo el documento.
Para especificar que tipo de sintaxis se empleara utilizaremos el atributo 4AJ8. Su valor por defecto es
"text/css" y selecciona la sintaxis CSS. Mediante el valor "text/javascript" podemos seleccionar la sintaxis
JavaScript.
Ejemplos:
Sintaxis CSS

/0 /0
!

Sintaxis JavaScript

"#
!! 1
/0
!! 2
/0
! !!

4S 76
La etiqueta 179R sirve para poder utilizar en un documento una hoja de estilo que esta en otro fichero.
Sintaxis CSS

4
,

S!

!!!

Sintaxis JavaScript

4
,

"#

S!

!!!

4! 6
Las etiquetas (J$9 y (J$9 se utilizan para agrupar una porción de código a la que se le va
aplicar un estilo. A diferencia de 37Q, se utiliza con elementos en línea en lugar de con elementos de
bloque.
En el siguiente ejemplo se aplica un estilo a una parte del texto:
8 !

8
T ! 3 # !
El resultado del ejemplo es:
Este texto es normal. )

4
6' De nuevo el texto es normal.
Veamos otro ejemplo. Este hace diferentes las letras iniciales:

! ? .//0

8
I!!!
êsultado:
n un lugar de la Mancha...

%
~
En esta sección se enumeran los nuevos atributos que podemos utilizar con las etiquetas HTML y que son
utiles para trabajar con estilos. Estos atributos pueden ser usados con cualquier etiqueta para especificar
su estilo.
~"
El atributo STYLE determina el estilo del elemento al que se aplique. Por ejemplo:
Sintaxis CSS
*
5 *
" *
Sintaxis JavaScript
*
'
OO
OO5 *
" *
êsultado del ejemplo:

(1
!
El atributo CLASS permite aplicar una clase de estilo a un elemento. Aunque CSS y JavaScript usen
sintaxis ligeramente diferentes para la definición de clases de estilos, la forma de usar dichas clases es
común. Ejemplo:
Sintaxis CSS

H!#

Sintaxis JavaScript

"#
!#!H!(

so de la hoja de estilo:
H
#5 H # H
Se debe tener en cuenta que para los nombres de clase se distingue entre mayúsculas y minúsculas .
Cada elemento HTML sólo puede utilizar una clase de estilo.
Para especificar que una clase puede aplicarse a todos los elementos se utiliza el selector "all" , "*" o
simplemente no se especifica ninguna etiqueta cuando se definen las propiedades de la clase. En el
siguiente ejemplo todos los elemento de clase limon serán amarillos.
Sintaxis CSS

! ,

Sintaxis JavaScript

"#
! !!

*
E *

E : "
E
E :
S
Cuando se definen hojas de estilo, se pueden crear estilos individuales con nombre.
n 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 en estar en
negrita. También se crea un nombre de estilo, frio, que es de color azul. Se muestr a como utilizar frio para
crear una excepcion a calor.
Sintaxis CSS

!
´

Sintaxis JavaScript

"#
!! !

!! !'

!!


E : !!!

E : !!!
êsultado del ejemplo:

*

'''
*
'''

En esta sección se exponen las nuevas propiedades de los objetos JavaScript que son utilies para definir
hojas de estilos usando la sintaxis de JavaScript.
~!+
Cuando se usa sintaxis JavaScript dentro del elemento <style>, podemos seleccionar estilos usando la
propiedad tag del objeto document.
El siguiente ejemplo utiliza la sintaxis JavaScript para especificar que todos los párrafos sean de color
verde.

"#
! !

En sintaxis CSS este ejemplo seria:

La propiedad tags siempre se refiere al objeto document del documeto actual, por esto se puede omitir
document de la expresion document.tags. Asi, las dos siguentes líneas expresan lo mismo:
!! !

! !

Para definir estilos por defecto a todos los elementos de un documento se debe hacer a traves del
elemento <body>, porque todos los demás elementos heredan de este.
!! 1
/0 B U#( B
/0 B 5(( B
!
Ver la sección CLASS de los nuevos atributos para las etiquetas HTML.
S
Ver la sección ID de los nuevos atributos para las etiquetas HTML.

~
La propiedad se utiliza para establecer una lista ordenada de fuentes que se utilizarán
para mostrar el texto de la página. Si la primera fuente no está disponible intentará utilizar la siguiente, y
así sucesivamente.
Sintaxis CSS:
Sintaxis JavaScript: )
Posibles valores un nombre de fuente

Valor inicial la fuente por defecto
Se aplica a todos los elementos
Heredable si
Valores porcentuales no aplicable
Tipo de fuente: ; ; #; ; ; !!!
~

0
Sintaxis CSS: ?
Sintaxis JavaScript: (?
Posibles valores tamaño absoluto, tamaño relativo, longitud, porcentage

Valor inicial
Heredable si
Valores porcentuales relativos al tamaño del padre
Tamaño absoluto: ; ; ; ; ; ;
Tamaño relativo: ;
Longitud: numero + unidad
Porcentaje: tamaño de fuente relativo al tamaño de fuente del padre.

Sintaxis CSS:
Sintaxis JavaScript: '
Posibles valores ; ; ; ; // V//

Valor inicial
Heredable si

Sintaxis CSS:
Sintaxis JavaScript: (
Posibles valores ;

Valor inicial
Heredable si
Las propiedades de las fuentes se pueden combinar para permitirnos una escritura más sencilla. Vea el
siguinte ejemplo:
Por separado:

? H/
; !

Combinadas:
H/ ;

~)
Dar formato y estilo al texto es un elemento clave en el diseño de la mayoría de las páginas web. A
continuación veremos que CSS permite una gran flexibilidad a la hora de hacerlo.
S /

La interlínea es la separación con que el navegador muestra varias líneas de texto.
Sintaxis CSS:
Sintaxis JavaScript: 6
Posibles valores numero, longitud, porcentage,

Valor inicial tamaño por defecto para la fuente
Se aplica a elementos de bloque
Heredable si
Valores porcentuales relativos al tamaño de la fuente

~)
La decoración de texto agrupa varias modificaciones de estilo que en HTML se realizaban mediante
varias etiquetas por separado.
Sintaxis CSS:
Posibles valores ; ; ; ,

Valor inicial
Heredable si
~

~)
Las transformaciones de texto permite alterar si el texto se muestra en mayúsculas, minúsculas u otras
combinaciones.
Sintaxis CSS:
Posibles valores ?; ; ;

Valor inicial
Heredable si
!
~)
La alineación es equivalente al atributo align de HTML. Nos permite hacer que las líneas de texto se
alineen a derecha, izquierda, centro o ambos lados a la vez. Esto último es común en prensa, pero hay que
usarlo con cuidado en líneas de poca anchura porque puede producir un espaciado entre palabras
excesivo.
Sintaxis CSS:
Sintaxis JavaScript: $
Posibles valores ; ; ; "

Valor inicial
Heredable si
S
~)
Esta propiedad permite añadir un toque de indentación extra a la primera linea de un párrafo.
Sintaxis CSS:
Posibles valores longitud, porcentaje

Valor inicial 0
Heredable si
Valores porcentuales relativos a la anchura del padre
Longitud: numero + unidad
Porcentaje: longitud de indentación relativo a la anchura del padre.
Ejercicio: aplique una indentación extra sólo al primer párrafo tras un título de tamaño 1 (h1). Pista:
tendrá que seleccionar con h1 + p, que quiere decir cada p inmediatamente precedido por un h1.

#%
*
Sintaxis CSS: ; ; ; ;
Sintaxis JavaScript: 1; 2; 4 ; C ;

%&
Posibles valores longitud, porcentaje,

Valor inicial /
Heredable no
$
Sintaxis CSS: ; ; ; ;

Sintaxis JavaScript: 1; 2; 4 ; C ;

%&
Posibles valores longitud, porcentaje

Valor inicial /
Heredable no
! (
#
Sintaxis CSS: ; ; ;

;
Sintaxis JavaScript: 1'; 2'; 4 ';

C '; '%&
Posibles valores longitud

Valor inicial
Heredable no
#
Sintaxis CSS:
Posibles valores ; ; ; ; ; #;

Valor inicial
Heredable no
#
Sintaxis CSS:
Posibles valores color,

Valor inicial
Heredable no
Color: nombre de un color o 6 digitos hexadecimales indicando su valor rgb.
! (

Esta propiedad permite especificar la anchura de un elemento. El navegador intenta respetar la solucitud
del programador siempre que sea posible y no entre en conflicto con otras propiedades como los
márgenes.
Sintaxis CSS:
Sintaxis JavaScript:
Posibles valores longitud, porcentaje,

Valor inicial
Heredable no
!

Todo elemento se puede hacer flotar a derecha o izquierda mediante la propiedad . La caja que
contiene el elemento se puede hacer flotar a derecha o izquierda como se intenta explicar con la siguiente
imagen:
Sintaxis CSS:
Posibles valores ; ;

Valor inicial
g l
l
t l lti l l

ti i l lt tiliî i tit l lil l

li l i i t :

iî :
llllllllllllllllllllllll
llllllllllllllllllll
Cî î:
llllllllllll
Cî
:

bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, ...

La propiedad sirve para controlar cómo se comportarán los elementos que siguen a otros
elementos flotantes. Por defecto los elementos que suguen a los que flotan se mueven hacia arriba para
rellenar el espacio disponible. Esta propiedad permite especificar donde no habrá elementos flotantes. Las
opciones son , y .
Sintaxis CSS:
Posibles valores ; ; ;

Valor inicial
Heredable no
Ejercico: Modifique los ejemplos anteriores en los que se usa float para descubrir su efecto "limpiador".

Sintaxis CSS:
Posibles valores

Valor inicial ,
Heredable si
Esta propiedad especifica el color del texto.
Color: especificacion de un color (nombre, valor rgb).

S

Sintaxis CSS: ,
Sintaxis JavaScript: ,7
Posibles valores url

Valor inicial vacio
Heredable no

Sintaxis CSS: ,
Sintaxis JavaScript: ,J
absoluto o relativo, conjunto de coordenadas x y, palabras reservadas left, right,

Posibles valores
top, bottom, center
Valor inicial esquina superior izquierda
Heredable no
Valores
no aplicable
porcentuales

Sintaxis CSS: ,
Sintaxis JavaScript: ,5
Posibles valores color

Valor inicial vacio
Heredable no

Sintaxis CSS:
Posibles valores ninguno, ,; ;

Valor inicial segun HTML
Heredable no
Esta propiedad indica cuando un elemento es en línea, como <em>, de bloque, como <h1> o de lista,
como <li>.

Sintaxis CSS:
Sintaxis JavaScript: (4
ninguno, ,; ; -; ; ;

Posibles valores
; ;
Valor inicial ,
Se aplica a elementos cuya propiedad display es list-item
Heredable si
Valores
no aplicable
porcentuales

#

Sintaxis CSS:
Posibles valores ;

Valor inicial 64I1
Heredable si

El formato de un valor de longitud es un signo opcional ('+' o '-', '+' por defecto), un numero y una unidad
de medida. Ejemplos: 12pt, 2em, 3mm.
Hay tres tipos de unidades: absolutas, relativas y pixel.
Tipos de unidades absolutas:
c pt: puntos
c pc: picas
c px: pixels
c in: pulgadas
c mm: milimetros
c cm: centimetros
Tipos de unidades relativas:
c em: la altura de la fuente, normalmente la anchura o altura de la M mayuscula

c ex: la mitad de la altura la fuente, normalmente la altura de la letra'x'
c px: pixels, relativos a la superficie de dibujo
Los elementos hijo heredan los valores calculados y no los valores relativos. Por ejemplo:
? . H

? +
En este ejempo la indentación del texto en <h1> será 36pt y no 45pt.

n valor de color es o un nombre de color o una descripcion ^GB.
La lista de colores sugerida es: -; ,; ; ; ; ; ;
#; #; ; ; #; ; ; . Estos 16 colores se han
tomado de la paleta VGA de Windows.
,

!!,5

n color ^GB puede especificarse mediante 6 digitos hexadecimales. Los dos primeros indican rojo, los
dos segundos verde y los dos ultimos azul. Ejemplos:
´//// B " B

! !,5
´/// B B
También podemos utilizar la funcion rgb(). sa tres argumentos: rojo, verde y azul. Cada color puede ser
un entero entre 0 y 255, o un porcentaje. Ejemplo:
%.//; ./; .*/& B

B
,- , %//0; //0; ./0& B
B
0
La mayoría de las páginas de empresas importantes ya venían utilizando hojas de estilo desde hace años.
Ahora la mayoría de ellas están realizando una segunda transición para distribuir sus contenidos según
hojas de estilo. Es decir, la distribución del contenido de la página ya no se hace como antes mediante
marcos ni tablas sino mediante capas. Podemos ver ejemplos de esto en páginas tan importantes
comoSlashdot o Apple.
Aunque estos principios no son universales, si que son seguidos por la mayoría de los desarrolladores de
páginas web. Lo más habitual es repartir el contenido de la página en capas # y luego desde la hoja de
estilo distribuir las capas. Podemos ver un ejemplo muy sencillo en aquí.
La mayoría de los atributos utilizados podriamos considerarlos avanzados y no los hemos visto a lo largo
de este tutorial. Para ver una lista bastante completa echadle un vistazo a la Guia de referencia rápida de
hojas de estilo, especialmente al modelo de formato visual
Como ejercicio práctico os proponemos modifiqueis la hoja de estilo de esta sencilla página web y le deis
un estilo "visualmente agradable". Esto suele ser algo complicado puesto que es cuestión de gustos.

Guía de referencia rápida XHTML 1 (copia local)
Guía de referencia rápida CSS 2.1 (copia local)
World Wide Web Consortium

Especificacion original sobre Hojas de Estilo publicada por el World Wide Web Consortium:
http://www.w3.org/pub/WWW/T^/ÊC-CSS1(copia local)
Segunda especificacion sobre Hojas de Estilo publicada por el World Wide Web Consortium:
http://www.w3.org/pub/WWW/T^/ÊC-CSS2(copia local)
El Jardin Zen del CSS: http://www.csszengarden.com
Compatibilidad con los navegadores
Informacion de Netscape sobre HTML Dinamico
Tutorial de JavaScript en español: http://www.dansteinman.com/dynduo/es/
DoubleYou
Validadores de código: HTML y CSS
Otros tutoriales de HTML y CSS
Manual de referencia de CSS

Introducción Al HTML Dinámico

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introducción Al HTML Dinámico

Uploaded by

Copyright:

Available Formats

c Introducción al HTML Dinámico

¯ Introducción a las Hojas de Estilo

Los tres componentes del HTML Dinámico son:

     

El criterio de selección determina a que elementos se aplica, o es aplicable, el estilo. Si el criterio de

Es importante no incluir dobles comillas en la especificacion de valores de atributos en sintaxis CSS.

     

 %! &

so de la hoja de estilo

*4  *

^esultado del ejemplo

~S~   !"  ! "  #$

Para definir una hoja de estilo directamente dentro de un documento se utiliza la

so de la hoja de estilo

*8   ?    ! *

^esultado del ejemplo

~ ~S~   !& " ~!  !"   !'

d    

B "     !  B

^esultado del ejemplo

     

^esultado del ejemplo

     S 

so de la hoja de estilo

^esultado del ejemplo

!%/     )    

      )

so de la hoja de estilo

*8    ?     

^esultado del ejemplo

En cambio este  no es verde.

 %!; !; !&!

so de la hoja de estilo

^esultado del ejemplo

d      

^esultado del ejemplo

El siguiente ejemplo muestra el uso de varias hojas de estilo en un mismo documento.

so de la hoja de estilo

 4    <   :   

^esultado del ejemplo

Tal y como debería ser este párrafo es de color azul,  

Este otro párrafo no es de color azul,  

El alineación horizontal puede a izquierda, derecha o centrado. Esto se consige usando la

so de la hoja de estilo

H4 H   =   H

^esultado del ejemplo

~ (3      

Se puede fijar el estilo del borde usando la propiedad  de CSS o la

dotted dashed solid double

groove ridge inset outset

    

o también con la etiqueta #$:

o bien definiendo un estilo CSS, utilizando la propiedad  :

Podemos ver algunos ejemplos de fuentes descargables en la página

c Font Creator de High Logic

  B    ? : " B

JavaScript además permite usar comentarios al estilo de C++. Por ejemplo:

Los comentarios no pueden anidarse.

 E :  !!!

En el siguiente ejemplo se aplica un estilo a una parte del texto:

8     !   

El resultado del ejemplo es:

Este texto es normal.   )    

c Introducción al HTML Dinámico

¯ Introducción a las Hojas de Estilo

%! &

so de la hoja de estilo

4

~S~ !" ! " #$

so de la hoja de estilo

8 ? !

~ ~S~ !& " ~! !" !'

d

B " ! B

S

so de la hoja de estilo

!%/ )

)

so de la hoja de estilo

*8 ?

En cambio este no es verde.

%!; !; !&!

so de la hoja de estilo

d

so de la hoja de estilo

4 < :

Tal y como debería ser este párrafo es de color azul,

Este otro párrafo no es de color azul,

so de la hoja de estilo

H4 H = H

~ (3

Se puede fijar el estilo del borde usando la propiedad de CSS o la

o también con la etiqueta #$:

o bien definiendo un estilo CSS, utilizando la propiedad :

c Font Creator de High Logic

B ? : " B

E : !!!

8 !

Este texto es normal. )

so de la hoja de estilo:

E

so de la hoja de estilo:

!! !

Sintaxis CSS:

Sintaxis JavaScript: )

Sintaxis CSS: ?

Sintaxis JavaScript: (?

Tamaño relativo: ;

Sintaxis CSS:

Sintaxis JavaScript: '

Posibles valores ; ; ; ; // V//

Sintaxis CSS:

Sintaxis JavaScript: (

Posibles valores ;

H/ ;

Sintaxis CSS:

Sintaxis JavaScript: 6

Posibles valores numero, longitud, porcentage,

Sintaxis JavaScript: 3

Posibles valores ; ; ; ,

Sintaxis CSS:

Sintaxis JavaScript: 4

Posibles valores ?; ; ;

Sintaxis CSS:

Sintaxis JavaScript: $

Posibles valores ; ; ; "

Sintaxis CSS:

Sintaxis JavaScript: 7

Sintaxis JavaScript: 1; 2; 4 ; C ;

Posibles valores longitud, porcentaje,

Sintaxis CSS: ; ; ; ;

Sintaxis JavaScript: 1; 2; 4 ; C ;

Sintaxis CSS: ; ; ;

Sintaxis JavaScript: 1'; 2'; 4 ';

Sintaxis CSS:

Sintaxis JavaScript: (

Posibles valores ; ; ; ; ; #;

Sintaxis CSS:

Sintaxis JavaScript: 5

Posibles valores color,

Sintaxis CSS:

Sintaxis JavaScript:

Posibles valores longitud, porcentaje,