Estilos CSS

Mateo Gonzlez Manjarrs
Hojas de Estilos en Cascada C.S.S
ndice
NDICE ............................................................................................................................................. 1 2.1 ESTILOS ..................................................................................................................................... 2 2.1.1 Unidades de Medida .................................................................................................... 13 2.1.2 Caractersticas de la fuente ......................................................................................... 15 2.1.3 Caractersticas del texto .............................................................................................. 17 2.1.4 Mrgenes y borde ........................................................................................................ 21 2.1.5 Dimensiones................................................................................................................. 23 2.1.1 Colores y fondo ............................................................................................................ 23 2.1.2 Atributos para listas..................................................................................................... 25 2.1.3 Posicionamiento .......................................................................................................... 26 2.1.4 Flujo del texto .............................................................................................................. 32 2.1.5 Visibilidad .................................................................................................................... 35
2.1 ESTILOS
Al igual que en los procesadores de texto podemos definir conjuntos de atributos especficos para determinados textos, indicando que pertenecen a un estilo, es posible definir en HTML conjuntos de atributos, font, tamao, color, etc. para ser aplicados a dichos elementos en una pgina. La aplicacin de un estilo a un elemento se puede realizar de varias formas. La primera de ellas es aplicar el estilo a un elemento especfico, se habla de estilos en lnea. Todos los tags vistos en el tema HTML bsico pueden incorporar un atributo que no se ha mencionado hasta ahora, es el atributo de estilo STYLE.
<elemento [STYLE=estilo] ...>
El valor de estilo se refiere a una cadena alfanumrica que lo define . Tiene la forma
atributo:valor [; atributo:valor ]
Ms adelante se vern cuales son esos atributos y cuales sus posibles valores. El siguiente cdigo se pueden ver algunos ejemplos de como incluir estas opciones en la misma lnea de definicin del elemento.
Ejemplo. <HTML> <HEAD> <TITLE>Página con estilos en línea</TITLE> </HEAD> <BODY> <H1 STYLE=font-size:12pt;color:blue;text-indent:50pt> Encabezado pequeño y azul con sangría de 50 puntos </H1> <P STYLE=text-align:center;background-color:red;border-style:solid; border-color:black;cursor:hand;font-family:arial; width:300pt;color:yellow> párrafo con borde y centrado </P> </BODY> </HTML>
que ser visualizado como:
Esta forma de incluir estilos ser vlida para cuando el nmero de elementos a modificar sea pequeo, pero si por ejemplo, tenemos una pgina en la que todas los ttulos de nivel 3 <H3> tienen un formato especial con este mtodo tendremos que incluir toda la especificacin de estilo en cada una de las apariciones. Con el tag <STYLE></STYLE> podremos definir estilos que se aplicarn de forma automtica a todas las apariciones del elemento para el que se haya definido. El tag <STYLE> debe aparecer dentro de la cabecera ( <HEAD>)de la pgina.
<STYLE [TYPE=text/css] [MEDIA=screen | print | handheld | all]>
El atributo TYPE indica el tipo de dato que contiene y debera siempre incluirse. El atributo MEDIA indica el tipo de dispositivo para el que se define el estilo, as podemos tener unos estilos para cuando la pgina es mostrada en pantalla, otros para cuando la pgina es impresa por el navegador, y otros para cuando el dispositivo es un dispositivo de mano como una PDA o un mvil. Por defecto se definen para pantalla (screen)
Ejemplo.<HTML> <HEAD> <TITLE>Página con estilos en cabecera</TITLE> <STYLE TYPE=text/css> H1 {color:blue;background:yellow;font-family:arial:font-size:16pt; text-align:center} P {color:red;font-family:arial;font-size:12pt;text-indent:40px} </STYLE> </HEAD> <BODY> <H1>Encabezado de nivel 1 con formato</H1> <H2>Este encabezado es de nivel 2 y no tiene estilo asignado</H2> <P>Este es un párrafo con estilo</P> <BR> <BR> <H2>Este es otro encabezado de nivel 2 sin estilo</H2> <P>Y este es otro párrafo con estilo</P> </BODY> </HTML>
que ser mostrado como:
Como se ve en el ejemplo, a cada aparicin del tag <P> se le aplica el estilo definido en la cabecera. Observes como se define el estilo para un elemento determinado:
tag {atributo1:valor1 [; atributo2:valor2[ ; ..]].}
En la sintaxis no se diferencia entre maysculas de minsculas. Se puede asignar el mismo estilo a varios elementos:
H1, H2, H3 {color:blue;font-size:28pt}
La ttulos de nivel 1, 2 y 3 comparten el mismo estilo y por lo tanto tendrn la misma apariencia. Esto soluciona el tener que asignar a cada elemento un mismo estilo sin tener que especificarlo en cada lnea, pero si estamos creando un nuevo sitio web querremos dar a todas nuestras pginas una apariencia similar por lo que los mismos elementos tendrn los mismos estilos con lo que tendramos que incluir en la cabecera de cada pgina la misma definicin de estilos. Para evitar el tener que hacer esto se escribirn todas las definiciones de estilo en un archivo separado con extensin .css, al que invocaremos desde dentro de cada pgina. Hay dos formas para hacerlo:
<LINK REL=stylesheet HREF=archivo.css TYPE=text/css [MEDIA=screen | print | handheld | all]> <STYLE TYPE=text/css [MEDIA=screen | print | handheld | all]> @import URL(archivo.css); : </STYLE>
La etiqueta <LINK> al igual que la etiqueta <STYLE> debe aparecer en la seccin de cabecera <HEAD>. Se pueden importar tantos documentos de estilos como se deseen, siempre sabiendo que si existen definiciones que entran en conflicto entre los diferentes documentos, el navegador tendr en cuenta nicamente la ltima opcin leda. El ejemplo anterior escrito con un archivo separado de estilos quedara:
Ejemplo.<HTML> <HEAD> <TITLE>Página con estilos en cabecera</TITLE> <STYLE TYPE=text/css> @import URL(estilos.css); </STYLE> </HEAD> <BODY> <H1>Encabezado de nivel 1 con formato</H1> <H2>Este encabezado es de nivel 2 y no tiene estilo asignado</H2> <P>Este es un párrafo con estilo</P> <BR> <BR> <H2>Este es otro encabezado de nivel 2 sin estilo</H2> <P>Y este es otro párrafo con estilo</P> </BODY> </HTML>
o
Ejemplo.<HTML> <HEAD> <TITLE>Página con estilos en cabecera</TITLE> <LINK REL=stylesheet HREF=estilos.css TYPE=text/css> </HEAD> <BODY> <H1>Encabezado de nivel 1 con formato</H1> <H2>Este encabezado es de nivel 2 y no tiene estilo asignado</H2> <P>Este es un párrafo con estilo</P> <BR> <BR> <H2>Este es otro encabezado de nivel 2 sin estilo</H2> <P>Y este es otro párrafo con estilo</P> </BODY> </HTML>
El contenido del archivo estilos.css de estilos es:

