25 Hojas de Estilo y Posicionamiento
Anuncio
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
25
Hojas de Estilo y Posicionamiento
Introducción
La versión 4 de Netscape incluye 3 nuevas áreas que juntas integran lo que se conoce como
Dynamic HTML o HTML dinámico. Estos 3 componentes son las hojas de estilos (style
sheets), posicionamiento (content positioning) y fuentes descargables (downloadable fonts).
Estos 3 componentes dan un gran control sobre la apariencia, el fondo y el comportamiento
de las páginas web.
25 Hojas de Estilo
Antes de la llegada de las hojas de estilo, los desarrolladores de páginas web estaban muy
limitados en cuanto a la definición de estilos. Esto es, se puede visualizar un texto como
título, texto normal, en cursiva, etc., pero no se pueden especificar márgenes o altura de
líneas.
Las hojas de estilo dan un mayor control sobre la presentación del texto. Usando hojas de
estilo se pueden especificar la mayor parte de los atributos de estilo de la página como color
del texto, márgenes, alineamiento de elementos, fuentes, tamaños de fuentes entre otros. Se
pueden especificar bordes para resaltar ciertos elementos de la página. Se pueden
especificar diferentes fuentes para que sean usadas por diferentes elementos, como
párrafos, títulos o bloques de texto.
También se pueden utilizar las hojas de estilo crear una plantilla o “master” que se puede
utilizar para que múltiples páginas usen la misma hoja de estilo.
Netscape Navigator soporta dos tipos de sintaxis para las hojas de estilo. Por un lado las
hojas de estilo escritas en sintaxis Cascading Style Sheet (CSS) y, por otro lado soporta
hojas de estilo escritas en JavaScript que usan el modelo de objetos de documento. En este
modelo de objetos, un documento es un objeto que contiene otros objetos y todos ellos
tienen un conjunto de propiedades que pueden ser modificadas.
Hay que tener en cuenta que se puede usar cualquiera de las dos sintaxis pero, antes de
empezar a usarla, se tiene que declarar su tipo como "text/CSS" o como "text/JavaScript".
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
26
25.1 Usando CSS para definir estilos
Una hoja de estilos consiste en una o más definiciones de estilo situadas en la parte de
cabecera del documento(<HEAD>). En sintaxis CSS, las propiedades y los valores que
toman en un estilo se listan dentro de llaves, después de los criterios de selección. Estos
criterios determinan a que elementos se les va a aplicar el estilo. Un criterio de selección
puede ser una clase, un ID o puede ser contextual a un conjunto limitado de elementos de
una página (se verán a continuación).
Cada propiedad en la definición de estilo tiene que ir seguida de dos puntos y después del
valor. Cada par propiedad/valor tiene que tiene que ir seguido de punto y coma. Los valores
no pueden ir encerrados entre comillas.
Por ejemplo, a continuación se puede ver la definición en sintaxis CSS para que en todos
los elementos <P> el tamaño de letra sea 18 y el margen izquierdo de 20. También
especifica que el texto de los títulos H1 sea de color azul.
<STYLE TYPE="text/css">
<!-P {font-size:18pt; margin-left:20pt;}
H1 {color:blue;}
-->
</STYLE>
Los contenidos de la hoja de estilos se pueden incluir entre comentarios (<!-- ... -->) para
que, los navegadores que no reconozcan hojas de estilo, ignoren estos contenidos. Por otro
lado si la sintaxis de la hoja de estilos no es correcta (faltan o sobran símbolos como : ; ”) la
definición completa no se tendrá en cuenta y se ignorará.
25.2 Usando JavaScript para definir estilos
Por medio de JavaScript se pueden definir hojas de estilo usando el modelo de objetos del
documento. En este modelo el documento es un objeto que contiene otros objetos. Todos
ellos tienen propiedades que pueden ser accedidas y modificadas. Por ejemplo, el siguiente
código modifica la propiedad color del objeto H1, del conjunto de objetos tags dentro del
documento:
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
27
document.tags.H1.color = "red";
La propiedad tags siempre se aplica al documento actual por lo que se puede omitir la
palabra documento de la expresión document.tags. El siguiente código plantea el mismo
ejemplo del punto anterior pero definiendo la hoja de estilo mediante JavaScript:
<STYLE TYPE = "text/javascript">
tags.P.fontSize = "18pt";
tags.P.marginLeft = "20pt";
tags.H1.color = "blue";
</STYLE>
Para acortar la sintaxis se puede utilizar la cláusula with con los elementos que tienen
varias propiedades. El siguiente código implementa una hoja de estilo para los elementos P
se visualicen en verde, negrita e itálica:
with (tags.P) {
color="green";
fontWeight="bold";
fontStyle="italic";
fontFamily="helvetica";
}
25.3 Herencia de Estilos
Cuando un elemento HTML contiene otros elementos se considera que el primero es el
elemento padre de los otros, que se consideran sus hijos. Así, en el siguiente ejemplo, el
elemento <BODY> es el padre del elemento <H1> que a su vez es padre del elemento
<EM>
<BODY>
<H1>The headline <EM>is</EM> important!</H1>
</BODY>
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
28
En muchos casos, los elementos hijos adquieren los estilos de sus padres. Por ejemplo, si se
le asigna un estilo al elemento <H1>
<STYLE type="text/css">
H1 {color:blue;}
</STYLE>
<BODY>
<H1>El titular <EM>es</EM> importante</H1>
</BODY>
En este caso, el elemento <EM> toma el estilo de su padre, el elemento <H1> y, por tanto,
la palabre “is” aparecerá en azul. Sin embargo, si previamente se define un estilo para los
elementos <EM> que haga que se visualicen en rojo, en este caso, la palabra “is” se
visualizará en rojo ya que las propiedades especificadas en los hijos sobreescriben las
propiedades de los padres. También hay que tener en cuentas que algunas propiedades
como el color de fondo no se heredan y, por tanto, deben ser especificadas para cada
elemento.
La herencia comienza en el primer elemento de la página, por tanto en el marcador
<HTML>. Para definir características para todo el documento es suficiente crear un estilo
en el <BODY>. Por ejemplo, aquí se define que el color de todo el texto de la página será
el verde:
Utilizando la sintaxis CSS:
<STYLE TYPE="text/css">
BODY {color: green;}
</STYLE>
Utilizando la sintaxis JavaScript:
<STYLE TYPE="text/javascript">
tags.BODY.color="green";
</STYLE>
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
29
25.4 Definiendo hojas de estilo con el marcador <STYLE>
Para definir una hoja de estilo directamente dentro de un documento se usa el marcador
<STYLE> en la parte cabecera del documento. El marcador <STYLE> abre una hoja de
estilo y el marcador </STYLE> la cierra. Todo el marcador <STYLE> ha de definirse antes
del marcador <BODY>. Dentro del marcador <STYLE> se puede especificar el atributo
TYPE para indicar si el tipo es “text/css” o “text/javascript”. El valor por defecto es
“text/css”.
El siguiente ejemplo define un estilo que especifica que todos los títulos de nivel uno están
en mayúsculas y azul y los bloques de texto en itálica.
Utilizando la sintaxis CSS:
<HEAD>
<STYLE TYPE="text/css">
H1 {color: blue; text-transform: uppercase;}
BLOCKQUOTE {color: red; font-style: italic;}
</STYLE>
</HEAD>
<BODY>
Utilizando la sintaxis JavaScript:
<HEAD>
<STYLE TYPE="text/javascript">
tags.H1.textTransform = "uppercase";
tags.H1.color = "blue";
tags.BLOCKQUOTE.color = "red";
tags.BLOCKQUOTE.font-style: italic;
</STYLE>
</HEAD>
<BODY>
Utilizando selección contextual:
<H1>This Heading Is Blue</H1>
<B>BLOCKQUOTE>This blockquote is displayed in red.</B>
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
30
25.5 Definiendo hojas de estilo en ficheros externos
Se puede definir una hoja de estilo en un fichero separado del documento en el que se está
trabajando y después enlazar la hoja de estilo al documento. La ventaja de esta
aproximación es que la hoja de estilo puede ser usada en cualquier documento HTML. Se
puede pensar que los ficheros conteniendo una hoja de estilo es una especie de plantilla
desde la que iniciar cualquier documento web. Por ejemplo, se podría especificar en un
fichero la plantilla de estilos para que todas las páginas de un web en concreto mantuvieran
un estilo uniforme.
La sintaxis para definir estilos en un fichero externo es la misma que se ha visto hasta
ahora, salvo que no es necesario ni abrir ni cerrar con <STYLE> y </STYLE>. Aquí está
un ejemplo de definición en un fichero externo:
Utilizando la sintaxis CSS:
/* hoja de estilo externa mystyles1.htm */
all.BOLDBLUE {color:blue; font-weight: bold;}
H1 {line-height: 18pt;}
P {color: yellow;}
/* final */
Utilizando la sintaxis JavaScript:
/* hoja de estilo externa mystyles1.htm */
classes.BOLDBLUE.all.color = "blue";
classes.BOLDBLUE.all.fontWeight = "bold";
tags.H1.lineHeight="18pt";
tags.P.color="yellow";
/* final */
Para enganchar un fichero HTML con un fichero externo conteniendo una hoja de estilo se
utiliza el marcador <LINK> como se puede ver en el siguiente ejemplo:
Utilizando la sintaxis CSS:
<HTML>
<HEAD>
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
31
<TITLE>Un gran título</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/mystyles1.htm">
</HEAD>
Utilizando la sintaxis JavaScript:
<HTML>
<HEAD>
<TITLE>Un gran título</TITLE>
<LINK REL=STYLESHEET TYPE="text/javascript"
HREF="http://style.com/mystyles1.htm">
</HEAD>
25.6 Definiendo clases de estilos
Si un documento incluye o enlaza con una hoja de estilo, todos los estilos definidos en la
hoja de estilos se pueden usar en el documento. Sin embargo, podría darse el caso de que se
quieran aplicar estilos selectivamente a elementos de la página. Por ejemplo, se puede
querer que alguno de los párrafos (elementos <P>) del documento sean rojos y otros azules.
En esta situación, no es correcto definir un estilo para el elemento <P>. En lugar de esto, se
puede definir clases de estilos y aplicar la clase apropiada de estilo a cada elemento que
necesite usar un estilo.
Para aplicar una clase de estilo, se define la clase de estilo en la hoja de estilo y después se
usa el atributo CLASS en el elemento. El siguiente ejemplo define una clase llamada
GREENBOLD (color verde y letra en negrita) y muestra la forma de utilizar esta clase de
estilo:
Utilizando la sintaxis CSS:
<STYLE TYPE="text/css">
all.GREENBOLD {color:#44CC22; font-weight:bold;}
</STYLE>
Utilizando la sintaxis JavaScript:
<STYLE TYPE="text/javascript">
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
32
classes.GREENBOLD.all.color = "#44CC22"
classes.GREENBOLD.all.fontWeight = "bold"
</STYLE>
Utilizando selección contextual:
<H1 CLASS=GREENBOLD>Este titular es verde</H1>
<P CLASS = GREENBOLD>Este párrafo utiliza el estilo GREENBOLD. Se
puede utilizar el atributo CLASS para especificar el estilo utilizado por un
elemento HTML.</P>
<BLOCKQUOTE CLASS = GREENBOLD>
Este blockquote usa el estilo GREENBOLD. Como consecuencia es verde
y negrita. Puede ser útil utilizar estilos para que los textos entre
blockquotes destaquen del resto.
</BLOCKQUOTE>
Cuando se define una clase de estilos se puede especificar para que elementos HTML se
puede usar ese estilo o se puede usar la palabra clave “all” para permitir que todos los
elementos lo puedan usar. El siguiente ejemplo define una clase DARKYELLOW para
cualquier elemento y una clase RED1 que solo pueden usar los elementos <P> y
<BLOCKQUOTE>.
Utilizando la sintaxis CSS:
<STYLE type="text/css">
all.DARKYELLOW {color:#EECC00;}
P.RED1 {color: red; font-weight:bold;}
BLOCKQUOTE.red1 {color:red; font-weight:bold;}
</STYLE>
Utilizando la sintaxis JavaScript:
<STYLE type="text/javascript">
classes.DARKYELLOW.all.color="#EECC00";
classes.RED1.P.color = "red";
classes.RED1.P.fontWeight = "bold";
classes.RED1.BLOCKQUOTE.color = "red";
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
33
classes.RED1.BLOCKQUOTE.fontWeight = "bold";
</STYLE>
Utilizando selección contextual:
<BODY>
<P CLASS=red1>Este párrafo es rojo.</H1>
<P>Este párrafo es del color por defecto, ya que no utiliza el estilo
red1.</P>
<BLOCKQUOTE CLASS="red1">Este blockquote usa la clase red1.
</BLOCKQUOTE>
<H5 CLASS=red1>Este elemento H5 intenta usar el estilo red1, pero no
puede.</H5>
<P CLASS=darkyellowclass>Este párrafo es amarillo fuerte.
<H5 CLASS=darkyellowclass>Este H5 intenta usar el estilo darkyellow y
puede hacerlo.</H5>
Es importante tener en cuenta que cada elemento HTML solo puede usar una clase de
estilo. Si se especifican dos o más clases, solo se va a usar el primer estilo especificado.
25.7 Definiendo estilos individualizados
Se puede dar la situación de tener que definir dos estilos complejos que solo difieran en uno
o dos valores. Para no tener que definir dos veces lo mismo se han desarrollado los estilos
individuales. Para definir estos estilos en sintaxis CSS se precede su nombre con el símbolo
. En sintaxis JavaScript se usa la propiedad ids.
Para aplicar un estilo individual a un elemento se especifica el nombre del estilo como el
valor del atributo ID. En el ejemplo siguiente se define una clase MAIN con una altura de
20 puntos y un tamaño de 18 puntos, negrita y de color rojo. En el ejemplo también se
define un estilo individual BLUE1 de color azul.
Utilizando la sintaxis CSS:
<STYLE TYPE="text/css">
all.STYLE1 {line-height: 20pt; font-size: 18pt;
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
34
font-weight: bold; color: red;}
#BLUE1 {color: blue;}
</STYLE>
Utilizando la sintaxis JavaScript:
<STYLE TYPE="text/javascript">
with (classes.STYLE1.all) {
lineHeight = "20pt";
fontSize = "18pt";
fontWeight = "bold";
color = "red";
}
ids.BLUE1.color = "blue";
</STYLE>
Utilizando selección contextual:
<P CLASS="STYLE1">Aquí puedes ver letras grandes en rojo. El texto de
este párrafo es mucho más grande y más negrita que los párrafos
normales. </P>
<P CLASS="STYLE1" ID="BLUE1">Este párrafo es como el anterior, pero
en azul. Aunque tiene el estilo STYLE1, que por defecto es rojo, también
tiene un identificador que le permite ser azul.</P>
25.8 Usando Criterios de Selección Contextual
Como ya se ha visto se puede definir un estilo para que lo usen todos los elementos HTML
de una determinada clase. Pero, además se puede definir una clase que se aplique a
determinados elementos HTML dependiendo de su posición en la estructura HTML de la
página. Por ejemplo, se puede querer que todos los elementos <EM> que estén dentro de un
título de primer nivel (H1) se visualizen en color verde.
Para conseguir este nivel de control dentro de la aplicación de estilos es necesario usar
criterios de selección contextual. Para especificar estos criterios en la sintaxis CSS hay que
listar los elementos HTML en el orden requerido antes de abrir la llave que inicia la
definición del estilo. En sintaxis JavaScript se usa el método contextual(). En el siguiente
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
35
ejemplo, como se decía antes, el texto dentro de <EM> se visualizará en verde si el
marcador <EM> está dentro de un marcador <H1>:
Utilizando la sintaxis CSS:
<STYLE TYPE="text/css">
H1 EM {color:green;}
</STYLE>
Utilizando la sintaxis JavaScript:
<STYLE TYPE="text/javascript">
contextual(tags.H1, tags.EM).color = "green";
</STYLE>
Utilizando selección contextual:
<H1>Este texto<EM> es verde y destacado,</EM> pero es un texto
normal H1</H1>
Otro ejemplo un poco más complejo en las dos sintaxis sería:
UL UL LI {color:blue;}
contextual(tags.UL, tags.UL, tags.LI).color = "blue";
En este caso, el elemento para el que se está definiendo el estilo es un LI que esté anidado
en dos listas del tipo UL. Es decir solo los elementos de la lista LI que estén en una lista no
ordenada dentro de otra lista no ordenada serán de color azul.
Por último, en el siguiente ejemplo hay una mezcla con un poco de todo. Aquí se define
una clase MAGENTACLASS que lo visualiza todo de color magenta. Además todos los
párrafos de este estilo que estén dentro de un elemento <DIV> se mostrarán en itálica y el
texto dentro de un marcador <B> que esté a su vez dentro de un párrafo
MAGENTACLASS incluido en un marcador <DIV> se mostrará más grande.
Utilizando la sintaxis CSS:
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
36
<STYLE TYPE="text/css">
all.MAGENTACLASS {color: magenta;}
DIV P.MAGENTACLASS {font-style: italic;}
DIV P.MAGENTACLASS B {font-size:18pt;}
</STYLE>
Utilizando la sintaxis JavaScript:
<STYLE TYPE="text/javascript">
classes.MAGENTACLASS.all.color = "magenta";
contextual(tags.DIV, classes.MAGENTACLASS.P).fontStyle = "italic";
contextual(tags.DIV,classes.MAGENTACLASS.P,tags.B).fontSize="1
8pt";
</STYLE>
Utilizando selección contextual:
<DIV CLASS=MAGENTACLASS>
<H3>Heading 3 in the MAGENTACLASS</H3>
<P>¿Este párrafo es magenta y con cursiva? Debería serlo. Lo siguiente
es <B>texto grande y con negrita.</B> Hemos conseguido esto con
selección contextual.</P>
<P>Este otro párrafo también debería ser magenta.</P>
</DIV>
<P>Este párrafo es magenta, pero como no está en un bloque DIV, no
está en cursiva. </P>
25.9 Especificando estilos para elementos individuales
Después de todo lo comentado en este capítulo, es necesario conocer que no hace falta
definir los estilos en la sección de cabecera ni en ficheros aparte. Es posible definir estilos
para marcadores individuales y que solo afecten a un elemento HTML de una única página
web. En esta aproximación, se define un estilo sobre la marcha y puede ser útil en
situaciones en las que necesitamos modificar bastante el estilo de un marcador pero que no
se va a necesitar repetir esta modificación.
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
37
A pesar de que se pueden especificar estilos para elementos individuales, normalmente es
mejor que todos los estilos que se usan en un documento se sitúen en un sitio único, de
forma que sea más fácil saber donde hay que realizar los cambios cuando se necesite
hacerlos.
En caso de tener que especificar estilos individualmente para algún elemento, la forma más
fácil es usar el atributo STYLE. En el siguiente ejemplo se especifica el estilo para un único
elemento <P>. También se muestra como usar el atributo STYLE junto con el marcador
<SPAN> para aplicar un estilo a una parte arbitraria de contenido de una página.
Utilizando la sintaxis CSS:
<P STYLE="color:green; font-weight:bold;
margin-right:20%; margin-left:20%;
border-width:2pt; border-color:blue;">
Este párrafo, y sólo este párrafo, es verde y en negrita con márgenes
grandes y borde azul. </P>
<P> Este párrafo es del color por defecto, pero aquí tenemos una <SPAN
STYLE="color:red; font-style:italic;">palabra</span> que es diferente a las
otras.</P>
Utilizando la sintaxis JavaScript:
<P STYLE="color = 'green'; fontWeight='bold';
marginRight='20%'; marginLeft='20%';
borderWidth='2pt'; borderColor='blue';">
Este párrafo, y sólo este párrafo, es verde y en negrita con márgenes
grandes y borde azul. </P>
<P> Este párrafo es del color por defecto, pero aquí tenemos una <SPAN
STYLE="color='red'; fontStyle='italic'">palabra</span> que es diferente a
las otras.</P>
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
38
25.10 Combinando hojas de estilos
Se pueden usar varias hojas de estilo para definir los estilos de un único documento. Esto se
podría utilizar, por ejemplo, si se dispone de distintos ficheros con hojas de estilos para
títulos, para texto normal, para tablas, etc. El siguiente ejemplo muestra como enlazar
varios ficheros de hojas de estilo en un documento:
<STYLE TYPE="text/css"
SRC="http://www.networksunlimited.org/styles/corporate"></STYLE>
<STYLE TYPE="text/css"
SRC="styles/whitepaper"></STYLE>
<STYLE TYPE="text/javascript"
SRC="styles/networkthings"></STYLE>
<STYLE TYPE="text/css">
H1 {color: red;} /* redefine las hojas externas */
</STYLE>
Para las hojas de estilo enlazadas en el documento, los estilos que define la última son los
que se van a utilizar si para alguno existe redefinición. Por otro lado, los estilos definidos
localmente son los que tienen mayor prioridad.
25.11 Formateo de bloques
Las hojas de estilo tratan los elementos HTML de nivel de bloque de texto como si
estuvieran encerrados en un cuadrado. Cada bloque, por tanto, puede tener unas
características en forma de márgenes, bordes (que pueden ser tridimensionales) y espacios
con los bordes. Además cada bloque puede tener una imagen o un color de fondo.
Si se especifican valores para la anchura y para los dos márgenes, el margen izquierdo es el
que tiene máxima precedencia, el siguiente en tenerse en cuenta es la anchura y, por tanto,
el que se descarta es el valor para el borde derecho.
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
25.11.1
39
Definiendo Márgenes
Los márgenes indican la cantidad de espacio que queda desde el bloque de texto a los
bordes del documento (o al elemento que hace de padre del bloque). Los bordes se pueden
especificar mediante las siguientes propiedades (sintaxis CSS/sintaxis JavaScript):
margin-top/marginTop
margin-bottom/marginBottom
margin-left/marginLeft
margin-right/marginRight
Se puede especificar el mismo valor para los cuatro atributos mediante la propiedad margin
en CSS o mediante la función margins() en JavaScript. También se puede especificar el
alineamiento horizontal con float en CSS y align en JavaScript. Los valores son left, right y
center. Hay que tener en cuenta que puede ser redundante o contradictorio especificar
alineamiento y márgenes.
En vez de márgenes se puede especificar la anchura con la propiedad width. Los valores se
pueden especificar en pixels o porcentaje.
25.11.2
Definiendo anchura, color y estilo del borde
Se puede definir la anchura del borde que rodea el bloque de texto especificando las
siguientes propiedades:
border-top-width/borderTopWidth
border-bottom-width/borderBottomWidth
border-left-width/borderLeftWidth
border-right-width/borderRightWidth
Se puede especificar el mismo valor para los cuatro atributos mediante la propiedad borderwidth en CSS o mediante la función borderWidths() en JavaScript.
Para especificar el estilo del borde se utiliza el atributo border-style (CSS) o la propiedad
borderStyle (JavaScript). Los valores que puede tomar son solid o double para una
apariencia plana y groove, ridge, inset o outset para que tenga una apariencia 3D.
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
40
El color del borde se especifica con border-color (CSS) o borderColor (JavaScript).
25.11.3
Espacio con los bordes
El espacio entre el contenido y los bordes (padding) se puede especificar con los siguientes
atributos:
padding-top/paddingTop
padding-bottom/paddingBottom
padding-left/paddingLeft
padding-right/paddingRight
Se puede especificar el mismo valor para los cuatro atributos mediante la propiedad
padding en CSS o mediante la función paddings() en JavaScript.
Este es un ejemplo sobre el formateo de bloques con todos los ingredientes vistos hasta
ahora:
Utilizando la sintaxis CSS:
<STYLE TYPE="text/css">
P{
background-color:#CCCCFF;
/* márgenes */
margin-left:20%; margin-right:20%;
/* ancho del borde */
border-top-width: 10pt; border-bottom-width:10pt;
border-right-width:5pt; border-left-width:5pt;
/* estilo y color del borde */
border-style:outset; border-color:blue;
/* separaciones */
padding-top:10pt; padding-bottom:10pt;
padding-right:20pt; padding-left:20pt;
}
H3 {
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
/* estilo y tamaño de las fuentes */
font-size: 14pt;
font-weight:bold;
background-image:URL("images/grenlite.gif");
/* centrado del título hasta un 90 % del ancho total */
width:90%;
float:center;
border-color:green;
border-style:solid;
/* todos los lados del borde del mismo grosor */
border-width:10pt;
/* todos los lados a la misma distancia*/
padding:20pt;
}
</STYLE>
Utilizando la sintaxis JavaScript:
<STYLE TYPE="text/javascript">
with (tags.P) {
backgroundColor="#CCCCFF";
/* estilo y color del borde del párrafo*/
borderStyle="outset"; borderColor="blue";
/* ancho del borde */
borderTopWidth="10pt"; borderBottomWidth="10pt";
borderLeftWidth="5pt"; borderRightWidth="5pt";
/* separaciones */
paddingTop="10pt"; paddingBottom="10pt";
paddingLeft="20pt"; paddingRight="20pt";
/* márgenes */
marginLeft= "20%"; marginRight="20%";
}
with (tags.H3) {
41
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
42
backgroundImage ="images/grenlite.gif";
/* font size and weight */
fontSize="14pt"; fontWeight="bold";
/* Estilo y color del titular H3 */
borderStyle="solid"; borderColor="green";
/* centrado del título hasta un 90 % del ancho */
width="90%"; align="center";
/* todos los lados del borde del mismo grosor */
borderWidths("10pt");
/* todos los lados a la misma distancia */
paddings("20pt");
}
</STYLE>
Utilizando selección contextual:
<H3>H3 con borde </H3>
<P>Los bordes tienen su utilidad. Por ejemplo, un borde alrededor de un
párrafo hace que el párrafo destaque más qiue los otros.
</P>
<P>Este es otro párrafo con borde. Hay que tener cuidado para que los
bordes no sean demasiado anchos.
</P>
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
43
26 Posicionamiento
Ya no hace falta restringir el desarrollo de la página web al flujo secuencial de los
contenidos. Especificando posiciones para bloques de contenidos HTML, se puede decidir
que contenido va en cada lugar de la página, en lugar de dejar que el navegador lo calcule.
Además, los bloques de contenido pueden superponerse, de forma transparente y opaca.
Usando JavaScript, se puede cambiar la estructura de una página web dinámicamente, en
un gran número de formas incluso después de haber acabado de cargar la página. Se puede
hacer que ciertos contenidos desaparezcan o reaparezcan, que cambien de color, de forma o
de color de fondo.
También es posible incluir animación en los objetos modificando o moviendo partes
individuales de las páginas HTML. Esto es posible utilizando JavaScript y bloques de
contenidos HTML. Existe además un nuevo elemento denominado capa (layer) que puede
ser desplazado por la ventana del navegador, superpuesto al contenido de otras capas,
ocultado y redimensionado a voluntad. Las capas pueden ser anidadas dentro de otras capas
de forma que hereden sus movimientos relativos.
Para el Netscape Navigator 4 hay dos formas de mover dinámicamente las capas:
1. Definiendo un estilo que contenga la propiedad position
2. Usando el marcador <LAYER> (solo soportado por Netscape)
Un documento puede contener ambos tipos de capas, definidas con estilos y con layers.
Además estas paginas pueden usar hojas de estilos locales o remotas.
26.1 Posicionar Contenidos usando Estilos
El estilo que se defina para un bloque posicionado de contenido HTML tiene que incluir
siempre la propiedad position. El valor para esta propiedad puede ser absolute que indica
que la posición de la capa es una posición absoluta con respecto a la página en la que está
contenida o relative, que indica que la posición de la capa es relativa con respecto al punto
que ocupa en la página. También se puede especificar las propiedades top y left para indicar
el desplazamiento con respecto a la página (posicionamiento absoluto) o la posición actual
en el documento (posicionamiento relativo).
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
44
Si un documento contiene más de una capa con posicionamiento absoluto, estas capas no
pueden compartir estilos, ya que cada uno necesitará sus propios parámetros top y left para
indicar su posición. El uso de estilos individualizados es muy útil para definir capas, ya que
se puede definir un estilo para cada capa (con un único ID). Por ejemplo, el siguiente
marcador STYLE define los estilos para dos capas:
<STYLE TYPE="text/css">
<!-#layer1 {position:absolute;
top:20px; left:5px;
background-color:#CC00EE;
border-width:1; border-color:#CC00EE;
width:200px;}
#layer2 {position:absolute;
top:60px; left:250px;
background-color:teal;
width:200px;
border-width:2px; border-color:white; }
}
-->
</STYLE>
Para usar un estilo para una capa, se aplica el estilo como los que ya se han visto
anteriormente. Sin embargo, hay que tener en cuenta que una capa se aplica al contenido de
la página siempre que esté agrupado como una entidad. Si se quiere que una capa contenga
más de un elemento, hay que aplicar el estilo a un elemento que los agrupe como los
marcadores DIV o SPAN. Por ejemplo:
<BODY BGCOLOR=white>
<DIV ID=layer1>
<H1>Layer 1</H1>
<P>Lots of content for this layer.</P>
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
45
<IMG SRC="images/violets.jpg" align=right>
<P>Content for layer 1.</P>
<P>More Content for layer 1.</P>
</DIV>
<P ID=layer2>Layer 2</P>
<!-- Este ejemplo usa el atributo STYLE de un elemento directamente,
para especificar que ese elemento es una capa: -->
<DIV STYLE="position:absolute; top:170px; left:250px;
border-width:1px; border-color:white;
background-color:#6666FF">
<H1>Layer 3 </H1>
<P>This is a blue block of HTML content.</P>
</DIV>
Este es otro ejemplo de capas en el que se utiliza, además un hoja de estilo en la definición
de la capa para conseguir una capa con fondo y borde 3D:
#layer4 {position:absolute;
top:300px; left:100px;
color:magenta;
background-color:yellow;
border-width:20px; border-color:cyan;
border-style:ridge;
padding:5%;
}
<BODY>
<DIV ID=layer4>
<H1>Layer 4 </H1>
<P>I am a very colorful layer.</P>
</DIV>
</BODY>
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
46
Es importante tener en cuenta que si se define un posicionamiento absoluto, no hay que
poner márgenes ya que la posición viene dada por las propiedades top y left.
26.2 Posicionar Contenidos usando el marcador LAYER
Como ya se ha comentado, Netscape ha implementado un marcador nuevo, denominado
LAYER que extiende la sintaxis HTML para soportar el nuevo concepto de capas. Así se
puede especificar la posición y el contenido de una capa en la parte BODY de la página y
ya no es necesario predefinir la capa antes de especificar su contenido. Dentro de la capa se
especifican, entre otros, ID, TOP, LEFT; BGCOLOR, WIDTH y HEIGTH.
Este marcador es operativo en los navegadores Netscape Navigator 4.0+ y de momento en
el resto de navegadores las capas se implementan mediante estilos. Junto con el marcador
LAYER es posible utilizar código JavaScript, por ejemplo para posicionar una capa de
forma relativa con respecto a otras. En el siguiente ejemplo se puede ver como funciona el
marcador LAYER:
<!— las unidades de TOP, LEFT y WIDTH son pixels -->
<LAYER ID=layer1 TOP=20pt LEFT=5pt
BGCOLOR="#CC00EE" WIDTH=200>
<H1>Capa 1</H1>
<P>El contenido de esta capa:</P>
<IMG SRC=violets.jpg align=right>
<P>Contenido de la capa 1.</P>
<P>Más contenido de la capa 1.</P>
</LAYER>
<LAYER ID=layer2 TOP=60 LEFT=250 BGCOLOR=teal WIDTH=200>
<P>Capa 2</P>
</LAYER>
<LAYER ID=layer3 TOP=170 LEFT=250 BGCOLOR="#6666FF">
<H1>Capa 3</H1>
<P>Este es un bloque azul.</P>
</LAYER>
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
47
También se puede usar el marcador LAYER junto con hojas de estilo para crear capas con
un estilo personalizado. El siguiente ejemplo es el del punto anterior codificado ahora
mediante LAYER:
<STYLE TYPE="text/css">
<!-all.style4 {
color:magenta;
border-width:20px; border-color:cyan;
border-style:ridge;
padding:5%;
}
-->
</STYLE>
<BODY BGCOLOR=white>
<LAYER ID=layer4 TOP=300 LEFT=100 BGCOLOR=yellow
CLASS=style4>
<H1>Capa 4 </H1>
<P>Soy una capa llena de color.</P>
</LAYER>
</BODY>
26.2.1 Posicionamiento Absoluto
Si una capa tiene un posicionamiento absoluto, se puede definir su posición dentro del
documento o dentro de la capa que la contiene. En este tipo de posicionamiento se
especifica la posición exacta de la esquina superior izquierda en las propiedades top y left.
Si no se especifican estos valores y el posicionamiento es absoluto, por defecto se cogen los
valores de la posición actual en el contenedor de la capa.
Una capa con posicionamiento absoluto se considera que está fuera del documento HTML
y que, por tanto, no ocupa espacio en el flujo de los contenidos.
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
48
Para crear una capa con posicionamiento absoluto, se usan los marcadores <LAYER>
</LAYER>. Para capas especificadas con estilos el posicionamiento absoluto se consigue
dando el valor absolute a la propiedad position. Por ejemplo:
<LAYER ID=layer1 TOP=200 LEFT=260>
<P>Aquí va el contenido de la capa 1</P>
</LAYER>
<STYLE type="text/css">
<!-#layer1 {position:absolute; top:200px; left:260px;}
-->
</STYLE>
26.2.2 Posicionamiento Relativo
Una capa con posicionamiento relativo está dentro del flujo del contenido dentro de la
página, es decir, la capa aparece en el documento dondequiera que la deje el flujo de los
contenidos. Además este tipo de capas comparten el espacio de línea con el resto de
elementos HTML. Si se desea que la capa aparezca en una línea aparte es necesario insertar
un salto de línea, un BR, antes de la capa.
Para las capas con posicionamiento relativo, los atributos left y top especifican el
desplazamiento de la capa con respecto a la posición actual de inserción en la página.
Para crear una capa con posicionamiento relativo se pueden usar los marcadores
<ILAYER> </ILAYER>. Si se está usando estilos hay que poner en la propiedad position
el valor relative. Por ejemplo:
<ILAYER ID=layer2>
<P>Aquí va el contenido de la capa 2</P>
</ILAYER>
<STYLE type="text/css">
<!-#layer2 {position:relative; }
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
49
-->
</STYLE>
26.2.3 Atributos y Propiedades para la definición de Capas
26.2.3.1
POSITION
#block1 {position:absolute;}
#block2 {position:relative;}
La propiedad position se aplica solo a capas definidas con estilos. Indica que tipo de
posicionamiento se utiliza y puede tomar dos valores albsolute o relative. El valor absolute
es equivalente a utilizar el marcador <LAYER> para crear una capa y el valor relative es
equivalente a crearla con el marcador <ILAYER>.
26.2.3.2
ID
<LAYER ID=block1>
#block1 {position:absolute;} /* CSS */
El parámetro ID es un identificador o nombre para la capa. EL ID tiene que empezar con un
carácter alfabético. El ID se utiliza para referirse a la capa desde la propia página HTML o
desde cualquier tipo de código que se utilice, como puede ser JavaScript. Este atributo es
opcional.
26.2.3.3
LEFT y TOP
Especifican la posición horizontal y vertical de la esquina izquierda de la capa dentro de la
página. Los dos parámetros son opcionales. Los valores por defecto son la posición
horizontal y vertical que les correspondería a los contenidos de la capa dentro de la página
si la capa no existiera. Los valores tienen que ser números enteros. Las unidades por
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
50
defecto son los pixels si se utiliza el marcador <LAYER>. Si se utiliza un estilo, es
necesario especificar las unidades. Por ejemplo:
<LAYER
BGCOLOR="yellow"
TOP=300
LEFT
=70
WIDTH=400
HEIGHT=200>
<P>Párrafo en una capa con posición absoluta.</P>
<LAYER BGCOLOR=teal TOP=50 LEFT=20
WIDTH=200 HEIGHT=100>
<P>Párrafo en una capa con posición absoluta dentro de otra
capa</P>
</LAYER>
</LAYER>
Utilizando la sintaxis CSS:
<DIV
STYLE="position:absolute;
background-color:yellow;
top:300px;
left:70px; width:200px; height:200px; border-width:1;">
<P> Párrafo en una capa con posición absoluta.</P>
<DIV STYLE="position:absolute; background-color:teal;
top:30px; left:20px; width:150px; height:120px;
border-width:1px;">
<P> Párrafo en una capa con posición absoluta dentro de otra
capa.</P>
</DIV>
</DIV>
Este otro es un ejemplo sobre definición de capas con posicionamiento relativo para elevar
o bajar texto:
<STYLE TYPE="text/css">
<!—
all.UP {position:relative; top:-10pt;}
all.DOWN {position:relative; top:10pt;}
-->
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
51
</STYLE>
<BODY>
<P>Este <SPAN CLASS=DOWN>texto </SPAN>
va <SPAN CLASS=UP>arriba</SPAN>
y <SPAN CLASS=DOWN>abajo, </SPAN> arriba
<SPAN CLASS=DOWN>y
<SPAN CLASS=DOWN>abajo</SPAN></SPAN>
</P>
</BODY>
26.2.3.4
SRC
<LAYER SRC="htmlsource/meals/special.htm>
source-include:url("htmlsource/meals/special.htm"); /* CSS */
Tanto el atributo SRC como el source-include especifican un fichero remoto que contiene
la página HTML que se va a visualizar en la capa. Obviamente esto es muy interesante si se
quiere que la información de una parte de la página cambie a menudo. Si se pone en una
capa y se carga de un fichero externo, solo habrá que modificar el contenido de esta página
y no el de la página completa.
26.2.3.5
Z-INDEX, ABOVE Y BELOW
<LAYER Z-INDEX=3>
<LAYER ABOVE=layer1>
<LAYER BELOW=greenlayer>
z-index:3; /* css */
Los atributos ABOVE y BELOW se usan solo con el marcador LAYER. Estos parámetros
especifican el z-order (orden de visualización) de las capas. Si se especifica alguno de estos
parámetros se altera el orden natural en el que la última que se define es la que queda a la
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
52
vista. Solo se puede utilizar uno de los parámetros Z-INDEX, ABOVE o BELOW en cada
capa.
El parámetro Z-INDEX toma valores enteros y las capas con un Z-INDEX mayor serán las
que queden por encima de las otras.
El parámetro ABOVE indica cual es la capa que queda por encima de la que se está
creando. De forma similar, el parámetro BELOW indica cual es la capa que queda por
debajo de la que se está creando.
26.2.3.6
WIDTH
<LAYER WIDTH=200>
<LAYER WIDTH="80%">
width:200px; /* CSS */
width:80%; /* CSS */
El valor de Width se puede expresar como un valor entero o como un porcentaje de la
anchura de la página. Hay que tener en cuenta que si los contenidos de la capa no pueden
ajustarse a los valores de anchura que se especifican, estos se variarán para ajustarlos al
contenido. Si no se especifica un valor para este parámetro, el contenido de la capa se
extenderá hasta el borde de la página.
26.2.3.7
HEIGHT
<LAYER HEIGHT=200>>
<LAYER HEIGHT = "50%">
height:200px; /* CSS */
height:50%; /* CSS
Este parámetro se puede expresar como un valor entero o en porcentaje de la altura de la
página. Hay que tener en cuenta que si los contenidos de la capa no pueden ajustarse a los
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
53
valores de altura que se especifican, estos se variarán para ajustarlos al contenido. El valor
por defecto es el menor en el que se puedan incluir los contenidos de la capa.
26.2.3.8
CLIP
<LAYER CLIP="20,20,50,100">
clip:rect(0,100,100,0); /* CSS */
Determina el área visible de la capa. Es decir con respecto al tamaño de la capa que viene
dado por TOP, LEFT, WIDTH y HEIGHT, el área de CLIP define una parte más pequeña
que es la que de verdad se va a visualizar en la página web. Los valores para el clip son un
conjunto de 4 enteros separados por comas. Los números indican la esquina izquierdasuperior y la esquina derecha-inferior. Los valores izquierda y derecha se especifican desde
el borde izquierdo de la capa y los valores superior e inferior desde el borde superior de la
capa.
Cada uno de los cuatro valores están en pixels. Si los dos primeros valores son 0, es decir,
el área de recorte incluye la esquina superior izquierda de la capa, se pueden omitir y
especificar solo la esquina inferior derecha.
Si se omite este parámetro, el rectángulo de recorte vendrá dado por los valores de WIDTH
y HEIGHT y se mostrará todo el contenido de la capa.
26.2.3.9
VISIBILITY
<LAYER VISIBILITY=SHOW>
<LAYER VISIBILITY=HIDE>
<LAYER VISIBILITY=INHERIT>
visibility:show; /* css */
visibility:hide; /* css */
visibility:inherit; /* css */
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
54
El parámetro VISIBILITY determina si una capa es visible o no. El valor HIDE esconde la
capa, SHOW la muestra e INHERIT indica que la capa tendrá el mismo valor para esta
propiedad que el que tenga su padre. Hay que tener en cuenta que incluso teniendo el valor
HIDE una capa no será visible si encima suya se sitúan otros elementos que sean opacos.
Otra punto importante es que si el atributo se corresponde a una capa con posicionamiento
relativo, aunque este atributo contenga el valor HIDE la capa seguirá ocupando espacio en
el flujo de contenidos de la página.
26.2.3.10
BGCOLOR y BACKGROUND-COLOR
<LAYER BGCOLOR="#00FF00">
<LAYER BGCOLOR="green">
background-color:green;
background-color:00FF00;
Estos parámetros determinan el color de fondo del bloque HTML y son similares al
BGCOLOR aplicable al marcador BODY. Los valores que toman son los estándar para
definir colores en hexadecimal precediendo el valor del símbolo .
Por defecto, el fondo de una capa es transparente, es decir, no tiene color asignado. Si se
utiliza este parámetro, hay que tener en cuenta que se le asigna el color a toda la superficie
de la capa y que es distinto al valor que se puede dar al color de fondo de un estilo, que solo
se aplica al contenido que tiene ese estilo.
Parte 2.- Hojas de Estilo y Posicionamiento
25
26
HOJAS DE ESTILO ............................................................................................................................. 25
25.1
USANDO CSS PARA DEFINIR ESTILOS ............................................................................................. 26
25.2
USANDO JAVASCRIPT PARA DEFINIR ESTILOS ................................................................................ 26
25.3
HERENCIA DE ESTILOS ................................................................................................................... 27
25.4
DEFINIENDO HOJAS DE ESTILO CON EL MARCADOR <STYLE>....................................................... 29
25.5
DEFINIENDO HOJAS DE ESTILO EN FICHEROS EXTERNOS ................................................................. 30
25.6
DEFINIENDO CLASES DE ESTILOS .................................................................................................... 31
25.7
DEFINIENDO ESTILOS INDIVIDUALIZADOS ...................................................................................... 33
25.8
USANDO CRITERIOS DE SELECCIÓN CONTEXTUAL ......................................................................... 34
25.9
ESPECIFICANDO ESTILOS PARA ELEMENTOS INDIVIDUALES ............................................................ 36
25.10
COMBINANDO HOJAS DE ESTILOS ................................................................................................... 38
25.11
FORMATEO DE BLOQUES ................................................................................................................ 38
POSICIONAMIENTO ......................................................................................................................... 43
26.1
POSICIONAR CONTENIDOS USANDO ESTILOS .................................................................................. 43
26.2
POSICIONAR CONTENIDOS USANDO EL MARCADOR LAYER .......................................................... 46
26.2.1
Posicionamiento Absoluto ........................................................................................................ 47
26.2.2
Posicionamiento Relativo ......................................................................................................... 48
26.2.3
Atributos y Propiedades para la definición de Capas .............................................................. 49
26.2.3.1
POSITION ..................................................................................................................................... 49
26.2.3.2
ID ................................................................................................................................................... 49
26.2.3.3
LEFT y TOP................................................................................................................................... 49
26.2.3.4
SRC ................................................................................................................................................ 51
26.2.3.5
Z-INDEX, ABOVE Y BELOW ..................................................................................................... 51
26.2.3.6
WIDTH .......................................................................................................................................... 52
26.2.3.7
HEIGHT ......................................................................................................................................... 52
26.2.3.8
CLIP ............................................................................................................................................... 53
26.2.3.9
VISIBILITY ................................................................................................................................... 53
26.2.3.10
BGCOLOR y BACKGROUND-COLOR ...................................................................................... 54