Dreamweaver M1 UD8 HTML Dinamico

7/31/2019 Dreamweaver M1 UD8 HTML Dinamico

http://slidepdf.com/reader/full/dreamweaver-m1-ud8-html-dinamico 1/51

Forinsur S.L. Centro de Formación | Manual de Usuario

HTML Dinám ico: Hoj as de est i lo CSS y Capas

• Qué es HTML Dinám ico o DHTML

A medida que vamos avanzando en la programación de páginas web nos

vamos fijando nuevos objetivos para crear cada día webs más excitantes.

Siguiendo este camino, llega un momento que el lenguaje HTML se nos

queda corto y tenemos que servirnos de alguna tecnología superior, que nos

permita realizar esos desarrollos más complejos y dinámicos.

Imaginaros por un momento que tuvieseis entre manos un gran proyecto,

un proyecto que supusiese la creación masiva de páginas, como puede ser

un periódico, donde cada día hay que cambiar los contenidos por completo,

o una enciclopedia online, con miles de páginas y referencias, por poner dos

ejemplos. Si utilizásemos únicamente HTML necesitaríamos un regimiento de

maquetadores web para poder llevar a cabo el trabajo de crear tantas y

tantas páginas y su actualización.

Así mismo, si quisiésemos desarrollar una aplicación en la web donde el

usuario tuviese que interaccionar con la página, o una aplicación que

ofreciese algún servicio, como un buscador o un gestor de correo a través de

la web, también nos veríamos muy limitados con el HTML.

Además, también estamos muy limitados con el HTML a la hora de crear

efectos en las páginas, animaciones que llamen un poco la atención del

usuario y que permitan hacer que las páginas web sean más divertidas.

DHTML es lo que hace posible crear unas páginas web que salven todas las

limitaciones del HTML como las comentadas con anterioridad. Como vemos,

el DHTML es muy amplio y engloba muchas técnicas que se pueden realizas

con multitud de lenguajes de programación y programas distintos.

Vamos a hacer una clasificación de DHTML para acotar un poco sus radios de

acción y para que el concepto se acote en áreas de la programación web que

podemos ya conocer.



Técnico Especialista en Diseño, Animación y Programación Web

DHTML de c l ien t e

Por un lado tenemos el DHTML que se desarrolla en el ámbito de una página

web, cuando la página se está viendo en la pantalla de los usuarios, es decir,

en los navegadores. En estos casos, para realizar cualquier tipo de efecto o

interactividad en la página tenemos como recurso al navegador, por eso se

llama de cliente.

La programación en el cliente sirve para muchas cosas, ejemplos de ello son

efectos diversos en las páginas, sonidos, videos, menús interactivos, control

y respuesta a las acciones de un usuario en la página, control sobre los

formularios, etc. Para hacer muchas de estas cosas podemos utilizar

diversos lenguajes de programación como Javascript y VBScript, o inclusopodemos meter aquí programas como Flash.

No obstante está más cercana a la idea del DHTML el programar scripts

dentro de la página con los lenguajes del lado del cliente. Javascr ip t para

todos los navegadores y VBScript para Internet Explorer. Estos lenguajes

trabajan, como se ha dicho, integrados con el navegador y dependen del

modelo y de la versión de éste.

Estos lenguajes no permiten el desarrollo de cualquier proyecto en Internet,

ya que al ser ejecutados en el navegador del cliente, no tienen acceso a

todos los recursos del sistema del usuario, para evitar agujeros de

seguridad, ni a los recursos del servidor donde están alojadas las páginas.

Esta limitación, añadida a la ya comentada de su dependencia del

navegador, los hace insuficientes para desarrollos avanzados, siendo más

bien un complemento de programación que el núcleo de verdaderas

aplicaciones en el web.

DHTML de serv id or

Por otro lado, existen una serie de lenguajes que se basan en el servidor

para ejecutar sus scripts, al igual que la programación del cliente se basa en

el navegador. Cuando una página es solicitada por parte de un cliente, el

servidor ejecuta los scripts y genera una página resultado, que envía al

cliente. La página resultado contiene únicamente código HTML, por lo que

puede ser interpretada por cualquier navegador sin lugar a errores,

independientemente de su versión.

http://www.desarrolloweb.com/articulos/25.php

http://www.desarrolloweb.com/manuales/1



http://www.desarrolloweb.com/manuales/1





Esta independencia del navegador ya es una ventaja significativa con

respecto a la programación en el cliente, pero lo es aun más que contamos

con todos los recursos del servidor donde están alojadas las páginas. Estos

recursos, como podrían ser gestores de bases de datos, servidores de correo

o el propio sistema de archivos del servidor, son los que nos van ha permitir

construir todo tipo de aplicaciones.

Como ventajas adicionales se puede destacar que el código de las páginas

con los scripts nunca llega al cliente, recordamos que al navegador sólo le

llega HTML, y esto implica que nuestros visitantes nunca van a poder

acceder al corazón de las aplicaciones que hayamos desarrollado, es decir, a

los scripts del lado del servidor.

Esquema del funcionamiento de las páginas con scripts del servidor

Lenguajes del lado del servidor son ASP, desarrollado por Microsoft, PHP de

código libre, JSP para programar en Java, o alguna otra interfaz como CGI,que se desarrolla en lenguajes como C o Perl.

• Qué es un a Capa

Las capas no son más que unos recuadros, que pueden situarse en cualquier parte

de la página, en los que podemos insertar contenido HTML. Dichas capas pueden

ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño.




Las capas pueden moverse de una posición a otra

de la ventana pulsando sobre el recuadro blanco, y sin

soltar el ratón, arrastrándola hacia la nueva posición.

También pueden se r red imens ionadas pulsando

sobre los recuadros negros, y arrastrándolos hasta

conseguir el tamaño deseado.

Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes,

animaciones flash, y todos los elementos que puede contener un documento

HTML.

Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se

elimina también la capa.

• I nse r tando Capas

Las capas pueden insertarse en una página a través del menú I n s e r t a r , opción

Objet o de d iseño, Capa .

Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello

hay que seleccionarla primero.

Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando

sobre el icono correspondiente, pero esto no resulta útil cuando existen

muchas capas en un mismo documento, ya que todas las capas tienen asociada

una imagen igual a esta, y no es fácil seleccionar la deseada a la primera.

Cuando existen varias capas en un mismo documento, es preferible

seleccionarlas a través de la pestaña Capas del panel Diseño , que puede

abrirse a través del menú Ventana opción Capas. Si la opción Capas no te

aparece directamente en este menú, posiblemente esté dentro de la opción

O t r o s. También puedes abrir el panel pulsando F2 .

En dicho panel aparecen los nombres de todas las capas que existen en el

documento actual, y para seleccionar una de ellas simplemente hay que pulsar

sobre el nombre en el panel.




• Modi f i cand o Capas

Las propiedades de la capa se especifican a través de su i nspec to r de

prop iedades.

I D d e c a p a es el nombre de la capa. También puede ser cambiado a

través del panel Capas, haciendo doble clic sobre él.

I z y Su p indican la distancia en píxeles que hay entre los límites izquierdoy superior del documento y la capa.

An y Al indican la anchura y la altura de la capa.

Í n d i c e Z es el número de orden de colocación de las capas. Este valor

también puede cambiarse a través del panel Capas. Una capa será

solapada por aquellas capas cuyo índice Z sea mayor que el suyo.

Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro

tipos:

Defau l t (visibilidad según el navegador),

I n h e r i t (se muestra la capa mientras la página a la que

pertenece también se esté mostrando),

Vis ib le (muestra la capa, aunque la página no se esté

viendo) y

Hidden (la capa está oculta).

La visibilidad también puede cambiarse a través del panel Capas, pulsando

sobre la imagen del ojo. El ojo abierto indica Vis ib le, y el ojo cerrado

indica Hidden .

A través de I m . f o nd o y Co l puede indicarse una imagen o un color de

fondo para la capa.




Desb. (Desbordamiento) controla cómo aparecen las capas en un

navegador cuando el contenido excede el tamaño especificado de la capa.

Vis ib le indica que el contenido adicional aparece en la capa. La

capa se amplía para darle cabida.

Hidden (oculto) especifica que el contenido adicional no se

mostrará en el navegador.

