Quasar中css总结

html-css017

Quasar中css总结,第1张

用了一段时间的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 属性的工作原理:

在使用带有工作区和源地图的Chrome并设置了本地/网络文件时,我可以使用Chrome Web检查器(在Elements->styles窗格下)识别选择器在正确的SCSS文件中的位置。另外,我可以单击该按钮,将其转到SCSS文件,进行更改,然后将其成功保存到文件系统中。但是,我以前的工作是在elements->styles面板中进行了更改以在SCSS文件中进行更新(即,如果我在Elements选项卡中进行了更改并检查了chrome中的SCSS文件,则应该对其进行了更改)。

相反,它将对CSS文件进行更改。显然,这不是非常有用,因为:

更改SCSS文件后,它将被覆盖

这意味着即使重新加载后,Chrome也会显示SCSS文件中没有的样式,因为样式会永久保存在CSS文件中

我已经使用Sass 3.3.6在OSX和Windows上进行了尝试。

也可以确认不是#9中提到的" ../"问题

https://code.google.com/p/chromium/issues/detail?id=273384,因为sass文件现在位于css文件中。样式表标签上也没有style.css?ver = x扩展名。

您想要的是https://code.google.com/p/chromium/issues/detail?id=257778。 通常,如果涉及变量或复杂的语言功能,则在"样式"面板被编辑时不可能(模糊)在CSS上修补SCSS,因此最好的选择是Ctrl,然后在"样式"窗格中单击所需的CSS属性以导航到 相应的SCSS片段并编辑纯SCSS资源文本,然后保存(Ctrl + S),然后让sass编译器(在监视模式下运行)完成其余工作。 您应该同时启用Enable CSS source maps和Auto-reload generated CSS设置,以使DevTools能够拾取生成的CSS更改。

CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。

在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。

它的作用可以达到:

(1)在几乎所有的浏览器上都可以使用。

(2)以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。

(3)使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。

(4)你可以轻松地控制页面的布局 。

(5)你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。

想一想,没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的?我们一般使用HTML标签来实现,代码非常烦琐。

很难想象,如果在一个页面里需要频繁地更替字体的颜色大小,最终生成的HTML代码的长度一定臃肿不堪。

说实话,CSS就是为了简化这样的工作诞生的,当然其功能决非这么简单。

CSS是通过对页面结构的风格控制的思想,控制整个页面的风格的。

式样单放在页面中,通过浏览器的解释执行,是完全的文本,任何懂得HTML的人都可以掌握,非常的容易。生殖对一些非常老的浏览器,页不会产生页面混乱的现象。