文字排版

Vusui主要使用非衬线字体(sans-serif),在<code><pre>等元素上则设置了等宽字体(monospace)。力求在各个操作系统下都有最佳展示效果。

页面主体

已将全局font-size设置为14pxline-height设置为1.5color设置为#333background-color设置为#fff。这些属性直接赋予<body>元素和所有段落元素。
body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "Microsoft YaHei", FreeSans, "Droid Sans", "wenquanyi micro hei", "PingFang SC", "Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.5;
   background-color: #fff;
   color: #333;
}

标题

使用.vus-h(1~6)类,作为标题的样式。在标题内还可以添加.small类,作为<small>标签样式,可以用来标记副标题。

H1 关关雎鸠,在河之洲。——关雎

H2 窈窕淑女,君子好逑。——关雎

H3 参差荇菜,左右流之。——关雎

H4 窈窕淑女,寤寐求之。——关雎

H5 求之不得,寤寐思服。——关雎
H6 悠哉悠哉,辗转反侧。——关雎
<h1 class="vus-h1">H1 关关雎鸠,在河之洲。<small class="small">——关雎</small></h1>
<h2 class="vus-h2">H2 关关雎鸠,在河之洲。<small class="small">——关雎</small></h2>
<h3 class="vus-h3">H3 关关雎鸠,在河之洲。<small class="small">——关雎</small></h3>
<h4 class="vus-h4">H4 关关雎鸠,在河之洲。<small class="small">——关雎</small></h4>
<h5 class="vus-h5">H5 关关雎鸠,在河之洲。<small class="small">——关雎</small></h5>
<h6 class="vus-h6">H6 关关雎鸠,在河之洲。<small class="small">——关雎</small></h6>

段落文本

使用.vus-p类,作为段落标签<p>的样式。也可能使用.vus-lead类,为段落添加一段引导或者主要内容。

关关雎鸠,在河之洲。
窈窕淑女,君子好逑。

参差荇菜,左右流之。
窈窕淑女,寤寐求之。

求之不得,寤寐思服。
悠哉悠哉,辗转反侧。

参差荇菜,左右采之。
窈窕淑女,琴瑟友之。

参差荇菜,左右芼之。
窈窕淑女,钟鼓乐之。

<p class="vus-p">关关雎鸠,在河之洲。窈窕淑女,君子好逑。</p>
<p class="vus-lead">参差荇菜,左右流之。窈窕淑女,寤寐求之。</p>
<p class="vus-p">求之不得,寤寐思服。悠哉悠哉,辗转反侧。</p>
<p class="vus-lead">参差荇菜,左右采之。窈窕淑女,琴瑟友之。</p>
<p class="vus-p">参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。</p>

Mark文本

使用.vus-mark类,作为标签<mark>的样式。

关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。窈窕淑女,琴瑟友之。
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。

关关雎鸠,在河之洲。<mark class="vus-mark">窈窕淑女</mark>,君子好逑。
参差荇菜,左右流之。<mark class="vus-mark">窈窕淑女</mark>,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。<mark class="vus-mark">窈窕淑女</mark>,琴瑟友之。
参差荇菜,左右芼之。<mark class="vus-mark">窈窕淑女</mark>,钟鼓乐之。

上划线

使用.vus-text-overline类,为文本添加上划线效果。
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。窈窕淑女,琴瑟友之。
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
<span class="vus-text-overline">这里是 vus-text-overline 上划线样式的文本。</span>

中划线/删除线

使用<del><s>标签或者.vus-text-through类,为文本添加中划线/删除线效果。
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
<del>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</del>
<s>参差荇菜,左右流之。窈窕淑女,寤寐求之。</s>
<span class="vus-text-through">求之不得,寤寐思服。悠哉悠哉,辗转反侧。</span>

下划线

使用<u>标签或者.vus-text-underline类,为文本添加下划线效果。
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
<u>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</u>
<span class="vus-text-underline">参差荇菜,左右流之。窈窕淑女,寤寐求之。</span>

小号文本

使用.vus-small类,作为<small>标签样式,包裹在内的文本将被设置为父容器字体大小的75%
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。窈窕淑女,琴瑟友之。
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
<small class="vus-small">
   关关雎鸠,在河之洲。窈窕淑女,君子好逑。
   参差荇菜,左右流之。窈窕淑女,寤寐求之。
   求之不得,寤寐思服。悠哉悠哉,辗转反侧。
   参差荇菜,左右采之。窈窕淑女,琴瑟友之。
   参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
</small>

文本着重

使用<b><strong>标签来强调一段文本。

关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
<b>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</b>
<strong>参差荇菜,左右流之。窈窕淑女,寤寐求之。</strong>

文本粗细

  • 通过增加font-weight值来改变文本粗细效果。
    • .vus-fw-normal
    • .vus-fw-100
    • .vus-fw-200
    • .vus-fw-300
    • .vus-fw-400
    • .vus-fw-500
    • .vus-fw-600
    • .vus-fw-700
    • .vus-fw-bold

vus-fw-normal 《关雎》

vus-fw-100 关关雎鸠,