Scrol l (desplazamiento) especifica que el navegador deberá añadir

barras de desplazamiento a la capa tanto si se necesitan como si

no.

A u t o (automático) hace que el navegador muestre barras dedesplazamiento para la capa cuando sean necesarias (es decir,

cuando el contenido de la capa supere sus límites).

• Capas dent ro d e Capas

Anidar una capa significa crear una capa dentro de otra, esto se usa a

menudo para agrupar capas. Una capa anidada se mueve junto con su capa

padre y puede configurarse para que herede la visibilidad de esta.

Hacer que las capas se aniden automáticamente:

Para hacer que las capas se aniden automáticamente, es decir que al crear

una capa sobre otra, esta quede automáticamente adentro, realice lo

siguiente:

Edición / preferencias / Capas / Anidar al crear en capa / Aceptar. Y listo!

Anidar las capas manualmente:

Una vez creada la capa que se desea anidar dentro de otra, abrir la ventana

de capas (Ventana / Capas), seleccionar la capa que se desea anidar /

mantener oprimido control y arrastrarla hasta la capa padre. En la ventana

de Capas aparecerá ligada a la otra.




• Prob lem as con las Capas: Cóm o ev i t a r los

La casilla evitar solapamiento:

Primero tenemos que saber que las capas que se están solapando no sepueden convertir en las tablas. Si hemos planeado todo con antelación,

antes de empezar a diseñar y colocar las capas en el documento podemos

restringir el solapamiento de las capas desde el menú Ventana> Capas que

abrirá un grupo de paneles donde podemos seleccionar la casilla Evitar

solapamiento, que no dejará que se solapen dos capas durante el diseño.

• Diseñando con Capas / conver t i r Capas a tab las y v i ceve rsa

También tenemos otra posibilidad de convertir las capas creadas con

Dreamweaver en las tablas HTML a través del comando "Convertir capas a

tabla". Este comando nos provee una ventaja de poder crear las tablas en la

ventana de diseño trabajando con las capas que nos dan muchas másposibilidades de mover y colocar las piezas con una precisión y que luego se

convierten en las tablas perfectamente ordenadas. El proceso de la creación

es bastante simple. Necesitamos colocar bien nuestras capas, planeando

bastante bien antes de convertirlas.




Cuando estamos preparados para convertir todas las capas que hemos

colocado en el documento seleccionamos Modificar > Convertir > Capas a

Tabla. Aparecerá un cuadro de diálogo que nos proporcionará variasopciones para determinar cómo se va a llevar a cabo la conversión y qué

tipo de tabla va crear el Dreamweaver. Las opciones de Herramientas no son

tan importantes para el resultado final; simplemente nos ofrecen algunos

automatismos y ajustes. La parte importante del cuadro es el de Diseño de

Tabla que de verdad determina cómo se va dibujar la tabla y cómo se va a

generar el código.

• Qué so n la s CSS

Los estilos CSS son hojas de estilo de actualización automática. Se usan

principalmente para especificar el formato de texto, pero algunas de sus

opciones pueden utilizarse para definir atributos de imágenes y otras

características que no permiten definir los estilos HTML, como el color de

fondo para el texto, etc.

También permiten aplicar un estilo sobre todas las etiquetas de un mismo

tipo, como puede ser la etiqueta A HREF, que corresponde a los

hiperenlaces. De este modo, todos los hiperenlaces de la página adquirirían

la apariencia definida en ese estilo. El inconveniente que tiene trabajar con

hojas de estilos es que algunos navegadores no las soportan y las ignoran,

aunque estos navegadores suelen ser versiones antiguas, por lo que ocurrirá

en pocos casos. • Crean do es t i los

En este tema aprenderemos cómo crear estilos CSS para crear páginas que

sigan los fundamentos y reglas marcadas por el W 3 C (Word Wide Web

Consortium).

Esta metodología exige que el archivo HTML solamente muestre datos

organizados y estructurados con etiquetas de marcación HTML, mientras

que la parte de formato recaería sobre los estilos CSS única y

exclusivamente.

Para poder lograr esto deberemos dominar en profundidad CSS para poder

posicionar, modificar o adornar la página de un modo eficiente.

En este tema aprenderemos controles que nos ayudarán a presentar el

texto e imágenes de nuestras páginas de una forma mucho más limpia y

cómoda.

La forma más habitual de presentarse es en la sección head de la páginade esta forma:

< st y le t y p e= " t e x t / css" >

< ! - -

b o d y {

f on t - fam i l y : Ve rdana , A r i a l , He lve t i ca , sans -ser i f ;

f o n t - s i ze : 1 2 p x ;

http://www.w3c.es/

http://www.w3c.es/

t e x t - a l i g n : c e n t e r ;

b a ck g r o u n d : u r l ( ' i m a g e n e s/ f o n d o .g i f ' ) r e p ea t - x b ot t o m ;

}

/ / - >

< / st y le>

Este método lo utilizaremos para incrustar el código directamente sobre el

archivo HTML.

• Ho jas de est i l os ex te rn as

También es posible importar archivos de hojas de estilos (de extensión

.css ) que hayamos creado. Esta opción es mucho mejor porque así

podemos aplicarla sobre varias páginas a la vez sin la necesidad de escribir

el código en cada una de ellas.

En este caso deberemos crear un archivo CSS (Archivo → Nuevo y

seleccionando CSS) donde escribiremos las reglas de estilo del mismo

modo en el que hemos visto más arriba pero eliminado el componente

HTML:

b o d y {

f on t - fam i l y : Ve rdana , A r i a l , He lve t i ca , sans -ser i f ;

f o n t - s i ze : 1 2 p x ;


b a ck g r o u n d : u r l ( ' i m a g e n e s/ f o n d o .g i f ' ) r e p ea t - x b ot t o m ;

}

Luego deberíamos vincularlo en la página HTML utilizando la etiqueta link:

< l in k r e l= " s t y le sh ee t " h r e f = " r u t a/ d el / e st i lo / n o m b r e.css" / >

Una página puede contener ambos tipos de estilos CSS, como por ejemplo,

tener un archivo vinculado y luego un bloque de estilo incrustado. O incluso

tener varias hojas de estilo asociadas.

La organización de los estilos debes decidirla tú. Pero recuerda que cuanto

menos código repitas en tus páginas, más fácil será luego de modificar o

exportar.

También es posible declarar el estilo en línea. Es decir, tal y como se van

creando las etiquetas HTML, para ello deberás utilizar el atributo s ty l e:

 Es t e t e x t o e st á e n r o j o y

c on u n t a m a ñ o d e 3 0 p íx e le s

El estilo en línea es más desaconsejado porque es más difícil de modificar

al tener que buscarlo por el texto y modificándolo uno a uno.

• Ap l i cando es t i l os

Un archivo CSS (por suerte) tiene una estructura muy bien definida, por loque bastará con que nos aprendamos unas cuantas reglas para poderempezar a familiarizarnos con su creación.

Su estructura siempre es la siguiente:s el e ct o r { p r o p i e d ad : v a lo r ; }

Esto es lo que podríamos llamar una regla CSS. Podemos escribir tantas

reglas CSS como queramos, siempre una después de otra.

Entre llaves se encierra la definición del estilo, que viene dada por una lista

de propiedades y sus valores separados por puntos y comas.

Los selectores son aquellos sobre los que se aplica la definición del estilo

CSS.

Hay 3 tipos de selectores:

Et iq uet a HTML

Clase

I d e n t i d a d

Cualquier etiqueta HTML es un selector (eliminando los < y > ). Por lo que

cualquier elemento de una página puede ser modificado genéricamente

para que tome un mismo aspecto, por ejemplo:

p { f o n t : 1 3 p x b o l d Ar i a l; }

Hace que todos los párrafos (la etiqueta P) tendrán la fuente de un tamaño

de 13 p íxe les , estará en n e g r i t a y será del tipo Ar ia l .

Una clase es un selector que afectará sólo a aquellas etiquetas que

nosotros decidamos, por ejemplo:

. r o j o { c ol o r : r ed ; }

Hemos creado una clase que hace que el color de la letra que tenga

asociada esta clase sea rojo. Como puedes ver, la clase se define porque

tiene un punto delante.

