CSS Reference和HTML Reference来自同一开发者，从站点名称你应该可以知道两者差异，CSS Reference主要专注于网站阶层式样式表（Cascading Style Sheets，简称CSS）语法参数，网站宗旨「通过示例学习」和我们熟悉的参考手册差不多，实际上许多在线教学也都是从实例来学习语法操作。

CSS Reference将所有CSS标签都列在网站中，同时提供快速检索功能，当你点击任一标签后会开启详细使用教学，使用者可从设定方式对照示例，就能得出如何将某个语法正确运用到你的网页设计。

更重要的是CSS Reference让你真正了解每个语法标记如何使用，而不用从百度去翻找不一定正确（或可能过时）的网络文章。

就如同HTML Reference一文写道，我认为所有学习都必须有参考手册，用于更全面的了解及对照查询，包括CSS当然也是如此，尤其CSS 3又出现许多新的语法和设定方式，若没有参考手册很容易疏漏。若你属于前端工程师或设计师，CSS是每天日常，将网站加入书签就对了。

站点名称：CSS Reference

网站连接：http://cssreference.io/

使用教学

STEP 1

开启CSS Reference网站后，会发现它长得跟HTMLReference.io差不多，不过在细部设计上颜色倒没有用得那么复杂。

上方Collections收录一些CSS主题，例如动画、背景、Flexbox、位置、过场动画及排版，下方则有搜寻框及所有CSS属性，目前一共收录129个。

STEP 2

开启关于文字排版主题分类，能找到一些很常用于文字设计的样式类别，例如：font-family、font-size、color、text-align、letter-spacing等等，每个语法都有设定示例、说明并显示成效于右侧供开发者参考。

比较容易遇到的定位（Positioning）设定，如果你和我一样时常搞不太清楚的话，从这网站的示例应该更能清楚理解。

STEP 3

每一个CSS属性都会有详细的设定说明，例如很常用到的font-style，可以变更文字样式，加上斜体或粗体等等，各种设定方式都有对应的示例，即使看不懂英文叙述也没关系，从这里亦能学习每个属性要如何使用。

STEP 4

其他例如很常遇到的padding、margin等CSS属性，一样可以在CSS Reference说明手册找到非常详细的介绍及使用方式，通过图片说明就能更容易理解，假如你想快速复制每个属性内容，只要点击语法即可快速复制到剪贴板。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-tool/t50769.shtml