Tu web de informática

atras

2.4 Estilos de la "q" a la "z"

adelante
  1. size: valor
    Nos permite elegir el tamaño de un elemento que no sea texto. Toma dos valores (Ej: size: 20px 50px), siendo, por orden, el ancho y la altura.
  2. table-layout: valor
    Nos sirve para indicarle al navegador cómo debe de calcular el tamaño de una tabla. Los valores pueden ser fixed (que determina el ancho de la tabla a partir del ancho de la primera fila) y auto (que determina el ancho de la tabla a partir de la fila más ancha, por lo que no puede generar la tabla hasta que sepa el ancho de todas las filas).
  3. text-align: valor
    Nos permite definir cómo se alineará el texto del interior del elemento. Los valores pueden ser center (centrado), justify (justificado), right (en la derecha) y left (en la izquierda).
  4. text-decoration: valor
    Nos permite definir que decoración o decoraciones tendrá el texto. Los valores pueden ser blink (parpadeando), line-through (tachado), overline (subrayado por arriba), underline (subrayado normal) o none (ninguna). Aquí os dejo un ejemplo de las cuatro decoraciones:
    blink line-through overline underline
  5. text-indent: valor
    Nos permite indicar el desplazamiento de la primera línea respecto al resto del mismo párrafo. El valor es el número de píxeles, pudiendo ser negativos (Ej.: -2px).
  6. text-shadow: valor1 valor2 valor3 valor4
    Nos permite crear sombras de en el texto (no es soportado por todos los navegadores). Tenemos que ponerle cuatro valores: el color, la posición horizontal relativa de la sombra, la posición vertical relativa y la dispersión de la sombra (a valores mayores peor se leerá la sombra) (Ej.: text-shadow: #AAFF88 10px -5px 1px).
  7. text-transform: valor
    Nos permite transformar letras del texto en mayúsculas o minúscular. Los valores son capitalize (convierte en mayúsculas la primera letra), uppercase (convierte todas las letras en mayúsculas), lowercase (convierte en minúsculas todas las letras) y none (lo escribe tal y como se escriba en el código).
  8. top: valor
    Permite definir la distancia a la que estará el elemento de la parte superior del borde del elemento que lo contenga, por ejemplo 5px.
  9. vertical-align
    Permite definir cómo se alineará verticalmente el texto. Los valores pueden ser baseline (valor por defecto, que sitúa al elemento en línea, en la línea base del contenedor), middle (sitúa la línea media del elemento en la línea base del contenedor), sub (lo sitúa como subíndice), super (lo sitúa como superíndice), text-bottom, text-top, bottom y top. También podemos usar una cantidad de píxeles como valor, o un porcentaje.
  10. visibility: valor
    Nos permite definir si un elemento será visible o no, pero si no lo es queda su espacio reservado no pudiendo ser ocupado por otro objeto. Se diferencia del comando display en que display no reserva el espacio y lo pueden ocupar otros objetos. Los valores son visible (visible) y hidden (oculto).
  11. white-space: valor
    Como vimos en la primera lección, si en html escribimos varios espacios o incluso un salto de línea, ese código se interpreta como si eso fuera un sólo espacio en blanco. Esta interpretación se cambia con este comando. Además hay que tener en cuenta que en el texto se añaden unos "saltos de línea" extra para que el contenido no se salga por el lado derecho del contenedor. A continuación os dejo una tablita con los distintos valores y lo que hace cada uno:
  12. ValorElimina espacios sobrantesElimina saltos de líneaAñade saltos de línea extras para ajustar
    normal
    preNoNoNo
    nowrapNo
    pre-wrapNoNo
    pre-lineNo
  13. width: valor
    Nos permite definir el ancho del elemento. El valor es el número de píxeles o un porcentaje.
  14. word-spacing: valor
    En un texto cada palabra está separado por un espacio en blanco. Este comando nos permite definir ese espacio en blanco. El valor es el número de píxeles.
  15. z-index: valor
    Con el comando "position: absolute" o "position: relative" podemos poner un elemento donde queramos, como ya vimos en su momento. Pues bien, puede ser que pongamos dos elementos de forma que quede uno encima del otro, ocupando espacio del otro. Con la opción z-index podemos elegir qué elemento se verá por encima de qué otro. De esta forma en z-index el valor será un número, de forma que el elemento con mayor z-index se verá por encima del que tenga menor z-index. A igualdad de z-index se ve encima el que aparezca después en el código.

He omitido algunos códigos por no funcionar bien en todos los exploradores y por lo tanto no ser del todo útiles.


  • Autor: Juanma (Administrador de Tu web de informática)

Si tienes alguna pregunta que hacernos tienes el foro a tu disposición.

atras
adelante

Volver a crear webs>>


Creada el 11/10/10 12:26
Copyright © - Todos los derechos reservados - Página creada por Juanma