Ahora podríamos aplicar este estilo sobre cualquier etiqueta que queramos.

 Es t e e s u n t e x t o en r o j o 

< d i v cl as s= " r o j o " > Es t e es u n b l o qu e co n e l t ex t o r o j o < / d i v >

En este ejemplo estaríamos creando un párrafo o un bloque y ambos

tendrían el texto de color rojo por habérseles aplicado la misma regla CSS.

Los selectores de clase deben estar siempre escritos con carácteres

alfanuméricos y sin utilizar espacios (utiliza el subrayado _ para separar

palabras).

Por último encontraríamos los selectores de identidad. Estos sólo se aplican

una vez y se asocian a una etiqueta.

# co n t en ed o r { w i dt h : 6 0 0 p x ;}

Más tarde en el código podremos encontrar:

< d i v i d = " co n t e n ed o r " > Es t e es u n b l o q u e qu e c on t i e n e t ex t o < / d i v >




Las clases de identidad se identifican por empezar el selector con un signo

# . En el código deberá establecerse la regla CSS asociándosela al atributo

I D .

Este atribudo (i d ) recoge el nombre del elemento que se ha creado con la

etiqueta HTML.

A partir de ese momento se podría referenciar a ese cuadro de texto como

con tenedor utilizando JavaScript.

Selector es CSS

Aunque sólo hay tres tipos de selectores diferentes hay diversas formas de

combinarlos para producir hojas de estilo más complejas.

Ahora veremos estos tipos de combinación:

Agrupac ión : Los selectores se pueden agrupar separados po r comas,

por lo que:

