Tips para CSS

Aquí unos 8 tips vistos en CSS Globe, muy útiles y sin mucha complicación, soluciones rápidas y sencillas...

1. Centrar de forma vertical utilizando line-height
line-height:24px;

2. Provenir que el contenido de gran tamaño (div o cualquier contenedor) rompa el ancho fijo de diseños flotantes (propiedad float)
#main{ overflow:hidden; }

3. Prevenir saltos de línea en enlaces (links con espacios en blanco)
a{ white-space:nowrap; }

4. Mostrar siempre en firefox la barra de desplazamiento (scrollbar, la barra con flechas a mano derecha)
html{ overflow:-moz-scrollbars-vertical; }

5. Centrar elementos de un bloque o contenedor de forma horizaontal
margin:0 auto;

6. Ocultar la scrollbar de los TextArea en IE
textarea{ overflow:auto; }

7. Forzar un salto de página al imprimir
h2{ page-break-before:always; }

8. Quitar bordes en los enlaces activos
a:active, a:focus{ outline:none; }

   Y otros añadidos, si conocen de algún otro tip rápido dejen su comentario =)

9. Otra forma de quitar bordes en los enlaces activos
a:active, a:focus { background:#ccc; outline:none; }

10. Eliminar los bordes de las imágenes
img { border: 0; }

11. Centrar contenedor en IE (un div por ejemplo)
body{ text-align: center; }

12. Cambiar el color del texto seleccionado
::selection{ background:#c3effd; color:#000; } /* Safari y Opera */
::-moz-selection { background:#c3effd; color:#000; } /* Firefox */

13. Prevenir saltos dinámicos al ocultar la scrollbar en firefox
html { overflow-y:scroll; }

14. Esquinas redondeadas (solo CSS3)
input{ -moz-border-radius:10px; -webkit-border-radius:10px; }

15. Cambiar puntero por icono de la mano en los enlaces y botones
input[type=submit],label,select,.pointer{ cursor:pointer; }

16. Hacer que toda el área de una lista sea seleccionable
#navigation li a{ display:block; }

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon