完整的CSS工具列表

用户界面 * I Like Your Color(http://redalt.com/Tools/I+Like+Your+Colors) 输入URL然后它会抓出其中的颜色并用16进制表示。 * CSS Multi-element Rollover Generator(http://www.colly.com/) 使用CSS和一个图片创建出一个翻转按钮的样式。 * CSS Rounded Box Generator(http://www.neuroticweb.com/recursos/css-rounded-box/) * Ruthsarian Layouts(http://webhost.bridgew.edu/etribou/layouts/index.html) 6个CSS页面布局模板，包括颜色、标题等。 * Bluerobot Layout Reservoir(http://www.bluerobot.com/web/layouts/) 2栏和3栏的CSS布局框架 * Glish CSS Layout techniques(http://glish.com/css/home.asp) 2、3、 4栏的CSS布局框架 * The Layout-o-matic(http://www.inknoise.com/experimental/layoutomatic.php) 输入页宽、栏数和padding，它会自动生成CSS和HTML的布局框架。 * Little Boxes(http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html) w3cn.org(http://www.w3cn.org/)上提供的那些布局模板 * Open Source Web Design(http://www.oswd.org/) 各种免费的完整页面模板 * Web Builders’ Toolkit(http://toolkit.crispen.org/index.php?cat=templates) 更多的模版资源 * Iconico Online CSS Scrollbar Color Changer(http://www.iconico.com/CSSScrollbar/) * List-u-Like(http://www.listulike.com/generator/) 一个CSS菜单生成器：轻松创建采用li并兼容各种浏览器的导航菜单。 * Nifty Corners(http://www.html.it/articoli/nifty/index.html) 无需图片的圆角矩形 * Round Corner Stone/Icon (rcsi) V1.0(http://www.tjgy.com/round_corner/) 增强的圆角矩形 * Xylescope() 无需下载其他站点就能轻松分析其CSS代码。 * W3C Core Styles(http://www.w3.org/StyleSheets/Core/) * Checkliste zur Webseitengestaltung(http://dciwam.de/checkliste/) * Testseite zur Zeilenbreite(http://www.stichpunkt.de/css/zeilenbreite.html) 易用性检查 * Accessibility Valet Demonstrator(http://valet.webthing.com/access/url.html) * Bobby Online Service() * Cynthia Says(http://www.cynthiasays.com/fulloptions.asp) * OCAWA Web Accessibility Expert() * Torquemada(http://www.webxtutti.it/testa_en.htm) 使用工具对页面进行一个完整的易用性分析方法测试，以快速辨别页面中哪些部分存在错误。 * UI Site check(http://uitest.com/en/check/) 一个站点检查工具，只需要输入你的网址，便可以列出几十个验证器和易用性工具。 * WAVE 3.5 Accessibility Tool(http://wave.webaim.org/) 可以提供你页面上的易用性细节和错误方面的有用信息。他会用红黄绿蓝等几种图标来表示需要改进的页面部分。这些图标代表了你页面上有关结构、内容、可用性和易用性方面的问题细节。你可以清楚地看到当前页面上哪些位置存在问题。 * Web-based Site Usability Checker(http://www.hisoftware.com/products/compliancesheriffoverview.htm) * WebXACT Quality & Accessibility Check() 一个免费的在线服务，让你对单个页面进行质量、易用性和保密性问题的测试。 * Will the browser apply the rule(s)?(http://centricle.com/ref/css/filters/) * TAW - Test accessibilidad web(http://www.tawdis.net/) 整理和优化 * CSS Formatter and Optimiser(http://floele.flyspray.org/csstidy//css_optimiser.php) 能让你选择你的CSS更易读还是更小。 * CSS Compressor(http://www.cssdrive.com/index.php/main/csscompressor/) 使用这个工具可以压缩你的CSS使之提高载入速度和节约带宽。 * Online CSS Compressor() 多种途径来清理并压缩你的CSS，牺牲了可读性来获得相当程度的优化和尺寸的减少。 * CSS Compressor(http://iceyboard.no-ip.org/projects/css_compressor) * CSS Syntax Checker for BBEdit and TextWrangler(http://daringfireball.net/projects/csschecker/) * CSSTidy() CSSTidy 是一个开源的CSS解释器和优化工具 * CSS Tweak ~ Web Based CSS Tweaker!(http://colleen.asmallorange.com/suspended.page/) CSS Tweak 会优化你的CSS以减少文件大小和下载时间。 * Clean CSS - Optmize and Format your CSS(http://www.cleancss.com/) * Format CSS Online(http://www.lonniebest.com/FormatCSS/) 自动格式化你的CSS使之便于阅读和编辑 * Online CSS Optimizer(http://www.cssoptimiser.com/) CSS Optimizer 优化并减少CSS的文件尺寸 * Online CSS Optimiser/Optimizer(http://flumpcakes.co.uk/css/optimiser/) 这个工具用于优化CSS代码。 * Tabifier(http://tools.arantius.com/tabifier) 使HTML和CSS代码变漂亮。 * Webucator(http://www.css-ref.com/) 有一个CSS参考手册，你还可以在上面测试你的CSS代码 * CSS Centricle(http://centricle.com/ref/css/filters/) CSS hack浏览器兼容一览表 （就是w3cn.org 上的那个） 字体 * CSS Font and Text Style Wizard(http://www.somacon.com/p334.php) 你可以在这里测试用不同的字体和样式来生成CSS源代码。 * Em Calculator() 转换字体大小到em的工具 * text sizing - up the garden path(http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html) 不同浏览器下字体表现的研究，共有264个截图。 表单 * Accessible Form Builder() 轻轻松松生成符合XHTML标准的表单。 * CSS Form Code Maker(http://www.maketemplate.com/form/) 表单生成器 * JotForm(http://www.jotform.com/) 所见即所得的表单生成器 * korhoen typeviewer 帮你查看CSS的排版效果，帮你调整使之易读。 布局 * CssCreator -> Page Layout:(http://www.csscreator.com/version2/pagelayout.php) this generator will create a CSS layout that has fixed width left and/or right columns with a dynamic width center column, all the same height with header and footer. * CSS HTML PHP Website Template Maker(http://www.maketemplate.com/) 一个PHP - HTML - CSS模板生成器，可以生成包括页头和页尾的两栏布局的模板。 * Firdamatic(http://www.wannabegirl.org/firdamatic/) Firdamatic? 是一个无表格的布局生成器。 * Free CSS Template Code Generator(http://www.maketemplate.com/csstemplate/) 生成三栏的布局 * Layout-o-Matic(http://www.inknoise.com/experimental/layoutomatic.php) 也是一个无表格的布局生成器。 * QrONE CSS Designer(http://www.qrone.org/cssdesigner.html) 在线CSS生成器 * Scriptomizers(http://www.scriptomizers.com/css/stylesheet_generator) 一个CSS样式生成器 * The Generator Form v2.90(http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php) 1-3栏可定制的CSS页面生成器。 酷站 * CSSElite(http://www.csselite.com/gallery/) * openwebdesign.org(http://openwebdesign.org/) 设计师和站长在这里分享网页设计模板和资讯。 * CSS thesis() * Wow-Factor(http://wow-factor.com/index.php) * Web Standards Awards(http://www.w3csites.com/) * W3 Compliant Sites(http://www.w3csites.com/) * Unmatched Style(http://www.unmatchedstyle.com/) * The Weekly Standards(http://www.fortyagency.com/) * CSS-Mania(http://www.nv30.com/mt/blogomania/) * CSS Drive(http://cssdrive.com/) * CSS Import(http://www.cssimport.com/) * CSS Zen Garden(http://www.csszengarden.com/) * CSS Vault(http://cssvault.com/) * CSS Beauty(http://www.cssbeauty.com/) * Stylegala(http://forum.stylegala.com/) 帮助向导 / Hacks / 学习资源 * SelectOracle(http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py) Explains the structure of CSS- and HTML-documents. Enter semi-colon separated selectors or just paste in your existing rulesets into the “Direct Input area, or provide the URL of a stylesheet or an HTML document with an embedded stylesheet in the “URL Input area. English, Spanish, German and Bulgarian versions are available. * Tom Lee has a tutorial on Max-width in IE Using a CSS Expression. Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser. (http://www.brucelawson.co.uk/2005/future-proof-your-css-with-conditional-comments/) * Future-proof your CSS with Conditional Comments from Bruce Lawson is a great comprehensive collection of CSS’s that, when combined, addresses most of CSS issues with different browsers. * IE Word Wrap Doppelganger Bug (http://www.sitepoint.com/blogs/2006/05/19/the-ie-word-wrap-doppelganger-bug/) 这个站点展示了标题(heading)元素在IE6中换行时会留个小尾巴的bug。 * Images, Tables, and Mysterious Gaps seems like something I should’ve known already about the behavior of inline elements in strict mode. But of course it took me an hour of agony before finally realizing the ultimate truth: I’m not that smart.(https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps) * Easy CSS hacks for IE7 — IE7下可以用的CSS Hacks。(http://www.webdevout.net/css-hacks) * 针对IE7, Firefox 1.5和Opera 8.5的Web浏览器CSS支持 一览表。 * snook.ca on the “+ CSS hack which you can use to target IE6 and IE7 only. (http://www.snook.ca/archives/html_and_css/targetting_ie7) * On having layout 提供了很多信息围绕IE其特有的“渲染概念：hasLayout — one of the major causes for headache when it comes to how IE decides to pain the boundaries of certain HTML elements: o “Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional bugs)，意思是这些 bug 可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout的一个问题：为什么它会改变元素的渲染特性，为什么它会影响到元素之间的关系？这个问题问得很好，但却很难回答。在这篇文章中，我们专注于这个复杂问题会有那些方面的表现，某一方面的具体讨论和范例请参考文中给出的相关链接。 这篇文章的中文翻译参见承志的SharkUI：On having layout * Negative text-indent and underline — No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox. * IE6 Multi Class Bug — Again, something that could’ve brought to my attention last week! o …Internet Explorer fails to render backgrounds for elements that have both an ID and a class defined. For instance, #photos.background1 will display the corresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed. * Ten more CSS tricks you may not know 包括少量的IE bug修复手段 * The “Holly Hack — 著名的taming IE/Win CSS display bug by assigning a dimensional value such as height:1%; * CSS tests 很不错的一系列CSS测试页面 * max-width in IE 用IE的expression来模拟max-width * http://imfo.ru/csstest/css_hacks/import.php 用@import来针对不同的浏览器隐藏CSS的一系列方法。 * Essentials of CSS Hacking For Internet Explorer 助你对付IE的一系列建议。 * Web 浏览器标准支持 用图表来比较IE 6, Firefox 1.0, 和Opera 8. * The perils of using XHTML properly 正确使用XML申明和MIME类型。 * IE Double Float Margin Bug.