p { b a ck g r o u n d - co l or : # 0 0 0 0 3 3 ; }

. az u l _ o sc u r o { b a ck g r o u n d - c o l o r : # 0 0 0 0 3 3 ; }

# c ab e ce r a { b a ck g r o u n d - co l or : # 0 0 0 0 3 3 ; }

Puede escribirse como:

p , .a zu l _ o s cu r o , # c ab e ce r a { b a ck g r o u n d - c o l o r : # 0 0 0 0 3 3 ; }

Descendenc ia: Podemos obligar que un estilo sólo se aplique sobre un

e l em e n t o q u e e s t é d en t r o d e o t r o . Por ejemplo:

h 1 {

co lo r : # 0000 FF;

f o n t - w e i g h t : b o l d ;

}

b { c ol o r : # 0 0 0 0 FF; }

Esto hará que todos los encabezados H1 de la página sean de color azu l y

en n e g r i t a , y que los textos en negrita se muestren azu les .

Pero, ¿qué pasa si queremos resaltar texto en los encabezados, no

podremos utilizar la negrita?

< h 1 > Tít u l o: El u so d e l a N eg r i t a < / h 1 >

En este caso deberemos hacer uso de la descendencia:

h 1 b { co l or : r e d ; }

Ahora los textos marcados con la etiqueta B en los encabezados H1 serán

de color r o j o .

Al escribir dos selectores seguidos obligamos a que el segundo tenga que

estar dentro del anterior.

Puedes utilizar todas las anidaciones que quieras y mezclar los selectores,

por ejemplo:

# c o n t e n ed o r p .d e r e ch a { f l o at : r i g h t ; }

En este caso todas las etiquetas con la clase derecha que se encuentren

dentro de un párrafo del elemento definido como con tenedor f l o t a r á n a

l a de recha .

Se lecto r es de A t r i bu to

Hasta ahora hemos visto que los selectores se pueden combinar de

bastantes formas. Veamos que el poder de CSS no sólo se queda ahí sino

que avanza un poco más para ayudarnos a establecer estilos según e l t i po

d e a t r i b u t o s q u e t e n g a u n a e t i q u e t a.

Un atributo es una parte de la descripción de un selector HTML. Por

ejemplo, en:

< a h r ef = " h t t p : / / w w w .f o r in su r .e s" t ar g et = " _ b l an k " > En l ace < / a >

A es el selector de la etiqueta, mientras que h r e f y t a r g e t son atributos.

CSS permite entrar en el contenido de las etiquetas para cambiar susestilos. Veamos cómo hacerlo:




N o m b r e d e A t r i b u t o: Podemos establecer estilos para etiquetas con

d e t e r m i n a d o s a t r i b u t o s d e f i n id o s, por ejemplo:

a [ h r e f ] { f o n t - f a m i l y : A r i al , H e lv e t i ca ; }

En esta línea estamos estableciendo que cualquier etiqueta a que tenga el

atributo h r e f cambie su tipo de letra a Ar ia l o He lvét i ca .

V a l o r d e A t r i b u t o: Podemos aplicar estilos a etiquetas q u e t e n g a n

d e t e r m i n a d o v a l o r en u n a t r i b u t o , por ejemplo:

a [ t a r g et = " _ b l an k " ] { f o nt - w e i g ht : b o ld ; }

Esta línea hará que se convierta en n e g r i t a cualquier enlace que abra u n an u e v a v e n t a n a al hacer clic.

Pseudo- c lases y Pseudo-e lem ent os CSS

Por último, y para terminar con los selectores veremos las pseudo-clases,

elementos que añadiremos a los selectores para evidenciar algún estado.

Y los pseudo-elementos, que aplicaremos sobre los selectores en dos casos

muy sencillos.

Primero veremos 4 tipos diferentes de pseudo-clases, que hasta ahora sólo

pueden aplicarse sin ningún problema sobre la etiqueta A (que utilizamos

para crear vínculos). Son: : l i nk , : v i s i t ed , : hove r y : ac t i ve .

Incluyendo estas pseudo-clases en nuestros estilos CSS podremos

modificar el modo en el que se visualizarán los enlaces.

Veamos el siguiente ejemplo:

a : li n k { c ol o r : r e d ; }

a : v is it e d { c o lo r : b l u e ; }

a : h o v er { c ol o r : g r e en ; }

a : ac t i v e { c ol o r : y e ll o w ; }

Esto hará que los enlaces se muesten de color r o j o ( r e d ) en nuestrapágina. Es el estado l i nk .




Cuando ya hayan sido visitados por el usuario se quedarán de color azu l

( b l u e ) . Es el estado v i s i t ed . Este estado se renovará dependiendo del

navegador utilizado y se mostrará durante un tiempo determinado (una

sesión, etc...).

En el momento en que coloques el ratón sobre él se mostrará de color

v e r d e ( g r e e n ) . Es el estado h o v e r .

Y finalmente en el momento que se haga clic sobre él, y mientras se

mantenga pulsado el botón se verá de color a m a r i l l o ( y e l l o w ) . Es el

estado ac t i ve.

Puedes aplicar estas pseudo-clases de cualquier forma de las anteriores.

a .m e n u : h o v er { t e x t - d e c o r a t i o n : n o n e ; }

Esta línea hará que los elementos A de la clase m e n u no muestren

subrayado (ni ningún tipo de decorac ión ) cuando se coloque el ratón

sobre él.

Puedes utilizarlas todas a la vez o descartar los estados que no quierastratar. Pero recuerda, deberán estar declaradas en el estilo CSS en es te

o r d e n para que funcionen correctamente. Si los cambias de orden es

posible que no te funcionen.

Luego tenemos dos pseudo-elementos que actuarán sobre el texto del

documento, son: : f i r s t - l e t t e r y : f i r s t - l i ne (p r i m e r a l e t r a y p r i m e r a

l ínea respectivamente).

p : f i r st - l e t t e r { f o n t - s i ze : 2 6 p x ; }

p : f i r st - l i n e { f o n t - v a r i a n t : s m a l l - ca p s; }

Puedes ver un ejemplo de cómo actuarían estos pseudo-elementos en la

siguiente línea:

Esto es una Prueba, la primera línea esta en versa les y la primera letratiene un tamaño de 2 6 p x .




Cont ro les de fuen te

Ya hemos visto cómo manejarnos con los selectores, ahora veremos cómo

deberemos crear las definiciones de los estilos.

Empezaremos viendo los controles de modificación de fuentes:

f o n t - f a m i l y : indica la familia de fuente en la que se mostrará el texto,

puede tomar los valores ser i f , sans-ser i f , cu rs i ve , f an tasy y

monospace :

serif, sans-serif, cursive, fantasy,

monospace...

Aunque esta propiedad también soporta que nombres un listado de

diferentes fuentes. El navegador las buscará en el equipo del usuario y si la

encuentra la mostrará. El orden en este caso también es importante, pues

mostrará la que primero encuentre.

Es recomendable, aun así, indicar siempre una familia en el caso de que no

se encontrase ninguna de las fuentes instaladas, ejemplo:

p { f on t - fam i l y : A r i a l, He l ve t i ca, sans -ser i f ; }

f o n t - s t y l e: indica el estilo de la fuente, puede tomar los valores i t a l i c y

ob l i que .

italic, oblique

Algunas fuentes están hechas especialmente para tener una variante en

i t a l i c (cursiva), para aquellas que no lo tengan implementado utiliza el

atributo ob l i que que hace que el navegador incline automáticamente la

fuente para mostrarla en cursiva.

f o n t - v a r i a n t : establece la variante de la fuente. Puede tomar el valor

sma l l - caps (versales). El valor n o r m a l hará que se muestre el estado por

defecto de la fuente.

SMALL-CAPS, Normal




f o n t - w e i g h t : indica el peso de la fuente. Los valores más utilizados son:

bo lde r , bo ld y l i gh te r . También puedes utilizar valores del 1 0 0 al 9 0 0 ,

siendo el primero la fuente más ligera y el último el más pesado.

bo lde r , bo ld , lighter

f on t -s i ze: establece el tamaño de la fuente. Puedes utilizar lo valores

predefinidos sma l l e r , l a rge r , x x - s m a l l , x - s m a l l , sma l l , m e d i u m , l a r g e ,

x - l a r g e y x x - l a r g e . Los dos primeros valores establecen el tamaño de la

fuente en comparación a la definida en el elemento padre donde se

encuentra, así se mostrará más pequeña (sma l l e r ) o más grande (l a rge r ).

xx-small, x-small, small, medium, large, x-large,

xx-large

También es posible establecer el tamaño del texto utilizando porcentajes.

Que también mostrará el texto en relación a su elemento padre.

Pero, de lejos, la forma más utilizada es especificando expresamente el

tamaño de la fuente en una cifra.

Las unidades utilizadas son varias, em s, p u n t o s, píxe les... El sistema de

puntos (p t ) varía un poco según los sistemas operativos, por lo que es

aconsejable utilizar alguno de los restantes:

a { f o n t - si ze : 1 2 em ; }

p { f o n t - si ze : 1 4 p x ; }

Es posible definir todos estos estilos que hemos visto en una sola

definición. Para ello utilizaremos f o n t :.

Así una retaíla de reglas como esta:

p { f o n t - s t y l e : it a l i c; }




p { f o n t - v a r i a n t : s m a l l - ca p s; }

p { f o n t - w e i g h t : b ol d ; }

p { f o n t - s i ze : la r g e ; }

p { f o n t - f a m i l y : m o n o sp a ce ; }


p {

f on t : i t a l i c sm a l l - caps bo ld l a rge m onospace ;

}

Recuerda que el orden debe ser siempre el mismo: s ty l e , v a r i a n t ,

w e i g h t , size y f a m i l y .

Si no vas a utilizar una de las definiciones puedes omitirla como en este

ejemplo:

p {

f on t : bo ld sans -se r i f ;

}

Espaciado

Continuando con los controles de texto tenemos la propiedad w o r d -

spac ing que establece la separación entre las palabras de un texto.

Es te tex to t i ene una separac ión de 18 p íxe les en t re sus pa lab ras .

Es te , s in em bargo , t i ene una separac ión de -5 p í xe les .

También podemos utilizar la propiedad l e t t e r -spac ing para establecer la

distancia aplicada entre los caracteres del texto:

E s t e t e x t o t i e n e u n a s e p a r a c i ó n d e 5

p í x e l e s e n t r e s u s p a l a b r a s .

Este, sin embargo, tiene una separación de -2 píxeles.




ve r t i ca l -a l i gn establece la alineación vertical del texto. Puede tomar los

valores base l ine , su b , super , t op , t e x t - t o p , m i d d l e , b o t t o m , t e x t -

b o t o m .

baseline, sub,super, top, text-top, middle, bottom, text-

bottom

Observa como los valores su b , super , t e x t - b o t t o m y t e x t - t o p toman

como referencia el tamaño del texto, mientras que t op , m i d d l e y b o t t o m

toman como referencia el alto del párrafo completo (en este caso lo marca

la imagen de forinsur).

l i ne -he igh t indica el alto de línea del texto, igual que el resto de

propiedades puedes establecer esta altura en píxe les , em s o p u n t o s .

Este texto tiene un alto de línea de 30 píxeles. Puedes ver que la separación entres

estas líneas es mayor que la definida por defecto.

Este texto tiene un alto de línea de 10 píxeles. Puedes ver que la separación entresestas líneas es menor que la definida por defecto.

Si estableces simplemente valores numéricos podrás indicar el alto

respecto a su tamaño normal. Por ejemplo:

p { l in e - h ei g h t : 2 ; }

Esta línea muestra el texto con un i n te r l i neado dob le . Si hubiesemos

escrito 1 .5 el interlineado sería un 5 0 % más alto de lo normal.

t e x t - a l i g n establece la alineación horizontal del texto. Sus valores ya tedeben ser familiares: l e f t , r i g h t , cen te r y j u st i f y .

Este texto está alineado a la izquierda con le f t .

Este texto está alineado a la derecha con r i g h t .

Este texto está alineado al centro con cen te r .

Este texto está justificado, ambos márgenes del texto tocarán los bordes. Si es

necesario estirar las líneas se hará.




t e x t - i n d e n t indica el tamaño de identación (o sangría) del texto. Tomará

valores en puntos, píxeles o ems, como prefieras.

Texto identado 24px

Texto identado 48px

Texto identado 72px

w h i t e - s p a c e, esta propiedad es muy útil para evitar que el ancho del

navegador modifique el ancho de las líneas del texto.

Puede tomar el valor n o w r a p para que el texto se muestre en una sóla

línea sin insertar saltos no deseados:

Es te tex to n o t i ene sa l tos de l í nea , as í que se m os t ra rá en toda su

anchura aun que e l navegador sea más es t recho . Haz más pequeña

l a ven tana pa ra p robar l o .

También puedes establecer esta propiedad al valor p r e. En este caso todos

los espacios insertados en el texto se mostrarán y no se convertirán en uno

sólo como ocurre normalmente:

En es te tex t o

podem os i n t rod uc i r t an t os espac ios como q ueram os . Da i gua l s i son

m á s d e u n o , se m o s t r a r á n i g u a l m e n t e .

Este último valor no funciona correctamente en I n t e r n e t Ex p l o r e r así que

es recomendable utilizar la entidad HTML ( ) para mostrar más de un

espacio.

t e x t - d e c o r a t i o n establece si el texto llevará decoración o no. Estapropiedad es muy útil para modificar el estilo de los enlaces. Los valores

que puede tomar esta propiedad son n o n e , u n d e r l i n e , over l i ne , l i ne -

t h r o u g h , b l i nk .

none, underline, overline, line-through, blink

El valor b l i nk hace que el texto parpadee. Este valor sólo funciona en

determinados navegadores (no en I n t e r n e t Ex p l o r e r).




Con la propiedad t e x t - t r a n s f o r m puedes indicar la transformación del

texto de la siguiente forma. Capi ta l ize cambia la primera letra de cada

palabra a mayúsculas. Uppercase y l ow ercase cambian el texto a

mayúsculas o minúsculas respectivamente.

Este texto tiene el valor capitalize, las primeras letras serán en

mayúsculas, el resto se mostrará en minúsculas

automáticamente

ESTE TEXTO TIENE EL VALOR UPPERCASE, AUNQUE ESTE

ESCRITO EN MINÚSCULAS SE CAMBIARÁ A MAYÚSCULAS

Este texto tiene el valor lowercase, aunque este escrito en

mayúsculas se cambiará a minúsculas

Por último veremos la propiedad co lor que establece el color del texto.

Esta propiedad puede tomar un valor hexadecimal (como vimos en el

apartado de colores del tema 3).

De modo que simplemente haría falta especificar el color de este modo:

p { co lo r : # 0 0 6 6 00 ; }

Unos ejemplos serían los siguientes:

#006600 #00FF00 #003399 #33CC99 #66CCFF #00CCCC

#990000 #999900 #FF9933 #996699 #CCFF33 #CCFF99

También existe la posibilidad de utilizar unas palabras reservadas paranombrar unos cuantos colores básicos.

El modo en el que se definiría el estilo sería el mismo:

p { c ol o r : r ed ; }

Aunque en este caso en vez de introducir su equivalente hexadecimal,

referenciaríamos directamente su nombre.




Puedes encontrar el l i s tado de los nombres de co lo r que puedes

utilizar en el sitio de la W3C.

Cont ro les de ra tón

Hemos decidido dedicar este apartado a la propiedad cu rso r que modifica

la apariencia del ratón cuando se sitúa sobre una etiqueta afectada por

esta propiedad CSS.

Puedes aplicarla sobre párrafos, enlaces o incluso sobre el b o d y mismo

(así el cursor tendrá una forma personalizada en toda la página!).

El modo en el que se utiliza es igual que el resto:

p {

c u r s or : p o i n t e r ;

}

Y puede tomar los valores a u t o , crossha i r , p o i n t e r , m o v e , n- res i ze ,

ne- res i ze , e-res ize , se- res ize , sw - res i ze , w - r e s i z e , n w - r e s i z e , t e x t ,

w a i t y he lp .

Cont ro les de l i s ta

Hemos visto muchas propiedades que afectan al modo en el que se

muestran los textos de nuestras páginas.

Ahora haremos un alto para ver unas cuantas propiedades que utilizaremos

para dar estilo a nuestras listas.

l i s t - s t y l e - t y p e permite establecer el tipo de viñeta utilizada en las listas,

puede tomar los valores disc , c i rc le , square , dec ima l , l o w e r - r o m a n ,

u p p e r - r o m a n , l o w e r - a l p h a , u p p e r - a l p h a y n o n e .

• disc 1

• disc 2

• disc 3

o circle 1

o circle 2

o circle 3

square 1

square 2

square 3




1. decimal 1

2. decimal 2

3. decimal 3

i. lower-roman

1

ii. lower-roman

2iii. lower-roman

3

I. upper-roman

1

II. upper-roman

2III. upper-roman

3

a. lower-alpha

1

b. lower-alpha

2

c. lower-alpha3

A. upper-alpha

1

B. upper-alpha

2

C. upper-alpha3

• none 1

• none 2

• none 3

Este estilo debe ir asociado a la etiqueta l i , u l o o l .

l i s t - s t y l e - image permite mostrar una imagen en lugar de una viñeta.

La forma en la que lo haremos será la siguiente:

u l { l i st - s t y l e - i m a g e : u r l ( g r a f i co s / l i st a . g if ) ; }

Así declararemos el estilo. Luego bastará con escribir una lista

desordenada, pues hemos utilizado el selector u l para marcar el estilo.

• elemento 1

• elemento 2

• elemento 3

• elemento 4

Observa que hemos utilizado una URL . Esta ruta debe ser o bien absoluta,

o re la t i va a l a h o ja de es t i l os . Nunca a l document o dond e se ap l i ca !

l i s t - s t y l e -pos i t i on sirve para establecer sangrados colgantes. Puede

tomar dos valores o u t s i d e (fuera) e i ns i de (dentro).

Veamos un ejemplo que lo ilustrará perfectamente:




• elemento 1

• elemento 2 con valor ou ts ide

• elemento 3

• elemento 4 con valor i ns ide

• elemento 5

Como puedes ver el valor i ns i de alinea la viñeta con el principio del texto

del elemento anterior. Outs ide alinea la viñeta del elemento en la posición

predefinida. Utiliza este último valor para destacar listas definidas como

i ns i de.

Por último, como en los controles de fuente, existe un modo en el que

podemos escribir todas estas reglas sin tener que escribirlas una a una.

Para ello utilizaremos la propiedad l i s t - s t y l e .

De este modo el siguiente bloque:

o l {

l i s t - s t y l e - t ype : upper -a lpha ;

l i s t - s t y l e -pos i t i on : ou ts i de ;

l i st - s t y l e - i m a g e : u r l ( i m a g e n e s/ b u l l e t .g i f ) ;

}


o l {

l i st - s t y l e : u p p e r - a l p h a o u t s id e u r l ( i m a g e n e s/ b u l l et . g i f ) ;

}

Ten en cuenta siempre el orden t y p e, pos i t i on e i m a g e . Si no quieres

utilizar alguna de ellas, simplemente omítela.

Controles de fondo




En este apartado veremos las propiedades que pueden aplicarse sobre el

fondo.

Estas propiedades se pueden aplicar sobre muchos de los elementos, tanto

celdas, párrafos o el b o d y de la página.

background-co lo r permite establecer el color de fondo. Utiliza los mismos

códigos hexadecimales o los nombres de color que vimos en la propiedad

co lor del texto.

La sintaxis es igual a la que hemos visto hasta ahora:

t d . r o j o {

background-co lo r : red ;

}

b a c k g r o u n d - i m a g e establece una imagen de fondo para el elemento.

b o d y {

b a ck g r o u n d - i m a g e : u r l ( i m a g e n es / f o n d o . j p g ) ;

}

Por defecto, las imágenes se posicionarán en la esquina superior izquierda

y en mosaico.

b a c k g r o u n d - r e p e a t indica el modo de repetición de la imagen establecida

para el fondo.

Puede tomar los siguientes valores:

repea t : la imagen se repite a modo de mosaico hasta ocupar la página

completa.

r e p e a t - x : la imagen se repite a lo largo del eje horizontal.

r e p e a t - y : la imagen se repite a lo largo del eje vertical.




no- repea t : la imagen no se repite.

Por omisión, el valor que se toma es repea t , por lo que se genera un

mosaico con la imagen del fondo.

Deberás declarar la URL de la imagen para poder utilizar esta propiedad:

# m e nu {

b a ck g r o u n d - i m a g e : u r l ( i m a g e n e s/ m e n u .g i f ) ;

b a ck g r o u n d - r e p e at : r e p e at - x ;

}

b a c k g r o u n d - a t t a c h m e n t se utiliza para indicar si la imagen de pantalla

es fija o se desplaza con el movimiento de las barras de desplazamiento.

Esta opción se usa sobre todo para las imágenes del b o d y .

Puede tomar los valores f i xed y scro l l . El primer valor dejará la imagen

fija, el segundo hará que la imagen se desplace junto con las barras (comoel fondo de esta página).

b a c k g r o u n d - p o s i t i o n permite el posicionamiento de la imagen de fondo.

Selecciona entre los valores t op , cen te r , b o t t o m y l e f t , cen te r , r i g h t .

En este caso podremos combinar dos de los valores, por ejemplo:

. c i ta {

b a ck g r o u n d - i m a g e : u r l ( i m a g e n es / q u o t e . g if ) ;

b a ck g r o u n d - r e p ea t : n o - r e p e a t ;

b a ck g r o u n d - p o s i t i o n : r i g h t t o p ;

}

Aunque puedes omitirlos, pero recuerda que si lo haces por omision losvalores serán t op y l e f t .

Igual que en algunos de los apartados anteriores puedes utilizar lapropiedad b a c k g r o u n d para resumir las reglas CSS.




Así el siguiente bloque:

. c i ta {

b a ck g r o u n d - c o l o r : g r a y ;

b a ck g r o u n d - i m a g e : u r l ( i m a g e n es / q u o t e . g if ) ;

b a ck g r o u n d - r e p ea t : n o - r e p e a t ;

b a ck g r o u n d - a t t a ch m e n t : s cr o l l ;

b a ck g r o u n d - p o s i t i o n : r i g h t t o p ;

}

Puede ser escrito de la siguiente forma:

. c i ta {

b a ck g r o u n d : g r a y u r l ( i m a g e n es / q u o t e . g if ) n o - r e p e at s c r o ll r i g h t

t o p ;

}

Recuerde mantener el orden co lor , i m a g e , repea t , a t t a c h m e n t ypos i t i on .

Cont ro les de margen Ahora veremos unas cuantas reglas que afectarán a los bordes y márgenes

de los elementos.

Para ello utilizaremos el mismo ejemplo: dos cajas, una dentro de la otra.

margen

texto

margen

m a r g i n - t o p , m a r g i n - r i g h t, m a r g i n - b o t t o m y m a r g i n - l e f t establecen la

distancia de los bordes del elemento al elemento padre.

Puedes utilizar píxeles o porcentajes para indicar estas distancias.

Por ejemplo, en la siguente caja se le ha dado al bloque interior la

siguiente clase:

. b l oque_ in te r i o r {

m a r g in - t o p : 2 0 p x ;




m a r g in - r i g h t : 0 p x ;

m a r g in - b o t t o m : 5 p x ;

m a r g i n - l ef t : - 1 0 p x ;

}

margen

texto

margen

Los márgenes superiores e inferiores se pueden ver en la distancia que hay

de la caja interior a las palabras m a r g e n .

Observa cómo el margen 0 del lado derecho hace que los bordes queden

pegados, mientras que un valor negativo hace que el bloque salga de la

caja.

La propiedad m a r g i n te permite unificar varias propiedades en una sola:


m a r g in - t o p : 2 0 p x ;

m a r g in - r i g h t : 0 p x ;

m a r g in - b o t t o m : 5 p x ;

m a r g i n - l ef t : - 1 0 p x ;

}

Este bloque se podría reescribir como:


m a r g in : 2 0 p x 0 p x 5 p x - 1 0 p x ;

}

Recuerda que deberás seguir el orden t op , r i g h t , b o t t o m y l e f t .

En el caso de que los valores arriba y abajo (t op y b o t t o m ) e izquierda y

derecha (l e f t y r i g h t ) sean iguales entre sí se puede escribir en dosvalores, como:





m a r g in : 2 0 p x 5 p x ;

}

