¿Qué son las capas o “div” en CSS?
Resumen.
En tiempos las páginas Web se maquetaban con tablas y etiquetas HTML, pero pronto llego una forma más rica de dar forma a las páginas Web. Esta nueva forma es el lenguaje CSS, que abre un amplio abanico de posibilidades impensables para la maquetación con HTML. En este artículo vamos a conocer las capas o “div” en CSS.Artículo.
Los “div” o capas inundan nuestras páginas Web, su traducción literal es “división” y se puede decir que son los equivalentes a las celdas de las tablas HTML. La sintaxis básica de un div es la siguiente:
No es demasiado práctico, en ciertas ocasiones puede ser útil definir las propiedades de una capa mediante “style” sobre la misma etiqueta, de la siguiente forma:
Hemos visto cómo definir el atributo class “.varios{}”, ¿y si lo que queremos definir es el atributo id? Lo haremos de idéntica manera con un solo cambio “#unico{}”, lo único que hacemos es cambiar el punto inicial (.) por la almohadilla (#).
Y con esto cerramos este capítulo tan básico como importante, os esperamos en el siguiente para ir adentrándonos en la maquetación con CSS.
Y se le pueden asignar denominaciones de dos formas. Si solo puede haber un div con ese nombre los denominaremos mediante el atributo “id”, si puede haber más de uno, lo denominaremos mediante el atributo “class”.<div>contenido</div>
Como podemos ver la sintaxis de un div es muy sencilla, pero si lo dejamos así, poco nos aporta respecto a HTML. La cosa cambia cuando le asignamos propiedades, por ejemplo, podemos situar el texto en el centro del div con la propiedad text-align: "center";<div id="unico">Solo puede haber uno</div> <div class="varios">Puede haber tantos como sean precisos</div>
¿No se entiende? Pues ahora más claro mostrando la página Web completa:.varios{ text-align: center; } <div class="varios">Puede haber tantos como sean precisos</div>
Aunque las propiedades CSS se pueden definir sobre la misma capa, lo ideal es asignarle un atributo, y a este, las propiedades que consideremos oportunas, esto nos permitirá que con un solo cambio, todas las capas de ese nombre, quedarían modificadas.<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <title>Formato a una capa CSS</title> <style> <!-- .varios{ text-align: center; } --> </style> </head> <body> <div class="varios">ArtesaniaWeb.ES</div> <div class="varios">Puede haber tantos como sean precisos</div> </body> </html>
No es demasiado práctico, en ciertas ocasiones puede ser útil definir las propiedades de una capa mediante “style” sobre la misma etiqueta, de la siguiente forma:
Aplicando estas mismas propiedades a la capa definida en el head, quedaría de la siguiente forma:<div style="text-align: center; font-family: verdana; color: #0000FF;">Estilo incrustado en HTML</div>
Como puede observarse, resulta más práctico y manejable en cuanto a claridad a la hora de escribir el código..varios{ text-align: center; font-family: verdana; color:# 0000FF; }
Hemos visto cómo definir el atributo class “.varios{}”, ¿y si lo que queremos definir es el atributo id? Lo haremos de idéntica manera con un solo cambio “#unico{}”, lo único que hacemos es cambiar el punto inicial (.) por la almohadilla (#).
Como puede verse, CSS nos permite tener una sintaxis sencilla a la hora de maquetar un sitio Web, basta con asignar los nombres a las capas, y las propiedades de estos están presentes aunque no estén en el body de la página. Es más, incluso podemos tener todas las capas definidas en un archivo aparte con extensión .css, quedando nuestra página de la siguiente forma:#unico{ text-align: left; font-family: verdana; color:#0000FF; border:3px solid #000; } .varios{ text-align: center; font-family: verdana; color:#0000FF; border:1px solid #0F0; } <div id="unico">ArtesaniaWeb.ES</div> <div class="varios">Puede haber tantos como sean precisos 1</div> <div class="varios">Puede haber tantos como sean precisos 2</div> <div class="varios">Puede haber tantos como sean precisos 3</div>
La línea<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <title>Capas con CSS</title> <link rel="stylesheet" href="estilos.css" /> </head> <body> <div id="unico">ArtesaniaWeb.ES</div> <div class="varios">Puede haber tantos como sean precisos1</div> <div class="varios">Puede haber tantos como sean precisos2</div> <div class="varios">Puede haber tantos como sean precisos3</div> </body> </html>
carga el archivo donde están definidas todas las capas con sus propiedades, ofreciéndonos así un entorno de programación muy limpio. Es preciso tener en cuenta que el archivo estilos.css no debe contener las etiquetas de apertura y cierre de css, es decir, la etiquetas <style>código CSS</style> que si son precisas cuando se escribe el código el la misma página como puede verse en los ejemplos expuestos.<link rel="stylesheet" href="estilos.css" />
Y con esto cerramos este capítulo tan básico como importante, os esperamos en el siguiente para ir adentrándonos en la maquetación con CSS.
Tags: div || id || class || capas