只是Stylish虽然能够直接套用别人做好的样式（而且有庞大的样式资料库 ），让你随意替换Gmail、Facebook或各种网站的外观，但是当你想要针对某个网站进行手动版面调整时，Stylish要求用户必须懂得CSS语法才能进行样式的修改。那么那些对于CSS样式语法不熟悉的用户怎么办？

现在， 透过「 Stylebot 」这款Google Chrome扩展，我们可以用非常简单的所见即所得编辑器，通过图形方式直接调整网站的CSS样式。任何人都能够轻易的将某个网站调整成自己喜欢的外观。

下载Stylebot： http://stylebot.me/

在Google Chrome中安装Stylebot，访问任何一个网站，点击网址列右方新增的「CSS」连结，就可以开启侧边栏。

这时候你必须在网页中用绿色框框点选一个你想编辑的版面区块，才能开始进行细节修改动作。在所见即所得的CSS编辑列中，你可以调整字体、行距、字距、背景颜色、栏位样式等等， 而所有修改都直接利用按钮选项调整即可，并可于网页中即时看到修改结果。

点击Stylebot编辑列下方的〔Edit CSS〕按钮，可以获得你刚刚进行的CSS样式修改语法（也可以在这里直接编辑）。

这对于想要修改自己博客、网站版面的用户来说，是一个很好的辅助工具。

1、Firebug

　　用于调试JavaScript，修改界面HTML和CSS，一些常用的网络分析扩展也是基于Firebug的，非常好用。

　　2、YSlow

　　YSlow是Yahoo开发的，基于Firebug的用于分析网页性能的工具，可以提供如何提高网站性能的一套规则，用于优化网页的速度和建立高性能的网页。

　　3、Page Speed

　　Page Speed是Google开发的类似YSlow的工具，也是基于Firebug插件，网站管理员和网络开发人员可以使用 Page Speed 来评估他们网页的性能，并获得有关如何改进性能的建议。

　　4、Web Developer

　　Web Developer是集成了一系列Web开发工具，例如HTML、CSS校验、FORM修改等功能，拥有强大的CSS调试和Form调试能力，对页面的分析非常全面，可以禁止页面的任一内联、文档、和外部CSS，可以直接编辑当前CSS。

　　5、Live HTTP Headers

　　浏览页面同时记录所有HTTP headers，可分析各个http头的状态码。

　　6、HttpFox

　　监控和记录所有HTTP访问中发送和接受的数据，包括URL地址、HTTP头、传输参数等信息。

　　7、User Agent Switcher

　　浏览器切换器，可以让Firefox伪装为其他浏览器，伪装其他浏览器例如iPhone来访问网站。当初我提前体验Google Buzz就是利用这个扩展模拟iPhone登录来实现的。

　　8、Coral IE Tab

　　基于IETab开发的增强版本，在Firefox中模拟使用IE浏览器的引擎来访问网页。

　　9、MeasureIt

　　可以测量页面上任何选择区域的长宽。

　　10、ColorZilla

　　可以从页面，或者调色板上取色，同时可以缩放页面。

　　11、FireFTP

　　在Firefox中实现FTP的功能。

　　12、Greasemonkey

　　让你可以使用JavaScript在浏览器上实现一些特殊的定制功能，有上百个基于Greasemonkey的JavaScript代码可供使用。

　　13、View Source Chart

　　改善Firefox浏览器显示源代码的样式。

　　14、HTML Validator （based on CSE HTML Validator）

　　使用CSE的HTML验证引擎，需要安装CSE HTML Validator for Windows，有lite版本。

　　15、wmlbrowser

　　模拟WAP访问WML (Wireless Markup Language)网页。

　　px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
　　em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

　　任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

em有如下特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

　　也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

　　但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。

易用性检查

• Accessibility Valet Demonstrator
• Bobby Online Service
• Cynthia Says
• OCAWA Web Accessibility Expert
• Torquemada
  使用工具对页面进行一个完整的易用性分析方法测试，以快速辨别页面中哪些部分存在错误。
• UI Site check
  一个站点检查工具，只需要输入你的网址，便可以列出几十个验证器和易用性工具。
• WAVE 3.5 Accessibility Tool
  可以提供你页面上的易用性细节和错误方面的有用信息。他会用红黄绿蓝等几种图标来表示需要改进的页面部分。这些图标代表了你页面上有关结构、内容、可用性和易用性方面的问题细节。你可以清楚地看到当前页面上哪些位置存在问题。