En este caso los márgenes superior e inferior serán de 2 0 p x y los de los

lados de 5 .

En caso de que quieras que t o d o s l o s m a r g e n e s t e n g a n l a m i s m a

d is tanc ia puedes escribirlo sólo una vez:


m a r g in : 2 0 p x ;

}

Ahora todos los márgenes serán de 2 0 píxeles.

También se pueden establecer estas propiedades a a u t o . Dejando que los

bordes del elemento sean determinados por el navegador.

Esta opción, sin embargo, no se trata del mismo modo en todos losnavegadores.

I n t e r n e t E x p l o r e r no sigue los estándares y no la maneja de un modo

correcto.

Por lo que cuando con otros navegadores centrar un elemento es muy

sencillo con el valor a u t o , para I E hay que hacer una pequeña trampa.

Veamos el siguiente ejemplo:margen

texto

margen

El código CSS de la caja interior es:


m a r g i n - r i g h t : a u t o ;

m a r g i n - l ef t : a u t o ;




}

Si intentas hacerlo sobre el body, en IE no funcionará. Los márgenes auto

no centrarán el bloque.

Deberás darle la siguiente propiedad al b o d y para que funcione:


Esto simplemente alineará el texto al centro en el resto de navegadores

(donde deberemos seguir utilizando el valor a u t o para los márgenes) y

