Vusui-css 样式库

Typography 文字排版

vusui-css 主要使用非衬线字体 sans-serif，力求在各个操作系统下都有最佳展示效果。

对应文件

@vusui/css/lib/typography.cssopen in new window

标题

使用 vus-h(1~6) 类，作为标题的样式。

H1 关关雎鸠，在河之洲
H2 窈窕淑女，君子好逑
H3 参差荇菜，左右流之
H4 窈窕淑女，寤寐求之
H5 求之不得，寤寐思服
H6 悠哉悠哉，辗转反侧
<div class="vus-h1"></div>
<div class="vus-h2"></div>
<div class="vus-h3"></div>
<div class="vus-h4"></div>
<div class="vus-h5"></div>
<div class="vus-h6"></div>

文本修饰线

使用以下表格类为文本添加修饰线效果。

样式名称说明
vus-text-overline为文本添加上划线效果
vus-text-through为文本添加中划线/删除线效果
vus-text-underline为文本添加下划线效果
关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
求之不得，寤寐思服。悠哉悠哉，辗转反侧。
<div class="vus-text-overline"></div>
<div class="vus-text-through"></div>
<div class="vus-text-underline"></div>

文本着重

通过增加 font-weight 值来改变文本粗细效果。

样式名称说明
vus-fw-normal标准模式
vus-fw-100着重值: 100
vus-fw-200着重值: 200
vus-fw-300着重值: 300
vus-fw-400着重值: 400
vus-fw-500着重值: 500
vus-fw-600着重值: 600
vus-fw-700着重值: 700
《下终南山过斛斯山人宿置酒》
暮从碧山下，山月随人归。
却顾所来径，苍苍横翠微。
相携及田家，童稚开荆扉。
绿竹入幽径，青萝拂行衣。
欢言得所憩，美酒聊共挥。
长歌吟松风，曲尽河星稀。
我醉君复乐，陶然共忘机。
<div class="vus-fw-normal"></div>
<div class="vus-fw-100"></div>
<div class="vus-fw-200"></div>
<div class="vus-fw-300"></div>
<div class="vus-fw-400"></div>
<div class="vus-fw-500"></div>
<div class="vus-fw-600"></div>
<div class="vus-fw-700"></div>

文本斜体

使用 vus-fs-italic 类来强调一段文本斜体。也可以使用 vus-fs-normal 类来清除字体样式。

《望天门山》
天门中断楚江开，碧水东流至此回。
两岸青山相对出，孤帆一片日边来。
<div class="vus-fs-italic">文本斜体</div>
<div class="vus-fs-normal">清除字体样式</div>

文本行高

通过文本行高类，可以设置文本和段落的行间高度。

样式名称说明
vus-lh-inherit继承父元素
vus-lh-11 倍
vus-lh-1-11.1 倍
vus-lh-1-21.2 倍
vus-lh-1-31.3 倍
vus-lh-1-41.4 倍
vus-lh-1-51.5 倍
vus-lh-1-61.6 倍
vus-lh-1-71.7 倍
vus-lh-1-81.8 倍
vus-lh-1-91.9 倍
vus-lh-22 倍
《汉广》
南有乔木，不可休思。
汉有游女，不可求思。
汉之广矣，不可泳思。
江之永矣，不可方思。
翘翘错薪，言刈其楚。
之子于归，言秣其马。
汉之广矣，不可泳思。
江之永矣，不可方思。
翘翘错薪，言刈其蒌。
之子于归，言秣其驹。
汉之广矣，不可泳思。
江之永矣，不可方思。
<div class="vus-lh-inherit"></div>
<div class="vus-lh-1"></div>
<div class="vus-lh-1-1"></div>
<div class="vus-lh-1-2"></div>
<div class="vus-lh-1-3"></div>
<div class="vus-lh-1-4"></div>
<div class="vus-lh-1-5"></div>
<div class="vus-lh-1-6"></div>
<div class="vus-lh-1-7"></div>
<div class="vus-lh-1-8"></div>
<div class="vus-lh-1-9"></div>
<div class="vus-lh-2"></div>