H1 {color:blue;background:yellow;font-family:arial:font-size:16pt;text-align:center} P {color:red;font-family:arial;font-size:12pt;text-indent:40px}
Como se ve en el archivo de estilos no aparece para nada el tag <STYLE>. Dado que se puede necesitar el uso de diferentes versiones de estilos de un mismo elemento se permite la especificacin de clases. Para definir una clase se aade un nombre de clase al nombre de la etiqueta en cuestin mediante la notacin de punto.
<elemento>.<clase> {estilo}
Para usarla se hace referencia a ella mediante el atributo CLASS del elemento:
<elemento CLASS=clase>
Por ejemplo vamos a definir dos estilos diferentes para el prrafo; uno para texto normal y otro para texto de cita:
Ejemplo.Archivo .html <HTML> <HEAD> <TITLE>Página con estilos en cabecera</TITLE> <LINK REL="stylesheet" HREF="estilos.css" TYPE="text/css"> </HEAD> <BODY> <P CLASS="normal"> Este es un párrafo con estilo normal en arial de 12 pt en color negro y justificado a ambos lados </P>
<BR /> <BR /> <P CLASS="cita"> Este otro es un párrafo con estilo cita en arial de 12 pt en color rojo, en cursiva y justificado a ambos lados y mrgenes indentados 40 pt </P> </BODY> </HTML> Archivo .css P.normal {font-family:arial;font-size:12pt;text-align:justify} P.cita {color:red;font-family:arial;font-size:12pt;text-align:justify; text-style:italic;margin-left:40px;margin-right:40px}
Que ser visualizado como:
A veces necesitamos definir un estilo genrico sin que est asociado a ninguna etiqueta en especial, de tal forma que la podamos utilizar en cualquier momento que consideremos conveniente. Se definir una clase con la notacin del punto sin ir precedida de ninguna etiqueta de elemento:
.<clase> {estilo}
Y utilizacin igual que en el caso anterior:

Ejemplo.Archivo .htm <HTML> <HEAD> <TITLE>Página con estilos en cabecera</TITLE> <LINK REL="stylesheet" HREF="estilos.css" TYPE="text/css"> </HEAD> <BODY> <P>Este es un párrafo con estilo normal</P> <BR /> <BR /> <P CLASS=textoRojoConBorde> Este un párrafo en rojo con borde
Mateo Gonzlez Manjarrs </P> <BR /> <BR /> <P CLASS=textoAzulConFondoAmarillo> Este un párrafo en azul con fondo amarillo </P> <H3 CLASS=textoRojoConBorde> y esto un ecabezado de nivel 3 rojo con borde </H3> </BODY> </HTML> Archivo .css
.textoRojoConBorde {color:red;border:1px dotted red;} .textoAzulConFondoAmarillo {color:blue;background:yellow;}
que es visualizado como:
Mediante el atributo id podemos establecer una identidad nica para un nico elemento de la pgina. La sintaxis html sera por ejemplo:
<p id="menu">
donde especificamos la identidad menu para ese nico prrafo. Al elemento html pueden asignrsele estilos a traves del selector id:
#menu {color:blue;Font-size:15pt}
o bien
p#menu { color:blue;Font-size:15pt }
Es posible anidar la declaracin de estilos de tal forma que afecte solamente a aquellos elementos que coincidan de forma completa con la declaracin (seleccin contextual).
En el siguiente ejemplo se va a definir un estilo para las listas con vietas de primer nivel y otro estilo diferente para las de segundo nivel:
Ejemplo.<HTML> <HEAD> <TITLE>Página con estilos en cabecera</TITLE> <STYLE TYPE="text/css"> UL {list-Style-type:square;color:blue;font-family:arial;font-Size:12pt;} UL UL {list-Style-type:circle;color:red;font-family:arial;font-Size:10pt;} </STYLE> </HEAD> <BODY> <P>Listas jerárquicas</P> <UL> <LI> elemento de primer nivel</LI> <UL> <LI>elemento de la lista de segundo nivel</LI> <LI>otro elemento de la lista de segundo nivel</LI> </UL> <LI>otro elemento de la lista de primer nivel</LI> </UL> </BODY> </HTML>
La seleccin contextual puede definirse en relacin con la seleccin ordinaria, como hemos visto, pero tambien con elementos CLASS, ID, o combinaciones:
div p { font: small "sans-serif"; } .roja h1 { color: red; } #TextoAzul { background: blue; } div.roja h1 { font-size: large; }
La primera definicin determina que todos los prrafos p dentro de un bloque div se presentarn con letra sans-serif pequea, pues dependen jerrquicamente (contextualmente) de dicho elemento div .
La segunda seleccin determina la presentacin en rojo de todas las cabeceras h1 dentro de la clase .roja. El tercer selector determina que todos los elementos con la etiqueta pre que desciendan de un elemento ID=TextoAzul tendrn fondo azul. El cuarto selector har que todas las cabeceras h1 integradas en un bloque div con clase .roja tengan un tipo de letra grande. Los selectores contextuales se pueden agrupar:
h1 b, h2 b, h1 em, h2 em { color: red; }
que equivale a:
h1 b { color: red; } h2 b { color: red; } h1 em { color: red; } h2 em { color: red; }
En el ejemplo anterior h1 em { color: red; } define un estilo para todos los elementos em descendientes de una cabecera h1. Este estilo se aplicara por ejemplo en estos dos casos:
<h1>Capitulo 1: El retorno del <em>Jedi</em></h1> <h1>Capitulo 1: <strong>El retorno del <em>Jedi</em></strong></h1>
Pues en los dos casos em desciende de h1. NOTA: Los siguientes selectores no funcionan en Internet Explorer Puede suceder sin embargo que solo quisiramos aplicar el estilo al elemento cuando fuera hijo directo del otro, es decir, en el primer ejemplo y no en el segundo. Esto lo conseguiramos con esta sintaxis :
h1 > em
donde solo seran seleccionados elementos em directamente descendientes (hijos) de h1. Se pueden aplicar estilos a elementos html prximos a otros (seleccin adyacentes). En el ejemplo:
<h1> Capitulo 1: <strong>El retorno del <em>Jedi</em></strong> de <cite> George Lucas</cite> </h1>
las etiquetas strong y cite son adyacentes Podramos aplicar un estilo a cite indicando:
strong + cite { estilo }
donde el estilo se aplicara al elemento cite siempre que fuese adyacente y hermano, es decir, tuvieran el mismo elemento padre y apareciera inmediatamente despus de un elemento strong. Podemos tambin seleccionar etiquetas html solo si contienen determinado atributo, o si este tiene determinado valor. Vemoslo con el elemento img que como sabemos, puede contener los atributos alt y title.
img [alt] { width:50% } img [title="mis vacaciones"] { width:50% }
La primera selecciona todas la imgenes que tengan el atributo alt puesto, y la segunda todas las imgenes que tengan el atributo title puesto con el valor mis vacaciones. La variante
[atributo ~="cadena"]
Selecciona los elementos cuyo atributo contenga cadena como uno de los valores del atributo separados por espacios. Por ejemplo
p[class~=grande] {font-color:blue} <p class=roja grande conBorde> <p class=muygrande>
Seleccionara el primer p pero no el segundo. La sintaxis

