Div capas, con frecuencia simplemente conocidos como "divs", son un elemento común en el diseño Web, ya que se puede manipular fácilmente. A diferencia de los métodos anteriores de la organización de las páginas Web, incluyendo cuadros y tablas, divs son los motores de búsqueda y son adecuados para una amplia variedad de contenido. Puede colocar texto, enlaces, enlaces e imágenes, entre otros elementos, dentro de las capas div.
Características básicas
Div capas son elementos, a nivel de bloque rectangular. Esto significa que van a aparecer en una nueva línea de elementos que aparecen antes y después en su página web. Div capas se convertirán automáticamente en la anchura máxima de la página o el elemento de contener. Divs son capaces de mantener cualquier tipo de contenido que se puede poner en el cuerpo de la página y se puede anidarse dentro de otras divs divs.Content, incluyendo texto e imágenes, se estirarán un div si no se ha especificado la altura. Cuando lo haga especificar estos atributos, la capa div creará una barra de desplazamiento para ver todo el contenido que se recorta.
Uso
Es posible usar una capa div como un recipiente que contiene todo el contenido de su página web. Entonces, al alinear su div - a la izquierda, derecha o centro - el contenido se alinearán a ese lado de la página, pero todavía se puede aplicar otra alineación, tales como el centrado de texto, dentro del contenedor. El uso de capas div es una manera de separar las secciones de su sitio web. Por ejemplo, es posible usar una capa div cada uno para la cabeza, el pie de página, barras laterales y el área de contenido principal de su sitio web. Nombrar a los divs hace que sea más fácil localizar estas secciones cuando se va por encima de su código.
Divs y CSS
Como la mayoría de los elementos HTML, puede estilizar sus capas DIV con las hojas de estilo en cascada o CSS. Los ejemplos más comunes incluyen la adición de un color de borde o de fondo. Puede especificar atributos funcionales, tales como la altura y la anchura de su div. Además de esto, puede utilizar los márgenes, el relleno y la alineación de afectar a cómo y dónde aparecerá tu div en su página web y en relación con otros elementos. También puede cambiar las propiedades de los elementos dentro de cada div. Por ejemplo, se puede cambiar el tamaño de la fuente, la cara y el color de cada div en su página web. Debido a esto, es posible utilizar un div para rodear el contenido específico, como un título, que requiere su propio estilo único.
Ejemplos de sintaxis
Para crear una capa básica div, utilice el siguiente código:
<Div> Contenido Aquí </ div>
Para modificar el aspecto del texto dentro de la capa de div, utilizar código similar al siguiente:
<Div style = "font: 15px Arial; color: red; text-align: center"> Contenido Aquí </ div>
Si desea alinear su div a la izquierda y tienen que rodea el flujo de contenido en torno a ella, utilizar el "flotar" atribuir este modo:
<Div style = "float: left"> Contenido Aquí </ div>
Una de las maneras más fáciles de central centran su div es el conjunto de los márgenes izquierdo y derecho de "auto". Puede utilizar este método para crear un contenedor de todos los contenidos de su sitio web y todavía le permite establecer los márgenes superior e inferior, si lo prefiere.
<Div style = "margin-left: auto; margin-right: auto"> Contenido Aquí </a>