Teal TealUI

全局样式typo/reset

定义全局性的 CSS 样式。

样式重置
默认样式
字体
标题
段落
列表
表格
水平线
图片
代码
表单
HTML5 新标签
其它块级标签
其它内联标签

样式重置

统一所有浏览器的默认样式,避免一些兼容问题:

  1. 统一常用标签样式。
  2. 隐藏触摸阴影;修复触屏:鼠标事件延时触发问题。
  3. IOS:修复部分表单元素无法更改样式的问题。
  4. IE:隐藏图片蓝色边框;修复滚动条和IE 10(WP 8)不识别 `<meta name="viewport">`问题。

为保持核心小巧,不常用标签的样式重置被移到了:全局样式扩展

默认样式

字体

<a>描点</a>
<a href="###" title="链接">链接</a>
另参考

标题

标题1(Heading 1)副标题(Subheading)

标题2(Heading 2)副标题(Subheading)

标题3(Heading 3)副标题(Subheading)

标题4(Heading 4)副标题(Subheading)

标题5(Heading 5)副标题(Subheading)
标题6(Heading 6)副标题(Subheading)
<h1>标题1(Heading 1)<small>副标题(Subheading)</small></h1>
<h2>标题2(Heading 2)<small>副标题(Subheading)</small></h2>
<h3>标题3(Heading 3)<small>副标题(Subheading)</small></h3>
<h4>标题4(Heading 4)<small>副标题(Subheading)</small></h4>
<h5>标题5(Heading 5)<small>副标题(Subheading)</small></h5>
<h6>标题6(Heading 6)<small>副标题(Subheading)</small></h6>

段落

美丽的雪花飞舞起来了。我已经有三年不曾见着它。

去年在福建,仿佛比现在更迟一点,也曾见过雪。但那是远处山顶的积雪,可不是飞舞的雪花。在平原上,它只是偶然的随着雨点洒下来几颗,没有落到地面的时候。它的颜色是灰的,不是白色;它的重量像是雨点,并不会飞舞。一到地面,它立刻融成了水,没有痕迹,也未尝跳跃,也未尝发出唏嘘的声音,像江浙一带下雪时的模样。这样的雪,在四十年来第一次看见它的老年的福建人,诚然能感到特别的意味,谈得津津有味,但在我,却总觉得索然。"福建下过雪",我可没有这样想过。

我喜欢眼前飞舞着的上海的雪花。它才是"雪白"的白色,也才是花一样的美丽。它好像比空气还轻,并不从半空里落下来,而是被空气从地面卷起来的。然而它又像是活的生物,像夏天黄昏时候的成群的蚊蚋(ruì),像春天酿蜜时期的蜜蜂,它的忙碌的飞翔,或上或下,或快或慢,或粘着人身,或拥入窗隙,仿佛自有它自己的意志和目的。它静默无声。但在它飞舞的时候,我们似乎听见了千百万人马的呼号和脚步声,大海汹涌的波涛声,森林的狂吼声,有时又似乎听见了儿女的窃窃私语声,礼拜堂的平静的晚祷声,花园里的欢乐的鸟歌声……它所带来的是阴沉与严寒。但在它的飞舞的姿态中,我们看见了慈善的母亲,活泼的孩子,微笑的花儿,和暖的太阳,静默的晚霞……它没有气息。但当它扑到我们面上的时候,我们似乎闻到了旷野间鲜洁的空气的气息,山谷中幽雅的兰花的气息,花园里浓郁的玫瑰的气息,清淡的茉莉花的气息……在白天,它做出千百种婀娜的姿态;夜间,它发出银色的光辉,照耀着我们行路的人,又在我们的玻璃窗上扎扎地绘就了各式各样的花卉和树木,斜的,直的,弯的,倒的。还有那河流,那天上的云…

<h2 style="text-align: center;"></h2>
<p style="text-indent: 2em;">美丽的雪花飞舞起来了。我已经有三年不曾见着它。</p>
<p style="text-indent: 2em;">去年在福建,仿佛比现在更迟一点,也曾见过雪。但那是远处山顶的积雪,可不是飞舞的雪花。在平原上,它只是偶然的随着雨点洒下来几颗,没有落到地面的时候。它的颜色是灰的,不是白色;它的重量像是雨点,并不会飞舞。一到地面,它立刻融成了水,没有痕迹,也未尝跳跃,也未尝发出唏嘘的声音,像江浙一带下雪时的模样。这样的雪,在四十年来第一次看见它的老年的福建人,诚然能感到特别的意味,谈得津津有味,但在我,却总觉得索然。"福建下过雪",我可没有这样想过。</p>
<p style="text-indent: 2em;">我喜欢眼前飞舞着的上海的雪花。它才是"雪白"的白色,也才是花一样的美丽。它好像比空气还轻,并不从半空里落下来,而是被空气从地面卷起来的。然而它又像是活的生物,像夏天黄昏时候的成群的蚊蚋(ruì),像春天酿蜜时期的蜜蜂,它的忙碌的飞翔,或上或下,或快或慢,或粘着人身,或拥入窗隙,仿佛自有它自己的意志和目的。它静默无声。但在它飞舞的时候,我们似乎听见了千百万人马的呼号和脚步声,大海汹涌的波涛声,森林的狂吼声,有时又似乎听见了儿女的窃窃私语声,礼拜堂的平静的晚祷声,花园里的欢乐的鸟歌声……它所带来的是阴沉与严寒。但在它的飞舞的姿态中,我们看见了慈善的母亲,活泼的孩子,微笑的花儿,和暖的太阳,静默的晚霞……它没有气息。但当它扑到我们面上的时候,我们似乎闻到了旷野间鲜洁的空气的气息,山谷中幽雅的兰花的气息,花园里浓郁的玫瑰的气息,清淡的茉莉花的气息……在白天,它做出千百种婀娜的姿态;夜间,它发出银色的光辉,照耀着我们行路的人,又在我们的玻璃窗上扎扎地绘就了各式各样的花卉和树木,斜的,直的,弯的,倒的。还有那河流,那天上的云…</p>