[atributo|="valor"]
Selecciona las etiquetas que contengan el atributo indicado con el valor valor en una lista separada por guiones y que comiencen por ese valor. Por ejemplo:
*[lang|="en"] { color : red }
Selecciona cualquier etiqueta que contenga en su atributo lang cualquier valor que comience por en en una lista separada por guiones por ejemplo en o en-US. Existe un selector universal que es asterisco * sirve para seleccionar cualquier elemento html
.green * {color:blue}
Selecciona cualquier elemento html descendente de otro elemento con la clase green. NOTA: Lo siguiente si funciona ya en Internet Explorer Se puede aplicar ms de una clase a un misma etiqueta:
<head> <style type=text/css> .mitexto { color: yellow }
10
.mifondo { background-color: blue } </style> </head> ... <h3 class="mitexto mifondo">titulo en amarillo, fondo azul</h3>
Los elementos en una pgina HTML siguen una cadena de herencia. El elemento padre es el elemento <HTML> seguido del elemento <BODY>. Las tablas, las listas, los prrafos etc. heredan de l, por lo tanto si asignamos al elemento <BODY> un estilo estaremos asignando ese estilo a cada uno de los elementos que de l heredan. Se debe comentar que si en diversos niveles de esta herencia se hace referencia a un mismo atributo solo tendr efecto la referencia ms cercana al elemento de que se trate. As por ejemplo si en el elemento <BODY> se hace referencia al color del texto y en un elemento <P> tambin se hace referencia al color del texto tendr solo efecto la referencia del elemento <P>. Existen una serie de pseudoclases que slo se pueden aplicar a determinados elementos y modifican en cierta manera su funcionamiento: o :link Permite indicar el estilo de un elemento <A> cuando el hiperenlace no ha sido an visitado.
Ejemplo.<STYLE TYPE=text/css> A:link { color:#FF0000 } </STYLE>
o o o o o o o
Ejemplo.-
:active Permite indicar el estilo de un elemento <A> cuando el hiperenlace est activo :visited Permite indicar el estilo de un elemento <A> cuando el enlace ya ha sido visitado :hover Permite indicar el estilo de un elemento cuando el cursor se encuentra encima. :focus Permite indicar el estilo de un elemento cuando el elemento tiene el foco (no vlido en Internet Explorer). :first-letter Permite especificar un estilo para la primera letra del elemento. :first-line Permite especificar un estilo para la primera lnea del elemento. :first-child Permite especificar al primer elemento hijo de otro elemento (no vlido en Internet Explorer).
<HTML> <HEAD> <TITLE>Página con pseudo clases</TITLE> <STYLE> .parrafo:first-line { text-transform: uppercase } .parrafo:first-letter { font-size: 300%; float: left } .parrafo {font-family:arial;font-size:12pt;text-align:justify} </STYLE> </HEAD> <BODY> <P CLASS="parrafo"> La primera letra de este párrafo debe ser
11
tres veces más grande que el del resto del texto del párrafo. La primera lnea del párrafo debe aparecer en mayúsculas. El resto del texto debe aparecer normal </P> </BODY> </HTML>
<div class="capitulo"> <p>primer párrafo del capítulo</p> <p>segundo párrafo del capítulo</p> </div>
Si queremos dar estilo solo al primer prrafo, que es el primer hijo del elemento div, lo especificamos as:
p:first-child { text-indent:20px }
O as, si ms exactamente, queremos sealar solo al prrafo primer hijo de cada capitulo, y no al prrafo primer hijo de otro elemento cualquiera:
div.capitulo > p:first-child { estilo }
12
<html> <head> <title>ejemplo 36</title> <style type="text/css"> <!-* {font-family:comic-sans, cursive;} p:first-child {font-variant:small-caps;} ol {width:300px;} li:hover {color:red; background-color:yellow;} li:active{color:yellow; background-color:red;} li:focus {color:orange;background-color:blue;} li + li + li {text-decoration:underline;} ol + p {text-indent:2em;} p > em {border:1px solid blue;} --> </style> </head> <body> <p>Todos los elementos de esta página tienen una letra cursiva, asignada con el selector universal * </p> <p>El primer párrafo además va en smallcaps por ser 'primer hijo' (p:first-child) de body </p> <ol> <li>una lista</li> <li>que hace uso</li> <li>de pseudo clases</li> </ol> <p>El <em>tercer item</em> esta subrayado mediante el selector li + li + li; Además, este mismo párrafo está indentado con el selector, también adyacente, ol + p. </p> <p> En el p&aacuterrafo anterior hay un elemento em con borde, gracias a la regla p > em </p> <p>Si usas internet explorer posiblemente no veas de que estamos hablando : )</p> </body> </html>
2.1.1 UNIDADES DE MEDIDA En los ejemplos anteriores han aparecido diferentes propiedades que toman como valor cantidades expresadas en diversas unidades de medida. Unidades absolutas: o pulgadas (in). Una pulgada=2.54 cm. o centmetros (cm). o milmetros (mm)
13
o puntos (pt). Un punto=1/72 de pulgada. o picas (pc). Una pica=12 puntos Unidades relativas o em o ex o px La unidad em es igual a la altura (font-size) de la letra del elemento en el que se usa. Por ejemplo si para un prrafo especificamos un indentado de 2em, el largo de la sangra ser igual a dos veces el tamao de la letra de ese prrafo. Cuando empleamos la unidad de medida em para especificar el tamao de la letra (font-size) entonces el valor de em viene dado por el tamao de la fuente del elemento padre.
p { font-size:11px;text-indent: 2em; }
Este ejemplo equivale a un indentado de 22 px para el prrafo a que se aplica