• Web-based Site Usability Checker
• WebXACT Quality & Accessibility Check
  一个免费的在线服务，让你对单个页面进行质量、易用性和保密性问题的测试。
• Will the browser apply the rule(s)?
• TAW – Test accessibilidad web

网页界面

• I Like Your Color
  输入URL然后它会抓出其中的颜色并用16进制表示。
• CSS Multi-element Rollover Generator
  使用CSS和一个图片创建出一个翻转按钮的样式。
• CSS Rounded Box Generator
• Ruthsarian 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 Changer
• List-u-Like
  一个CSS菜单生成器：轻松创建采用li并兼容各种浏览器的导航菜单。
• Nifty Corners: 无需图片的圆角矩形
• Round Corner Stone/Icon (rcsi) V1.0
  增强的圆角矩形
• Xylescope
  无需下载其他站点就能轻松分析其CSS代码。
• W3C Core Styles
• Checkliste zur Webseitengestaltung
• Testseite zur Zeilenbreite

整理和优化

• CSS Formatter and Optimiser
  能让你选择你的CSS更易读还是更小。
• CSS Compressor
  使用这个工具可以压缩你的CSS使之提高载入速度和节约带宽。
• Online CSS Compressor
  多种途径来清理并压缩你的CSS，牺牲了可读性来获得相当程度的优化和尺寸的减少。
• CSS Compressor
• CSS Syntax Checker for BBEdit and TextWrangler
• CSSTidy
  CSSTidy 是一个开源的CSS解释器和优化工具
• CSS Tweak ~ Web Based CSS Tweaker!
  CSS Tweak 会优化你的CSS以减少文件大小和下载时间。
• Clean CSS – Optmize and Format your CSS
• Format 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页面生成器。

酷站

帮助向导 / 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 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.
• 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 on the “+ 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的日期看起来像日历页。
• A nice demo of experimenting with CSS-only solution to imagemap with popups using unordered list.
• Clagnut shows you how to have Line breaks in tooltips by using the carriage return entity . How utterly simple!
• Styling check boxes and radio buttons only with CSS uses 100% CSS solution (via attribute value selector and positioned background images) to serve up customized form elements. It’s semantically correct and degrades well for browsers that doesn’t support this method (IE), but is it also accessible?
• Stuart Robertson’s CSS text shadow technique seems like one of the easiest-to-implement techniques I’ve come across. It uses :before pseudo element and supports both Safari and Firefox browsers.
• From “holy crap why didn’t I think of that file… Airbag has a simple but great idea of using a ruler background images in CSS to check DIV sizing during development.
• CSS Colors: Take Control Using PHP is a wonderful tutorial from Barely Fitz on how to use PHP variables to represent colors in your CSS which you can then manipulate — quickly changing all the colors from a single source, generating new colors via algorythm, etc.
• Web Graphics has a CSS3 demo on using :target pseudo class to style anchor link targets.
• Dynamic Drive, a long time favorite DHTML code snippet depot of mine, has started a new spin-off: CSS Drive.
• A More Accessible Map — a new tutorial on ALA shows how to create an accessible map with tooltips via CSS and JS.
• Styling horizontal rules with CSS — “…Don’t waste hours trying to style horizontal rules consistently across different browsers. Instead wrap your HR in a DIV, set the HR to display none and style the surrounding DIV instead.. Now why the heck didn’t I think of that?
• CSS image preloader technique 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: just add a variable at the end of the CSS with each update.
• Wrapping text around curves via CSS if you don’t mind the markup cruft.
• codylindley.com’s Pushpin Header Technique “…is a CSS solution for creating a stationary header out of the thead of a table while the table’s tbody remains scrollable
• hovebox image gallery via sonspring. It’s sort of like mini-lightbox that enlarges the thumbnails on hover. Very nice.
• Beautifully Numbered Lists looks nice except that it’s not really an ordered list. Instead it used definition lists inside the ordered list for presentation — which means true standardistas might object.
• In what could only be catagorized under Uber-Anal department, ollicle.com how to alter CSS line-height based on paragraph width via javascript for optimal readbility.
• From “I didn’t know that file… wg tells us that using − instead of a dash character prevents some browser from wrapping the words connected by it.
• Eric Meyer, the man with CSS skillz that payz da billz, reveals something I’ve never heard of before: line-height property can use unitless values! The differences between united vs. unitless declarations are well described 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 ANY measurement values unless it’s zero.
• loudandlonely has an interesting article on how to obscure your email address via CSS by using some clever a:link:before and a:link:after pseudo-elements.
• digital-web has a good run down on things to consider when using CSS typography.
• 456bereastreet takes a first crack at explaining CSS3 selectors
• Another good footer at the bottom using only CSS demo.
• Pup’s Box Flow Hack shows you how to allow even block items to flow around floating boxes.
• Simple(r) CSS Image Switcher — Unlike the orginal CSS image switcher, this version doesn’t use nested unordered lists. Instead, it uses just one unordered list, with the link image placed inside the anchor.
• Another very nice tutorial from 24ways. This time it’s Curly Quotes Without Images, a technique popular in citing blockquotes with enlarged quotation marks in the beginning and at the end of the quote. But without using background images.
• FACE is an interesting javascript-powered / CSS-controlled page animation technique.
• Defining CSS constants using PHP 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 in CSS as a variable. That way you only need to declare it once and only change that one instance should you want to change that color. Very handy.
• 24ways has a good article on using z-index attribute.
• apples-to-oranges.com has a fantastic tutorial on how to create great looking bar graphs with CSS
• Image map for detailed information 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: cssQuery a powerful cross-browser JavaScript function that enables querying of a DOM document using CSS selectors. All CSS1 and CSS2 selectors are allowed plus quite a few CSS3 selectors.
• Bulletproof logos via simplebits
• Css Color Chart
• Check marking visited links
• CSS Gradients Demo — creating gradient background effect in CSS using server-side constants technique developed bu Shaun Inman.
• Creating s star rating using CSS
  • CSS Star Rating Part Deux 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 tutorial on how to use CSS star rating with PHP and database.