列表

  • 列表1
  • 列表 2
    • 列表 2.1
    • 列表 2.2
  1. 列表1
  2. 列表 2
列表1
列表 1-1
列表 1-2
列表2
列表 2-1
列表 2-2
列表3
列表 3-1
列表 3-2
<ul>
    <li>列表1</li>
    <li>
        列表 2
        <ul>
            <li>列表 2.1</li>
            <li>列表 2.2</li>
        </ul>
    </li>
</ul>
<ol>
    <li>列表1</li>
    <li>列表 2</li>
</ol>
<dl>
    <dt>列表1</dt>
    <dd>列表 1-1</dd>
    <dd>列表 1-2</dd>
    <dt>列表2</dt>
    <dd>列表 2-1</dd>
    <dd>列表 2-2</dd>
    <dt>列表3</dt>
    <dd>列表 3-1</dd>
    <dd>列表 3-2</dd>
</dl>

更多列表样式请参考列表

表格

表 1-1
表格 1-1 表格 1-2
表格 2-1 表格 2-2
表格 3-1 表格 3-2
<table>
    <caption>表 1-1</caption>
    <tr>
        <th>表格 1-1</th>
        <th>表格 1-2</th>
    </tr>
    <tr>
        <td>表格 2-1</td>
        <td>表格 2-2</td>
    </tr>
    <tr>
        <td>表格 3-1</td>
        <td>表格 3-2</td>
    </tr>
</table>

更多表格样式请参考表格

水平线


<hr>

可使用工具样式扩展提供的 .x-dotted 等更改线条样式。

图片

<a href="###"><img src="../../../assets/resources/150x150.png" /></a>
<img src="../../../assets/resources/150x150.png" style="border-radius: 4px" />
<img src="../../../assets/resources/150x150.png" style="border-radius: 50%;" />

更多图片样式请参考缩略图视频缩略图用户头像

代码

我是文字 Code Ctrl+D x - y Done

var x = 1;
var y = 2;
function fn(){
    return 4;
}
<p>
    我是文字
    <code>Code</code>
    <kbd>Ctrl+D</kbd>
    <var>x - y</var>
    <samp>Done</samp>
</p>
<pre><code>var x = 1;
var y = 2;
function fn(){
    return 4;
}
</code></pre>

表单

表单默认样式:

请输入:
标签 文字
<p>
    表单默认样式:
    <input type="radio" />
    <input type="checkbox" />
    <label>请输入:</label>
    <input type="text" placeholder="文本框" />
    <input type="file" />
    <select>
        <optgroup label="选择组">
            <option>选择框1</option>
            <option>选择框2</option>
        </optgroup>
        <option>选择框1</option>
        <option>选择框2</option>
    </select>
    <input type="button" value="input 按钮" />
    <button>button 按钮</button>
</p>
请输入:<textarea>文本域</textarea>
<fieldset>
    <legend>标签</legend>
    文字
</fieldset>

更多美化的表单样式请参考表单布局

HTML5 新标签

图表
点我展开

我是被展开的内容

<figure>
    图表
</figure>
<input type="search" />
<input type="number" />
<input type="range" />
<progress value="0.8"></progress>
<details>
    <summary>点我展开</summary>
    <p>我是被展开的内容</p>
</details>
<template>
    template 不应该被显示
</template>
<audio>audio</audio>
<audio controls="controls" src="../../../assets/resources/horse.ogg">audio</audio>
<video controls="controls" src="../../../assets/resources/horse.ogg" >video</video>

其它块级标签

figure
address
blockquote
<figure>figure</figure>
<address>address</address>
<blockquote>blockquote</blockquote>

用于表示名言引入的块级引用请参考块引用

其它内联标签

文本: code strong em big small sup sub del cite abbr dfn u i b q ins mark
文本:
<code>code</code>
<strong>strong</strong>
<em>em</em>
<big>big</big>
<small>small</small>
<sup>sup</sup>
<sub>sub</sub>
<del>del</del>
<cite>cite</cite>
<abbr title="我是说明">abbr</abbr>
<dfn>dfn</dfn>
<u>u</u>
<i>i</i>
<b>b</b>
<q>q</q>
<ins>ins</ins>
<mark>mark</mark>