Tu web de informática

atras

2.3 Estilos de la "m" a la "p"

adelante
  1. margin: valor
    Este código nos permite especificar el margen del objeto. El margen se define como el espacio que hay entre el objeto y el objeto que contenga al mismo. En la siguiente imagen podemos ver un margen de 4 píxeles en el div rojo, que está contenido en el amarillo:
    margin
    El valor que puede tomar es el número de píxeles, por ejemplo 20px. Puede tomar cuatro valores (Ej.: margin: 4px 5px 6px 3px), siendo estos, por orden, el superior, derecho, inferior e izquierdo. También podemos usar margin-bottom, margin-top, margin-left y margin-right para definir los márgenes inferior, superior, izquierdo y derecho respectivamente.
  2. max-height: valor
    Sirve para fijar una altura máxima para un elemento (por ejemplo para un div). Hay que tener cuidado, porque si el contenido sobrepasan esa altura se saldrá del elemento quedando un poco raro, pero veremos cómo solucionarlo en el comando overflow. El valor es en píxeles o en porcentaje. También existe min-height, max-width y min-width para definir la altura mínima, el ancho máximo y el ancho mínimo.
  3. outline: valor1 valor2 valor3 ...
    Esta herramienta sirve para fijar como una especie de borde, pero exterior al que coloca la orden border. La utilidad de esta herramienta es que el comando border ocupa un espacio que otros elementos no pueden ocupar, hace que al añadirlo se mueva todo, pero el comando outline dibuja el borde como si fuera de fondo, sin mover nada.
    Los valores pueden ser el tamaño que ocupa, el color que tenga, así como su estilo, que son los siguientes:
    dashed dotted double groove
    inset outset ridge solid
    Como podreis ver se montan unos outline encima de otros, debido que no se readaptan moviendo el contenido. Podría separarlos coun margin, pero he preferido dejarlos así para que lo comprendais mejor. También podemos usar los comandos outline-color, outline-style y outline-width.
  4. overflow: valor
    Como vimos en el comando max-height, se nos puede salir el contenido fuera del contenedor, pero lo podemos arreglar con el comando overflow, en el que podemos poner los valores visible (hace que lo que se sale fuera se vea), hidden (hace que lo que se salga fuera no se vea) y scroll (hace que aparezca una barra de desplazamiento). Aquí os dejos los tres ejemplos:
  5. overflow: visible visible visible visible visible visible visible visible visible visible.
    overflow: hidden hidden h hidden hidden h hidden hidden h hidden hidden h hidden hidden.
    overflow: scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll.






  6. padding: valor
    Funciona exáctamente igual que el margin respecto a los valores que se le pueden poner, pero en este caso define la distancia entre el propio elemento y el contenido del mismo (recordemos que el margin era la distancia entre el elemento y el contenedor de dicho elemento, que es distinto). Al igual, también existen padding-bottom, padding-top, padding-right y padding-left.
  7. position: valor
    Determina la posición del elemento. Puede tomar como valores static (es la posición predeterminada, de forma que se van colocando los elementos uno debajo del anterior), absolute (Definimos la posición que tendrá independientemente del resto de elementos, y se fijará respecto a la esquina superior izquierda del elemento que lo contenga. Ver los comandos top y left para ver como fijar la posición) y fixed (Definimos la posición respecto a la esquina superior izquierda de la web dentro del explorador, de forma que aunque bajemos en la web con la barra de desplazamiento el elemento no se moverá de la pantalla y seguirá en la misma posición. Ver los comandos top y left.).

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 00:09
Copyright © - Todos los derechos reservados - Página creada por Juanma