设计师的工具箱：空白的CSS模板
3月16日，由chriscoyier · 2008年11评论 
如果你设计的网站相当多从零开始，你会发现自己做了相同的设置工作，一遍又一遍地超过很多。 创建图像文件夹的目录。 创建索引文件，写的内容类型声明，写基本页面结构。 创建的CSS文件，写的CSS重置，写基本的CSS结构。 只是设置可以带你一大块的时间和枯萎体面您到您的设计肉类越来越热情。
在这种设计的工具箱下一期，我们为您提供一种方法来避免一切与一个空白的CSS模板浪费时间。 
只需在系统上保留这个文件夹，任何时候你启动一个新项目，你可以复制这个文件夹并获得与实际编码开始/设计。
所以，你知道你可能会获得进入，让我们来看看的HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>PAGE TITLE HERE</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="page-wrap"> </div> <!-- Put Google Analytics Code Here --> </body> </html> 正如你所看到的，这是一件非常简单。 只要在页面声明（的XHTML 1.0），内容类型声明（-8），网页的标题，样式表链接，结构简单（机构，1页，包装组）。 我还包括一个小提醒您的分析，包括在底部代码，如果您要跟踪在您的网站访问者的数据。
现在，这里的CSS：
/* AUTHOR: YOUR NAME HERE you@domain.com */ /* ------------------------------------------ */ /* RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY */ /* ------------------------------------------ */ * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { font: 62.5% Helvetica, sans-serif; } ul { list-style: none inside; } p { font: 1.3em/1.3em; margin-bottom: 1.3em; } a { outline: none; } a img { border: none; } /* END RESET */ /* ------------------------------------------ */ /* TOOLBOX CSS */ /* ------------------------------------------ */ .floatleft { float: left; } .floatright { float: right; } .clear { clear: both; } .transpBlack { background: url(transpBlack.png); } /* END TOOLBOX */ /* ------------------------------------------ */ /* PAGE STRUCTURE */ /* ------------------------------------------ */ #page-wrap { width: 775px; margin: 0 auto; } /* END STRUCTURE */ 也很简单，大多只是一个CSS扩展复位。 天星选择器（*）不重，解除复位，但有一个额外的涉及夫妇提。 设置在身体的字体大小，62.5％可以让你用你喜欢像素（PX）的大小时间大小。 1.0时间= 10px，11px = 1.1em，等等。 溢出，辎部队，许多浏览器垂直滚动条来消除横向中心跳跃 。
有一些简单的“工具箱的CSS像漂浮的东西”，结算和灌装透明色的地区。 该网页换行CSS是列入中心您的网页内容。
这肯定看起来节省了大量工作。 是否可以用于WordPress的网站吗？ 我有几个项目即将打响，这看起来它会来真正派上用场。
对于“准系统”模板WordPress的，出艾略特杰伊股票“Starkers [http://elliotjaystocks.com/blog/archive/2008/free-starkers-wordpress-theme/]”为主题的检查。
而一项默认模板的想法是好的。 它的工作方式是不是在这里。
例如：*选择呈现减缓下来。 它还清除希望从表单中输入项目的盈利率和填充某些操作系统的/浏览器，不能重新应用。
溢出- Y也是无稽之谈，因为您的网页可能并不总是滚动，使滚动条过时（和混乱一些）。
我还没有看到任何确凿证据明星选择明显放慢的渲染。 我不怀疑，它不小，因为从字面上明星选择将其应用于自己的网页上的每个单个元素。 但是，我认为是轻微放缓甚至甚至是非常复杂的页面显着严重的怀疑。
此外，它不是margin和padding被删除的明星选择了默认的输入字段的螺丝钉，它的边界，并注意边界不重置这里。 默认的输入方式将保持不变（如在Safari中glowy按钮或IE浏览器在FF或块状斜角按钮）。 你是正确的，但如果你以这种方式地带的边界，这些默认样式不能重新应用。
溢出- Y也是没有废话。 它适用于在浏览器中的一个空垂直滚动条不已经是（IE浏览器默认已经这样做了）。 这可能需要房地产屏幕不需要时偶尔，但它避免了尴尬的“跳，横向围绕”当页面导航之间的滚动和网页不。
空白的sofisticated由于CSS和HTML模板。 本指南将帮助我！
伟大的解像度是像我这样的网站editpadders！
你能解释的实用工具。transpBlack（背景：网址（transpBlack.png）;）思想？
我不明白为什么要使用1.3em为P（〜13px）选择器的字体大小。 如果有什么问题，令老的浏览器上的丑恶（特别是没有ClearType或类似的功能），这是一个字体大小为13。
这是更好地工作，即使这样的数字8，10，12，14和16。 更好的可读性“花式设计。 （个人意见，并且可以持续到年底时说）
@弗雷德里克：我使用包括，作为我的“工具箱”的CSS的一部分。 它基本上是一个像素α-透明PNG，而不必使用不透明的属性，让我可以申请一个透明的黑色填充一个框。 不透明度是伟大的，有时，应用到所有的元素力量的子元素也有不透明。 如果这些子元素是文字，可以是一件坏事。 这样你可以申请一个透明的背景和保持完全不透明的文本。
@ koew：实际上，我是不知道，即使像素大小提供更好的...。 我gonna要考虑这样做。
关于字体丑陋koew的评论在奇数像素大小的是一个有效的我与旧平台的老的浏览器自身的经验为基础。
也许是我停留在时间弯曲，但我仍然觉得有必要使用，特别是在小规模年底甚至像素大小。
除此之外，我认为这是一个非常有用的模板，我觉得你的CSS -教主网站是一个良好的阅读。 由于克里斯。
干杯
感谢您的伟大构想，以避免你一个标准的XHTML和CSS许多错误和浪费时间模板...
我想这对我webprojects，也想法
拉尔夫
克里斯 -我和你在一起的普遍选择的问题。 我不相信这一切都那么糟糕，我仍然使用它没有任何问题广泛。