vus-fw-200 在河之洲。

vus-fw-300 窈窕淑女,

vus-fw-400 君子好逑。

vus-fw-500 参差荇菜,

vus-fw-600 左右流之。

vus-fw-700 窈窕淑女,

vus-fw-bold 寤寐求之。

<p class="vus-fw-normal">《关雎》</p>
<p class="vus-fw-100">关关雎鸠,</p>
<p class="vus-fw-200">在河之洲。</p>
<p class="vus-fw-300">窈窕淑女,</p>
<p class="vus-fw-400">君子好逑。</p>
<p class="vus-fw-500">参差荇菜,</p>
<p class="vus-fw-600">左右流之。</p>
<p class="vus-fw-700">窈窕淑女,</p>
<p class="vus-fw-bold">寤寐求之。</p>

斜体文本

使用.vus-fs-italic类来强调一段文本斜体。也可以使用.vus-fs-normal类来清除字体样式。
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。窈窕淑女,琴瑟友之。
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
<span class="vus-fs-italic">
   关关雎鸠,在河之洲。窈窕淑女,君子好逑。
   参差荇菜,左右流之。窈窕淑女,寤寐求之。
   求之不得,寤寐思服。悠哉悠哉,辗转反侧。
   参差荇菜,左右采之。窈窕淑女,琴瑟友之。
   参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
</span>

文本对齐

  • 通过文本对齐类,可以简单方便的将文字重新对齐。
  • .vus-text-left:左对齐(包含:xs/sm/md/lg)。
  • .vus-text-right:右对齐(包含:xs/sm/md/lg)。
  • .vus-text-center:居中对齐(包含:xs/sm/md/lg)。
  • .vus-text-justify:两端对齐。
  • .vus-text-indent:首行缩进。
  • .vus-text-spacing:加大间距。

文本左对齐

文本居中对齐

文本右对齐

文本首行缩进

关关和鸣的雎鸠,相伴在河中的小洲。那美丽贤淑的女子,是君子的好配偶。 参差不齐的荇菜,从左到右去捞它。那美丽贤淑的女子,醒来睡去都想追求她。 追求却没法得到,白天黑夜便总思念她。长长的思念哟,叫人翻来覆去难睡下。 参差不齐的荇菜,从左到右去采它。那美丽贤淑的女子,奏起琴瑟来亲近她。 参差不齐的荇菜,从左到右去拔它。那美丽贤淑的女子,敲起钟鼓来取悦她。

文本两端对齐

关关和鸣的雎鸠,相伴在河中的小洲。那美丽贤淑的女子,是君子的好配偶。 参差不齐的荇菜,从左到右去捞它。那美丽贤淑的女子,醒来睡去都想追求她。 追求却没法得到,白天黑夜便总思念她。长长的思念哟,叫人翻来覆去难睡下。 参差不齐的荇菜,从左到右去采它。那美丽贤淑的女子,奏起琴瑟来亲近她。 参差不齐的荇菜,从左到右去拔它。那美丽贤淑的女子,敲起钟鼓来取悦她。

文本加大间距

关关和鸣的雎鸠,相伴在河中的小洲。那美丽贤淑的女子,是君子的好配偶。 参差不齐的荇菜,从左到右去捞它。那美丽贤淑的女子,醒来睡去都想追求她。 追求却没法得到,白天黑夜便总思念她。长长的思念哟,叫人翻来覆去难睡下。 参差不齐的荇菜,从左到右去采它。那美丽贤淑的女子,奏起琴瑟来亲近她。 参差不齐的荇菜,从左到右去拔它。那美丽贤淑的女子,敲起钟鼓来取悦她。

<p class="vus-text-left">文本左对齐</p>
<p class="vus-text-center">文本居中对齐</p>
<p class="vus-text-right">文本右对齐</p>
<p class="vus-text-indent">文本首行缩进</p>
<p class="vus-text-justify">文本两端对齐</p>
<p class="vus-text-spacing">文本加大间距</p>

文本截断

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

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

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

文本换行

  • 强制文本换行域者不换行。
  • .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">
   When you are old and grey and full of sleep...
</div>

<!-- 以单词作为换行依据 -->
<div class="vus-text-word">
   When you are old and grey and full of sleep...
</div>

<!-- 保留空白,正常换行 -->
<div class="vus-text-pre">
   When you are old and grey and full of sleep...
</div>

字母大小写

  • 通过这几个类可以改变文本的大小写。
  • .vus-text-lowercase:全部小写。
  • .vus-text-uppercase:全部大写。
  • .vus-text-capitalize:首字母大写。
全部小写
When You Are Old And Grey And Full Of Sleep...
全部大写
When You Are Old And Grey And Full Of Sleep...
首字母大写
when you are old and grey and full of sleep...
<!-- 全部小写 -->
<span class="vus-text-lowercase">
   When You Are Old And Grey And Full Of Sleep...
</span>

<!-- 全部大写 -->
<span class="vus-text-uppercase">
   When You Are Old And Grey And Full Of Sleep...
</span>

<!-- 首字母大写 -->
<span class="vus-text-capitalize">
   when you are old and grey and full of sleep...