div { font-size:15px;} p { font-size:1.2em;}
En este ejemplo, si el prrafo est contenido en un elemento div, el tamao de la letra sera un 20% mayor que el especificado para dicho div. O si no estuviera contenido en un div, un 20% mayor que el tamao de letra del elemento del que descienda (por ejemplo, body). Recordar que no hay que dejar espacios en el valor de longitud y la unidad de medida No es lo mismo expresar las medidas en una unidad u otra. Unidades absolutas como pixels, centmetros, puntos, permiten un control exacto de la apariencia de la pgina, siempre claro est, que esta se visualice en el entorno preciso para el que fue diseada. Por ejemplo, la unidad 'pixel' tiene un valor diferente dependiendo de la resolucin de la pantalla y el tipo de ordenador del usuario. As, normalmente un sistema operativo Windows mantiene una equivalencia de 96px por pulgada, y un Macintosh 72px por pulgada. Si en lugar de pixels se utiliza la medida de puntos (pt) el tamao del punto depende de la resolucin de la pantalla del usuario. Esta es la razn por la que se recomienda el uso de unidades de medida relativas, y dentro de estas, el uso de em. Con este tipo de medidas el autor mantiene un control relativo ya que, en relacin con el tamao de fuente por defecto del usuario, puede especificar cuanto ms grande o ms pequea se ha de visualizar la letra de la pgina. Ademas la unidad em puede utilizarse para cualquier propiedad CSS que admita medidas (mrgenes, sangras ...) lo que permite un diseo proporcionado al sistema del usuario. La unidad ex es igual a la altura de la letra x minscula. En muchos tipos de fuentes existe la siguiente proporcin: un em equivale a 1.5 ex. La unidad px es un pixel. La unidad pixel tiene valores distintos en trminos de visualizacin en pantalla, y en trminos de impresin.
14
La unidad pixel no es muy aconsejada, pues los elementos que la utilicen se visualizaran de forma diferente en un monitor dependiendo del tamao de pantalla y resolucin; otras unidades responden mejor a estos diferentes entornos.
Unidades de porcentaje Un valor de porcentaje se forma por un nmero y el signo %. No hay espacios en un valor de porcentaje. Los valores de porcentaje se fijan en relacin a otro. Generalmente, el valor de porcentaje es relativo al tamao de fuente del elemento, o si de dimensin al de su contenedor: 2.1.2 CARACTERSTICAS DE LA FUENTE
Mediante los estilos se tiene control total sobre que fuente se utiliza para mostrar el texto, as como sus caractersticas de tamao y apariencia. El atributo font nos permite elegir el tipo de fuente y sus atributos.
font: [nombre-fuente][tamao][estilo][nivel-negrita][versales]
Que se corresponden con los atributos individuales, respectivamente: font-family, font-size, fontstyle, font-weight y y font-variant. La fuente elegida ha de estar instalada en el equipo cliente para poder visualizarse de forma correcta. Si dicha fuente no estuviera disponible, es el sistema cliente el que elige por cual otra se sustituye de forma que la apariencia puede no corresponderse con la pretendida por el diseador de la pgina, es por lo tanto habitual elegir una lista de fuentes entre las ms habituales de los sistemas en los que se prevea se va a mostrar la pgina. Se suele incluir varios tipos de fuente separados por coma, siendo el ltimo el nombre de la familia genrica de los tipos anteriores. Hay cinco familias genricas de fuentes. Enumeramos los nombres de estas familias, y entre parntesis un ejemplo de fuente perteneciente a la misma: serif (Times), sansserif (Arial, Helvetica), cursive (Comic Sans), fantasy (Ransom) y monospace (Courier). As por ejemplo para indicar una fuente sin serifa de tipo Arial de Windows se pone:
fontfamily: Arial , Helvetica, san-serif;
Para fuentes con serifa tipo Times New Roman de Windows:

fontfamily: Times New Roman, Times, serif;
Y para fuentes monoespaciadas:

fontfamily: Courier New, Courier, monospace;
15
El tamao de la fuente se suele especificar en puntos, pero se puede especificar en alguna de las otras medidas ya mencionadas. El valor de estilo puede tomar uno de los siguientes valores: inherit, normal, italic u oblique. El valor nivel-negrita puede tomar uno de los valores siguientes: inherit, normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Y el atributo versales puede valer: inherit, normal, small-caps. En el siguiente ejemplo se ven todas las posibilidades:
<HTML> <HEAD> <TITLE>Atributos de la fuente</TITLE> </HEAD> <BODY > <P STYLE="font-family:'Times New Roman',Times,serif;font-size:16pt"> fuente con serifa </P> <P STYLE="font-family:Arial,Helvetica,serif;font-size:16pt"> fuente sin serifa </P> <P STYLE="font-family:'Courier New',Courier,monospace;font-size:16pt"> fuente monoespaciada </P> <P STYLE="font-family:Arial,Helvetica,sans-serif;font-size:16pt"> valor de estilo: <SPAN STYLE="font-style:inherit">inherit</SPAN> <SPAN STYLE="font-style:normal">normal</SPAN> <SPAN STYLE="font-style:italic">italic</SPAN> <SPAN STYLE="font-style:oblique">oblique</SPAN> </P> <P STYLE="font-family:Arial,Helvetica,sans-serif;font-size:16pt"> valor de nivel-negrita: <SPAN STYLE="font-weight:inherit">inherit</SPAN> <SPAN STYLE="font-weight:normal">normal</SPAN> <SPAN STYLE="font-weight:bold">bold</SPAN> <SPAN STYLE="font-weight:bolder">bolder</SPAN> <SPAN STYLE="font-weight:lighter">lighter</SPAN> <SPAN STYLE="font-weight:100">100</SPAN> <SPAN STYLE="font-weight:200">200</SPAN> <SPAN STYLE="font-weight:300">300</SPAN> <SPAN STYLE="font-weight:400">400</SPAN> <SPAN STYLE="font-weight:500">500</SPAN> <SPAN STYLE="font-weight:600">600</SPAN> <SPAN STYLE="font-weight:700">700</SPAN> <SPAN STYLE="font-weight:800">800</SPAN> <SPAN STYLE="font-weight:900">900</SPAN> </P> <P STYLE="font-family:Arial,Helvetica,sans-serif;font-size:16pt"> valor de versales: <SPAN STYLE="font-variant:inherit">inherit</SPAN> <SPAN STYLE="font-variant:normal">normal</SPAN>
16
<SPAN STYLE="font-variant:small-caps">Small-caps</SPAN> </P> </BODY> </HTML>
Como se puede ver algunos valores de los atributos al mostrarse en el navegador no muestran nada diferente en apariencia que otros valores del mismo atributo, por ejemplo italic y oblique. 2.1.3 CARACTERSTICAS DEL TEXTO
A continuacin se refieren atributos que afectan a un bloque de texto, el equivalente a los atributos de un prrafo en un procesador de textos.
text-indent: cantidad
Especifica la cantidad de espacio (puntos, porcentaje etc.) que se sangra la primera lnea del bloque de texto. Si es un valor positivo ser sangra normal, si un valor negativo ser sangra francesa.
<HTML> <HEAD> <TITLE>text-indent</TITLE> </HEAD> <BODY > <P> Esto es un párrafo de texto normal sin sangría de la primera línea, ni sangrado de todo el párrafo </P> <P STYLE="padding-left:30px;text-indent:20px"> Este es un párrafo con un sangrado de todo el texto de 30px por la izquierda y sangrado normal de la primera línea de 20px </P> <P STYLE="padding-left:80px;padding-right:60px;text-indent:-20px"> Este es un párrafo con un sangrado de todo el texto de 80px por la izquierda, de 60px por la derecha y sangrado francs de la primera línea de 20px </P> </BODY> </HTML>
17
text-align: left | right | center | justify
Sirve para indicar como se alinea el texto respecto a su contenedor. Es el equivalente a la alineacin de prrafos en un procesador de texto, o a lo ya visto en el tag <P>.
text-decoration: none | underline | overline | line-through
Indica si el texto aparece con subrayado, sobrerrayado o tachado. No se debe subrayar un texto a no ser que sea un hiperenlace.
text-transform: none | capitalize | uppercase | lowercase
Indica si al texto no se le aplica ninguna trasformacin, se pone la primera letra de cada palabra en maysculas, si se pone en maysculas o en minsculas, respectivamente.
letter-spacing: normal | cantidad
Indica la cantidad de espacio entre los caracteres del texto. En el siguiente ejemplo se ve la aplicacin de estos atributos:
<HTML> <HEAD> <TITLE>Atributos del texto</TITLE> </HEAD> <BODY > <P STYLE="font-family:'Times New Roman',Times,serif;font-size:16pt;textalign:center"> Párrafo con texto centrado entre los márgenes y con texto <SPAN STYLE="text-decoration:underline">subrayado</SPAN> o <SPAN STYLE="text-decoration:overline">sobrerrayado</SPAN> o <SPAN STYLE="text-decoration:line-through">tachado</SPAN><BR /> <SPAN STYLE="text-transform:capitalize"> este texto tiene la primera letra de cada palabra en mayúsculas </SPAN><BR /> <SPAN STYLE="text-transform:uppercase"> y este está todo en mayúsculas </SPAN><BR /> <SPAN STYLE="letter-spacing:8px">
18
los caracteres de este texto están un poco más separados de lo normal </SPAN> </P> </BODY> </HTML>
line-height: altura-lnea
Indica la altura ocupado por la lnea. Es lo que se entiende por interlineado en los procesadores de texto.
<HTML> <HEAD> <TITLE>Interlineado</TITLE> </HEAD> <BODY > <P> Esto es un párrafo de texto normal con interlineado normal </P> <P STYLE="line-height:30px"> Y este es un párrafo con una altura de lnea de 30px </P> </BODY> </HTML>
19
Mateo Gonzlez Manjarrs word-spacing: normal | longitud
Indica la distancia que separa a las palabras del texto.

