<img src="https://pic3.zhimg.com/a562b9c32117783d9270847de393ecfa_b.jpg" data-rawwidth="299" data-rawheight="472" class="content_image" width="299">
个人常用的是取色、截图（选取矩形区域）还有截取滚动窗口，常用到我把它最小化到托盘，然后专门设置了Alt+2/3这样单手就能完成的全局快捷键。
取色和截图的时候在角落有放大的预览——
<img src="https://pic4.zhimg.com/a3b1f8a609a38db6b6387d22adcd5a33_b.jpg" data-rawwidth="284" data-rawheight="327" class="content_image" width="284">
<img src="https://pic3.zhimg.com/a01bcdb81cc4fe63681a0b6debd715ee_b.jpg" data-rawwidth="244" data-rawheight="359" class="content_image" width="244">
取色后可以看到RGB、Dec、Hex的颜色代码——
<img src="https://pic4.zhimg.com/5652e2137696733b9cc8eb109cbdb29f_b.jpg" data-rawwidth="414" data-rawheight="385" class="content_image" width="414">
另外，如果是设计前期，取色用来分析配色方案，那推荐ColorSchemer Studio。这个可以说是专业级的配色工具了，自带取色器（界面左下角那个吸管）。界面如下——
取色后自动生成与之饱和度、明度匹配的十二色相环。
<img src="https://pic1.zhimg.com/51fe0bba9f3d2a8f8b9486dbbe1ada24_b.jpg" data-rawwidth="788" data-rawheight="605" class="origin_image zh-lightbox-thumb" width="788" data-original="https://pic1.zhimg.com/51fe0bba9f3d2a8f8b9486dbbe1ada24_r.jpg">
另外“实时方案”、“合成器”、“变体”里面可以非常非常方便的选取同色、补色、类比色。
<img src="https://pic3.zhimg.com/7190e34e650fbc2d9f035ee88275b7fa_b.jpg" data-rawwidth="788" data-rawheight="605" class="origin_image zh-lightbox-thumb" width="788" data-original="https://pic3.zhimg.com/7190e34e650fbc2d9f035ee88275b7fa_r.jpg">
<img src="https://pic2.zhimg.com/68cdfcfacd9e01ef0625dd11d3e4de29_b.jpg" data-rawwidth="788" data-rawheight="605" class="origin_image zh-lightbox-thumb" width="788" data-original="https://pic2.zhimg.com/68cdfcfacd9e01ef0625dd11d3e4de29_r.jpg">
对图片的色彩分析也很容易，打开图片就能看到提取出的颜色，可以设置提取颜色的数量，甚至可以一键打码= =||——
<img src="https://pic2.zhimg.com/6080110f12ddd85318978e439a7737d9_b.jpg" data-rawwidth="788" data-rawheight="605" class="origin_image zh-lightbox-thumb" width="788" data-original="https://pic2.zhimg.com/6080110f12ddd85318978e439a7737d9_r.jpg">
如果没有合适的图片，自己也找不到好的配色思路，那ColorSchemer还提供了一个可以让社稷诗更偷懒的功能，配色方案搜索（可惜不支持中文）——
<img src="https://pic2.zhimg.com/55b480bafa516ada6553ae13a07ac5f9_b.jpg" data-rawwidth="788" data-rawheight="605" class="origin_image zh-lightbox-thumb" width="788" data-original="https://pic2.zhimg.com/55b480bafa516ada6553ae13a07ac5f9_r.jpg">
其他功能诸如保存配色方案、色盲模拟、网页安全色、随机颜色等不再一一截图。
本教程会分成N个部分，单独发表，其间可能会插入几篇与教程无关的文章。没有具体的教程发表进度,推荐关注本教程的朋友订阅本站Feed。教程内容的30%-50%为Jorux原创，其余翻译部分均为意译,可能来源于多个国外站点，并在教程结束时公布参考原文地址。曾翻译过一篇css教程：
十步学会用css建站
，文章声称能在十步学会建站，虽说夸张点，但确实能学到一些东西，就像现代社会流行速成一样，它只是一个css快餐，要达到自由运用css，没个百八十步恐怕有点悬。
一个文本编辑器和Firefox
1.文本编辑器
：这里所指的是诸如windows自带的记事本以及Editplus等改进版记事本软件。不推荐Dreamweaver, Frontpage等具有图形化可视操作，不直接编辑css源代码的软件。这类软件确实能在学习css的初期帮助你迅速达成你的愿望，但是不久你就会发现这些被Dreamweaver所自动生成的css代码冗长繁琐，css文件体积增大。一旦离开这些软件你的头脑就会像一张白纸，基本的css语法都想不起来。本人曾走过弯路，望初学css的朋友借鉴。
本人使用Editplus编写网页代码，其属于加强版的记事本，具有多步撤销，语法加亮，全部替换等功能，安装后无需设置，推荐把屏幕字体改为14号Verdana，方便阅读编写。
强烈推荐安装的插件：Web Developer
：其功能之强大，以至于我还没用全它的功能，但是其直接查看网页css代码功能，页面信息的显示，以及验证css和Html的功能非常实用。
ColorZilla：方便提取网页中任何元素的颜色。
Html Validator
：安装这个插件后会在浏览器右下角生成一个图标，绿色对号表示当前网页的Html通过验证，红色叉号表示Html有错误，黄色叹号表示Html存在无法通过验证的警告语句。双击图标就会高亮显示该网页存在的不能通过验证的语句数目、位置以及修改建议。作为设计者，最好养成随时观察这个图标的习惯，你就会发现网上声称能通过验证的网页，几乎都是错误或是警告。本网站除极个别网页外均通过验证。
FireBug：安装这个插件后也会在浏览器右下角生成一个图标，绿色对号表示当前网页的Javascript通过验证，并能对错误的Javascript代码debug。我们暂时并不需要这个功能。需要用到的功能是其Inspector，你需要通过定制工具栏，把Inspector的眼镜图标拖入工具栏。点击Inspector图标后，将鼠标移到网页任意位置，你就能在靠下的窗口看到网页Html文件的相应源代码，在网页调试时非常有用。
装这么多插件是不是有点累，我光写都有点吃不消，所以休息一下，在下一篇文章进入css教程的正文部分。
支持本教程或是有任何疑问，请留言。