文本对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

样式名称说明
vus-text-left文本左对齐
vus-text-center文本居中对齐
vus-text-right文本右对齐
vus-text-justify文本两端对齐
vus-text-indent文本首行缩进
vus-text-spacing文本加大间距
文本左对齐
文本居中对齐
文本右对齐
关关和鸣的雎鸠，相伴在河中的小洲。那美丽贤淑的女子，是君子的好配偶。 参差不齐的荇菜，从左到右去捞它。那美丽贤淑的女子，醒来睡去都想追求她。 追求却没法得到，白天黑夜便总思念她。长长的思念哟，叫人翻来覆去难睡下。 参差不齐的荇菜，从左到右去采它。那美丽贤淑的女子，奏起琴瑟来亲近她。 参差不齐的荇菜，从左到右去拔它。那美丽贤淑的女子，敲起钟鼓来取悦她。
关关和鸣的雎鸠，相伴在河中的小洲。那美丽贤淑的女子，是君子的好配偶。 参差不齐的荇菜，从左到右去捞它。那美丽贤淑的女子，醒来睡去都想追求她。 追求却没法得到，白天黑夜便总思念她。长长的思念哟，叫人翻来覆去难睡下。 参差不齐的荇菜，从左到右去采它。那美丽贤淑的女子，奏起琴瑟来亲近她。 参差不齐的荇菜，从左到右去拔它。那美丽贤淑的女子，敲起钟鼓来取悦她。
关关和鸣的雎鸠，相伴在河中的小洲。那美丽贤淑的女子，是君子的好配偶。 参差不齐的荇菜，从左到右去捞它。那美丽贤淑的女子，醒来睡去都想追求她。 追求却没法得到，白天黑夜便总思念她。长长的思念哟，叫人翻来覆去难睡下。 参差不齐的荇菜，从左到右去采它。那美丽贤淑的女子，奏起琴瑟来亲近她。 参差不齐的荇菜，从左到右去拔它。那美丽贤淑的女子，敲起钟鼓来取悦她。 
<div class="vus-text-left">文本左对齐</div>
<div class="vus-text-center">文本居中对齐</div>
<div class="vus-text-right">文本右对齐</div>
<div class="vus-text-indent">文本首行缩进</div>
<div class="vus-text-justify">文本两端对齐</div>
<div class="vus-text-spacing">文本加大间距</div>

文本截断

使用 vus-text-ellipsis 类，当文本溢出时显示省略号。也可以通过添加 line-(2/3) 类，显示多行文本（只支持 webkit 内核浏览器）。

单行文本
关关和鸣的雎鸠，相伴在河中的小洲。那美丽贤淑的女子，是君子的好配偶。 参差不齐的荇菜，从左到右去捞它。那美丽贤淑的女子，醒来睡去都想追求她。 追求却没法得到，白天黑夜便总思念她。长长的思念哟，叫人翻来覆去难睡下。 参差不齐的荇菜，从左到右去采它。那美丽贤淑的女子，奏起琴瑟来亲近她。 参差不齐的荇菜，从左到右去拔它。那美丽贤淑的女子，敲起钟鼓来取悦她。
多行文本
关关和鸣的雎鸠，相伴在河中的小洲。那美丽贤淑的女子，是君子的好配偶。 参差不齐的荇菜，从左到右去捞它。那美丽贤淑的女子，醒来睡去都想追求她。 追求却没法得到，白天黑夜便总思念她。长长的思念哟，叫人翻来覆去难睡下。 参差不齐的荇菜，从左到右去采它。那美丽贤淑的女子，奏起琴瑟来亲近她。 参差不齐的荇菜，从左到右去拔它。那美丽贤淑的女子，敲起钟鼓来取悦她。
<div class="vus-text-ellipsis">单行文本</div>
<div class="vus-text-ellipsis line-2">两行文本</div>
<div class="vus-text-ellipsis line-3">三行文本</div>