white-space: normal | pre | nowrap
Define el tratamiento que se le dar al espacio en blanco dentro del elemento. Lo normal es que ms de un espacio en blanco sea tratado como un slo espacio. Si se usa el valor pre, entonces los mltiples espacios en blanco producirn un espaciamiento mayor. Si una lnea no cabe en la ventana no se partirn las palabras (efecto wordwrap). El valor nowrap, indica que los espacios en blanco sern considerados como un carcter ms formando parte de una palabra, por lo que las palabras no sern cortadas. Sin embargo los mltiples espacios seguidos sern transformados en uno.
<HTML> <HEAD> <TITLE>Word-spacing y white-space</TITLE> </HEAD> <BODY> <H1>Word-spacing y white-space</H1> <P > Palabras con mucho espacio entre ellas<BR /> <SPAN STYLE="word-spacing:20px"> Palabras separadas un poco más de lo normal </SPAN> y más palabras ya separadas normalmente </P> <P> <SPAN STYLE="white-space:pre"> Palabras con mucho espacio entre ellas y white-space:pre </SPAN><BR/> esta es una línea muy larga que va ser partida si en la ventana no cabe<BR/> <SPAN STYLE="white-space:nowrap"> pero esta no va a ser partida porque tiene white-space:nowrap.<BR /> Nótese que si hay multiples espacios entre palabras se reducen a uno </SPAN> </P> </BODY> </HTML>
20
2.1.4
MRGENES Y BORDE
Todos los elementos contenedores pueden mostrar un borde a su alrededor, as como disponen de espacios en blanco a su alrededor para poder mejorar su visibilidad. Si el espacio en blanco alrededor del elemento es fuera del borde estaremos hablando de las propiedades margin, si es espacio en blanco entre el contenido del elemento y el borde estaremos hablando de las propiedades padding.
Para definir el borde del elemento contamos con los siguientes atributos:
border: [estilo][color][grosor]
En el que estilo puede tomar uno de los siguientes valores: o none. Sin borde o dotted. Lnea de puntos o dashed . Lnea de guiones o solid. Lnea contnua o double. Doble lnea contnua o groove. Lnea groove. Especie de relieve formado con colores claros. o ridge. Lnea ridge. Especie de relieve formado con colores oscuros. o inset. Simula relieve hacia adentro. o outset. Simula relieve hacia afuera o hidden. Borde oculto pero ocupando espacio. Color puede tomar uno de los valores ya conocidos y grosor indica el grosor del borde en alguna de las unidades ya vistas o uno de los valores siguientes: thin, mdium, o thick.
21
Se tiene acceso a cada uno de los tres atributos del borde por separado mediante los atributos: border-style, border-color y border-width. Lo especificado en el atributo border se aplica por igual a cada uno de los cuatro bordes que rodean a un elemento. Se puede referir de forma individual a cada uno de estos cuatro bordes mediante los atributos: border-left, border-top, border-right y border-bottom, que a su vez tienen atributos para referirse de forma individual a cada uno de los valores de un borde. As para el borde izquierdo tenemos: border-left-style, border-left-color y border-left-width, y as sucesivamente. Para definir el margen alrededor del elemento disponemos del atributo margin
margin: [arriba][derecha][abajo][izquierda]
Expresados en alguna de las unidades ya mencionadas Existen atributos separados para especificar los mrgenes de forma individual. As disponemos de: margin-left, margin-top, margin-right y margin-bottom. Lo mismo para el espacio en blanco entre el borde del elemento y el contenido o padding
padding: [arriba][derecha][abajo][izquierda]
Con sus atributos particulares: padding-left, padding-top, padding-right y padding-bottom.

<HTML> <HEAD> <TITLE>Márgenes y borde</TITLE> </HEAD> <BODY STYLE="background-color:#FFFFC0"> <DIV STYLE="background-color:#00FF00; margin: 50px; padding:30px ; border:solid #000000 5px; "> este es el contenido del DIV con padding 30px y margin 50px </DIV> </BODY> </HTML>
22
2.1.5
DIMENSIONES
El atributo height define la altura del elemento y width la anchura del elemento. No incluyen los mrgenes, el padding ni el borde. Solo se aplica a los elementos de tipo bloque e imgenes.
height: auto | cantidad | porcentaje width: auto | cantidad | porcentaje
Si solo se especifica uno de ellos y el otro est en auto se mantendr la proporcin alto-ancho. 2.1.1 COLORES Y FONDO
El atributo color permite especificar el color de primer plano del elemento, en general de su texto. El color se puede especificar como ya se ha mencionado con 6 dgitos hexadecimales precedidos del carcter #, por ejemplo color:#FFFF00, que es el color amarillo segn sus componentes rgb. Se puede especificar por un nombre predefinido, por ejemplo color: yellow tambin para el amarillo, o tambin con la funcin rgb() indicando los componente de rojo, verde y azul como valores decimales, as el amarillo se indicara: color: rgb(255,255,0). El valor predefinido transparent indica que el color es transparente y se ver lo que hay debajo.
color: #xxxxxx | nombre-color | rgb(rojo,verde,azul) | transparent
El fondo del elemento se configura con el atributo background que nos va a permitir especificar tanto su color de fondo, como una imagen que puede ser mostrada en el fondo. Si se incluye una imagen se podr controlar si esta imagen se repite con efecto mosaico, y si no se repite en que posicin del fondo se muestra, as como indicar si al hacer scroll en la ventana del navegador est imagen se mueve o no. Todas estas posibilidades dan lugar a atributos especficos que vamos a mencionar por separado:
background-color: #xxxxxx | nombre-color | rgb(rojo,verde,azul) | transparent
Con el mismo significado que el atributo color pero aplicado al color de fondo.
background-image: url(archivo)
Indica la ruta al archivo de imagen que se mostrar como imagen de fondo. Si la imagen es .gif o .png con un color definido como transparente se podr ver el color de fondo, sino no. Si no se indica ningn otro atributo esta imagen se replicar en el fondo, tanto en vertical como en horizontal hasta llenar la ventana del navegador por completo, es lo que se denomina efecto mosaico. Esta repeticin se controla con el siguiente atributo:
background-repeat: repeat | repeat-x | repeat-y | no-repeat
Los valores del atributo son autoexplicativos. Cuando no hay repeticin de la imagen de fondo se puede especificar la posicin de la misma a travs del atributo background-position o de los ms especficos background-position-x y backgroundposition-y.
background-position: posicionX posicionY background-position-x: cantidad | porcentaje | left | center | right background-position-y: cantidad | porcentaje | top | center |bottom
23
En el siguiente ejemplo se muestra una pgina con un color de fondo gris y una imagen situada en la parte superior derecha de la ventana. Se muestra tambin una capa en la que una imagen de fondo sin color transparente solo se repite en horizontal:
<HTML> <HEAD> <TITLE>Fondo</TITLE> </HEAD> <BODY STYLE="background-color:silver;background-image:url('imagenes/dibujo.gif'); background-repeat:no-repeat;background-position: right top"> <H1>Fondo de elementos</H1> <DIV STYLE="background-repeat:repeat-x; background-image:url('imagenes/dibujo2.gif'); border: solid 2px black;width:500px;height:200px"> <H1>Texto dentro del div</H1> </DIV> </BODY> </HTML>
Por ultimo, se puede hacer que la imagen de fondo se desplace con la pgina al hacer scroll o no mediante el atributo background-attachment
background-attachment: fixed | scroll
El fondo de un elemento se puede configurar con estos atributos especficos o con el atributo background que nos permite de una tacada dar valores a todos esos atributos:
background: color-fondo imagen-fondo repeticin anclaje posicin
As en el ejemplo anterior el atributo STYLE podra haber quedado:

