Tutorial de como aprender css avanzado

Tutorial de como aprender css avanzado

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. 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: 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: 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 , la cual es la raiz
del código html visible.



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 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: 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: 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: 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: 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.
fuente