• Image Placement Technique — Yes. Not “replacement but “placement.
• FooterStick — how to force the footer of a webpage to stick to the bottom of the viewport.
• Shaun Inman’s CSS-SSV — using PHP variables in CSS.
• CSS scroll box fade using alpha-channel PNG
• Styling visited links with :after pseudo class
• Footnotes with CSS and JS
• Restaurant menu layout in CSS via web-graphics.com
• CSS scale image — using em values to scale the images in CSS. via bigbaer.com
• Slantastic — create irregular shaped boxes.
• yDSF – Robust CSS Drop Shadows
• CSS sliding photo gallery — an interesting way to present equal-sized images on mouse hover
• alsacreations.com — Nice collection of CSS tutorials that covers most of the basics.
• Using CSS selectors to apply Javascript functionality — ‘click here to delete’ demo
• Flickr-style image map with only CSS
• Web Color Schemes — via returnofdesign.com
• Making the jump to tableless design — Andy Budd’s presentation at @media 2005.
• CSS Help Pile
• Simple Clearing of Floats — various methods of clearing floats.
• Visited links styling — via webdesign.maratz.com.
• mandarindesign’s text tricks.
• Sweet collection of CSS how-tos — via maratz.com
• HoverHelp — DHTML/CSS tool tips on hover.
• How-to: Giving To Hiram? masthead — Nice masthead design in CSS. via cameronmoll.com
• :focus and :not
  9rules.com讨论了两个很少见的CSS伪类。
• welstyled.com — CSS文章和小贴士包括min-height hack, “the underscore hack, “single line vertical centering, “photocards等等
• Couloir Slideshow Script — 错！这不是flash。这是纯javascript/CSS编写的产品。
• WASP list some international sites that are inspired by CSS Zen Garden Project
• 用CSS的border属性来创建斜边

CSS hack主要通过“.”，“>”，“*”，“_”来进行区分。
例如：同样的文字在不同浏览器中显示不同的颜色：

color:brown !important;  /*用于Opera、Firefox2、Firefox3等现代浏览器*/  
>color:green !important;    /*IE7、IE8可以识别该规则，因此它覆盖掉了上一条规则*/   
color:red;  /*所有浏览器都可以识别，但是以上两条规则有!important，所以这条规则被忽视；只有IE6认识并覆盖掉上两条规则*/

这里注意一定要把IE6写在最下面，把ff和opera放最前面。
总结一下 CSS hack方法：
区别IE6与FF：
background:orange;*background:blue;

区别IE6与IE7：
background:green !important;background:blue;

区别IE7与FF：
background:orange; *background:green;

区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;

css hack备注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;