</span>

文本字号

  • 通过.vus-fs-*类可设置不同大小的文本字号。
  • .vus-fs-(12~30):12px至30px。
  • .vus-fs-(35/40/45/50/55/60/65/70/75/80/85/90/95/100):35px至100px(注:每间隔5个数为一个样式)。

50px 当你老了,头发花白,睡意沉沉,

45px 倦坐在炉边,取下这本书来,

30px 慢慢读着,追梦当年的眼神,

26px 你那柔美的神采与深幽的晕影。

22px 多少人爱过你昙花一现的身影,

19px 爱过你的美貌,以虚伪或真情,

18px 惟独一人曾爱你那朝圣者的心,

16px 爱你哀戚的脸上岁月的留痕。

15px 在炉罩边低眉弯腰,

14px 忧戚沉思,喃喃而语,

13px 爱情是怎样逝去,又怎样步上群山,

12px 怎样在繁星之间藏住了脸。

<p class="vus-fs-100">
   当你老了,头发花白,睡意沉沉,
</p>
<p class="vus-fs-70">
   倦坐在炉边,取下这本书来,
</p>
<p class="vus-fs-35">
   慢慢读着,追梦当年的眼神,
</p>
<p class="vus-fs-30">
   你那柔美的神采与深幽的晕影。
</p>
...
<p class="vus-fs-12">
   怎样在繁星之间藏住了脸。
</p>

响应式文本字号

预设了四个响应尺寸:

分辨率≥576px≥768px≥1024px≥1280px
vus-fs.vus-fs-xs-*.vus-fs-sm-*.vus-fs-md-*.vus-fs-lg-*
<div class="vus-fs-xs-12"></div>
<div class="vus-fs-sm-45"></div>
<div class="vus-fs-md-80"></div>
<div class="vus-fs-lg-90"></div>

缩略语

使用.vus-abbr或者.vus-acronym类,作为<abbr><acronym>标签样式,当鼠标悬停在缩写和缩写词上时就会显示完整内容,但需要包含title属性。

CSS是一种层叠样式表。
HTML是一种超文本标记语言。
<abbr class="vus-abbr" title="Cascading Style Sheets">
   CSS是一种层叠样式表。
</abbr>
<acronym class="vus-acronym" title="HyperText Markup Language">
   HTML是一种超文本标记语言。
</acronym>

地址

使用.vus-address类,作为<address>标签样式。在每行结尾添加<br>可以保留需要的样式。

地址:广东省阳春市迎宾大道
邮箱:172219093#qq.com
网站:www.vusui.com
<address class="vus-address">
   地址:广东省阳春市迎宾大道
   邮箱:172219093#qq.com
   网站:www.vusui.com
</address>

引用

使用.vus-blockquote类,作为<blockquote>标签样式,通过赋予.reverse类可以让引用呈现内容右对齐的效果。也可以使用.small类,作为<small>标签样式,用于标明引用来源。

菩提本无树,明镜亦非台

抽刀断水水更流,举杯销愁愁更愁。

《宣州谢脁楼饯别校书叔云》

关关雎鸠,在河之洲。窈窕淑女,君子好逑。

《关雎》
<blockquote class="vus-blockquote">
   <p>菩提本无树,明镜亦非台</p>
</blockquote>

<blockquote class="vus-blockquote">
   <p>抽刀断水水更流,举杯销愁愁更愁。</p>
   <small class="small">《宣州谢脁楼饯别校书叔云》</small>
</blockquote>

<blockquote class="vus-blockquote reverse">
   <p>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</p>
   <small class="small">《关雎》</small>
</blockquote>

引用颜色

  • 一些有代表意义的引用颜色类。
  • .success:成功。
  • .warning:警告。
  • .danger:危险、失败。
  • .info:信息。

人生若只如初见,何事秋风悲画扇。

问世间,情为何物,直教生死相许?

元好问《摸鱼儿·雁丘词 / 迈陂塘》

世人笑我忒风颠,我咲世人看不穿。

《桃花庵歌》

一生大笑能几回,斗酒相逢须醉倒。

<blockquote class="vus-blockquote success">
   <p>人生若只如初见,何事秋风悲画扇。</p>
</blockquote>

<blockquote class="vus-blockquote warning">
   <p>问世间,情为何物,直教生死相许?</p>
   <small class="small">元好问《摸鱼儿·雁丘词 / 迈陂塘》</small>
</blockquote>

<blockquote class="vus-blockquote reverse danger">
   <p>世人笑我忒风颠,我咲世人看不穿。</p>
   <small class="small">《桃花庵歌》</small>
</blockquote>

<blockquote class="vus-blockquote reverse info">
   <p>一生大笑能几回,斗酒相逢须醉倒。</p>
</blockquote>

引用提示

    使用.vus-blockquote-tips类,作为引用提示样式。

前方高能,请注意!

前方高能,请注意!
<blockquote class="vus-blockquote-tips">
   <p>前方高能,请注意!</p>
</blockquote>

<div class="vus-blockquote-tips">
   前方高能,请注意!
</div>