hará que los bloques se alineen en el centro de la pantalla.

p a d d i n g - t o p , padd ing - l e f t , p a d d i n g - b o t t o m y p a d d i n g - r i g h t

establecerán la distancia del borde de un elemento con sus etiquetas

interiores.

Lo entenderás mucho mejor con el siguiente ejemplo:

texto

A esta caja le hemos aplicado el siguiente estilo:

. b l oque {

p a d d i n g - t o p : 2 0 p x ;

p a d d i n g - r i g h t : 5 p x ;

p a d d i n g - b o t t o m : 5 p x ;

p a d d i n g - l ef t : 1 0 p x ;

}

Como puedes ver la distancia de la palabra t e x t o a los bordes derecho e

inferior es de 5 p x .

Y lo mismo pasa con los márgenes superior (2 0 p x ) e izquierdo (1 0 p x ).




Igual que con los márgenes podemos abreviar las reglas CSS utilizando la

propiedad m a r g i n .

Así, el bloque anterior:

. b l oque {

p a d d i n g - t o p : 2 0 p x ;

p a d d i n g - r i g h t : 5 p x ;

p a d d i n g - b o t t o m : 5 p x ;

p a d d i n g - l ef t : 1 0 p x ;

}

Se podrá reescribir como:

. b l oque {

p a d d i n g : 2 0 p x 5 p x 5 p x 1 0 p x ;

}

Recuerda, también, mantener el orden t op , l e f t , b o t t o m , r i g h t .

Los casos de repetición se aplican igual que en los márgenes, por lo que

podrás escribir los siguientes casos:

. b l oque1 {

p a d d i n g : 2 0 p x 5 p x 5 p x 1 0 p x ;

}

. b l oque2 {

p a d d i n g : 2 0 p x 7 p x ;

}

. b l oque3 {

p a d d i n g : 5 p x ;




}

Bordes

También tenemos las propiedades de borde.

La primera es b o r d e r - w i d t h que indica el ancho de un borde.

Puede tomar los valores m e d i u m , t h i n y t h i ck . Aunque también se

aceptan valores en píxeles y porcentajes que son más fáciles de manejar a

la hora de crear bordes con una anchura exacta.

texto texto

En este caso hemos utilizado:

. bo rde1 {

b o r d er - w i d t h : 1 p x ;

}

. bo rde2 {

b o r d er - w i d t h : 5 p x ;

}

b o r d e r - s t y l e muestra el borde del elemento de una forma determinada,

existen varios tipos:

n o n e d o t t e d dashed so l id

doub le g r o o v e r i d g e inset ou tse t

borde r -co lo r establece en forma hexadecimal o con nombre el color del

borde de un elemento.

texto




En este caso ha sido:

. bo rde {

border -co lo r : # FFFF00 ;

}

Como en el resto de propiedades, utilizaremos la propiedad b o r d e r para

resumir estas tres últimas.

De modo que el siguiente bloque:

. bo rde {

b o r d er - w i d t h : 1 0 p x ;

border -s t y l e : g roove ;

border -co lo r : b l ack ;

}

Podría escribirse más fácilmente:

. bo rde { b o r d e r : 1 0 p x g r o o v e b l a ck ; }

Debes mantener el orden w i d t h , s ty l e y co lor , y en este caso deberás

especificar cada uno de l os va lo res para que la regla se comporte

normalmente.

También para los bordes es posible utilizar las mismas propiedades peroindicando a qué lado nos referimos:

. bo rde {

b o r d er - t o p - w i d t h : 1 0 p x ;

b o r d e r - t o p - s t y l e : g r o o v e ;

border - top -co lo r : b l ack ;




b o r d e r - l e f t - w i d t h : 1 0 p x ;

b o r d e r - l e f t - st y l e : g r o o v e ;

border - l e f t - co lo r : b l ack ;

b o r d er - b o t t o m - w i d t h : 1 0 p x ;

b o r d e r - b o t t o m - s t y l e : g r o o v e ;

b o r d e r - b o t t o m - c o lo r : b l a c k ;

b o r d er - r i g h t - w i d t h : 1 0 p x ;

b o r d e r - r i g h t - s t y l e : g r o o v e ;

b o r d e r - r i g h t - c o l o r : b l a ck ;

}

Que a su vez podría reescribirse como:

. bo rde {

b o r d e r - t o p : 1 0 p x groove b lack ;

b o r d e r - l e f t : 1 0 p x groove b lack ;

b o r d er - b o t t o m : 1 0 p x groove b lack ;

b o r d e r - r i g h t : 1 0 p x groove b lack ;

}

Y si todos los valores son iguales para cada uno de los bordes, volvemos a

utilizar la propiedad b o r d e r :

. bo rde {

b o r d e r : 1 0 p x groove b lack ;




}

Cont ro les de e lemen t os de b loque y en l í nea

Ahora veremos cómo posicionar los elementos y darles el tamaño que nosconvenga para representarlos.

Antes de empezar deberíamos hacer una distinción entre las etiquetas

HTML.

Las hay de 2 tipos: de b l o q u e o en l ínea .

Las etiquetas de b l o q u e son aquellas que causan un salto de línea antes y

después de ellos, como por ejemplo las etiquetas p, div, table, br, etc...

Sin embargo luego encontramos otro tipo de etiquetas (en l ínea) que no

producen saltos en el flujo de la página, como pueden ser las etiquetas a,