STYLE=background: silver url('imagenes/dibujo.gif') no-repeat fixed right top"
24
2.1.2
ATRIBUTOS PARA LISTAS
Mediante los atributos de estilos para listas se tiene control absoluto sobre la apariencia de las mismas. El atributo list-style, o los especficos list-style-type, list-style-image, list-style-position nos permiten hacerlo: Si se incluye el atributo genrico list-style se seguir la sintaxis:
list-style [imagen][posicin][tipo]
Los atributos especficos sern:

list-style-type tipo
En donde tipo puede tomar uno de los siguientes valores: o disc crculo lleno o circle crculo vaco o square cuadrado o decimal-leading-zero nmero con un cero delante (01., 02., 03., etc.) o decimal nmero decimal (1., 2., 3., etc.) o lower-roman nmero romano en minsculas ( i., ii., iii., etc.) o upper-roman nmero romano en maysculas ( I., II., III., etc.) o lower-greek letra del alfabeto griego o lower-alpha letra en minsculas (a., b., c., etc.) o lower-latin letra en minsculas (a., b., c., etc.) o upper-alpha letra en maysculas (A., B., C., etc.) o upper-latin letra en maysculas (e.g. A., B., C., etc.)
list-style-image: url(archivo-imagen)
Permite indicar cual es la imagen que se mostrar como vieta de una lista no numerada.
list-style-position: inside | outside
Indica si la vieta o el nmero se muestran dentro (inside) del borde izquierdo de la lista o fuera (outside) del borde izquierdo de la lista.
25
<HTML> <HEAD> <TITLE>Listas</TITLE> </HEAD> <BODY> <H1>Lista con viñetas de círculos y cuadrados</H1> <UL STYLE="list-style-type:circle"> <LI>Salamanca</LI> <LI>Valladolid</LI> <UL STYLE="list-style-type:square"> <LI>Alaejos</LI> <LI>Rueda</LI> </UL> <LI >Zamora</LI> </UL> <UL STYLE="list-style-image:url('imagenes/bola.gif');"> <LI>Salamanca</LI> <LI>Valladolid</LI> <LI STYLE="list-style-image:url('imagenes/bola2.gif')">Zamora</LI> </UL> </BODY> </HTML>
Ntese como se ha modificado la imagen para un solo elemento de la lista. 2.1.3 POSICIONAMIENTO
Mediante el uso de los atributos de estilo es posible posicionar los elementos de una pgina HTML segn un sistema de coordenadas x,y as como solapar elementos distribuyndolos en distintos planos segn el eje z.. Por defecto los elementos en una pgina se distribuyen segn el orden en que aparecen en el cdigo HTML, en el que cada elemento tiene un tamao y posicin dependiendo del tipo del elemento, y de su contenido. De esta forma no es posible la ubicacin exacta de un elemento en la pgina. Mediante los atributos de estilo de los elementos se puede controlar de forma precisa la posicin del elemento. Existen dos maneras de situar un elemento en la pgina: posicionamiento absoluto y posicionamiento relativo. El tipo de posicionamiento se indica en el atributo position. Hay un tercer modo de posicionamiento, que es el posicionamiento fijo que no es aceptado por la versin 6 del Microsoft Internet Explorer, aunque s por la versin 7 y siguientes Un posicionamiento absoluto es siempre en relacin a la posicin de elemento contenedor ms prximo, si no hubiese, por defecto es el elemento <BODY>. Los valores de los atributos left y top hacen referencia a la esquina superior izquierda de este elemento contenedor.
Ejemplo.<HTML> <HEAD> <TITLE>Posicionamiento absoluto</TITLE> </HEAD> <BODY> <IMG SRC="imagenes/dibujo.gif"
26
STYLE="position:absolute; left:150px;top:100px" BORDER="1"/> </BODY> </HTML>
La imagen estar situada en la posicin 75, 50 en pixeles respecto a la esquina superior izquierda del elemento <BODY>.
Ejemplo.<HTML> <HEAD> <TITLE>Posicionamiento absoluto</TITLE> </HEAD> <BODY> <P STYLE="position:absolute;left:100px;top:100px;border:1px solid;height:300px;width:300px"> <IMG SRC="imagenes/dibujo.gif" STYLE="position:absolute; left:150px;top:100px" BORDER="1"/> </P> </BODY> </HTML>
27
La imagen estar situada en la posicin 75,50 pixeles respecto a la esquina superior izquierda del elemento <P> que es un contenedor, es decir, puede incluir o contener otros elementos. En principio el tag <P> est pensado para dar a un texto el formato de un prrafo. Tanto es as que tras un tab <P> aparecer una lnea en blanco. Hay otros dos tags que son contenedores sin ms uso que este, es decir son tags cuya nica funcin es contener otros elementos para as poder referirnos a todos ellos a travs de su contenedor. Son los tags <DIV> y <SPAN>. El tag <DIV> define un rea rectngular (capa) en el que estn contenidos los elementos que se incluyan en su mbito (definidos entre <DIV> y </DIV>). Cualquier atributo de estilo que se incluya en el contenedor afectar a todos los elelementos definidos dentro de su mbito. Por ejemplo si se indica a nivel del <DIV> que el tipo de letra es Arial, todos los elementos contenidos tendrn su tipo de letra Arial. El contenedor primero es <BODY> y a partir de ah se van sucediendo contenedores que a su vez pueden contener otros contenedores, etc. El otro tag <SPAN> es tambin un contenedor pero mucho ms limitado ya que solo puede contener texto dentro de un elemento. Por ejemplo puede contener texto con modificadores <B> o <I> pero no puede contener tag <P>. Se utiliza para dar formato a una cantidad pequea de texto. Los elementos de una pgina dentro de <BODY> se van colocando en una primera capa segn el orden en que van siendo definidos. Adjudicando una posicin absoluta a un elemento se le saca de esta disposicin por defecto de los elementos en esta primera capa. Si otros elementos ocupan tambin la misma posicin no afectarn al elemento posicionado ni el elemento posicionado les afectar. Se puede controlar este solapamiento usando el atributo del eje z, z-index para indicar que elemento queda encima de que otro.
Ejemplo .<HTML> <HEAD> <TITLE>Posicionamiento absoluto</TITLE> </HEAD> <BODY> <IMG SRC="imagenes/dibujo.gif" STYLE="position:absolute; left:150px;top:100px;z-index:2" BORDER="1"/> <IMG SRC="imagenes/dibujo2.gif" STYLE="position:absolute; left:200px;top:140px;z-index:1" BORDER="1"/> </BODY> </HTML>
28
Si se indica en el atributo position el valor relative el elemento se colocar segn la disposicin natural de la pgina (o capa) pero desplazndose segn los valores left y top respecto al contenido del elemento precedente.
Ejemplo.<HTML> <HEAD> <TITLE>Posicionamiento relativo</TITLE> </HEAD> <BODY> <P>Texto con subíndice <SPAN STYLE=font-size:8pt; position:relative; top:10px> este es el subíndice </SPAN> </P> </BODY> </HTML>
Si el posicionamiento hubiese sido absoluto habra quedado:

