comparte el articulo 

Layouts con XHTML y CSS: Parte 1

Actualizado el 22/12/2011 < > 0 Comentarios

Resumen: Estudiamos conceptos fundamentales como "padding", "border" y "margin", que nos ayudarán a comprender mejor la estructura de una página y la realización de layouts con XHTML y CSS.

Hasta el momento hemos logrado manejar imágenes y texto de manera conjunta permitiendo que nuestra página luzca información de manera presentable, pero siempre es necesario ir más allá, ahora toca el turno de realizar una estructura adecuada para que el sitio pueda mostrar dicha información en conjunto con el resto de los elementos que añadirán armonía al sitio y mejorarán la organización.

Antes de la llegada de CSS2, cuando se trataba el tema de estructurar un sitio, únicamente se planeaba en base a una columna sencilla la cual era acomodada con imágenes transparentes, etiquetas de salto de línea e incluso caracteres como ” “. Tiempo después se dejó un poco atrás esto y se optó por las famosas “tablas” para dar un poco más complejidad a las estructura, creando una dependencia que hasta hoy en día se sigue viendo y sólo viene a estropear un diseño, puesto que las etiquetas de tabla no fueron creadas con esta intención

En la actualidad CSS es un estándar, por lo que se encuentra totalmente aceptado por todos los navegadores y gran parte de la comunidad de diseñadores, gracias a esto ahora podemos manipular la posición de cada elemento HTML mediante el uso de estilos. Esto no sólo redució dramáticamente el tamaño y peso de los sitios, si no que representa un código más flexible, manejable y sobre todo entendible y fácil de editar.

Si es la primera vez que manejas CSS puede resultarte un poco confuso manejar la estructuración, pero empezando con lo básico de seguro aprenderás rápido. En este primer artículo sobre estructura, estudiaremos conceptos muy sencillos como “padding”, “border” y “margin”, que te ayudarán a comprender mejor lecturas más avanzadas.

Modelo de caja de CSS

El modelo de caja es un término utilizado por CSS para describir a todos los elementos pertenecientes a la estructura del documento, los cuales representan cajas rectangulares. Para entender mejor esto, supongamos que cada elemento del documento esta rodeado por un campo de fuerza, el cual puede ser manipulado para crear efectos sofisticados que agradan a la vista y permiten organizar mejor el contenido.

En este modelo tendremos siempre el contenido como elemento central, este estará rodeado por el “padding”, el cual a su vez es rodeado por “borde” y finalmente el “margen”. Este modelo será aplicable para cualquier elemento de la página, desde párrafos hasta links, listas, imágenes, etc.

Altura y anchura

Dos propiedades básicas de cualquier elemento son su altura y anchura, estás son representadas por las palabras “width” y “height”, y desde tiempos de la prehistoria han sido parte de la síntaxis para configurar lo que mostramos en la página web.

Antes solían incluirse como atributos de etiquetas, pero en la actualidad son propiedades CSS que se aplican para establecer las dimensiones de la caja de contenido únicamente, es decir no toman en cuenta el “padding”, “border” o “margen”. En base a esto, si por ejemplo quisiéramos establecer un ancho de 50px a una caja, y ya tenemos un padding de 2px, un borde de 5 px y un margen de 10px, el ancho total de la caja será de 89px, ya que sumaremos 50px del contenido más 2px del padding derecho, 2px del padding izquierdo, 5px del borde derecho, 5px del izquierdo, y 20px por los dos márgenes laterales.

Existen también una variación de estas propiedades, las cuales permiten establecer limitantes, nos referimos a “min-width”, “min-height”, “max-width” y “max-height”. Dichas propiedades nos permiten establecer máximos y mínimos, y de esta manera asegurar que la caja no se reducirá o crecerá tanto que la estructura se vea afectada.

Propiedad overflow de CSS

Cuando existe un contenido que sobrepasa el largo o ancho de una caja y por lo tanto no encaja con lo especificado, entonces tenemos un caso de desbordamiento, el comúnmente llamado overflow. Esa porción de contenido que no cupo dentro de la caja puede ser estilizado mediante la propiedad “overflow”.

Dicha propiedad puede ser establecida a uno de los cuatro distintos valores aceptables, “visible” el valor por default muestra el contenido y el desbordamiento sobre la caja, “hidden” se encarga de cortar el contenido sobrante, “scroll” despliega un conjunto de barras desplazadoras permitiendo al usuario su uso para ver el contenido y “auto” que despliega las barras únicamente si son necesarias.

Padding

El padding es el espacio que va existir entre el contenido y el borde de la caja, su edición y estilización se hace a través de las propiedades “padding-top”, “padding-right”, “padding-bottom” y “padding-left”, en caso de que te quieras ahorrar escribir las cuatro propiedades puedes usar únicamente la propiedad “padding” con cuatro valores distintos, o uno sólo si quieres dar el mismo padding a todos los lados.

#encabezado {
padding-bottom: 5px;
}
#articulo {
padding: 3px 5px;
}

Bordes

Los bordes son un aspecto un poco más estilizable que los padding, debido a que son un elemento más visual podemos cambiar su color y forma para adaptarlos mejor a la imagen del sitio. Al igual que el resto de los elementos tienen una anchura la cual podemos establecer mediante píxeles.

Son varias las propiedades específicas para esta función, si únicamente queremos cambiar el ancho del borde podemos usar “border-width”, pero si queremos ser más específicos y definir cada lado entonces podemos usar “border-top-width”, “border-right-width”, “border-bottom-width” y “border-left-width”.

Para definir la forma del borde tenemos la propiedad “border-style”, si no la especificamos el borde no será visible y por lo tanto la propiedad “border-width” no servirá de nada. Los valores para esta propiedad son “solid” el cual es el clásico con una sola línea, “dotted” que establece una línea punteada, “dashed” que hace lo suyo con pequeños guiones, y después de esto vienen algunos estilos muy poco usados como “groove”, “inset” y “outset”.

Al igual que el ancho, la forma también se puede aplicar de manera específica, mediante las propiedades “border-top-style”, “border-right-style”, “border-bottom-style” y “border-left-style”. La visualización del borde puede variar según el navegador, aunque esto es algo más común para sus versiones antiguas.

Las propiedades “border-top-color”, “border-right-color”, “border-bottom-color” y “border-left-color” pueden ser usadas para cambiar el color de nuestros bordes. Si deseas la versión simple únicamente utiliza la propiedad “border-color”, en caso de que no especifiquemos ningún color tomará a la propiedad “color” de la caja como referente.

#elemento{
border-style: solid;
border-width: 1px;
border-color: #000000;
}

Por el otro lado si no queremos ser tan específicos podemos simplemente usar la propiedad “border” estableciendo todos los valores dentro de ella. Por ejemplo si quisiéramos establecer un border de 1 píxel de ancho, de tipo sólido y de color negro entonces haremos una declaración como esta:

#elemento { border: 1px solid #000000; }

Márgenes

Los márgenes son otro elemento transparente cuya funcionalidad únicamente es establecer un espacio de distancia, aunque en esta ocasión será entre el borde y el resto del contenido de la página. Al igual que con el resto de las propiedades tiene su manera específica de establecerse y su manera general, la decisión esta entre usar “margin-top”, “margin-right”, “margin-bottom” y “margin-left”, o simplemente “margin” con uno, dos, tres o cuatro valores.

#elemento1 {
margin-top: 5px;
margin-bottom: 5px;
}
#elemento2 {
margin: 3px;
}

Publicado el 22/12/2011, última actualización 22/12/2011.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras