Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Unidad 17

    Cargado por

    Steballys Karolay Arita
    12 vistas47 páginas

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    12 vistas47 páginas

    Unidad 17

    Cargado por

    Steballys Karolay Arita

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 47

    Unidad

    17. Estilos CSS Avanzados

    En temas anteriores vimos cmo funcionaba el panel Estilos CSS y cmo crear hojas de estilos para poder utilizarlas en tus pginas web. Hasta ahora hemos ido empleando las propiedades CSS ms comunes, aunque no las hemos explicado detalladamente. En esta unidad intentaremos explicar mejor qu es CSS. A lo largo del curso, hemos orientado nuestras pginas para que sigan los fundamentos y reglas marcadas por el W3C (Word Wide Web Consortium). Esta metodologa exige que el archivo HTML solamente muestre datos organizados y estructurados con etiquetas de marcacin HTML, mientras que la parte de formato recaera sobre los estilos CSS nica y exclusivamente. Ya que aunque no las hemos empleados, existen etiquetas (como <font> o <b>) y atributos (como bgcolor) que nos permiten definir el aspecto del elemento, pero sin emplear CSS. Para poder lograr esto deberemos dominar en profundidad CSS para poder posicionar, modificar o adornar la pgina de un modo eficiente. En este tema aprenderemos controles que nos ayudarn a presentar el texto e imgenes de nuestras pginas de una forma mucho ms limpia y cmoda. 17.1. Aplicar estilos CSS Hasta ahora, si has entrado un poco en el cdigo de las pginas, habrs visto etiquetas que introducan estilos CSS en ellas. Por defecto, cuando crebamos una < Nueva regla de estilo > desde el inspector de propiedades, se defina la regla nicamente para la pgina actual. Esto generaba un cdigo similar al siguiente en el<head> de la pgina (por supuesto, cambiando las propiedades segn el caso).
    <style type="text/css"> <!-body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; textalign: center; background: url('imagenes/fondo.gif') repeat-x bottom; } //-> </style>

    Este mtodo se emplea para incrustar el cdigo directamente en la pgina. Los estilos son declarados en la cabecera (<head>...</head>), entre las etiquetas <style type="text/css"> y</style>. La base del CSS es lograr un estilo homogneo y fcil de modificar para todo nuestro sitio. Por lo tanto, no tiene sentido incrustar el mismo estilo en cada pgina. En nuestros sitios de ejemplo, hemos optado por exportar los estilo a una hojas de estilos (un archivo de extensin .css). Esta opcin nos resultaba mucho mejor, ya que nos permite centralizar el estilo en un slo archivo que aplicaremos a todas las pginas. Si acabamos de comenzar con nuestro sitio, podemos crear nuestra hoja directamente. En este caso deberemos crear un archivo CSS (Archivo Nuevo y seleccionando CSS). En l escribiremos las reglas de estilo del con la misma sintaxis que hemos visto ms arriba pero eliminado el componente HTML. Este sera el contenido de nuestra hoja definiendo el mismo estilo que arriba:
    @charset "iso-8859-1"; /* CSS Document */ body { family: Verdana, Arial, Helvetica, sans-serif; 12px; text-align: center; url('imagenes/fondo.gif') repeat-x bottom; } fontfont-size: background:

    Las dos primeras lneas generadas por Dreamweaver no son imprescindibles. Este cdigo est guardado en un archivo con extensin .css (por ejemplo, miestilo.css). Luego deberamos vincularlo en la pgina HTML utilizando la etiqueta <link /> dentro del <head> de la pgina:
    <link href="ruta/miestilo.css" rel="stylesheet" type="text/css" />

    Otra opcin que nos permita el Inspector de propiedades CSS era crear un Estilo en lnea. Este estilo slo afectaba al elemento en cuestin, ya que lo que realmente estamos haciendo es definir las propiedades CSS empleando el atributo style del elemento:
    <p style="color: red; font-size: 30px;">Este texto est en rojo y con un tamao de 30 pxeles</p>

    El estilo en lnea es el ms desaconsejado porque es ms difcil de modificar al tener que buscarlo por el texto y modificndolo uno a uno. Una pgina puede contener todos estos tipos de estilos CSS, o incluso tener varias hojas de estilo asociadas. Entonces cundo empleamos cada uno? Emplearemos hojas de estilos para todos los estilos comunes a las pginas del sitio. Emplearemos estilos incrustados en la pgina para los estilos que se emplean en nicamente en esa pgina, y que ya no seran tiles si borrsemos la pgina. Por ejemplo, para definir el la apariencia de una tabla en concreto. Emplearemos estilos en lnea cuando el estilo solo tenga sentido por estar en esa posicin en concreto, y no se suela repetir en el sitio. Por ejemplo, si queremos dar ms margen a un prrafo por tener una imagen en concreto, pero que no tendra sentido si cambisemos la imagen. La organizacin de los estilos debes decidirla t. Pero recuerda que cuanto menos cdigo repitas en tus pginas, ms fcil ser luego de modificar o exportar. 17.2. Sintaxis CSS Un archivo CSS tiene una estructura muy bien definida, por lo que bastar con que nos aprendamos unas cuantas reglas para poder empezar a familiarizarnos con su creacin. Su estructura siempre es la siguiente: El formato a seguir para definir una propiedad es: selector { propiedad: valor;} o selector {propiedad: valor1 valor2 valor3;} si puede tener varios valores. Aunque como lo habitual es escribir varias propiedades para un selector, se suele emplear la sintaxis:
    selector { propiedad1: valor; propiedad2: valor1 valor2; propiedad3: valor; propiedad4: valor; }

    Esto es lo que podramos llamar una regla CSS. Podemos escribir tantas reglas CSS como queramos, siempre una despus de otra. Entre llaves se encierra la definicin del estilo, que viene dada por una lista de propiedades y sus valores separados por puntos y comas. Los selectores son aquellos sobre los que se aplica la definicin del estilo CSS. Recordars que al crear una nueva regla, Dreamweaver nos permita elegir entre cuatro tipos de selectores:

    Etiqueta HTML Clase Identidad Compuesto Cualquier etiqueta HTML es un selector (eliminando los < y >). Por lo que cualquier elemento de una pgina puede ser modificado genricamente para que tome un mismo aspecto, por ejemplo:
    p {font: 13px bold Arial;}

    Hace que todos los prrafos (la etiqueta p) tendrn la fuente de un tamao de 13 pxeles, estar en negrita y ser del tipo Arial. Hay que tener en cuenta que las etiquetas tiene un estilo por defecto, dependiendo del navegador. Por eso vemos los prrafos con margen, los enlaces subrayados o los encabezados de mayor tamao. Haciendo esto reescribimos las propiedades de esa etiqueta. Una clase es un selector que afectar slo a aquellas etiquetas que nosotros decidamos, por ejemplo:
    .rojo {color: red;}

    Hemos creado una clase, que hace que los elementos a los que se la asignemos muestren el texto de color rojo. Como puedes ver, la clase se define porque tiene un punto delante. Ahora podramos aplicar este estilo sobre cualquier etiqueta que queramos. No hay ms que emplear el atributo class para indicar la clase asignada.
    <p class="rojo">ste es un texto en rojo.</p> <div class="rojo"> <p>Este texto tambin es rojo.</p> <p>Y tambin ste. </p> </div>

    En este ejemplo estaramos creando un prrafo y todo su texto sera rojo. En el caso del bloque, todo el texto que contenga ser rojo, a no ser que los prrafos tengan definido otro color en la hoja de estilo. Los selectores de clase deben estar siempre escritos con caracteres alfanumricos y sin utilizar espacios (utiliza el subrayado _ para separar palabras). Para evitar errores, recomendamos tambin escribirlos siempre en minsculas. Por ltimo encontraramos los selectores de identidad. Estos selectores identifican al elemento por su ID. Por lo tanto, slo afectarn a un elemento en concreto de la pgina, por lo que son muy empleados para definir el estilo de las capas PA.
    #contenedor {width: 600px;}

    Observa que este tipo de selector va precedido por una almohadilla (#). Ms tarde en el cdigo podremos encontrar:
    <div id="contenedor">Este es un bloque que contiene texto</div>

    En el cdigo deber establecerse la regla CSS asocindosela al atributo ID. Este atributo (id) recoge el nombre del elemento que se ha creado con la etiqueta HTML. A partir de ese momento se podra referenciar a ese cuadro de texto como contenedor utilizando JavaScript. Los selectores compuestos los veremos en el siguiente avanzado:

    17.3. Selectores compuestos Aunque slo hay tres tipos de selectores diferentes hay diversas formas de combinarlos para producir hojas de estilo ms complejas. A esta combinacin de selectores se les llama selectores compuestos. Ahora veremos estos tipos de combinacin: Agrupacin: Los selectores se pueden agrupar separados por comas para asignarles las mismas propiedades, por lo que:
    p{background-color:#003;} .resaltado{background-color:#003;} #cabecera { background-color: #003; }

    Puede escribirse como:


    p, .resaltado, #cabecera { background-color: #003; }

    Descendencia: Podemos obligar que un estilo slo se aplique sobre un elemento que est dentro de otro. Por ejemplo:
    #contenido{ color:#0000FF;background-color:#FFC; } .resaltado { background-color: #FFC; }

    Esto har que tanto el elemento #contenido como los elementos con la clase .resaltado tengan el mismo color de fondo. Pero qu ocurre si queremos resaltar algo dentro de #contenido? Como no se ver tenemos que crear otra clase? No es necesario, podemos indicar propiedades distintas que afecten a la clase .resaltado slo cuando se encuentre dentro del elemento #contenido. Lo hacemos escribiendo lo selectores en orden jerrquico y separados por espacios:
    #contenido .resaltado { background-color: #06F; }

    Ahora los textos marcados con la clase .resaltado en los dentro de #contenido se vern con otro color de fondo. Al escribir dos selectores seguidos obligamos a que el segundo tenga que estar dentro del anterior. Puedes utilizar todas las anidaciones que quieras y mezclar los selectores, por ejemplo:
    #contenedor p .derecha { float: right; }

    En este caso todas las etiquetas con la clase derecha que se encuentren dentro de un prrafo dentro del elemento definido como contenedor flotarn a la derecha. 17.4. Selectores de atributo Hasta ahora hemos visto que los selectores se pueden combinar de bastantes formas. Veamos que el poder de CSS no slo se queda ah si no que avanza un poco ms para ayudarnos a establecer estilossegn el tipo de atributos que tenga una etiqueta. Un atributo es una parte de la descripcin de un selector HTML. Por ejemplo, en:
    <a href="http://www.aulaclic.es" target="_blank">Enlace</a>

    a es el selector de la etiqueta, mientras que href y target son atributos. CSS permite entrar en el contenido de las etiquetas para cambiar sus estilos. Veamos cmo hacerlo: Nombre de Atributo: Podemos establecer estilos para etiquetas con determinados atributos definidos, por ejemplo:
    a[href] { font-family: Arial, Helvetica; }

    En esta lnea estamos estableciendo que cualquier etiqueta a que tenga el atributo href cambie su tipo de letra a Arial o Helvtica. Valor de Atributo: Podemos aplicar estilos a etiquetas que tengan determinado valor en un atributo, por ejemplo:
    a[target="_blank"] { font-weight: bold; }

    Esta lnea har que se convierta en negrita cualquier enlace que abra una nueva ventana al hacer clic, distinguindolos de los enlaces que navegan por el sitio. Interesante, verdad? 17.5. Pseudoclases y Pseudoelementos CSS Por ltimo, y para terminar con los selectores veremos las pseudoclases, elementos que aadiremos a los selectores para evidenciar algn estado. Y los pseudoelementos, que aplicaremos sobre los selectores en dos casos muy sencillos. Primero veremos 4 tipos diferentes de pseudoclases, que habamos ido comentando alguna vez. Son: :link, :visited, :hover y :active. Incluyendo estas pseudoclases en nuestros estilos CSS podremos modificar el modo en el que se visualizarn lo elementos, aunque donde ms usadas son es en los enlaces. Veamos el siguiente ejemplo:
    a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: yellow; }

    Esto har que los enlaces se muestren de color rojo (red) en nuestra pgina. Es el estado link. Por lo tanto, esta propiedad slo tiene sentido en enlaces. Cuando ya hayan sido visitados por el usuario se quedarn de color azul (blue). Es el estado visited. Este estado se renovar dependiendo del navegador utilizado y se mostrar durante un tiempo determinado (una sesin, etc...). Esta propiedad slo tiene sentido en enlaces. En el momento en que coloques el ratn sobre l se mostrar de color verde (green). Es el estado hover. Podemos aplicarlo a la mayora de elementos. Y finalmente en el momento que se haga clic sobre l, y mientras tenga el foco se ver de color amarillo (yellow). Es el estado active. Puede resultarnos tiles en campos de formulario, para destacar el campo que se est editando. Puedes aplicar estas pseudoclases de cualquier forma de las anteriores.
    #menu a:hover { text-decoration: none; } a.volver:hover { background-image: url(flecha_atras.png); } #menu:hover a { text-decoration: underline; }

    La primera regla afectar a los enlaces que estn dentro del elemento #menu cuando tengan el cursor encima. La segunda regla, afectar a los enlaces con la clase volver cuando tengan el cursor encima. El orden es muy importante. En el tercer ejemplo, a cambiar el orden, la regla afecta a todos los enlaces a la vez cuando el elemento #menu tenga el cursor encima. Luego tenemos dos pseudoelementos que actuarn sobre el texto del documento, son: :firstletter y :firstline (primera letra y primera lnea respectivamente).
    p:first-letter { font-size: 26px; } p:first-line { font-variant: small-caps; }

    Puedes ver un ejemplo de cmo actuaran estos pseudoelementos en la siguiente lnea. Agranda y estrecha la ventana para ver qu ocurre:

    17.6. Orden de aplicacin de los estilos CSS Entonces, si definimos en varios sitios el estilo para un elemento cul se aplica? Bueno, realmente los estilos se van sumando. Por lo que si no repetimos ninguna propiedad, el estilo final de un elemento ser la suma de todos los estilos que afecten al elemento. Pero qu ocurre si repetimos una propiedad? Como norma general, prevalecer el estilo ms concreto sobre el ms genrico. Por ejemplo, si en la hoja de estilo establecemos el texto de los prrafos en rojo, y en la cabecera de la pgina definimos el color de los prrafos en azul, prevalecer ste ltimo, ya que es ms concreto, se refiere slo a los prrafos de esa pgina. Y si en un prrafo de la pgina, en el atributo style indicamos el color de texto verde, prevalecer ste por ser el ms concreto de todos. Lo mismo ocurre con los selectores. Por ejemplo, p.inicio es ms concreto que p, ya que se refiere slo a los prrafos con esa clase. Y p#titulo sera an ms concreto, ya que se refiere directamente a un determinado prrafo. Lo mismo ocurre al anidar los selectores, p.inicio span es ms concreto que poner slo span. En caso de empate, por ejemplo si definimos varias veces la misma propiedad en una hoja de estilo, se tomar en cuenta la ltima, que machacar a las anteriores. Por ejemplo, poner p {margin: 20px;marginbottom: 5px;} sera como poner p {margin: 20px 20px 5px;}. En cualquier momento podemos saltarnos el orden de prioridad de los estilos, aadiendo !important al final de una propiedad. Esto hace que tenga preferencia sobre el resto. Por ejemplo, en este ejemplo:
    p { color: blue !important; color: red; }

    El prrafo debera de ser de color rojo, porque el valor rojo "machaca" al azul. Sin embargo, al poner !important, hace que el texto sea rojo. Adems, los elementos hijos heredan las propiedades. As, si definimos el color rojo para el texto de una capa, todos los elementos de la capa mostrarn el texto en color rojo, a no ser que tengan otro estilo definido. Por todo esto, a veces podemos no saber dnde hemos definido la propiedad que hace que un elemento se vea de tal o cual forma. En cualquier momento podemos ver qu propiedades afectan al estilo y dnde estn definidas desde el panel Estilos CSS.

    17.7. Controles de fuente Ya hemos visto cmo manejarnos con los selectores, ahora veremos cmo deberemos crear las definiciones de los estilos. Empezaremos viendo los controles de modificacin de fuentes: fontfamily: indica la familia de fuente en la que se mostrar el texto, puede tomar los valores serif, sansserif, cursive, fantasy y monospace: serif, sansserif, fantasy, cursive, monospace... Aunque esta propiedad tambin soporta que nombres un listado de diferentes fuentes. El navegador las buscar de izquierda a derecha en el equipo del usuario, y mostrar la primera que encuentre. Al final, es recomendable indicar una de las fuentes del ejemplo de arriba, que son las fuentes genricas (familias).
    p { font-family: Arial, Helvetica, sans-serif; }

    Si el nombre de la fuente contiene espacios, lo pondremos entre comillas dobles (p. ej. "Times New Roman") fontstyle: indica el estilo de la fuente (bsicamente, nos permite ponerla en cursiva), puede tomar los valores italic, oblique y normal. italic, oblique, normal Algunas fuentes estn hechas especialmente para tener una variante en italic (cursiva), para aquellas que no lo tengan implementado utiliza el atributo oblique que hace que el navegador incline automticamente la fuente para mostrarla en cursiva. La mayora de navegadores no distinguen entre estos valores, y aplican siempre oblique, por lo que ste es el valor ms recomendado. Para mostrar el texto normal, le damos el valor normal. fontvariant: establece la variante de la fuente. Puede tomar el valor small caps (versales). Esto muestra las minsculas como maysculas de menor tamao. El valor normal har que se muestre el estado por defecto de la fuente. SmallCaps, Normal Observa que Dreamweaver no muestra correctamente este estilo.

    fontweight: indica el peso de la fuente, es decir, nos sirve para ponerla en negrita. Los valores ms utilizados son: bolder, bold y lighter. Tambin puedes utilizar valores del 100 al 900, siendo el primero la fuente ms ligera y el ltimo el ms pesado. bolder, bold, lighter Aunque en teora podemos indicar distintos grosores, en la prctica la mayora de navegadores solo aplican normal y bold. fontsize: establece el tamao de la fuente. Puedes utilizar los valores predefinidos smaller, larger, xxsmall, xsmall, small, medium, large, xlarge y xx large. Los dos primeros valores establecen el tamao de la fuente en comparacin a la definida en el elemento padre donde se encuentra, as se mostrar ms pequea (smaller) o ms grande (larger). xxsmall, xsmall, small, medium, large, xlarge, xxlarge Tambin es posible establecer el tamao del texto utilizando porcentajes (%) o em. Que tambin mostrar el texto en relacin a su elemento padre (100% = 1em). ste es el tipo ms recomendado. Ya que con slo cambiar el tamao de la fuente base, todos los elementos se ajustarn a sta manteniendo la proporcin. Existen otras unidades relativas puntos (pt), pxeles (px)... El sistema de puntos (pt) vara un poco segn los sistemas operativos, mientras que el valor en pxeles (px) depende de la resolucin de pantalla. Incluso podemos emplear valores concretos, como centmetros (cm).
    a { font-size: 12em; } p { font-size: 14px; } .nota { font-size: 0.90%; }

    Es posible definir todos estos estilos que hemos visto en una sola definicin. Para ello utilizaremos slo la propiedad font:. As, una retahla de reglas como sta:
    p { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: large; font-family: monospace; }

    Puede escribirse como:


    p { font: italic small-caps bold large monospace; }

    Recuerda que el orden debe ser siempre el mismo: style, variant, weight, size y family. Si no vas a utilizar una de las definiciones puedes omitirla como en este ejemplo:
    p { font: bold sans-serif; }

    17.8. Espaciado y alineacin Continuando con los controles de texto tenemos la propiedad wordspacing que establece la separacin entre las palabras de un texto. Este texto tiene una separacin de 18 pxeles entre sus palabras. Este, sin embargo, tiene una separacin de 5 pxeles. Tambin podemos utilizar la propiedad letterspacing para establecer la separacin entre los caracteres del texto: Este texto tiene una separacin de 5 pxeles entre sus letras. Este, sin embargo, tiene una separacin de 2 pxeles. verticalalign establece la alineacin vertical del texto. Puede tomar los valores baseline, sub, super, top, texttop, middle, bottom, textbottom.

    Esta propiedad no nos sirve para centrar verticalmente el contenido de un elemento. lineheight indica el alto de lnea del texto, igual que el resto de propiedades puedes establecer esta altura en pxeles, ems, puntos u otras unidades.

    Si estableces simplemente valores numricos podrs indicar el alto respecto a su tamao normal. Por ejemplo:
    p { line-height: 2; }

    Esta lnea muestra el texto con un interlineado doble. Si hubisemos escrito 1.5 el interlineado sera un 50% ms alto de lo normal. Esta propiedad siempre la tenemos que asignar al elemento de bloque que contiene el texto. Truco: Si tienes un elemento de alto especfico, puedes centrar el texto verticalmente dndole al elemento un lineheight igual que el alto. Esto slo tiene sentido si tenemos una nica lnea de texto. textalign establece la alineacin horizontal del texto. Sus valores ya te deben ser familiares: left, right, center y justify.

    Esta propiedad la aplicaremos al elemento de bloque que contendr el texto. textindent indica el tamao de sangrado (o sangra) del texto, es decir la separacin de la primera lnea con el borde lado izquierdo. Tomar valores en puntos, pxeles o ems, como prefieras.

    Esta propiedad la aplicaremos al elemento de bloque que contendr el texto. whitespace, esta propiedad es muy til para evitar que el ancho del navegador modifique el ancho de las lneas del texto. Puede tomar el valor nowrap para que el texto se muestre en una sola lnea sin insertar saltos no deseados: Este texto no tiene saltos de lnea, as que se mostrar en toda su anchura aunque la ventana sea ms estrecha. Tambin puedes establecer esta propiedad al valor pre. En este caso todos los espacios insertados en el texto se mostrarn y no se convertirn en uno slo como ocurre normalmente. Adems, si en el cdigo hay saltos de lnea, tambin se mostrarn: En este texto podemos introducir tantos espacios como queramos. Da igual si son ms de uno, se mostrarn igualmente. Este ltimo valor no funciona correctamente en Internet Explorer as que es recomendable utilizar la entidad HTML (&nsbp;) para mostrar ms de un espacio.

    17.9. Apariencia del texto textdecoration establece si el texto llevar decoracin o no. Principalmente la emplearemos para el subrayado. Esta propiedad es muy til para modificar el estilo de los enlaces. Los valores que puede tomar esta propiedad son none, underline, overline, linethrough, blink. none, underline, overline, linethrough, blink El valor blink hace que el texto parpadee. Este valor slo funciona en determinados navegadores (no en Internet Explorer). Con la propiedad texttransform puedes indicar la transformacin del texto (cambiar maysculas / minsculas) de la siguiente forma. Capitalize cambia la primera letra de cada palabra a maysculas.Uppercase y lowercase cambian el texto a maysculas o minsculas respectivamente. Este Texto Tiene El Valor Capitalize, Las Primeras Letras Sern En Maysculas, El Resto Se Mostrar En Minsculas Automticamente ESTE TEXTO TIENE EL VALOR UPPERCASE, AUNQUE EST ESCRITO EN MINSCULAS SE CAMBIAR A MAYSCULAS este texto tiene el valor lowercase, aunque est escrito en maysculas se cambiar a minsculas. Por ltimo veremos la propiedad color que establece el color del texto. Esta propiedad puede tomar un valor hexadecimal (como vimos en el apartado de colores del tema 3). De modo que simplemente hara falta especificar el color de este modo:
    p { color: #060; }

    Unos ejemplos seran los siguientes (aunque disponemos de ms de 16 millones):

    Tambin existe la posibilidad de utilizar unas palabras reservadas para nombrar unos cuantos colores bsicos. El modo en el que se definira el estilo sera el mismo:
    p { color: red; }

    Aunque en este caso en vez de introducir su equivalente hexadecimal, referenciaramos directamente su nombre. Puedes encontrar el listado de los nombres de color que puedes utilizar en el sitio de la W3C. http://www.w3.org/TR/css3color/#svgcolor 17.10. Controles de ratn Hemos decidido dedicar este apartado a la propiedad cursor que modifica la apariencia del ratn cuando se sita sobre una etiqueta afectada por esta propiedad CSS. Puedes aplicarla sobre prrafos, enlaces o incluso sobre el body mismo (as el cursor tendr una forma personalizada en toda la pgina). El modo en el que se utiliza es igual que el resto, pero empleando la propiedad cursor:
    p { cursor: pointer; }

    Y puede tomar los valores auto, crosshair, pointer, move, nresize, neresize, e resize, seresize, swresize, wresize, nwresize, text, wait y help. Aqu tienes un ejemplo de cada uno de los cursores. Sita el ratn sobre ellos para ver el efecto:

    Tambin podemos emplear una imagen como cursor, siguiendo la siguiente sintaxis:
    p { cursor: url(graficos/micursor.cur), auto; }

    Para que funcione en IE, debemos emplear imgenes de cursor (extensin .cur). 17.11. Controles de lista Hemos visto muchas propiedades que afectan al modo en el que se muestran los textos de nuestras pginas. Ahora haremos un alto para ver unas cuantas propiedades que utilizaremos para dar estilo a nuestras listas. liststyletype permite establecer el tipo de vieta utilizada en las listas, puede tomar los valores disc, circle, square, decimal, lowerroman, upperroman, lower alpha, upperalpha y none.
    disc 1 disc 2 disc 3 o o o circle 1 circle 2 circle 3 square 1 square 2 square 3

    1. decimal 1 2. decimal 2 3. decimal 3

    i. ii. iii.

    lower-roman 1 lower-roman 2 lower-roman 3

    I. II. III.

    upper-roman 1 upper-roman 2 upper-roman 3

    a. lower-alpha 1 b. lower-alpha 2 c. lower-alpha 3

    A. upper-alpha 1 B. upper-alpha 2 C. upper-alpha 3

    none 1 none 2 none 3

    Este estilo debe ir asociado a la etiqueta li, ul o ol. liststyleimage permite mostrar una imagen en lugar de una vieta. La forma en la que lo haremos ser la siguiente:
    ul { list-style-image: url(graficos/lista.gif); }

    As declararemos el estilo. Luego bastar con escribir una lista desordenada, pues hemos utilizado el selector ul para marcar el estilo. elemento 1 elemento 2 elemento 3 elemento 4 Observa que hemos utilizado una URL. Esta ruta debe ser o bien absoluta, o relativa a la hoja de estilos. No al documento donde se aplica. liststyleposition sirve para establecer sangrados colgantes. Puede tomar dos valores outside (fuera, opcin por defecto) e inside (dentro). Veamos un ejemplo mostrando bordes en los elementos que lo ilustrar perfectamente:
    elemento 1 elemento 2 con valor outside elemento 3 elemento 4 con valor inside elemento 5

    Como puedes ver el valor inside alinea la vieta con el principio del texto del elemento anterior. Outside alinea la vieta del elemento en la posicin predefinida. Utiliza este ltimo valor para destacar listas definidas como inside.

    Por ltimo, como en los controles de fuente, existe un modo en el que podemos escribir todas estas reglas sin tener que escribirlas una a una. Para ello utilizaremos la propiedad liststyle. De este modo el siguiente bloque:
    ol { list-style-type: upper-alpha; list-style-position: outside; list-style-image: url(imagenes/bullet.gif); }

    Puede escribirse como:


    ol { list-style: upper-alpha outside url(imagenes/bullet.gif); }

    Ten en cuenta siempre el orden type, position e image. Si no quieres utilizar alguna de ellas, simplemente omtela. 17.12. Controles de fondo En este apartado veremos las propiedades que pueden aplicarse sobre el fondo. Estas propiedades se pueden aplicar sobre muchos de los elementos, tanto celdas, prrafos, capas,el body de la pgina, etc. backgroundcolor permite establecer el color de fondo. Utiliza los mismos cdigos hexadecimales o los nombres de color que vimos en la propiedad color del texto. La sintaxis es igual a la que hemos visto hasta ahora:
    td.rojo { background-color: red; }

    backgroundimage establece una imagen de fondo para el elemento.


    body { } background-image: url(imagenes/fondo.jpg);

    Por defecto, las imgenes se posicionarn en la esquina superior izquierda y en mosaico. Si la imagen tiene zonas transparentes, se ver el color de fondo detrs de ella. backgroundrepeat indica el modo de repeticin de la imagen establecida para el fondo. Puede tomar los siguientes valores: repeat: la imagen se repite a modo de mosaico hasta ocupar la pgina completa. repeatx: la imagen se repite a lo largo del eje horizontal. repeaty: la imagen se repite a lo largo del eje vertical. norepeat: la imagen no se repite. Por omisin, el valor que se toma es repeat, por lo que se genera un mosaico con la imagen del fondo. Debers declarar la URL de la imagen para poder utilizar esta propiedad:

    #menu { background-image: url(imagenes/menu.gif); background-repeat: repeat-x; }

    backgroundattachment se utiliza para indicar si la imagen de pantalla es fija o se desplaza con el movimiento de las barras de desplazamiento. Esta opcin se usa sobre todo para las imgenes del body. Puede tomar los valores fixed y scroll. El primer valor dejar la imagen fija, el segundo har que la imagen se desplace junto con las barras (como el fondo de esta pgina).

    backgroundposition permite el posicionamiento de la imagen de fondo. Selecciona entre los valores top, center, bottom y left, center, right. En este caso podremos combinar dos de los valores, por ejemplo:
    .cita { background-image: url(imagenes/quote.gif); background-repeat: no-repeat; background-position: right top; }

    Aunque puedes omitirlos, pero recuerda que si lo haces por omisin los valores sern top y left.

    Igual que en algunos de los apartados anteriores (observa que siempre son las propiedades con guiones) puedes utilizar la propiedad background para resumir las reglas CSS. As el siguiente bloque:
    .cita { background-color: gray; background-image: url(imagenes/quote.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; }

    Puede ser escrito de la siguiente forma:


    .cita { background: gray url(imagenes/quote.gif) no-repeat scroll right top; }

    Recuerda mantener el orden color, image, repeat, attachment y position. Y ya sabes, si no quieres alguno, sltatelo. 17.13. Controles de margen interior y exterior Ahora veremos unas cuantas reglas que afectarn a los bordes y mrgenes de los elementos. Para ello utilizaremos el mismo ejemplo: dos cajas, una dentro de la otra. En el ejemplo, la zona en verde, es el margen de la caja interior, que se toma con respecto a la caja que lo contiene. Iremos cambiando los valores de ese margen para ver el efecto.

    margintop, marginright, marginbottom y marginleft establecen el margen a cada lado del elemento. El margen establece la distancia que queda entre el borde exterior del elemento y el interior del elemento que lo contiene, o entre l y el siguiente elemento. El margen no forma parte del elemento, por lo que no mostrar sus propiedades, por ejemplo el color de fondo. Puedes utilizar pxeles o porcentajes para indicar estas distancias. Por ejemplo, en la siguiente caja se le ha dado al bloque interior la siguiente clase:
    .bloque_interior { margin-top: 20px; margin-right: 0px; margin-bottom: 5px; margin-left: -10px; }

    Los mrgenes superiores e inferiores se pueden ver en las franjas verdes (arroba la mayor, de 20px y abajo de 5px). Observa cmo el margen 0 del lado derecho hace que los bordes queden pegados, mientras que un valor negativo hace que el bloque salga de la caja. La propiedad margin te permite unificar varias propiedades en una sola. As, la regla anterior podra quedar como:
    .bloque_interior { margin: 20px 0px 5px }

    -10px;

    Recuerda que debers seguir el orden top, right, bottom y left.

    En el caso de que los valores arriba y abajo (top y bottom) e izquierda y derecha (left y right) sean iguales entre s se puede escribir en dos valores, como:

    En este formato, el primer valor (20px) indica los mrgenes superior e inferior y el segundo (5px) corresponde a los mrgenes izquierdo y derecho. En le aso de haber tres valores, corresponderan a arriba, izquierdaderecha y abajo respectivamente. En caso de que quieras que todos los mrgenes tengan la misma distancia basta escribirlo slo una vez:

    Ahora todos los mrgenes sern de 20 pxeles. Tambin se pueden establecer estas propiedades a auto. Esta propiedad resulta muy til para centrar horizontalmente bloques en los que hemos definido el ancho. En los ejemplos anteriores, el bloque exterior tena asignada esta propiedad. De lo contrario, aparecera a la izquierda de la pgina.
    .bloque_exterior { width: 150px; margin: auto; }

    Cuando los elementos son contiguos, si ambos tienen margen, estos mrgenes se solapan, quedando como margen la distancia mayor. Veamos el siguiente ejemplo:

    En el ejemplo anterior, tenemos dos bloques interiores ambos con margen de 20px. Si los mrgenes se sumasen, la distancia entre ellos sera de 40px. En cambio al solaparse queda la misma distancia que arriba o abajo, 20px. paddingtop, paddingleft, paddingbottom y paddingright establecern la distancia del borde de un elemento con su contenido. En los siguientes ejemplos, mostramos el padding con un color naranja: Lo entenders mucho mejor con el siguiente ejemplo:

    En el ejemplo anterior vemos el contenido de la caja en azul. Vemos que en vez de comenzar en el mismo borde como antes, queda alejado, lo que vemos coloreado en naranja. Esto es el padding. Como puedes ver la distancia del contenido a los bordes derecho e inferior es de 5px. En cambio, la distancia con el lado superior es mayor, de 20px y con el lado izquierdo de 10. Y lo mismo pasa con los mrgenes superior (20px) e izquierdo (10px). Observa que adems existe un margen exterior (en verde). Igual que con los mrgenes podemos abreviar las reglas CSS utilizando la propiedad padding. Podemos los padding distintos en una misma regla (arriba, derecha, abajo, izquierda), definir los pares de padding (arribaabajo, izquierda derecha) o asignarles el mismo valor a todo.
    .bloque1 { padding: 20px 15px 15px } .bloque2 { padding: 10px 5px; } .bloque3 { padding: 15px; }

    20px;

    Si un elemento tiene margen, y el elemento que lo contiene tiene padding, se suman. Veamos un ejemplo:

    Como vemos el bloque exterior deja un padding de 10px. Como el interior tiene un margen superior e inferior de otros 10px, se suman y queda una separacin entre los lados de 20px. Por defecto, muchos elementos suelen tener margen. La mayora no tienen padding. Muchas veces, los valores del margen son distintos en distintos navegadores, lo que hace que los elementos no se vean igual. Por eso es recomendable establecer siempre nuestros mrgenes, y no dejar el que muestra por defecto el navegador.

    Una forma muy cmoda de ver qu mrgenes afectan a un elemento es usando la vista Inspeccionar. Inspeccionar elementos En la barra de documento de Dreamweaver encontramos un botn que todava no hemos visto: el botn Inspeccionar. Al pulsarlo, se activa la Vista en vivo y el modo de inspeccin CSS. Con este modo activo, al pasamos el cursor sobre un elemento, ste se resaltar.

    Si observas la imagen anterior, distinguirs tres colores: El azul, sirve para resultar el elemento. El rosa, indica el padding aplicado al elemento. El amarillo, corresponde al margin aplicado al elemento. Adems, la vista Actual del panel Estilos CSS nos ir mostrando las reglas que afectan al elemento. Las resaltadas con un fondo ms oscuro, corresponden directamente al elemento. As, en la imagen anterior, vemos que el elemento resaltado es un prrafo, con un padding de 5px, aunque le afectan reglas del body y de #content.

    7.14. Bordes Tambin tenemos las propiedades de borde. El borde forma un marco que rodea al elemento. Fuera de l queda el margin, mientras que el padding queda dentro. La primera es borderwidth que indica el ancho o grosor de un borde. Puede tomar los valores medium, thin y thick. Aunque tambin se aceptan valores en pxeles (los ms empleados) y porcentajes que son ms fciles de manejar a la hora de crear bordes con una anchura exacta.

    En este caso hemos utilizado:


    .borde1 { } .borde2 { }

    border-width: 1px; border-width: 5px;

    borderstyle muestra el borde del elemento de una forma determinada, existen varios tipos:

    bordercolor establece en forma hexadecimal o con nombre el color del borde de un elemento.

    Como en el resto de propiedades, utilizaremos la propiedad border para resumir estas tres ltimas. De modo que el siguiente bloque:
    .borde { border-width: 10px; border-style: groove; border-color: black; }

    Podra escribirse ms fcilmente:


    .borde { border: 10px groove }

    black;

    En este caso podemos cambiar el orden de las propiedades, aunque te recomendamos que sigas siempre el mismo. Tambin podemos definir independientemente las propiedades de cada lado:
    .borde { border-top-width: 10px; border-top-style: groove; border-top-color: black; border-bottom: 5px blue solid; }

    Y podemos emplear el mismo sistema que con mrgenes y padding para referirnos a los cuatro lados:

    17.15. Elementos flotantes Tenemos la propiedad float, que permite que cualquier elemento flote en un lado determinado de la pantalla mientras el resto sigue el flujo natural. Observa estos ejemplos:

    Hemos utilizado los valores left y right respectivamente. En estos casos a los prrafos que contienen el smbolo de copyright se les han aplicado la propiedad CSS float:
    <p style="float:left; font-size: 25px; border: 1px solid black; margin:3px;">&copy;</p> <p style="float:right; font-size: 25px; border: 1px solid black; margin:3px;">&copy;</p>

    Pero si vemos detenidamente esta propiedad veremos que encontramos un problema:

    Cmo evitamos que el elemento flotante quede a la derecha del segundo prrafo? Para ello deberemos utilizar la propiedad clear. Esta propiedad permite romper el ajuste que se est realizando por una etiqueta anterior marcada con float. Clear puede tomar 3 valores: left, right o both, para romper el float de izquierda, derecha o ambos respectivamente. Por lo que si le aplicamos un clear: right; al segundo prrafo este se mostrar sin verse afectado por el float:

    El cdigo que hemos utilizado es el siguiente: <p style="clear: right;"> Observa que al hacer esto, el segundo prrafo no comienza hasta que no acaba el elemento flotante. Del mismo modo esta propiedad nos ayudar en este caso, donde tenemos dos elementos flotantes a la izquierda:

    Observa tambin que el elemento flotante sobresale del bloque, ya que no se tienen en cuenta para calcular el alto. Queremos que los dos bloques estn flotando a la izquierda pero uno debajo del otro. Para ello deberemos aplicarle al segundo elemento un clear: left; para que elimine el comportamiento del primer elemento que ya estaba flotando, y aparezca a continuacin style="float: left;clear: left;". Y obtendramos lo siguiente:

    Ahora combinando los mrgenes y los elementos flotantes podemos crear columnas de una forma muy sencilla:

    La forma es la siguiente: 1. Creamos una cabecera. No hace falta que se le aplique ningn estilo en especial a no ser que queramos darle un alto fijo, pero hemos preferido aadir unos bordes y paddings para que se vea mejor el ejemplo (igual que en resto de los elementos).

    2. Luego creamos otro bloque utilizando divs.

    3. A este ltimo bloque le asignamos la propiedad float: left; para que se encuentre flotando a la izquierda y le damos una anchura (en nuestro caso un 30%).

    4. Luego creamos un tercer elemento que contendr la segunda columna.

    5. A este elemento deberemos darle un marginleft del mismo tamao que la anchura de la primera columna. As nos aseguramos de que se encuentren en el mismo nivel (porque el elemento de la izquierda est flotando) pero no vuelva a tomar el flujo normal cuando el bloque de la izquierda haya acabado.

    6. Finalmente aadimos un nuevo bloque que utilizaremos como pie de pgina.

    7. A este bloque deberemos asignarle la propiedad clear: both; para que el elemento flotante no le afecte en caso de que el contenido fuese demasiado corto.

    No es la nica forma de conseguir este efecto. Podemos hacer las dos columnas flotantes, emplear Divs PA, etc...

    17.16. Controles de elementos de bloque y en lnea Ahora veremos cmo posicionar los elementos y darles el tamao que nos convenga para representarlos. Antes de empezar deberamos hacer una distincin entre las etiquetas HTML. Podemos clasificar las etiquetas en dos grupos: de bloque o en lnea. Las etiquetas de bloque son aquellas que causan un salto de lnea antes y despus de ellos, y ocupan todo el ancho del elemento que las contienen. Por ejemplo las etiquetas p, div, table, hr, body, etc... Se emplean para organizar el contenido. La etiqueta de bloque ms genrica es div, que puede contener cualquier etiqueta. Por ejemplo, un prrafo no debe contener a otro prrafo. Sin embargo luego encontramos otro tipo de etiquetas (en lnea) que no producen saltos en el flujo de la pgina, como pueden ser las etiquetas a, strong, em, span, etc... Se emplean para seleccionar un fragmento del contenido y resaltarlo, crear enlaces, etc... Las etiquetas de bloque pueden contener a otras etiquetas de bloque y a etiquetas en lnea. Las etiquetas en lnea, pueden contener a otras etiquetas en lnea, pero nunca a un elemento de bloque. Teniendo esto siempre en mente vers que es ms sencillo trabajar y moldear las pginas utilizando CSS. Primero veremos las propiedades de tamao height (altura) y width (anchura). Puedes especificarlas en cualquier elemento de bloque (no en elementos en lnea) y establecern su alto y su ancho en pxeles o porcentaje.


    #contenedor { width: 300px; height: 50px; }

    Finalmente tenemos la propiedad display, que establece cmo se muestra el tipo de elemento con el que estamos tratando. Esta propiedad es muy til por ejemplo para transformar las etiquetas de bloque a en lnea y viceversa. Puede tomar los valores inline, block, listitem, runin, inlineblock, table, inline table, tablerowgroup, tableheadergroup, tablefootergroup, tablerow, table columngroup, tablecolumn, tablecell, tablecaption, none o inherit. Los dos primeros valores hablan por s mismos. Puedes asociarle el estilo display: block; a una etiqueta a para que cree un salto de lnea antes y despus de ella o poder darle un alto y ancho. Esto se emplea mucho en los mens, normalmente formados con listas. Observa estos dos "botones" formados por un div y un enlace:

    Notars que el primero slo funciona si pulsamos justo sobre el texto. En cambio en el segundo podemos pulsar en cualquier parte del div. Esto lo hemos logrado convirtiendo el enlace en un bloque y haciendo que ocupe todo el alto (al ser un bloque, ya ocupa todo el ancho):
    .boton a { display: block; height: 100%; }

    Del mismo modo, podrs hacer que una etiqueta de bloque (como p o div) se convierta en un elemento en lnea utilizando display: inline; y puedan ser mostradas una al lado de otra:

    En este ejemplo podemos ver tres tablas que se muestran una al lado de la otra. Simplemente les hemos dado el estilo:
    .tabla { display: inline; }

    Aunque si disminuyes el ancho de la ventana vers que al tratarse de elementos en lnea se adaptan a su tamao, y al final cuando no quepan, saltan de lnea. Para saltarnos este inconveniente (si lo fuera), podemos utilizar la propiedad que vimos en el apartado de Controles de texto: whitespace. Introduciendo estas tres tablas en un elemento de bloque como un div y asignndole la propiedad whitespace: nowrap; conseguiramos que las tres tablas permaneciesen en lnea sin saltos de pantalla a pesar de la anchura de la ventana.

    Comentaremos que esta propiedad tambin puede tomar el valor listitem. De este modo, los elementos que se vean afectados por el estilo display: listitem; se mostrar como si formasen parte de una lista. Observa el siguiente ejemplo:
    p.lista { display: list-item; list-style-type: square; }

    Si aplicamos este estilo sobre unos prrafos veremos esto: Esto es un prrafo que se muestra en forma de elemento de lista. Esto es un prrafo que se muestra en forma de elemento de lista. Esto es un prrafo que se muestra en forma de elemento de lista. Esto es un prrafo que se muestra en forma de elemento de lista. Otro valor muy interesante de display es none. Esto hace desaparecer el elemento del flujo de la pgina, no como al usar visibilty: hidden; que lo oculta pero mantiene su espacio. Esta propiedad es muy empleada en comportamientos JavaScript. 17.17. Controles de posicin En este apartado veremos cmo posicionar el contenido de la pgina web utilizando nicamente estilos CSS. Existen unas propiedades CSS que combinadas con las siguientes nos ayudarn a mover el contenido de la pgina. Estas son top, left, bottom y right. Con estas propiedades podremos establecer la distancia a los bordes de la ventana del navegador, o del elemento que lo contenga. Recordemos que top equivale a la parte superior. Left al lado izquierdo. Bottom al borde inferior. Y finalmente right al derecho. Normalmente daremos valores a estas propiedades utilizando pxeles o porcentajes.

    Veamos ahora cmo las utilizaremos. Para ello deberemos declarar tambin la propiedad position (posicionamiento). Esta es sin duda la ms compleja de este apartado as que la veremos con detenimiento. Esta propiedad puede aceptar 4 valores: static, absolute, relative y fixed. Vayamos uno a uno. El valor static es el valor por defecto de un elemento, ocupa su lugar en el flujo de la pgina y no puede ser modificado utilizando las propiedades top/bottom y left/right.
    p { position: static; }

    Con el valor absolute puedes colocar un elemento en cualquier parte de la ventana con slo darle las coordenadas (las CapasPA emplean este posicionamiento). As deberamos declarar la posicin utilizando un par de propiedades top/bottom y left/right. Lo habitual es indicar tambin el alto y ancho, aunque si no lo hacemos estos valores se ajustarn al contenido. Un ejemplo podra ser este:
    #capa_flotante { position: absolute; top: 100px; left: 300px; width: 30px; height: 125px; }

    Esta declaracin de estilos es muy habitual en las capas. Se posiciona absolutamente el objeto y luego se le da un ancho y un alto.

    El valor relative tambin nos permite mover el elemento. ste, en principio, ocupa su lugar en el flujo normal de la pgina y utilizaremos las propiedades top/bottom y left/right para desplazarlo tomando como referencia ese lugar y no los bordes de la pgina. El hueco reservado para el elemento quedar en el flujo normal. Por ejemplo:
    p.especial { position: relative; top: 20px; left: 20px; }

    Esta regla har que los prrafos marcados con la clase especial se desplacen 20 pxeles hacia abajo y hacia la derecha de su posicin normal en el flujo de la pgina.

    Piensa que lo que estamos diciendo en la definicin de la regla es que va a haber una desfase de 20 pxeles desde la parte superior de donde se encontraba en un principio, y lo mismo con la parte izquierda, por lo que el elemento se ver desplazado en diagonal. Finalmente encontramos el valor fixed. Asignndole este valor a la propiedad position podemos hacer que un elemento se quede fijo en la ventana aunque se muevan las barras de desplazamiento. Un comportamiento muy til para los mens o algunos grficos que queramos que permanezcan siempre a la vista. Hemos de tener en cuenta que al desplazar la pgina puede que tapen otros elementos. Tambin acepta los pares top/bottom y left/right para definir la posicin en la que se mostrar fijo. Por ejemplo:
    #menu { position: fixed; top: 0px; right: 0px; }

    Esta regla de estilo posicionara un elemento con identidad menu en la esquina superior derecha de la ventana y aunque utilicemos el scroll (las barras de desplazamiento) permanecer all fijo. Este valor no funciona en IE 6, aunque s en las siguientes versiones. 17.18. Controles de visibilidad Por ltimo en este apartado veremos unas cuantas propiedades que tienen que ver con la forma en la que se visualizan los elementos en pantalla. La primera propiedad que veremos ser zindex. Esta propiedad decide el orden de profundidad de los elementos que se encuentran solapados. En el apartado anterior vimos cmo mover los elementos en la pantalla. Imagina, ahora, que al mover dos capas una nos queda por encima de la otra. Cmo podemos decidir cul quedar por detrs? Y al frente?

    Utilizaremos esta propiedad para ello. Zindex acepta nmeros positivos o negativos, y establece que el elemento con un valor mayor se mostrar por delante del resto. Esto tiene sentido en elementos posicionados, que pueden solapar otros elementos. Veamos un ejemplo:

    Para utilizar esta propiedad basta con declararla:


    .rojo { position: relative; top: 100px; left: 20px; z-index: 0; }

    Otra propiedad muy valiosa a la hora de jugar con la visibilidad es visibility. Puede tomar los valores visible y hidden (visible y escondida respectivamente). Recuerda que esta propiedad la emplebamos con las capas. Asigna el valor hidden a todos aquellos elementos que quieras que no aparezcan en la pantalla. Muy til para ocultar estadsticas o para crear animaciones complejas combinando esta propiedad con JavaScript.
    #estadisticas { visible: hidden; }

    Finalmente nos encontramos con otra propiedad llamada overflow, que ya habamos comentado. Esta propiedad establece como ha de tratarse el contenido dentro de un elemento. El overflow en realidad se hace cargo del desbordamiento de contenido. Por lo que slo acta en aquellos casos en los que el continente se queda demasiado pequeo para mostrarlo todo. Puede tomar los valores visible, hidden, scroll y auto. El valor visible hace que se ignore el tamao del continente para mostrar todo el contenido. Es el valor por omisin en la mayora de los navegadores. Utilizando hidden se oculta el contenido que no cabe y no muestra barras de desplazamiento. El tamao del continente no se ver afectado. Si le das el valor scroll se introducirn las barras de desplazamiento necesarias para que el contenido pueda visualizarse correctamente. El tamao del continente no se ver afectado. Las barras siempre sern visibles. Finalmente, con el valor auto aparecern las barras de desplazamiento cuando sean necesarias. Veamos unos ejemplos:

    En este ejemplo hemos introducido 5 etiquetas div que contienen un texto que a veces no cabe. El bloque marcado con overflow: visible; muestra el texto saliendo de l (el texto excedente est fuera del flujo de la pgina). Al contrario que el que est definido como hidden que esconde el resto del texto. El valor scroll muestra las 2 barras de desplazamiento aunque la vertical no sea necesaria, y auto hace que el navegador introduzca nicamente la horizontal pues es la que es necesaria en este caso.

    También podría gustarte