Los <div> son elementos de bloque que se emplean para ser formateados mediante CSS. Se nombran mediante un identificador ID o una clase class para manipular su aspecto.
- ID: Cada elemento puede tener un solo ID. Cada página puede tener un solo elemento con la ID
- CLASS: Puede utilizar la misma clase en varios elementos. Puede utilizar varias clases en el mismo elemento
Un div puede tener tanto un ID como CLASS. Puede tener instrucciones de formato (fuente, color,...) atributos de altura y anchura, posicionamiento...
Tamaño: width (en pixels o porcentaje) *Hay que evitar definir altos si no son necesarios.
Nota: El contenido está por encima de los estilos. Si una imagen es de 500px y lo queremos ioncluir en un div de 400px, la imagen se desbordará.
Cada div es un bloque por lo que inicialmente cada div irá uno debajo de otro mida lo que mida. Tendríamos que modificar los aspectos de posición para modificar este comportamiento.
Padding, margin y border
Los márgenes de dos div consecutivos no se suman (se conserva el margen mayor).
El tamaño total del div se calcula sumando el ancho del div, el ancho del margen, el ancho del borde y el ancho del padding
Background (fondo)
Podemos añadir tantos fondos (imágenes o colores) como queramos a una página.
- Imagen: url(fondos/f1.png)
- Color:: background-color: #a4d3ff
Podemos elegir en los div sombras y bordes sombreados
Posicionamiento de la caja
CSS3 permite posicionar los div en la página utilizando float y clear. Con float, el div "flota" a una posición relativa. Con clear hacemos que el contenido se muestra debajo.
- float puede tener los valores left,
- clear puede tener el valor both
Para una posición absoluta (el div sale del flujo del contenido) utilizamos position: absolute. En ese caso debemos definir la posición con left y top en pixels. Tambiñén debemos tener en cuenta el eje z para saber si la caja está por encima o por debajo de las demás
Para definir una posición fija (no cambia de posición en el escalado del navegador o el scroll en la página) utilizamos position: fixed y le indicamos su posición. Por ejemplo, si queremos que está en el borde inferior, pegado a la izquierda y que ocupe todo el ancho de la página lo indcamos con bottom: 0px; left: 0px; width: 100%
Recursos:
- CSS3 Generator: http://css3generator.com/
- CSS3 Gradient Generator: http://gradients.glrzad.com/
- {CSS} Portal - on line generator: http://www.cssportal.com/css3-rounded-corner/
- CSS3 MAKER: http://www.css3maker.com
- CSS3.com: http://www.css3.com/
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.