工具箱的CSS

工具箱的CSS是什么？

工具箱的CSS样式， 唯一没有与任何特定的网站做的信息。 这些都是常见的样式，可以在任何Web项目有用的集合。 你写了一个清除一个浮动的类有多少次？ 太多了，是我的猜测。 与工具箱CSS的想法是，这些“实用”的风格，包括一个单独的样式表。

什么是工具箱的CSS？

工具箱的CSS不是CSS的重置。 工具箱CSS不是一个CSS框架。 CSS的工具箱没有包含的造型，使任何Web项目的独特的“灵魂”。

为什么使用工具箱中的CSS？

使用工具箱中的CSS将节省您的时间。 它可以节省你写了相同的样式，并反复。 需要浮到左的东西吗？ 你总是可以指望你的工具箱。 它还可以帮助您保持您的网站间的一致性。 如果你总是使用相同的工具箱，你的标记将共享相同的通用类名称，使得它更容易为您跳回和理解。

“守则”

工具箱CSS代码如下。 或者，使用直接的联系 。

/* 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; } 

解释一下

分页 ：通过插入“分页”级，打印机打印时，该网站将开始一个新的页面。 前有用的大型图像或主要部分。

造型附加 ：这些做参考，我这里不包括几个图像文件。 有许多地方为你找到漂亮的图标，尝试图标查找 。

显示值 ：是显示器之间的差异：没有和能见度：隐藏。 没有设置显示值将删除从页面布局中，造成重流。 有时不可取的，有时没有。 如果你只想隐藏一个元素，但留下的空间，它占据完好，使用visibility属性。