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. 29 Comentarios »

29 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

@Andrés en Dictador Micheletti: Haré lo que sea para convencer a Obama: Darío…! y yo queme mataba de la risa viendo cómo los Testigos de...

@Daniel en Dos tips sobre Adobe Reader: Detener AcroRd32Info.exe e impedir actualizaciones automáticas: muchas gracias man!!! genial la info que...

@Sebastian en ¿Joomla Vs. Wordpress? (1ª parte): Hola, excelente artículo, actualmente me encuentro definiendo que CMS usar y ando evaluando entre...

@Alyen en The Post Thumbnail Vs. WP Smart Image II: Gracias Darío, espero tu respuesta. Otra cosa tengo la traduccion desde hace tiempo, te aviso...

@Andrés en Cómo extraer miniaturas de imágenes en Wordpress (2da revisión – Código mejorado): Hola Darío: Ya solucioné mi problema. -...

@Andrés en Cómo extraer miniaturas de imágenes en Wordpress (2da revisión – Código mejorado): Hola a todos: He seguido todos los pasos...

@uri en 240 plugins JQuery: buenas Darío, buena recopilación… estoy buscando un plugin para wordpress que al pinchar a una imagen me la...

@ramon en ¿Joomla Vs. Wordpress? (1ª parte): felicidades por el articulo y por esa capacidad de analisis. Voy a contar mi experiencia y voy a...

Darío Ferrer — Blog personal

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

62 consultas a la BD en 0,645 segundos. Blog alojado en DreamHost