用户界面

• 输入URL然后它会抓出其中的颜色并用16进制表示。
• 使用CSS和一个图片创建出一个翻转按钮的样式。
• 6个CSS页面布局模板，包括颜色、标题等。
• 2栏和3栏的CSS布局框架
• 2、3、 4栏的CSS布局框架
• 输入页宽、栏数和padding，它会自动生成CSS和HTML的布局框架。
• 上提供的那些布局模板
• 各种免费的完整页面模板
• 更多的模版资源
• 一个CSS菜单生成器：轻松创建采用li并兼容各种浏览器的导航菜单。
• 增强的圆角矩形
• 无需下载其他站点就能轻松分析其CSS代码。

易用性检查

• 使用工具对页面进行一个完整的易用性分析方法测试，以快速辨别页面中哪些部分存在错误。
• 一个站点检查工具，只需要输入你的网址，便可以列出几十个验证器和易用性工具。
• 可以提供你页面上的易用性细节和错误方面的有用信息。他会用红黄绿蓝等几种图标来表示需要改进的页面部分。这些图标代表了你页面上有关结构、内容、可用性和易用性方面的问题细节。你可以清楚地看到当前页面上哪些位置存在问题。
• 一个免费的在线服务，让你对单个页面进行质量、易用性和保密性问题的测试。

整理和优化

• 能让你选择你的CSS更易读还是更小。
• 使用这个工具可以压缩你的CSS使之提高载入速度和节约带宽。
• 多种途径来清理并压缩你的CSS，牺牲了可读性来获得相当程度的优化和尺寸的减少。
• CSSTidy 是一个开源的CSS解释器和优化工具
• CSS Tweak 会优化你的CSS以减少文件大小和下载时间。
• 自动格式化你的CSS使之便于阅读和编辑
• CSS Optimizer 优化并减少CSS的文件尺寸
• 这个工具用于优化CSS代码。
• 使HTML和CSS代码变漂亮。
• 有一个CSS参考手册，你还可以在上面测试你的CSS代码
• CSS hack浏览器兼容一览表 （就是w3cn.org 上的那个）

字体

• 你可以在这里测试用不同的字体和样式来生成CSS源代码。
• 转换字体大小到em的工具
• 不同浏览器下字体表现的研究，共有264个截图。

表单

• 轻轻松松生成符合XHTML标准的表单。
• 表单生成器
• 所见即所得的表单生成器
• 帮你查看CSS的排版效果，帮你调整使之易读。

布局

• :
  thisgenerator will create a CSS layout that has fixed width left and/orright columns with a dynamic width center column, all the same heightwith header and footer.
• 一个PHP - HTML - CSS模板生成器，可以生成包括页头和页尾的两栏布局的模板。
• Firdamatic? 是一个无表格的布局生成器。
• 生成三栏的布局
• 也是一个无表格的布局生成器。
• 在线CSS生成器
• 一个CSS样式生成器
• 1-3栏可定制的CSS页面生成器。

酷站

帮助向导 / Hacks / 学习资源

• Explainsthe structure of CSS- and HTML-documents. Enter semi-colon separatedselectors or just paste in your existing rulesets into the “DirectInput area, or provide the URL of a stylesheet or an HTML document withan embedded stylesheet in the “URL Input area. English, Spanish, Germanand Bulgarian versions are available.
• Tom Lee has a tutorial on . Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser.
• from Bruce Lawson is a great comprehensive collection of CSS’s that,when combined, addresses most of CSS issues with different browsers.
• 这个站点展示了标题(heading)元素在IE6中换行时会留个小尾巴的bug。
• seems like something I should’ve known already about the behavior ofinline elements in strict mode. But of course it took me an hour ofagony before finally realizing the ultimate truth: I’m not that smart.
•  — IE7下可以用的CSS Hacks。
• 针对IE7, Firefox 1.5和Opera 8.5的 一览表。
• snook.ca on  which you can use to target IE6 and IE7 only.
• 提供了很多信息围绕IE其特有的“渲染概念：hasLayout — one of the major causes for headachewhen it comes to how IE decides to pain the boundaries of certain HTMLelements: 

   

  • “Internet Explorer中有很多奇怪的渲染问题可以通过赋予其“layout得到解决。John Gallant 和 Holly Bergevin把这些问题归类为“尺寸bug(dimensional bugs)，意思是这些 bug可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout的一个问题：为什么它会改变元素的渲染特性，为什么它会影响到元素之间的关系？这个问题问得很好，但却很难回答。在这篇文章中，我们专注于这个复杂问题会有那些方面的表现，某一方面的具体讨论和范例请参考文中给出的相关链接。

  这篇文章的中文翻译参见承志的SharkUI：

• — No matter how far on the left the real text is, the underline will bestretched all the way to the right in some PC browsers, namely theFirefox.
•  — Again, something that could’ve brought to my attention last week!
  • …InternetExplorer fails to render backgrounds for elements that have both an IDand a class defined. For instance, #photos.background1 will display thecorresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed.
