完整的CSS工具列表（转载）

[09/02] 完整的CSS工具列表（转载）
[折叠]
用户界面
I Like Your Color
输入URL然后它会抓出其中的颜色并用16进制表示。
CSS Multi-element Rollover Generator
使用CSS和一个图片创建出一个翻转按钮的样式。
CSS Rounded Box GeneratorRuthsarian Layouts
6个CSS页面布局模板，包括颜色、标题等。
Bluerobot Layout Reservoir
2栏和3栏的CSS布局框架
Glish CSS Layout techniques
2、3、 4栏的CSS布局框架
The Layout-o-matic
输入页宽、栏数和padding，它会自动生成CSS和HTML的布局框架。
Little Boxes
w3cn.org上提供的那些布局模板
Open Source Web Design
各种免费的完整页面模板
Web Builders’ Toolkit
更多的模版资源
Iconico Online CSS Scrollbar Color ChangerList-u-Like
一个CSS菜单生成器：轻松创建采用li并兼容各种浏览器的导航菜单。
Nifty Corners: 无需图片的圆角矩形Round Corner Stone/Icon (rcsi) V1.0
增强的圆角矩形
Xylescope
无需下载其他站点就能轻松分析其CSS代码。
W3C Core StylesCheckliste zur WebseitengestaltungTestseite zur Zeilenbreite
易用性检查
Accessibility Valet DemonstratorBobby Online ServiceCynthia SaysOCAWA Web Accessibility ExpertTorquemada
使用工具对页面进行一个完整的易用性分析方法测试，以快速辨别页面中哪些部分存在错误。
UI Site check
一个站点检查工具，只需要输入你的网址，便可以列出几十个验证器和易用性工具。
WAVE 3.5 Accessibility Tool
可以提供你页面上的易用性细节和错误方面的有用信息。他会用红黄绿蓝等几种图标来表示需要改进的页面部分。这些图标代表了你页面上有关结构、内容、可用性和易用性方面的问题细节。你可以清楚地看到当前页面上哪些位置存在问题。
Web-based Site Usability CheckerWebXACT Quality & Accessibility Check
一个免费的在线服务，让你对单个页面进行质量、易用性和保密性问题的测试。
Will the browser apply the rule(s)?TAW - Test accessibilidad web
整理和优化
CSS Formatter and Optimiser
能让你选择你的CSS更易读还是更小。
CSS Compressor
使用这个工具可以压缩你的CSS使之提高载入速度和节约带宽。
Online CSS Compressor
多种途径来清理并压缩你的CSS，牺牲了可读性来获得相当程度的优化和尺寸的减少。
CSS CompressorCSS Syntax Checker for BBEdit and TextWranglerCSSTidy
CSSTidy 是一个开源的CSS解释器和优化工具
CSS Tweak ~ Web Based CSS Tweaker!
CSS Tweak 会优化你的CSS以减少文件大小和下载时间。
Clean CSS - Optmize and Format your CSSFormat CSS Online
自动格式化你的CSS使之便于阅读和编辑
Online CSS Optimizer
CSS Optimizer 优化并减少CSS的文件尺寸
Online CSS Optimiser/Optimizer
这个工具用于优化CSS代码。
Tabifier
使HTML和CSS代码变漂亮。
Webucator
有一个CSS参考手册，你还可以在上面测试你的CSS代码
CSS Centricle
CSS hack浏览器兼容一览表 （就是w3cn.org 上的那个）
字体
CSS Font and Text Style Wizard
你可以在这里测试用不同的字体和样式来生成CSS源代码。
Em Calculator
转换字体大小到em的工具
text sizing - up the garden path
不同浏览器下字体表现的研究，共有264个截图。
表单
Accessible Form Builder
轻轻松松生成符合XHTML标准的表单。
CSS Form Code Maker
表单生成器
JotForm
所见即所得的表单生成器
korhoen typeviewer
帮你查看CSS的排版效果，帮你调整使之易读。
布局
CssCreator -> Page Layout:
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
一个PHP - HTML - CSS模板生成器，可以生成包括页头和页尾的两栏布局的模板。
Firdamatic
Firdamatic? 是一个无表格的布局生成器。
Free CSS Template Code Generator
生成三栏的布局
Layout-o-Matic
也是一个无表格的布局生成器。
QrONE CSS Designer
在线CSS生成器
Scriptomizers
一个CSS样式生成器
The Generator Form v2.90
1-3栏可定制的CSS页面生成器。
酷站
CSSEliteopenwebdesign.org
设计师和站长在这里分享网页设计模板和资讯。
CSS thesisWow-FactorWeb Standards AwardsW3 Compliant SitesUnmatched StyleThe Weekly StandardsCSS-ManiaCSS DriveCSS ImportCSS Zen GardenCSS VaultCSS BeautyStylegala
帮助向导 / Hacks / 学习资源
SelectOracle
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 onMax-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.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
这个站点展示了标题(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.Easy CSS hacks for IE7 — IE7下可以用的CSS Hacks。 针对IE7, Firefox 1.5和Opera 8.5的Web浏览器CSS支持 一览表。 snook.ca onthe “+ CSS hack which you can use to target IE6 and IE7 only.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:
“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! …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.
小贴士
CSS-Based Forms: Modern Solutions样式表定义的各种漂亮注册与登录表单的收集。Hot Dates with CSS 教你怎样使blog的日期看起来像日历页。