b, i, span, etc...

Teniendo esto siempre en mente verás que es más sencillo trabajar y

moldear las páginas utilizando CSS.

Primero veremos las propiedades de tamaño he igh t (altura) y w i d t h

(anchura).

Puedes especificarlas en cualquier elemento de bloque y establecerán su

alto y su ancho en píxeles o porcentaje.

300x50

# c on t e n ed o r {

w i d t h : 3 0 0 p x ;

h e i g h t : 5 0 p x ;

}

Luego encontramos la propiedad f l oa t , que permite que cualquier

elemento flote en un lado determinado de la pantalla mientras el resto

sigue el flujo natural.

Observa este ejemplo:

Hemos utilizado los valores left y right respectivamente. En estos casos a los

párrafos que contienen la imagen se les han aplicado la propiedad CSS

f l oa t :

 

 

Otra propiedad es clear . Esta propiedad permite romper el ajuste que se

esté realizando por una etiqueta anterior marcada con f l oa t .

Clear puede tomar 3 valores: l e f t , r i g h t o b o t h , para romper el f l oa t de

izquierda, derecha o ambos respectivamente.

Por lo que si le aplicamos un c lea r : r i gh t ; al segundo párrafo este se

mostrará sin verse afectado por el f l oa t :

El código que hemos utilizado es el siguiente:

 Pe r o q u i e r o q u e es t e p & a a cu t e ; r r a f o n o s e

vea a fec tado po r e l b l oque f l o tan te y se mues t re s i n tene r que

a j u s t a r s e a & e a cu t e ; l .

Del mismo modo esta propiedad nos ayudará en este caso:

Este texto tiene dos elementos flotantes a la izquierda.

Queremos que los dos bloques estén flotando a la izquierda pero uno

debajo del otro.

Para ello deberemos aplicarle al segundo elemento un c lea r : l e f t ; para que

elimine el comportamiento del primer elemento que ya estaba flotando.

Por ello, el segundo elemento lo escribiríamos así:

< d i v s t y l e = " f l o a t : l ef t ; c l e ar : l e f t ; f o n t - s i ze : 2 5 p x ; b o r d e r : 1 p x s o li d

b la ck ; " > & c op y ; & c op y ;< / d iv >

Y obtendríamos lo siguiente:

Este texto tiene dos elementos flotantes a la izquierda.

Ahora uno se encuentra debajo del otro, y el texto fluye teniéndolos en cuenta a

ambos.

Aunque puede llegar un párrafo que deje de verse afectado.

Ahora comb inando l os márgenes y l os e lemen tos f l o tan tes podemos

crear columnas de una forma muy sencilla:




La forma es la siguiente:

1. Creamos una cabecera. No hace falta que se le aplique ningún estilo en especial,

pero hemos preferido añadir unos bo rdes y padd ings para que se vea mejor elejemplo (igual que en resto de los elementos).

2. Luego creamos otro bloque (nosotros hemos utilizado d ivs aunque puedes utilizar

párrafos, tablas o cualquier elemento de bloque).

3. A este último bloque le asignamos la propiedad f l oa t : l e f t ; para que se encuentre

flotando a la izquierda y le damos una anchura (en nuestro caso un 3 0 % ).




4. Luego creamos un tercer elemento que contendrá la segunda co lum na .

5. A este elemento deberemos darle un m a r g i n - l e f t del mismo tamaño que la

anchura de la p r i m e r a c o lu m n a . Así nos aseguramos de que se encuentren en el

mismo nivel (porque el e lemen to d e l a i zqu ie rda está flotando) pero no vuelva

a tomar el flujo normal cuando el b loque de l a i zqu ie rda haya acabado.

6.

Finalmente añadimos un nuevo bloque que utilizaremos como p ie de pág ina .




7. A este bloque deberemos asignarle la propiedad c lear : bo th ; para que el

elemento flotante no le afecte en caso de que el contenido fuese demasiado corto.

Finalmente tenemos la propiedad disp lay , que establece el tipo de

elemento con el que estamos tratando.

Esta propiedad es muy útil porque t rans fo rma l as e t i que tas de b loque

a en l ínea y v iceversa .

Puede tomar los valores block , i n l i ne o l i s t - i t em .

Los dos primeros valores hablan por sí mismos. Puedes asociarle el estilo

d i sp lay : b l ock ; a una etiqueta A para que cree un salto de línea antes y

después de ella.




Del mismo modo, podrás hacer que una etiqueta de bloque (como p o d iv )

se convierta en un elemento en línea utilizando d i sp lay : i n l i ne ; y puedan

ser mostradas una al lado de otra:

1 2 3 4

6 7 8

24 9 10 11

23

5

12

22 21 20 13

19 14

18 17 16 15

25

1 2 3 4

6 7 8

24 9 10 11

23

5

12

22 21 20 13

19 14

18 17 16 15

25

En este ejemplo podemos ver dos tablas que se muestran una al lado de la

otra.

Simplemente les hemos dado el estilo:

. t ab la {

d i sp lay : i n l i ne ;

}

Aunque si disminuyes el ancho de la ventana verás que al tratarse de

elementos en línea se adaptan a su tamaño.

Para saltarnos este inconveniente (si lo fuera), podemos utilizar la

propiedad que vimos en el apartado de Controles de texto: w h i t e - s p a c e.

Introduciendo estas tres tablas en un elemento de bloque como un p o un

d iv y asignándole la propiedad w h i t e - s p a c e : n o w r a p ; conseguiríamos

que las dos tablas permaneciesen en línea sin saltos de pantalla a pesar de

la anchura de la ventana.

1 2 3 4

6 7 85

24 9 10 11




23 12

22 21 20 13

19 1425

18 17 16 15

1 2 3 4

6 7 8

24 9 10 115

23 12

22 21 20 13

19 1425

18 17 16 15

Finalmente, comentaremos que esta propiedad también puede tomar el

valor l i s t - i t em .

De este modo, los elementos que se vean afectados por el estilo d i sp lay :

l i s t - i t e m ; se mostrará como si formasen parte de una lista.

Observa el siguiente ejemplo:

p. l i s ta {

d i sp lay : l i st - i t em ;

l i s t - s t y l e - t y pe : square ;

}

Si aplicamos este estilo sobre unos párrafos veremos esto:

Esto es un párrafo que se muestra en forma de elemento de lista.







Cont ro les de pos ic ión

En este apartado veremos cómo posicionar el contenido de la página webutilizando únicamente estilos CSS.

Existen unas propiedades CSS que combinadas con las siguientes nos

ayudarán a mover el contenido de la página.

Estas son t op , l e f t , b o t t o m y r i g h t .

Con estas propiedades podremos establecer la distancia a los bordes de la

ventana del navegador.

Recordemos que t op equivale a la parte superior.

Lef t al lado izquierdo.

B o t t o m al borde inferior.

Y finalmente r i g h t al derecho.

Normalmente daremos valores a estas propiedades u t i l i zando p íxe les op o r c e n t a j e s.

Veamos ahora cómo las utilizaremos para ello deberemos declarar también

la propiedad pos i t i on .

Esta es sin duda la más compleja de este apartado así que la veremos con

detenimiento.

Esta propiedad puede aceptar 4 valores: s ta t i c , abso lu te , re l a t i ve yf i xed .

Vayamos uno a uno.

El valor s ta t i c es el valor por defecto de un elemento, ocupa su lugar en el

flujo de la página y no puede ser modificado utilizando las propiedades

t op /b o t t o m y l e f t /r i g h t .




p {

pos i t i on : s ta t i c ;

}

Con el valor abso lu te puedes colocar un elemento en cualquier parte de la

ventana con sólo darle las coordenadas.

Así deberíamos declarar la posición utilizando un par de propiedades

t op /b o t t o m y l e f t /r i g h t .

Un ejemplo podría ser este:

# c ap a _ f l o t a n t e {

pos i t i on : abso lu te ;

t o p : 1 0 0 p x ;

l e f t : 3 0 0 p x ;

w i d t h : 3 0 p x ;

h e i g h t : 1 2 5 p x ;

}

Esta declaración de estilos es muy habitual en las capas. Se posiciona

absolutamente el objeto y luego se le da un ancho y un alto.

