全局样式typo/reset
定义全局性的 CSS 样式。
样式重置
统一所有浏览器的默认样式,避免一些兼容问题:
- 统一常用标签样式。
- 隐藏触摸阴影;修复触屏:鼠标事件延时触发问题。
- IOS:修复部分表单元素无法更改样式的问题。
- IE:隐藏图片蓝色边框;修复滚动条和IE 10(WP 8)不识别 `<meta name="viewport">`问题。
为保持核心小巧,不常用标签的样式重置被移到了:全局样式扩展。
默认样式
字体
另参考
标题
标题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
- 列表 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-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>
⏷
更多表格样式请参考表格。
水平线
可使用工具样式扩展提供的
.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>
⏷
其它块级标签
blockquote
<figure>figure</figure>
<address>address</address>
<blockquote>blockquote</blockquote>
⏷
用于表示名言引入的块级引用请参考块引用。
其它内联标签
code
strong
em
big
small
sup
sub
qins 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>
⏷