Ejemplo.<HTML> <HEAD> <TITLE>Posicionamiento absoluto</TITLE> </HEAD> <BODY> <P>Texto con subíndice <SPAN STYLE=font-size:8pt; position:absolute; top:10px> este es el subíndice </SPAN> </P> </BODY> </HTML>
29
Con el posicionamiento relativo tambin es posible que se produzcan solapamientos, por ejemplo dando valores negativos a los atributos left y top. El posicionamiento fijo (position:fixed) hace que el elemento se posicione respecto a la ventana del navegador y no respecto al inicio del contenido de forma que si situamos un elemento de forma fija, al hacer scroll este elemento no se desplazar ya que quedar fijo respecto de la posicin indicada. En el siguiente ejemplo se ve como acta, antes y despus de hacer scroll:
<HTML> <HEAD> <TITLE>Posicionamiento fijo</TITLE> </HEAD> <BODY> <DIV STYLE="position:fixed; top:50%; background-color:#FFFFC0"> este texto está fijado al centro de la ventana <BR /> incluso cuando se hace scroll </DIV> <H1>Texto1</H1> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <H1>Otro texto</H1> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <H1>Y otro más</H1> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> </BODY> </HTML>
30
Tras los atributos left y top, y en otros muchos atributos, se incluyen valores numricos, positivos o negativos, enteros o decimales, seguidos del indicador de unidad sin incluir espacios entre ellos. As en el ejemplo anterior encontramos font-size:8pt y top:10px. Tambin se pueden expresar en forma de porcentaje, por ejemplo 23.2%. En relacin a qu es este porcentaje?, depende del atributo en el que se incluya. La mayora de las veces es en relacin al tamao de la fuente, pero por ejemplo si se incluye en el atributo top se refiere a la altura de su contenedor, en el siguiente ejemplo se ve claramente:
<HTML> <HEAD> <TITLE>Posicionamiento con porcentaje</TITLE> </HEAD> <BODY> <P>Texto</P> <DIV STYLE="position:absolute; top:50%"> este texto está colocado en el centro de la ventana </DIV> </BODY> </HTML>
31
2.1.4
FLUJO DEL TEXTO
Por omisin, los elementos de tipo bloque y las imgenes son mostradas en el lugar del texto donde aparecen. Si uno indica float: left, el elemento aparecer en el costado izquierdo de su elemento padre (el elemento en el cual se encuentra), y el texto fluir alrededor de ella. Lo mismo ocurre si float : right. Esta declaracin,como un efecto colateral, transforma cualquier elemento en un elemento de tipo bloque.
float: none | left | right <HTML> <HEAD> <TITLE>float</TITLE> </HEAD> <BODY>
<H1>Imagen flotante</H1> <DIV STYLE="float:left;"> <IMG SRC="imagenes/bill.jpg" > </DIV> <P> Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque. </P> <P> Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti. </P> <P> Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas ad nostrum tempus Livi scriptoris ab aevo, si nimis antique, si dure. </P> <P> Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror. </P> <P> Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, venditque poema. </P> </BODY> </HTML>
32
Junto al atributo float se suele usar el atributo clear que se usa para controlar cmo se comportarn los elementos que siguen a los elementos flotantes de un documento. Por defecto, los elementos siguientes se mueven hacia arriba para rellenar el espacio disponible que quedar libre al flotar una caja hacia un lado. En el ejemplo anterior el texto se desplaza de forma automtica hacia arriba junto a la imagen de Bill Gates para rellenar ese espacio al lado de la imagen.
clear none | left | right | both
La propiedad clear puede tomar los valores:left, right, both o none. Por ejemplo, si se fija en both para una caja, el borde del margen superior de esta caja siempre estar debajo del borde del margen inferior de las posibles cajas flotantes que vengan de arriba.
En el ejemplo siguiente se ha utilizado float:left, para que la imagen se alinee a la izquierda y el resto fluya por su derecha. A su vez se ha utilizado float:right para que el ttulo se alinee a la derecha y el
33
resto fluya por su izquierda, de ah que el texto fluye por la derecha de la imagen y a su vez por la izquierda del ttulo:
<HTML> <HEAD> <TITLE>float</TITLE> </HEAD> <BODY> <H1>Imagen flotante</H1> <DIV STYLE="float:left;"> <IMG SRC="imagenes/bill.jpg"> </DIV> <H1 STYLE="float:right;">Bill Gates</H1> <P> Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque. </P> <P> Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror. </P> </BODY> </HTML>
Y ahora vemos el resultado de incluir en el primer prrafo tras el ttulo STYLE=clear:right para impedir que el texto fluya alrededor del ttulo ya que se indica que est lmpio su lado derecho.
34
Los atributos float y clear junto con el atributo que se ver a continuacin, display son la base de la maquetacin por capas muy utilizada actualmente en detrimento de la maquetacin por tablas utilizada anteriormente. 2.1.5 VISIBILIDAD
Los atributos display y visibility controlan si los elementos aparecen en la pgina o no, y los atributos clip y overflow indican que parte de los elementos es visible o no. El atributo opacity controla el nivel de transparencia del elemento. La visibilidad de un elemento determina si el usuario puede ver o no dicho elemento. El espacio para el elemento en la pgina se sigue conservando aunque no est visible por lo que el hacer un elemento visible o no no afecta a la disposicin en la pgina del resto de elementos. En el ejemplo siguiente aparece una imagen
<HTML> <HEAD> <TITLE>Visibilidad</TITLE> </HEAD> <BODY> <P> <iMG SRC=dibujo.gif ALIGN=left> Con el fin de que las enseñanzas de educación infantil ,educación primaria y educación secundaria se desarrollen con las mayores garantías de eficacia de forma que se optimice la calidad del servicio eductivo </P> </BODY> </HTML>
35
En el siguiente la imagen desaparece pero conserva su espacio.