El valor re l a t i ve también nos permite mover el elemento. Este, enprincipio, ocupa su lugar en el flujo normal de la página y utilizaremos las

propiedadeas t o p /b o t t o m y l e f t /r i g h t para desplazarlo tomando como

referencia ese lugar y no los bordes de la página.

Por ejemplo:

p.espec ia l {

pos i t i on : re l a t i ve ;




t o p : 2 0 p x ;

}

Esta regla hará que los párrafos marcados con la clase espec ia l sedesplacen 20 p íxe les hac ia aba jo de su positión normal en el flujo de la

página.

Piensa que lo que estamos diciendo en la definición de la regla es que va a

haber un desfase de 20 p íxe les desde l a pa r te super i o r de donde se

encon t raba en un p r i nc ip i o , por lo que el elemento se verá desplazado

hacia abajo.

Finalmente encontramos el valor f i xed . Este valor, desgraciadamente, nofunciona en algunas versiones de I n t e r n e t Ex p l o r e r por lo que no te será

de mucho uso aunque sea una muy buena regla de estilo.

Asignándole este valor a la propiedad pos i t i on podemos hacer que un

elemento se quede fijo en la ventana aunque se muevan las barras de

desplazamiento. Un comportamiento muy útil para los menús o algunos

gráficos que queramos que permanezcan siempre a la vista.

También acepta los pares t o p /b o t t o m y l e f t /r i g h t para definir la posición

en la que se mostará fijo.

Por ejemplo:

# m e nu {

pos i t i on : f i xed ;

t o p : 0 p x ;

r i g h t : 0 p x ;

}

Esta regla de estilo posicionaría un elemento con identidad m e n u en la

esquina superior derecha de la ventana y aunque utilicemos el scroll (las

barras de desplazamiento) permanecerá allí fijo.




Claro está, este valor no funciona en I E 6 , aunque es posible que en

futuras versiones puedan arreglar este problema.

Cont ro les de v is ib i l idad

Por último en este apartado veremos unas cuantas propiedades que tienen

que ver con la forma en la que se visualizan los elementos en pantalla.

La primera propiedad que veremos será z - i ndex .

Esta propiedad decide e l o rden de p ro fund idad de los elementos que se

encuentran solapados.

En el apartado anterior vimos cómo mover los elementos en la pantalla.Imagina, ahora, que al mover dos capas una nos queda por encima de la

otra.

¿Cómo podemos decidir cuál quedará por detrás? ¿Y al frente?

Utilizaremos esta propiedad para ello.

Z- index acepta números pos i t i vos o nega t i vos, y establece que el

e l em e n t o c o n u n v a l o r m a y o r s e m o s t r a r á p o r d e l a n t e del resto.

Veamos un ejemplo:

Para utilizar esta propiedad basta con declararla:

. ro j o {

pos i t i on : re l a t i ve ;

t o p : 1 0 0 p x ;




l e f t : 2 0 p x ;

z - i ndex : 0 ;

}

Otra propiedad muy valiosa a la hora de jugar con la visibilidad es

v i s i b i l i t y .

Puede tomar los valores v is ib le y h idden (visible y escondida

respectivamente).

Asigna el valor hidden a todos aquellos elementos que quieras que n o

aparezcan en l a pan t a l l a.

Muy útil para ocultar estadísticas o para crear animaciones complejas

combinando esta propiedad con JavaScript.

# es tad i s t i cas {

v i s i b l e : h i dden ;

}

Finalmente nos encontramos con otra propiedad llamada over f l ow .

Esta propiedad establece como ha de tratarse el contenido dentro de un

elemento.

El over f l ow en realidad se hace ca rgo de l desbordamien to de

con ten ido . Por lo que sólo actúa en aquellos casos en los que el

continente se queda demasiado pequeño para mostarlo todo.

Puede tomar los valores v is ib le , h idden , scro l l y a u t o .

El valor v i s i b l e hace que se ignore el tamaño del continente para mostrar

todo el contenido. Es el valor por omisión en la mayoría de los

navegadores.

Utilizando h idden se oculta el contenido que no cabe y no muestra barras

de desplazamiento. El tamaño del continente no se verá afectado.

Si le das el valor scro l l se introducirán las barras de desplazamiento

necesarias para que el contenido pueda visualizarse correctamente. El

tamaño del continente no se verá afectado.

Finalmente, con el valor a u t o dejamos que sea el explorador del usuario el

que decida qué hacer con el sobrante del contenido. Por ejemplo:

En este ejemplo hemos introducido 4 etiquetas d iv que contienen unaimagen más ancha que ellas.

El bloque marcado con over f l ow : v i s i b l e ; ignora su tamaño y muestra la

imagen completa. Al contrario que el que está definido como h idden que

esconde (o recorta) el resto de la imagen.

El valor scro l l muestra las 2 barras de desplazamiento aunque la verticalno sea necesaria, y a u t o hace que el navegador introduzca únicamente lahorizontal pues es la que es necesaria en este caso.

• Herenc ia de es t i los

En el conjunto de las etiquetas HTML podemos establecer una jerarquía de

etiquetas que contienen a otras, para darnos una relación de herencia. En

primer lugar, tendríamos la etiqueta <BODY> ... </BODY>, que hace

referencia a todo el documento, y podemos considerarla como la etiqueta

"padre" de todas las demás etiquetas de formato, puesto que todas ellas se

encuentran contenidas en el cuerpo (body) del documento.

Después, tenemos las etiquetas de párrafo (..., <DIV>...</DIV>,

cabeceras, ...) y etiquetas de elementos insertados en línea (...,

..., ..., ...). Las etiquetas de párrafo serán

contenedoras de las etiquetas de elementos insertados en línea (en el

sentido que les estamos dando), estableciéndose así una nueva relación

"padre-hijo".

Esto es interesante porque la mayoría de los estilos que se definen se

heredan, es decir, si definimos un cierto estilo para una etiqueta, este estilo

será heredado por las etiquetas "hijas", con lo que no tendremos que volver

a definirlo para ellas. Por ejemplo, si definimos un tipo de letra y un color

para la fuente para la etiqueta <BODY> ... </BODY>,este estilo será

heredado por todas las etiquetas del documento y no tendremos que

definirlo para las otras etiquetas.

Sin embargo, si tenemos definido un estilo para una etiqueta "padre",

podremos definir un estilo distinto para una etiqueta "hija", es decir, un

estilo heredable se hereda a no ser que especifiquemos lo contrario. Se

heredarán aquellas características que no pongamos, y se aplicarán aquellas

que definamos para la etiqueta que no tenga la etiqueta "padre".

Veamos un ejemplo:

<HTML>

<HEAD>

<TITLE> Ejemplo 1 de herencia </TITLE>

<LINK REL="stylesheet" TYPE="text/css" HREF="ejemplo.css">

</HEAD>

<BODY BGCOLOR=white>

Todo el texto tiene definido el estilo Fuente:Verdana,

Tamaño:x-small, Margen izquierdo:0.25in, Margen

derecho:0.25in, pero

este trozo de línea es de un color distinto,conservando el resto de propiedades, y

eso hace interesante la herencia y la posibilidad

de cambiar en partes concretas los estilos heredados.

</BODY>

</HTML>

Resultado:

Todo el texto tiene definido el estilo Fuente:Verdana, Tamaño:x-small, Margenizquierdo:0.25in, Margen derecho:0.25in, pero este trozo de línea es de un colordistinto, conservando el resto de propiedades, y eso hace interesante la herencia y laposibilidad de cambiar en partes concretas los estilos heredados.




ejemplo.css

/* Definición de estilos en un archivo aparte */

/* Estilo para el documento */

BODY {font-family:Verdana,sans-serif;font-size:x-small;

margin-left:0.25in; margin-right:0.25in}

/* Estilo para la cabecera de nivel 2 */

H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red}

/* Estilos para otras etiquetas */

B, TD {font-family:Verdana,sans-serif;font-size:x-small;

color:olive}

TH {font-family:Verdana,sans-serif;font-size:x-small;

color:white;background-color:#0080C0}

PRE, TT, CODE {font-family:Courier New,Courier;

font-size:9pt;color:maroon}

Dreamweaver M1 UD8 HTML Dinamico

Documents

Transcript of Dreamweaver M1 UD8 HTML Dinamico