Borrachos y CSS

4 de junio de 2009 — Darío Ferrer

¿Acaso pensaban que los honorables ebrios no podían ofrecernos unas buenas lecciones de CSS? Pues así es. Estos héroes anónimos asumen día a día (y noche a noche) la difícil tarea de actuar como tutoriales vivientes a favor de nuestro aprendizaje.

Contrario a lo que algunos puedan pensar, el CSS es una disciplina nada fácil de dominar. Quienes nos dedicamos a la profesión de maquetar webs apreciamos sumamente toda fuente de aprendizaje. Mientras más ilustrativas mejor. Y aquí es donde entran nuestros amigos los beodos, quienes se encuentran en la constante búsqueda de métodos y procedimientos -sin escatimar, esfuerzo, costo o tiempo- a favor de la noble causa que envuelve el diseño web. Veamos algunos ejemplos:

display: block

display:block: Hace que los elementos se muestren en formato bloque.

La propiedad display:block es una de las más complejas del CSS, ya que muchas veces implica la adición de una serie de propiedades complementarias que justifican su uso. Quizás sea por tal motivo que los navegadores tengan tantos problemas para renderizarla correctamente.

position: absolute; bottom: 0

position:absolute: Facilita el control del lugar que ocuparán los elementos en una página.

Para posicionar elementos de forma absoluta sólo se necesita que el elemento padre (o contenedor) también esté posicionado, bien sea absoluta o relativamente. De lo contrario el elemento contenido saldrá fuera de sus límites y tomará posición respecto al primer contenedor posicionado o -en última instancia- a la etiqueta <body>, la cual es la raiz del código html visible.

color: #fff; background: #fff

color / background: Tal como sus nombres lo indican, sirven para fijar los colores de un elemento y los de su fondo.

Existen tres métodos principales para asignar colores: 1) Por nombres (“white”, “black”, “blue”, “red”, etc.) cuya variedad es muy limitada, 2) el método RGB, con una gama bastante amplia y 3) el método hexadecimal, de igual espacio de colores pero más sencillo de implementar.

En el caso de los colores de fondo (background) el CSS permite el uso de imágenes, a las cuales es posible asignar repetición horizontal, vertical, total o ninguna, al igual que su posición dentro del mismo elemento, tomando en cuenta las coordenadas respecto a su punto superior, inferior, izquierdo, derecho o medio.

white-space: nowrap

white-space:nowrap Suprime todo salto de línea en el elemento afectado.

Si aplicáramos la propiedad white-space:nowrap a -por ejemplo- un párrafo, éste se mostraría en una sola línea independientemente de los límites de ancho de la página. A pesar de la creencia de algunos, white-space:nowrap resulta muy útil en determinados casos, tales como el formateo de menús cuyo texto no deseamos cortar.

display: inline

display-inline: Ajusta elementos para mostrarlos en línea.

Otra de las variantes de la propiedad display es inline, la cual ubica los elementos horizontalmente, uno al lado del otro. Es ampliamente utilizada para formatear listas (originalmente mostrada en fomato bloque) y más específicamente en menús horizontales.

overflow: hidden

overflow:hidden: Oculta un elemento dentro de los límites del elemento padre.

“Overflow” significa “sobreflujo”, y “hidden” significa “escondido”. Cuando asignamos a un elemento la propiedad overflow:hidden, el flujo de todos sus elementos hijos (los que están contenidos dentro de éste) están circunscritos a sus límites. Esto quiere decir que cualquier sobreflujo se encontrará escondido dentro del contenedor afectado.

overflow: visible

overflow-visible: muestra el contenido de los elementos fuera del contenedor.

En contraparte de lo anteriormente explicado, overflow:visible muestra el contenido de los elementos hijos fuera de los límites del contenedor (o padre). La mayoría de los elementos html vienen con esta propiedad de forma predeterminada, por lo cual sólo es utilizada si previamente se le ha asignado overflow:hidden a la misma clase.

border: 1px dotted #000

border: Define el borde de un elemento.

La propiedad border tiene más variantes que fijan el grosor, tipo y color del borde de un elemento. La mayoría de los navegadores suman el ancho del borde al ancho total de la caja afectada, por lo cual -por ejemplo- una capa de 300px con borde de 1px tendrá un tamaño final de 302px (300 + el píxel del borde por lado).

En CSS existe variedad de formas de presentación de los bordes. Sin embargo, navegadores como Internet Explorer tienen problemas para renderizar (o mostrar) correctamente algunos de ellos.

Conclusión

Es posible que a partir de este momento veas a los ebrios desde el lente de la humildad académica.

  • Bitacoras.com
  • Meneame
  • Twitter
  • del.icio.us
  • Facebook
  • Digg
  • Technorati
  • BarraPunto

Publicado en HTML y CSS. 30 Comentarios »

30 comentarios

Comentar este artículo

Nombre (Requerido)

Correo (No será publicado) (Requerido)

Sitio web

Secciones

Enlaces externos, HTML y CSS, Impresos, Joomla, La foto, Notas, PHP, Política, Portada, Recursos, Religión, Videoteca y Wordpress.

Anteriores

comentarios recientes

@Willy en ¿Joomla Vs. Wordpress? (1ª parte): Era lo que necesitaba leer!!! como programador, aprender como editar un template de cero en joomla y...

@Willy en [Meme] Concepto bizarrón de CSS: Cagadas Siempre Suceden!! XD Counter Strike Server. no es bizarro pero bue!!

@Horacio en ¿Joomla Vs. Wordpress? (1ª parte): Hola, hace tiempo empece a trabajar con joomla y armar mi sitio web en un servidor gratuito para...

@birgitta en ¿”WatchTower” o “CashPower”?: Hilaridad sin H,mis disculpas

@birgitta en ¿”WatchTower” o “CashPower”?: AY AY AY.Cuanto lobotomizado hay por aqui!!!!!! Muchas gracias Dario por tu...

@Darío en ¿Joomla Vs. Wordpress? (1ª parte): Gracias por la sugerencia tocayo, voy a analizarla! Luego de buscar un poco más encontré que la página...

@Juan Vera en Dar acceso a grupos de Joomla (o restringírselo) para cualquier componente: Hola, mira yo quiero algo parecido pero para las personas...

@Emanuel en Dos tips sobre Adobe Reader: Detener AcroRd32Info.exe e impedir actualizaciones automáticas: Para que molestarse instalando acrobat si...

Darío Ferrer — Blog personal

Sitio desarrollado con Wordpress, software libre para un mundo libre.

58 consultas a la BD en 0,816 segundos. Blog alojado en DreamHost