Caja de herramientas CSS
7 de mayo 2008 por · chriscoyier 13 Comentarios 
Buzz This Post 
Digg this post 
Reddit 
Stumble This Post
¿Qué es la caja de herramientas CSS?
Caja de herramientas CSS es un estilo de información única que no tiene nada que ver con un sitio web en particular. Se trata de una colección de estilos comunes que pueden ser útiles en cualquier proyecto web. ¿Cuántas veces has escrito una clase para despejar un flotador? Demasiados, es mi conjetura. La idea con la caja de herramientas CSS es incluir una hoja de estilos distintos para la utilidad de estos "estilos.
¿Qué no es caja de herramientas CSS?
Caja de herramientas CSS CSS no es un reajuste. Caja de herramientas CSS CSS no es un marco. Caja de herramientas CSS contiene ninguno de los estilos "alma" que hace que cualquier proyecto web única.
¿Por qué utilizar Toolbox CSS?
Uso de Herramientas CSS le ahorrará tiempo. Le ahorra de escribir los estilos de una y otra y otra vez. ¿Necesita algo para flotar hacia la izquierda? Usted siempre puede contar con su caja de herramientas. También le ayuda a mantener la coherencia entre sus sitios. Si usted siempre utiliza la misma caja de herramientas, su margen de beneficio se comparten los mismos nombres de clase común y hace que sea más fácil para que usted pueda ir y volver a entender.
El Código
El código de la CSS Toolbox es abajo. O bien, utilizar el enlace directo.
/* Toolbox CSS Chris Coyier http://css-tricks.com */ /* LAYOUT TOOLS */ .floatLeft { float: left; } .floatRight { float: right; } .clear { clear: both; } .layoutCenter { margin: 0 auto; } .textCenter { text-align: center; } .textRight { text-align: right; } .textLeft { text-align: left; } /* PRINT TOOLS */ .page-break { page-break-before: always; } /* TYPOGRAPHIC TOOLS */ .error { border: 1px solid #fb4343; padding: 3px; color: #fb4343; } .warning { border: 1px solid #d4ac0a; padding: 3px; color: #d4ac0a; } .success { border: 1px solid #149b0d; padding: 3px; color: #149b0d; } .callOut { font-size: 125%; font-weight: bold; } .strikeOut { text-decoration: line-through; } .underline { text-decoration: underline; } .resetTypeStyle { font-weight: normal; font-style: normal; font-size: 100%; text-decoration: none; background-color: none; word-spacing: normal; letter-spacing: 0px; text-transform: none; text-indent: 0px; } /* STYLING EXTRAS */ a[href^="mailto"] { background: url(images/emailIcon.png) left center no-repeat; padding-left: 10px; } a[href~=".pdf"] { background: url(images/pdfIcon.png) left center no-repeat; padding-left: 10px; } a.button { color: black; border: 1px solid black; padding: 3px; } a.button:hover { background: black; color: white; } .transpBlack { background: url(images/transpBlack.png); } /* DISPLAY VALUES */ .hide { display: none; } .show { display: block; } .invisible { visibility: hidden; } Una pequeña explicación
El salto de página: Al insertar el "page-break" de clase, una nueva página se iniciará cuando se imprime la página web a una impresora. Útiles antes de imágenes de gran tamaño o secciones principales.
Extras Styling: Estos hacen referencia a un par de archivos de imagen que no he incluido aquí. Hay muchos lugares para que usted pueda encontrar iconos de Niza, intente Icono del Finder.
Presentación de los valores: Hay una diferencia entre display: none y visibility: hidden. Establecer el valor de pantalla para ninguna de ellas podrá eliminar el cuadro de diseño de la página, haciendo que vuelva a fluir. A veces deseable, a veces no. Si simplemente desea ocultar un elemento, pero dejar el espacio que ocupaba intactas, utilice el atributo de visibilidad.
Me enseñaron que para que una ". Claras en el aula", usted debe tener
height: 1px;
line-height: 1px;
font-size: 1px;
margin-top:-1px;
claro: los dos;
¿Es este exceso? Mi entendimiento es esto era para la fijación de algunos problemas de IE.
Pensamientos?
Una página de prueba para estos estaría bien, es obvio que lo que algunos alféizar de hacer, las clases de tipografía no son tan evidentes.
Gracias, mejor que un marco, y simple!
Looks great! Me gusta mucho la sección de Diseño Extras. La más útil, frente-relamerse ganar para mí es la clase resetTypeStyle ... brillante. Las cuestiones jurídicas - si modificamos esta muy Qué añadir nuestro nombre como un mod en el pseudo-área de derechos de autor? Si eliminamos por completo va a darnos caza y ...?
@ Pat he visto ese tipo de cosas antes, pero creo que es innecesario. No estoy muy seguro de lo que realmente resuelve este problema y parece que en realidad podría causar más problemas potenciales de los que resuelve. Estoy abierto a escuchar más sobre ella sin embargo!
@ Kevin: Usted puede hacer lo que quieras con él, seguir adelante y quitar el nombre, no me importa!
Buena idea ...
Artículo de Niza y CSS herramienta!
Encontré un pequeño error sin embargo: la línea de: a [href = ~ ". Pdf] ... le falta un" después de la palabra PDF y por lo tanto la CSS se detendrá allí con la ejecución. Se debería leer correctamente: a [href = ~ ". pdf"] ....
Mantenga su buen trabajo, el amor sus artículos.
@ Pat - más de matar ...
KISS es siempre el mejor método.
@ Chris - Esto es mucho mejor que un tonto o restablecer algún tipo de marco que sólo añade hinchada basura a los sitios web.
@ Gracias Marlyse, que de hecho era un error de sintaxis en el código que aparece en el artículo, tengo que fija.
¿Qué navegadores soportan esta hoja de estilo?
Este es un gran paso hacia atrás si usted cree que el diseño y estructura deben ser separados. Es realmente sólo una versión shortcutted de utilizar estilos en línea ... no es precisamente ideal.
@ Tobias estoy de acuerdo, la clase debe describir el contenido que marcar, por lo que una hoja de estilo puede aplicar el estilo de una situación particular, el diseño, o la página.
@ Estilo Jermayn restablecer las hojas son buenos si tu preocupado por mantener las cosas como tamaños de fuente, la altura de línea, márgenes, etc. consistente a través de múltiples navegadores. Hay algunos que pueden ser hinchados, pero en general cumplen una función más universal de la OMI.
El aspecto más poderoso de este creo que es la capacidad de ir y venir entre diferentes sitios, y se sientan cómodos.
Cualquiera puede crear una caja de herramientas para ellos basados en lo que se siente cómodo con el, pero para ser sinceros: ¿quién sería? Especialmente cuando alguien más ha hecho por usted.
Buen trabajo.
Los nombres de las clases no son semánticas y contienen referencias visuales - que es un gran "Nono". Si el cliente, por ejemplo, decide cambiar la alineación del texto de algunos contenedores que tendrías dos opciones malas: 1. buscar y reemplazar todas las "class =" textRight "con algo más, que vence a la idea de la CSS y podrían causar que los resultados no deseados (como cambiar algo que no debe), o 2. cambiar el estilo único, dentro de la declaración de la clase, que es correcto el uso de CSS, pero que dejará con una clase llamada "textRight" que se alinea el texto a la izquierda. Que hará un lío total de la capa de presentación.
Además, los selectores de atributo no son totalmente compatibles y no deben ser utilizados.
De lo contrario, es una buena idea, pero un poco difícil de aplicar, tal como está.