用了一段时间的quasar了，它里面封装的 css 类确实很好用，但是在帮助文档中，描述得零零散散，不方便使用，遂总结一下。
text-[ h1~6, subtitle1, subtitle2, body1~2, caption, overline ]
text-weight-[ thin, light, regular, medium, bold, bolder ]
text-[ right, left, center, justify, bold, italic, no-wrap, stike, uppercase, lowercase, captitalize ]
text-[颜色名称]：text-teal
primary（淡蓝），secondary（淡绿），accent（淡紫），dark（黑色），positive（深绿），negative（红色），Info（亮蓝），warning（黄色）
每种颜色由浅到深分为 1-14 级
red, pink, purple, deep-purple, indigo（靛蓝）, blue, light-blue, cyan, teal（青色）, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey
在应用程序的 *.vue 文件中，可以使用 $primary ， $red-1 等颜色。
|
|
|
|
|
|
子元素可以覆盖父元素上指定的对齐方式 。 这允许对单个Flex项进行对齐。
可用值有： self-start , self-center , self-baseline , self-end , self-stretch
与 flex 值使用类似
Quasar使用一个12分的列系统来分配子行的大小。 以下是可用的CSS辅助类的一些示例：
|
|
在上面的例子中，由于8/12 = 2/3 = 66％，col-8占据了行宽的三分之二（2/3），而col-2占据了六分之一（2/12 = 1 / 6〜16.67％）。
CSS辅助类 col-auto 使单元格只填充需要渲染的空间。 另一方面， col 试图填充所有可用的空间，同时如果需要也可以缩小。
CSS辅助类 col-grow 使单元格至少填充需要渲染的空间，并有可能在有更多空间可用时增长。
CSS辅助类 col-shrink 使单元格最多填充需要呈现的空间，并且当没有足够的可用空间时有可能收缩。
您可以使用 order-first 和 order-last CSS辅助类来设置子元素的顺序 。
默认情况下，Flex项按源(source)顺序排列。 但是，order属性控制它们在flex容器中的显示顺序。 如果您需要更多粒度，请使用 order CSS属性并分配所需的值。
例子：
|
|
以下是CSS order 属性的工作原理：
CSS提供了丰富的选择器类型，包括标记选择器、类选择器、id选择器、伪类选择器及属性选择器等。
CSS Dinner是一个辅助学习CSS选择器的小游戏，这次借助这个游戏结合实际操作，希望对CSS选择器能更好掌握。
接下来开始have CSS dinner！
答案： plate
答案： bento
答案： #fancy
答案： plate apple
答案： #fancy pickle
答案： .small
答案： orange.small
答案： bento orange.small
答案： bento,plate
答案： *
答案： plate *
答案： plate+apple
答案： bento~pickle
答案： plate>apple
答案： plate orange:first-child
答案： plate *:only-child
答案： #fancy apple:last-child, :last-child
注意：选择pickle的选择器“：last-child”前有空格，表示父元素为最外层的“table”。
答案： :nth-child(3)
注意：:nth(3)选择的是最后一个盘子（没有-child），即fancy plate。
答案： bento:nth-last-child(3)
答案： apple:first-of-type
答案： nth-of-type(even)
答案： nth-of-type(2n+3)
答案： apple:only-of-type
答案： orange:last-of-type,apple:last-of-type
答案： bento:empty
答案： apple:not(small)
答案： [for]
答案： plate[for]
答案： [for=Vitaly]
答案： [for^="Sa"]
答案： [for$="ato"]
答案： [for*="obb"]
CSS标准里,不仅重新定义了HTML原有的样式,如文字的大小、颜色等；更加入了重叠文字、区块变化及任意位置放置等多页新属性。通过CSS可以使用更丰富、更灵活的样式，更简单设计出更美观的网页。CSS是用来扩展HTML的，而不是用来替代HTML的。也就是CSS离不开HTML，他只是一项辅助工具。
到这里可以了解完整的CSS技术内容与发展现状：http://www.w3.org/style/
CSS的特点：
除了可扩展HTML的样式设定外，CSS还提供了多项新特点，让网页的设计与维护更有效率：
1、减少图形文件的使用
很多网页为求设计效果，而大量使用图形，以致网页的下载速度变得很慢。CSS提供了很多的文字样式设定，且再加上IE%内建的滤镜特效，因此可轻松取代原来图形才能表现的视觉效果。这样的设计方式以仅让修改网页内容变得更方便，也大大提高下载速度。
2、集中管理样式信息
CSS的基本概念在于可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容独立出来，并集中管理。这样，当要改变网页外观时，只需更改样式设定的部分，HTML文件本身并不需要更改
3、共享样式设定
网页的样式设定和内容分离的好处，除了可集中管理外，如果进一步将CSS样式信息存成独立的文件，还可让多个网页文件共同使用它这样，可省却在每一个网页文件中重复设定的麻烦。
4、将样式分类使用
相对于多份HTML文件可套用同一个CSS样式文件，也可以在一份HTML网页文件上套用多个CSS样式文件。