<HTML> <HEAD> <TITLE>Visibilidad</TITLE> </HEAD> <BODY> <P> <iMG SRC=dibujo.gif ALIGN=left STYLE=visibility:hidden> Con el fin de que las enseñanzas de educación infantil ,educación primaria y educación secundaria se desarrollen con las mayores garantías de eficacia de forma que se optimice la calidad del servicio eductivo </P> </BODY> </HTML>
Por el contrario si el atributo que se utiliza para ocultar un elemento es el atributo display los elementos de la pgina se recolocarn para ocupar el espacio del elemento oculto:
<HTML> <HEAD> <TITLE>Visibilidad</TITLE> </HEAD> <BODY> <P> <iMG SRC=dibujo.gif ALIGN=left STYLE=display:none>
36
Con el fin de que las enseñanzas de educación infantil ,educación primaria y educación secundaria se desarrollen con las mayores garantías de eficacia de forma que se optimice la calidad del servicio eductivo </P> </BODY> </HTML>
La utilidad de estos atributos se ver cuando sepamos hacer dinmicos el contenido de las pginas en donde podremos hacer que determinados elementos aparezcan o no en respuesta a determinadas acciones del usuario. El comportamiento de los elementos HTML se clasifica segn dos tipos: o Elementos de bloque (block) que generan un salto de lnea tras ellos en el flujo del texto. o Elementos en lnea (inline). Los elementos inline no generan una nueva lnea en el flujo del texto. Los elementos inline son vistos como elementos internos subordinados para elementos de bloque en los que estn incluidos. El elemento de bloque ms tpico es el tag <DIV> y el inline el tag <SPAN>. Con el atributo display podemos modificar la presentacin, y por ende el comportamiento, de estos elementos. Por ejemplo, al tag <A>, que por su naturaleza pertenece al grupo de elementos inline, podemos aplicarle a travs de CSS un valor en la propiedad display de tipo block:
<A HREF="http://www.iesvb.es" STYLE="display:block;">Instituto Venancio Blanco</A>
De este modo podemos presentar al elemento <A> a nuestro gusto, adquiriendo las propiedades de los elementos block. El atributo display dispone de otros valores relacionados son tablas y listas que se vern ms adelante. El atributo clip permite definir un rea rectangular dentro del cual el elemento es visible. Cualquier zona del elemento que se salga de estos lmites no ser mostrada. Las coordenadas del rea rectangular se expresan en el orden arriba, derecha, abajo, izquierda.
<HTML> <HEAD>
37
<TITLE>Recorte</TITLE> </HEAD> <BODY> <P STYLE=position:absolute;clip:rect(0.2cm 3.5cm 1.4cm 0.5cm)> Con el fin de que las enseñanzas de educación infantil ,educación primaria y educación secundaria se desarrollen con las mayores garantías de eficacia de forma que se optimice la calidad del servicio eductivo </P> </BODY> </HTML>
Ntese que el elemento sigue ocupando el mismo espacio que antes pero solo es visible la zona indicada. Es necesario que aparezca el atributo position para que el atributo clip funcione. Cuando en un elemento se asigna un ancho (width) y un alto (height) especficos se puede dar el caso que el contenido sobrepase estos lmites. En este caso el contenido sobrepasa los lmites y se muestra por defecto. El atributo overflow nos va a permitir o bien hacer que la informacin que sobrepase los lmites no sea mostrada, valor hidden o bien que se muestren unas barras de desplazamiento, valor scroll, para permitir al usuario ver la informacin que no se muestra.
overflow: auto | visible | hidden | scroll
Tambien se puede controlar que ocurre con el contenido que excede en la coordenada x de forma separada a lo que ocurren en la coordenad y:
overflow-x: auto | visible | hidden | scroll overflow-y: auto | visible | hidden | scroll <HTML> <HEAD> <TITLE>Overflow</TITLE> </HEAD> <BODY> <P STYLE="position:absolute;height:100px;width:300px"> Con el fin de que las enseñanzas de educación infantil ,educación primaria y educación secundaria se desarrollen con las mayores garantías de eficacia de forma que se optimice la calidad del servicio eductivo </P> </BODY> </HTML>
38
<HTML> <HEAD> <TITLE>Overflow</TITLE> </HEAD> <BODY> <P STYLE="position:absolute;height:100px;width:300px;overflow:scroll"> Con el fin de que las enseñanzas de educación infantil ,educación primaria y educación secundaria se desarrollen con las mayores garantías de eficacia de forma que se optimice la calidad del servicio eductivo </P> </BODY> </HTML>
Se puede controlar el nivel de transparencia mediante el atributo opacity. Por desgracia este atributo no es entendido por el Internet Explorer de Microsoft que cuenta con un mtodo alternativo que es especificar un filtro (los filtros no son entendidos por los navegadores tipo Mozilla). Para navegadores tipo Mozilla:
opacity: cantidad
Cantidad es un valor comprendido entre 0 y 1 que indica el tanto por uno de opacidad del elemento. As por ejemplo opacity:0.5 indica una opacidad del 50%. Para el Interntet Explorer de Microsoft:
filter: alpha(opacity=porcentaje)
39
En donde porcentaje (valor entre 0 y 100) es el tanto por ciento de opacidad. As por ejemplo: filter: alpha(opacity=50) tiene el mismo efecto que opacity:0.5 en los navegadores Mozilla. Aprovechndonos de que un navegador si no entiende alguna definicin lo que hace es pasar de ella sin mostrar ningn tipo de mensaje, cuando se especifique una opacidad se incluirn los dos formatos as el navegador aplicar la que entiende y pasar de la que no entiende.
<HTML> <HEAD> <TITLE>Opacidad</TITLE> </HEAD> <BODY > <DIV STYLE="position:absolute;height:200px;width:200px; background-color:#0000ff"> </DIV> <DIV STYLE="position:absolute;top:100px;left:100px;height:200px;width:200px; background-color:#ff0000;opacity:0.5;filter: alpha(opacity=50);"> </DIV> </BODY> </HTML>
40

Estilos CSS

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Estilos CSS

Caricato da

Copyright:

Formati disponibili

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

que ser visualizado como:

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

que ser mostrado como:

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

El contenido del archivo estilos.css de estilos es:

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Que ser visualizado como:

Y utilizacin igual que en el caso anterior:

Hojas de Estilos en Cascada C.S.S

.textoRojoConBorde {color:red;border:1px dotted red;} .textoAzulConFondoAmarillo {color:blue;background:yellow;}

que es visualizado como:

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Seleccionara el primer p pero no el segundo. La sintaxis

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Este ejemplo equivale a un indentado de 22 px para el prrafo a que se aplica

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Para fuentes con serifa tipo Times New Roman de Windows:

Y para fuentes monoespaciadas:

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

<SPAN STYLE="font-variant:small-caps">Small-caps</SPAN> </P> </BODY> </HTML>

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

text-align: left | right | center | justify

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Mateo Gonzlez Manjarrs word-spacing: normal | longitud

Hojas de Estilos en Cascada C.S.S

Indica la distancia que separa a las palabras del texto.

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Con sus atributos particulares: padding-left, padding-top, padding-right y padding-bottom.

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

Mateo Gonzlez Manjarrs

Hojas de Estilos en Cascada C.S.S

As en el ejemplo anterior el atributo STYLE podra haber quedado:

Mateo Gonzlez Manjarrs