CSS - De todo un poco - trucos-consejos-manuales

¿Qué es un CSS? CSS - No es Counter Strike Source xD Una hoja CSS es un conjunto de estilos que se van a aplicar a una página HTML. Los estilos se definen como reglas. Estas reglas le dicen a los navegadores cómo mostrar los tipos específicos de estructuras y aspecto visual de una pagina. Para entender cómo los estilos afectan el aspecto de un Web, necesitamos entender qué sucede a un Web en ausencia de cualquier regla del estilo. ¿Dónde se pueden definir los estilos CSS? Puedes definir estilos del CSS en cualquiera de estos tres lugares: - De forma directa dentro del HTML (tales declaraciones del estilo se llaman declaraciones en línea) - Encajada en el propio html entre las etiquetas - En un archivo externo del CSS, también llamado una hoja externa del estilo que se asocia al html por medio de un enlace. Consejos y trucos Siempre que tengas un error extraño en explorer... Contenedor de elementos flotados Hack IE min/max-width hasLayout min-height Hack Elimina el borde punteado de los enlaces Colapso de márgenes Identa tus reglas El orden importa en las pseudoclases de los enlaces en IE No utilices paddings con elementos de ancho fijo !important Bordes redondeados en Mozilla Posicionar elemento en absoluto respecto a otro elemento Alinear verticalmente un elemento en línea Clases Múltiples Optimizando la CSS No mezcles contenido y presentación Floats con width Al posicionar en columnas, vigila con los width A veces los navegadores no interpretan del todo bien los porcentajes, incluso entre diferentes navegadores los pueden interpretar diferente, los errores de redondeo son causados porque cuando queremos hacer que 50% y 50% sean 100%, el resultado es 101%, lo cual hace que se descuadre nuestro layout. Trata de reducir ese 50% a 49%. Utiliza bordes para hacer pruebas con la maquetación Una regla universal como div {border: solid 1px red;}, puede jugar un papel de mucha utilidad a la hora de resolver y solucionar un problema con la maquetación del sitio web usando CSS. Añadir un borde a elementos específicos puede ayudarnos a identificar problemas de superposición de elementos y márgenes o espacios en blanco que no queremos, lo único que debemos tener en cuenta es el ancho de nuestros elementos(con elementos flotados), ya que los bordes nos añadirán dos píxeles y puede que nos rompan la estructura, simplemente réstaselos al elemento en cuestión. Divide y vencerás Cuando nuestro CSS empieza a ser muy grande y tenemos problemas en buscar reglas que hemos escrito lo ideal es separar este CSS en otros más pequeños, podemos separarlo en secciones lógicas, como por ejemplo la cabecera, el contenido, tipografía, colores, formularios, etc. Luego simplemente deberemos importar (mediante la regla import) todas las CSS desde la CSS principal. Atributos a todos los elementos (selector universal) * { margin:0; padding:0 } Con esto conseguimos formatear todos los elementos, es muy útil con los margenes y paddings pero hay que tener cuidado porque seguro que nos llevamos una sorpresa al utilizar una lista (ul) por ejemplo, o cualquier otro elemento al que estemos acostumbrados a que tengan margen por defecto. Aplicar varias clases a la vez A un mismo elemento podemos asignarle distintas clases de la siguiente manera: Código CSS: div#Izquierda { position:absolute; top:0; left:0; width:200px; height:inherit; } div#Derecha { margin-left:200px; min-width:350px; } ver ejemplo Maquetar 3 columnas Si la anterior es un tópico, ésta es el "Santo Grial", al menos así llaman muchos a la presentación a tres columnas. Incluso el W3C adopta este esquema en su página inicial, pero lo gestionan mediante una tabla (en casa del herrero cuchillo de palo). Aquí lo haremos a nuestra manera, y por supuesto sin tablas. Simplificando al máximo, las cajas laterales van posicionadas en absoluto y su ancho es fijo. Al estar fuera de flujo, el lugar que ocupan dentro del código HTML es lo de menos. Los márgenes de la caja central tienen que coincidir con lo que ocupan las cajas laterales. Para evitar que los contenidos se superpongan cuando el tamaño de la ventana sea pequeño, se anidan las tres cajas en otra que hace uso de la propiedad min-width. Además del apaño para emular esto mismo en Internet Explorer, también hay que hacer unos retoques mínimos en los márgenes de las cajas centrales, debido a que las cajas tienen borde, y el citado navegador también los interpreta incorrectamente. Código HTML: Código CSS: div#Madre { position:relative; min-width:620px; height:inherit; } div#Izquierda { position:absolute; top:0; left:0; width:180px; height:100%; } div#Central { margin-left:179px; margin-right:179px; } html>body div#Central { margin-left:181px; margin-right:181px; } div#Derecha { position:absolute; top:0; right:0; width:180px; height:100%; } ver ejemplo otro ejemplo – para ver los estilos css – entras a la pagina y luego boton derecho ‘ver código fuente de la pagina’ Tambien podes ver otro ejemplo desde aquí Centrado de objetos Centrado de líneas de texto Centrado de un bloque de texto o una imagen Centrado vertical de un bloque o una imagen Cuando tengas dudas! valida! Es normal que al programar CSS o XHTML tengamos dudas de muchos tipos, el validador del W3C nos puede dar las respuestas que necesitamos. Validadores CSS - XHTML 1. ¿Usa el sitio un correcto Doctype? 2. ¿Usa el sitio un juego de caractéres (charset)? 3. ¿El sitio utiliza código (X)HTML válido? 4. ¿El sitio utiliza código CSS válido? 5. ¿Usa el sitio cortes (hacks) en el código CSS? 6. ¿Usa el sitio 'clases' o 'ids' innecesarias? 7. ¿Está el código bien estructurado? 8. ¿Contiene el sitio algún enlace roto? 9. ¿Cómo responde el sitio en términos de velocidad y peso de sus páginas? Manuales Manual Basico CSS Manual XHTML+CSS CSS1 Manual de Referencia Curso de hojas de estilo Chuleta para CSS Espero que les haya sido util