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

@Jk en ¿”WatchTower” o “CashPower”?: Hola! Solo queria decirte algo de corazon, no soy testigo, pero muchas veces...

@Glass en ¿Joomla Vs. Wordpress? (1ª parte): Muy interesante post, aunque algo parecido leí en alguna parte pero en inglés, aunque aquí se tocan...

@Ricardo Olivera en ¿Joomla Vs. Wordpress? (1ª parte): Muy interesante el post y los comentarios. Yo quiero poner una tienda tipo carrito de...

@Antonio García en ¿Joomla Vs. Wordpress? (1ª parte): Creo que la comparación no debería tomarse tan literalmente, creo que muchos usuarios no tan...

@Daniel Gonzalez en ¿Joomla Vs. Wordpress? (1ª parte): Sobre la comparación de lo que puede o no puede hacer wordpress y joomla, sería interesante...

@Bandolera en ¿Joomla Vs. Wordpress? (1ª parte): Hola chicos malos: Según he leido el artículo y los comentarios dejados, me doy cuenta que en...

@ABTOP en Construir letras capitulares en Wordpress. Parte I – PHP: Similar, but slightly different approach: http://newrussianamerica.co...

@claudia santiesteban hernandez en Malos consejos: yo tengo una enemiga por mis espaldas y hasta le tengo y me quito a angel eso me da miedo y...

Darío Ferrer — Blog personal

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

58 consultas a la BD en 0.983 segundos. Blog alojado en DreamHost