¿Que son los divs en CCS?
Tal vez hayas ya escuchado acerca de los divs, o escuchado cosas como; las tablas ya no se usan, ahora solo se programa con divs, las páginas con tablas son obsoletas y cosas por el estilo, pero ¿Qué son los divs? En este artículo te explico.
Primeramente los divs no es propiamente programación en php, mas bien se usan etiquetas de maquetación de armado y diseño de la página web, porque entonces si este blog es para programar en php pongo información de los divs, la respuesta es simple me lo solicitaron y aquí esta, si quieres saber de forma simple que son los divs continua leyendo este artículo.
Bueno los divs se utilizan para indicar cajas contenedoras de información y están son manejadas en capas. En otras palabras, cuando declaras un div estas dibujando una “cajita” a la cual le puedes poner tantas características como necesites desde una hoja de estilos, te muestro un ejemplo:
<!– AprendeAprogramarEnphpya.com/blog –>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Mi Primer DIV</title>
<!– el siguiente link es para obtener la hoja estilo –>
<link href=”estilo.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<div id=”contenedor_principal”>
Hola yo estoy dentro del primer divs
</div>
</body>
</html>
Te explico, el código anterior (en html) tiene un div al que le estamos anotando dentro “Hola estoy dentro del primer divs”, y a ese div le hemos llamado “contenedor_principal”, si lo ves en el explorador solo veras el texto, ahora podemos darle color, tamaño, fondo, etc. gracias a las hojas estilo, para seguir con el ejemplo, inicia un archivo nuevo y que vas a guardar con el nombre de “estilo.css”, anotándole el siguiente código:
#contenedor_principal{
border:solid #000;
}
Lo que le estamos diciendo es que los div que tengan de nombre contendor_principal van a tener la línea de los bordos en negro solido, guardarlo en el mismo lugar donde hayas guardado el código anterior. Ahora se vería así:
Pero veamos que resulta si a este mismo código le agregamos un div mas, algo así:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Mi Primer DIV</title>
<!– el siguiente link es para obtener la hoja estilo –>
<link href=”estilo.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<div id=”contenedor_principal”>
Hola yo estoy dentro del primer divs:
<div id=”dentro1”>
Que tal yo estoy dentro del contenedor principal
</div>
</div>
</body>
</html>
Y a la hoja estilo le agregamos:
#dentro1{
background:#0C3;
border:dotted #CC0;
}
Si ves otra ves esto en el explorador, veras algo así:
Puedes descargar este ejemplo dando
Es un ejemplo simple, pero espero sirva para que comprendas como funcionan los divs. Cabe mencionar que cuando una página web se utilizan divs en lugar de tablas, resultan mas fácil de interpretar por los buscadores, ya que a estos les interesa la información, el contenido y no la estructura.
Las características que pueden obtener desde las hojas estilos son muchísimas, es cuestión de investigar las propiedades, quedo a la espera de tus comentarios, correcciones y/o dudas, recuerda que tus comentarios le dan rumbo a mis artículos.
Comentarios
Publicar un comentario