My talk at Apache Barcamp Spain 2011. It includes a developer approach about how to get started with CSS if you do not have a web design background. Includes answers to the too-well-known question "What did I break now?".
During these 32 slides some basic concepts like the browser box model get explained, and some CSS frameworks are introduced.
This presentation (together with our "CSS3 101" talk) got the award to the best presentation at Apache Barcamp Spain.
65. Thanks! ( ) Futurama is a trademark from Twentieth Century Fox Film Corporation We honestly think the rest is ours. twitter.com/nachocoloma [email_address]
Hinweis der Redaktion
Casi todo el mundo está en el último nivel y prueban al azar. La idea de esta charla es subirles al menos un nivel.
Recordar que se al ancho/alto se suman el padding y border que pongan
IE6 no reconoce min ni max. Min y max controlan el comportamiento de los textarea en chrome
Margins etc solo aplican a block Float automaticamente implica display: block
vertical-align puede valer top, bottom, baseline o middle. Lo normal para esto sería usar top. Esto no se suele usar, sino float. A diferencia de float, este no necesita fijarle el alto a los elementos. Soportado por IE7, aunque necesita un par de hacks de CSS para hacerlo rodar
Se explican en las siguientes slides
Se coloca en la posición que le corresponde según el modelo de cajas. left, right, top y bottom se ignoran
Añade a su posición por defecto. Puede usarse top, left, right, bottom Pueden usarse cantidades negativas
El contenedor de B no hará scroll junto con el resto de la página
Float: Posiciona un elemento a la derecha o izquierda de su contenedor y permite que el resto de elementos fluyan alrededor suyo. Así el float no hará crecer a su contenedor. Tanto posicionar de forma absoluta un elemento como el flotarlo, significan que salen del flujo normal de documento y eso afecta en unos casos a todos los elementos (position) y el otro a su caja padre que se comportan en algunos aspectos como si esos elementos no existiesen.
Cuando hay un contenido flotado (A) puede ser que sea más largo que el no flotado (B y C) o no. Aquí se cubren los dos casos, y el uso de clear.
hidden: oculta el contenido que se desborda. Es una alternativa a clearfix. visible: puede desbordar la caja auto: puede mostrar barras de scroll Esto aplica a los contenidos flotados
El reset de Eric Meyer es el más conocido. Es también el primero. Esto es el reset completo. No falta nada. Notarse que en la columna izquierda no se usa *, sino cada tag individual. Esto es por rendimiento y por no asignar propiedades a tags que no las usan (como object o script) En la columna derecha hay una referencia a HTML5 que veremos en la parte de tags semánticos
Afecta a cada uno de los roles de un proyecto: * Diseñador: le da un Photoshop para trabajar * HTML: le da un CSS ya probado * Desarrollador: no tiene que entender cómo funciona, sino sólo el número de columnas que quiere usar.