Super Snippets CSS - Parte 1

Basic Link Rollover con CSS Sprite El ajuste la altura y el ancho de asegurar que sólo una parte de la gráfica Sprite.png se muestra. El vuelco se desplaza la posición de la imagen de fondo, que revela un área diferente de la gráfica dijo:a { display: block; background: url(sprite.png) no-repeat; height: 30px; width: 250px; } a:hover { background-position: 0 -30px; } Lo Basico de Google Font API Link a CSS files Usted esencialmente linkea directamente a los archivos CSS en Google.com. A través de los parámetros de dirección URL, la especificidad de letra que desee y que variaciones de los tipos de letra Desea. dijo: CSS En el CSS, a continuación, puede especificar estas nuevas fuentes por su nombre en cualquier elemento que desee utilizarlos. dijo:body { font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; } FontLoader Usted puede utilizar el FontLoader JavaScript en lugar de vincular al CSS. Tiene ventajas, como el control de la Flash sin estilo de texto (FOUT), y también desventajas, como el hecho de que las fuentes no se cargará a los usuarios con JavaScript apagado. Los nombres de las clases, por ejemplo. Wf-loading se aplica al elemento . Así que aviso cuando las fuentes se "carga", puede utilizar el nombre de clase para ocultar el texto. Luego, cuando se demuestre, que sean visibles de nuevo. Así es como FOUT se controla. Better Helvetica dijo:body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; } Hacks para cada Navegador específico dijo:/* IE 6 */ * html .foo { } /* IE 7 */ *+html .yourclass{ } /* IE 7 and modern browsers */ html>body .yourclass { } /* Modern browsers (not IE 7) */ html>/**/body .yourclass { } /* Opera 9.27 and below */ html:first-child .yourclass { } /* Safari */ html[xmlns*=""] body:last-child .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:nth-of-type(1) .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:first-of-type .yourclass { } /* Safari 3+, Chrome 1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { .yourclass { } } Agregar clase Body Sólo para IE Ahora usted puede escribir estilos IE específicos en una hoja de estilo regular, por prologar los selectores CSS con body.ie dijo: FUENTE