• 包括少量的IE bug修复手段
•  — 著名的taming IE/Win CSS display bug by assigning a dimensional value such as height:1%;
• 很不错的一系列CSS测试页面
• 用IE的expression来模拟max-width
• 用@import来针对不同的浏览器隐藏CSS的一系列方法。
• 助你对付IE的一系列建议。
• 用图表来比较IE 6, Firefox 1.0, 和Opera 8.
• 正确使用XML申明和MIME类型。
• .

小贴士

• 样式表定义的各种漂亮注册与登录表单的收集。
•  教你怎样使blog的日期看起来像日历页。
• A nice demo of experimenting with  using unordered list.
• Clagnut shows you how to have  by using the carriage return entity . How utterly simple!
• uses 100% CSS solution (via attribute value selector and positionedbackground images) to serve up customized form elements. It’ssemantically correct and degrades well for browsers that doesn’tsupport this method (IE), but is it also accessible?
• Stuart Robertson’s technique seems like one of the easiest-to-implement techniques I’vecome across. It uses :before pseudo element and supports both Safariand Firefox browsers.
• From “holy crap why didn’t I think of that file… Airbag has a simple but great idea of  during development.
• is a wonderful tutorial from Barely Fitz on how to use PHP variables torepresent colors in your CSS which you can then manipulate — quicklychanging all the colors from a single source, generating new colors viaalgorythm, etc.
• Web Graphics has a CSS3 demo on .
• Dynamic Drive, a long time favorite DHTML code snippet depot of mine, has started a new spin-off: .
•  — a new tutorial on ALA shows how to create an accessible map with tooltips via CSS and JS.
• — “…Don’t waste hours trying to style horizontal rules consistentlyacross different browsers. Instead wrap your HR in a DIV, set the HR todisplay none and style the surrounding DIV instead.. Now why the heckdidn’t I think of that?
•  from maratz.com — using background image CSS property on images to serve as image place holders.
• stefanhayden.com shows a neat (and easy) way to make sure the client fetches new CSS with HTML update:  with each update.
•  if you don’t mind the markup cruft.
• codylindley.com’s  “…is a CSS solution for creating a stationary header out of the thead of a table while the table’s tbody remains scrollable
•  via sonspring. It’s sort of like mini-lightbox that enlarges the thumbnails on hover. Very nice.
• looks nice except that it’s not really an ordered list. Instead it useddefinition lists inside the ordered list for presentation — which meanstrue standardistas might object.
• In what could only be catagorized under Uber-Anal department, ollicle.com .
• From “I didn’t know that file… wg tells us that  the words connected by it.
• Eric Meyer, the man with CSS skillz that payz da billz, reveals something I’ve never heard of before: !The differences between united vs. unitless declarations are welldescribed in his article but I can’t believe that I had it all wrong.I’ve been telling everyone that “You must declare unit for ANYmeasurement values unless it’s zero.
• loudandlonely has an interesting article on  by using some clever a:link:before and a:link:after pseudo-elements.
• digital-web has a good run down on .
• 456bereastreet takes a first crack at 
• Another good  demo.
•  shows you how to allow even block items to flow around floating boxes.
•  — Unlike ,this version doesn’t use nested unordered lists. Instead, it uses justone unordered list, with the link image placed inside the anchor.
• Another very nice tutorial from 24ways. This time it’s ,a technique popular in citing blockquotes with enlarged quotation marksin the beginning and at the end of the quote. But without usingbackground images.
•  is an interesting javascript-powered / CSS-controlled page animation technique.
• is a good article on using PHP to allow constants (’variables’) in CSS.For instance you can use this technique to define a repetitive color inCSS as a variable. That way you only need to declare it once and onlychange that one instance should you want to change that color. Veryhandy.
• 24ways has a good article on using .
• apples-to-oranges.com has a fantastic tutorial on 
•  showcases use of CSS to provide an image with mouse-over-section for detailed notes.
• From the “How the heck did I miss this department: a powerful cross-browser JavaScript function that enables querying of aDOM document using CSS selectors. All CSS1 and CSS2 selectors areallowed plus quite a few CSS3 selectors.
•  via simplebits
•  — creating gradient background effect in CSS using server-side constants technique developed bu Shaun Inman.
• •  is a follow-up to the aforementioned technique that adds the starting “state.
  • And here’s an external article which wraps it all up with a .
•  — Yes. Not “replacement but “placement.
•  — how to force the footer of a webpage to stick to the bottom of the viewport.
• Shaun Inman’s  — using PHP variables in CSS.
•  via web-graphics.com
•  — using em values to scale the images in CSS. via bigbaer.com
•  — create irregular shaped boxes.
•  — an interesting way to present equal-sized images on mouse hover
•  — Nice collection of CSS tutorials that covers most of the basics.
•  — ‘click here to delete’ demo
•  — via returnofdesign.com
•  — Andy Budd’s presentation at @media 2005.
•  — various methods of clearing floats.
•  — via webdesign.maratz.com.
• .
•  — via maratz.com
•  — DHTML/CSS tool tips on hover.
•  — Nice masthead design in CSS. via cameronmoll.com
• 9rules.com讨论了两个很少见的CSS伪类。
•  — CSS文章和小贴士包括min-height hack, “the underscore hack, “single line vertical centering, “photocards等等
•  — 错！这不是flash。这是纯javascript/CSS编写的产品。
• WASP list some international sites that are