文本换行

强制文本换行域者不换行。

样式名称说明
vus-text-nowrap不换行
vus-text-letter以字母作为换行依据
vus-text-word以单词作为换行依据
vus-text-pre保留空白，正常换行
不换行
当你老了，头发花白，睡意沉沉， 倦坐在炉边，取下这本书来， 慢慢读着，追梦当年的眼神， 你那柔美的神采与深幽的晕影。...
以字母作为换行依据
When you are old and grey and full of sleep, And nodding by the fire，take down this book, And slowly read,and dream of the soft look, Your eyes had once,and of their shadows deep. How many loved your moments of glad grace, And loved your beauty with love false or true, But one man loved the pilgrim Soul in you And loved the sorrows of your changing face. And bending down beside the glowing bars, Murmur,a little sadly,how Love fled, And paced upon the mountains overhead, And hid his face amid a crowd of stars.
以单词作为换行依据
When you are old and grey and full of sleep, And nodding by the fire，take down this book, And slowly read,and dream of the soft look, Your eyes had once,and of their shadows deep. How many loved your moments of glad grace, And loved your beauty with love false or true, But one man loved the pilgrim Soul in you And loved the sorrows of your changing face. And bending down beside the glowing bars, Murmur,a little sadly,how Love fled, And paced upon the mountains overhead, And hid his face amid a crowd of stars.
保留空白，正常换行
When you are old and grey and full of sleep, And nodding by the fire，take down this book, And slowly read,and dream of the soft look, Your eyes had once,and of their shadows deep. How many loved your moments of glad grace, And loved your beauty with love false or true, But one man loved the pilgrim Soul in you And loved the sorrows of your changing face. And bending down beside the glowing bars, Murmur,a little sadly,how Love fled, And paced upon the mountains overhead, And hid his face amid a crowd of stars.
当你老了，头发花白，睡意沉沉， 倦坐在炉边，取下这本书来， 慢慢读着，追梦当年的眼神， 你那柔美的神采与深幽的晕影。 多少人爱过你昙花一现的身影， 爱过你的美貌，以虚伪或真情， 惟独一人曾爱你那朝圣者的心， 爱你哀戚的脸上岁月的留痕。 在炉罩边低眉弯腰， 忧戚沉思，喃喃而语， 爱情是怎样逝去，又怎样步上群山， 怎样在繁星之间藏住了脸。
<div class="vus-text-nowrap">不换行</div>
<div class="vus-text-letter">以字母作为换行依据</div>
<div class="vus-text-word">以单词作为换行依据</div>
<div class="vus-text-pre">保留空白，正常换行</div>

字母大小写

通过这几个类可以改变文本的大小写。

样式名称说明
vus-text-lowercase全部小写字母
vus-text-uppercase全部大写字母
vus-text-capitalize每个单词以大写字母开头
全部小写
When you are old and grey and full of sleep, And nodding by the fire，take down this book, And slowly read,and dream of the soft look, Your eyes had once,and of their shadows deep. How many loved your moments of glad grace, And loved your beauty with love false or true, But one man loved the pilgrim Soul in you And loved the sorrows of your changing face. And bending down beside the glowing bars, Murmur,a little sadly,how Love fled, And paced upon the mountains overhead, And hid his face amid a crowd of stars.
全部大写
When you are old and grey and full of sleep, And nodding by the fire，take down this book, And slowly read,and dream of the soft look, Your eyes had once,and of their shadows deep. How many loved your moments of glad grace, And loved your beauty with love false or true, But one man loved the pilgrim Soul in you And loved the sorrows of your changing face. And bending down beside the glowing bars, Murmur,a little sadly,how Love fled, And paced upon the mountains overhead, And hid his face amid a crowd of stars.
每个单词以大写字母开头
When you are old and grey and full of sleep, And nodding by the fire，take down this book, And slowly read,and dream of the soft look, Your eyes had once,and of their shadows deep. How many loved your moments of glad grace, And loved your beauty with love false or true, But one man loved the pilgrim Soul in you And loved the sorrows of your changing face. And bending down beside the glowing bars, Murmur,a little sadly,how Love fled, And paced upon the mountains overhead, And hid his face amid a crowd of stars.

