Skip to content

¿Que son los divs?, en css

marzo 11, 2011

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 click aquí.

 

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.

 

Atte, tu amigo

Salvador López

 

 

From → inicial, Tips

2 comentarios
  1. El html queda de la siguiente manera:

    Mi Primer DIV

    Hola yo estoy dentro del primer divs

    Que tal yo estoy dentro del contenedor principal

    La hoja de estilo estilo.css queda de la siguiente manera

    .contenedor_principal
    {
    border:solid #000;
    }

    .dentro1
    {
    background:#0C3;
    border:dotted #CC0;
    }

    Con solo poner el nombre del “div” no vas tienes que poner el atributo class=” ”

    saludos

  2. Joel. permalink

    Que tal Salvador. Muchas gracias por despejarme la duda que tenia con los divs. saludos

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: