排版

默认设置,段落,标题,文本,对字体颜色,锚文本的下划线,颜色,字体做了重写,均采用了最符合中国网站体验的12号字体和 Verdana, Arial, Helvetica, sans-serif 字体。行距22px。这些重写参考了,盛大,腾讯,百度,新浪等众多网站对css重写的选择。

演示

采用了符合中国人阅读习惯的font-size:12px像素字体,行距line-height:22px像素。字体font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;

级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。

<p>采用了符合中国人阅读习惯的font-size:12px像素字体,行距line-height:22px像素。字体font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;</p>

段落排版

h1~h6标签同strong标签一样在seo中具有提高文字权重的效果

演示

我是h1标签,在seo中我拥有最高的权重

我是h2标签,在seo中我拥有仅次于h1标签的权重

我是h3标签,在seo中我拥有仅次于h1,h2标签的权重

我是h4标签,在seo中我拥有仅次于h1,h2,h3标签的权重

我是h5标签,在seo中我拥有仅次于h1,h2,h3,h4标签的权重
<h1>我是h1标签,在seo中我拥有最高的权重</h1>
<h2>我是h2标签,在seo中我拥有仅次于h1标签的权重</h2>
<h3>我是h3标签,在seo中我拥有仅次于h1,h2标签的权重</h3>
<h4>我是h4标签,在seo中我拥有仅次于h1,h2,h3标签的权重</h4>
<h5>我是h5标签,在seo中我拥有仅次于h1,h2,h3,h4标签的权重</h5>

加粗

通过原生的<strong></strong>标签即可加粗,css加粗为font-weight:bold;<strong>...</strong> <b>在w3c新标准中已经不建议使用了

演示

这是一段加粗的文字
<strong>这是一段加粗的文字</strong>

下划线

可以通过css的text-decoration:underline; 实现同样的效果

演示

这是一段下划线的文字
<u>这是一段下划线的文字</u>

斜体

可以通过css的font-style:italic;实现同样的效果,<em>...</em> <i>在w3c新标准中已经不建议使用了

演示

这是一段斜体的文字
<em>这是一段斜体的文字</em>

删除线

可以通过css的text-decoration:line-through;实现同样的效果

演示

这是一段删除线文字
<del>这是一段删除线文字</del>

上标和下标

演示

上标的文字在文字位于右上方显示这是一段上标文字

下标的文字在文字位于右下方显示这是一段下标文字

<p>上标的文字在文字位于右上方显示<sup>这是一段上标文字</sup></p>
<p>下标的文字在文字位于右下方显示<sup>这是一段下标文字</sup></p>

文字加大,缩小

演示

这是一段加大号文字

这是一段小号文字

<p><big>这是一段加大号文字</big></p>
<p><small>这是一段小号文字</small></p>

引用

引用常常被用于评论中,在网页中非常常见,用<blockquote>就可以轻松实现一段美观的引用。

演示

级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。
通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
<blockquote>级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。
<blockquote>通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。</blockquote>
</blockquote>

abbr

标签常常用于关键字tag等地方,用<abbr>就可以轻松实现。

演示

css3 html5
<abbr>css3</abbr> <abbr>html5</abbr>

列表

无序列表ul

演示

  • 无序列表是这样表现的
  • 无序列表是点点点
  • 无序列表是没有罗马文字的
<ul>
<li>无序列表是这样表现的</li>
<li>无序列表是点点点</li>
<li>无序列表是没有罗马文字的</li>
</ul>

有序列表ol

演示

  1. 有序列表是这样表现的
  2. 有序列表不是是点点点
  3. 有序列表是有罗马文字的
<ol>
<li>有序列表是这样表现的</li>
<li>有序列表不是是点点点</li>
<li>有序列表是有罗马文字的</li>
</ol>

没有样式的<ul class="unstyled">

演示

  • 没有样式是这样表现的
  • 没有样式的列表什么也没有
  • 没有样式比较干净
<ul class="unstyled">
<li>没有样式是这样表现的</li>
<li>没有样式的列表什么也没有</li>
<li>没有样式比较干净</li>
</ul>

圈圈<ul class="circle">

演示

  • 圈圈列表是这样表现的
  • 圈圈列表是圈圈的
  • 圈圈列表跟点点很相似
<ul class="circle">
<li>圈圈列表是这样表现的</li>
<li>圈圈列表是圈圈的</li>
<li>圈圈列表跟点点很相似</li>
</ul>

方块<ul class="square">

演示

  • 圈圈列表是这样表现的
  • 圈圈列表是圈圈的
  • 圈圈列表跟点点很相似
<ul class="square">
<li>圈圈列表是这样表现的</li>
<li>圈圈列表是圈圈的</li>
<li>圈圈列表跟点点很相似</li>
</ul>

中文123<ul class="cjk">

演示

  • 中文123样式是这样表现的
  • 中文123样式的列表什么也没有
  • 中文123样式是用汉字一二三排序的
<ul class="cjk">
<li>中文123样式是这样表现的</li>
<li>中文123样式的列表什么也没有</li>
<li>中文123样式是用汉字一二三排序的</li>
</ul>

代码代码区间

演示

body{ background:white;}
<pre>body{ background:white;}</pre>

多行代码

演示

  1. body{
  2. background:white;
  3. font-size:13px;
  4. line-height:22px;
  5. }
<pre><ol><li>body{</li><li>background:white;</li><li>font-size:13px;</li><li>line-height:22px;</li><li>}</li></ol></pre>