实用工具类

样式名称描述
vus-hidden{ overflow: hidden; }
vus-hidden-y{ overflow-y: hidden; }
vus-hidden-y-auto{ overflow-y: auto; }
vus-hidden-x{ overflow-x: hidden; }
vus-hidden-x-auto{ overflow-x: auto; }
vus-hidden-auto{ overflow: auto; }
vus-visible{ overflow: visible; }
vus-inline{ display: inline; }
vus-inline-block{ display: inline-block; }
vus-align-top{ vertical-align: top; }
vus-align-middle{ vertical-align: middle; }
vus-align-bottom{ vertical-align: bottom; }
vus-align-baseline{ vertical-align: baseline; }
vus-block, vus-show{ display: block; }
vus-hide{ display: none; }
vus-pe-auto{ pointer-events: auto; }
vus-pe-none{ pointer-events: none; }
vus-pe-all{ pointer-events: all; }
vus-border-box{ box-sizing: border-box; }
vus-content-box{ box-sizing: content-box; }
vus-fl{ float: left; }
vus-fr{ float: right; }
vus-fn{ float: none; }
vus-cursor-default{ cursor: default; }
vus-cursor-pointer{ cursor: pointer; }
vus-cursor-disabled{ cursor: not-allowed; }
vus-cursor-help{ cursor: help; }
vus-clearfix清除浮动
<div class="vus-show"></div>
<div class="vus-hide"></div>
<div class="vus-clearfix"></div>

响应式方案

响应式预设了四个响应尺寸：

分辨率≥567px≥768px≥1024px≥1280px
vus-showvus-show-xsvus-show-smvus-show-mdvus-show-lg
vus-hidevus-hide-xsvus-hide-smvus-hide-mdvus-hide-lg
vus-flvus-fl-xsvus-fl-smvus-fl-mdvus-fl-lg
vus-frvus-fr-xsvus-fr-smvus-fr-mdvus-fr-lg
vus-fnvus-fn-xsvus-fn-smvus-fn-mdvus-fn-lg
vus-text-leftvus-text-xs-leftvus-text-sm-leftvus-text-md-leftvus-text-lg-left
vus-text-centervus-text-xs-centervus-text-sm-centervus-text-md-centervus-text-lg-center
vus-text-rightvus-text-xs-rightvus-text-sm-rightvus-text-md-rightvus-text-lg-right
vus-text-indentvus-text-xs-indentvus-text-sm-indentvus-text-md-indentvus-text-lg-indent
vus-text-justifyvus-text-xs-justifyvus-text-sm-justifyvus-text-md-justifyvus-text-lg-justify
vus-text-spacingvus-text-xs-spacingvus-text-sm-spacingvus-text-md-spacingvus-text-lg-spacing
<div class="vus-show vus-show-xs vus-show-sm vus-show-md vus-show-lg"></div>
<div class="vus-hide vus-hide-xs vus-hide-sm vus-hide-md vus-hide-lg"></div>
<div class="vus-fl vus-fl-xs vus-fl-sm vus-fl-md vus-fl-lg"></div>
<div class="vus-fr vus-fr-xs vus-fr-sm vus-fr-md vus-fr-lg"></div>
<div class="vus-fn vus-fn-xs vus-fn-sm vus-fn-md vus-fn-lg"></div>
<div
  class="vus-text-left vus-text-xs-left vus-text-sm-left vus-text-md-left vus-text-lg-left"
></div>