知启蒙开源平台

Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等，并在其上开发的大量UI组件组成的前端开发套件。
森中灵最后提交于3月前整理V8.0.6
text.htm19KB
<#def title = "文本样式"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等"/>
<#def prevUrl = "font.htm"/>
<#def nextUrl = "block.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
${zhiqim_com_head_end()}

${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}

<!--容器开始 -->
<div id="container" class="container">

${zhiqim_com_container_ui("ZmUI", "css", "text")}

<!--主体-->
<div id="mainbody" class="mainbody">

${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "文本样式")}

<!-- content开始 -->
<div id="mobileUI_content" class="content">

<!-- 左侧详情 -->
<div class="mobileUI-left">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
    <p class="z-text-blue">文本样式：</p>
    <p class="z-color-333" style="text-indent:38px;">
        文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等。
    </p>
</div>

<#-- 一、粗斜体上下标和删除线下划线文本 -->
<div class="tutorial title">一、粗斜体、上下标、删除线、下划线、标记字体、缩写效果等标签样式和定义样式</div>

<table class="z-table z-bordered z-pd10 z-px16">
<tr bgcolor="#f5f5f5">
    <td width="18%">名称</td>
    <td width="36%">样式</td>
    <td width="*">举例</td>
    <td width="20%">说明</td>
</tr>
<tr>
    <td class="z-samp">b</td>
    <td><pre class="z-text-preline">b{font-weight:bold;}</pre></td>
    <td><b>微软雅黑字体</b></td>
    <td>粗体</td>
</tr>
<tr>
    <td class="z-samp">i</td>
    <td><pre class="z-text-preline">i{font-style:italic;}</pre></td>
    <td><i>微软雅黑字体</i></td>
    <td>斜体</td>
</tr>
<tr>
    <td class="z-samp">u</td>
    <td><pre class="z-text-preline">u{text-decoration:underline;}</pre></td>
    <td><u>带下划线文本效果</u></td>
    <td>下划线体</td>
</tr>
<tr>
    <td class="z-samp">del</td>
    <td><pre class="z-text-preline">del{text-decoration:line-through;}</pre></td>
    <td><del>带删除线文本效果</del></td>
    <td>删除线体</td>
</tr>
<tr>
    <td class="z-samp">small</td>
    <td><pre class="z-text-preline">small{font-size:80%;}</pre></td>
    <td><small>这里是小号文本效果</small></td>
    <td>小号体，80%</td>
</tr>
<tr>
    <td class="z-samp">sup</td>
    <td><pre class="z-text-preline">sub,sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}<br>sup{top:-0.5em;}</pre></td>
    <td>文本上标效果<sup>superscript</sup></td>
    <td>上标</td>
</tr>
<tr>
    <td class="z-samp">sub</td>
    <td><pre class="z-text-preline">sub,sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}<br>sub{bottom:-0.25em;}</pre></td>
    <td>文本下标效果<sub>subscript</sub></td>
    <td>下标</td>
</tr>
<tr>
    <td class="z-samp">mark</td>
    <td><pre class="z-text-preline">mark{background:#ff0;color:#000;}</td>
    <td>这里是<mark>标记字体效果<mark></td>
    <td>标记体，颜色为通用的黑色+黄底#ffff00</td>
</tr>
<tr>
    <td class="z-samp">abbr[title]</td>
    <td><pre class="z-text-preline">abbr[title]{border-bottom:1px dotted;}<br>@-moz-document url-prefix(){abbr[title]{border-bottom:0;}}</pre></td>
    <td>这里是<abbr title="微软雅黑字体">MSYH</abbr>缩写效果</td>
    <td>缩写体，显示下划虚线，firefox原来就有，所以要用hack去掉</td>
</tr>
<tr>
    <td class="z-samp">.z-bold</td>
    <td><pre class="z-text-preline">.z-bold{font-weight:bold;}</pre></td>
    <td><span class="z-bold">这里是字体加粗效果</span></td>
    <td>粗体</td>
</tr>
<tr>
    <td class="z-samp">.z-italic</td>
    <td><pre class="z-text-preline">.z-italic{font-style:italic;}</pre></td>
    <td><span class="z-italic">这里是文本斜体效果</span></td>
    <td>斜体</td>
</tr>
<tr>
    <td class="z-samp">.z-underline</td>
    <td><pre class="z-text-preline">.z-underline{text-decoration:underline;}</pre></td>
    <td><span class="z-underline">带下划线文本效果</span></td>
    <td>下划线体</td>
</tr>
<tr>
    <td class="z-samp">.z-delline</td>
    <td><pre class="z-text-preline">.z-delline{text-decoration:line-through;}</pre></td>
    <td><span class="z-delline">带删除线文本效果</span></td>
    <td>删除线体</td>
</tr>
<tr>
    <td class="z-samp">.z-weight-normal</td>
    <td><pre class="z-text-preline">.z-weight-normal{font-weight:normal;}</pre></td>
    <td><span class="z-bold">粗体<span class="z-weight-normal">正常</span></span></td>
    <td>普通大小</td>
</tr>
<tr>
    <td class="z-samp">.z-style-normal</td>
    <td><pre class="z-text-preline">.z-style-normal{font-style:normal;}</pre></td>
    <td><span class="z-italic">斜体<span class="z-style-normal">正常</span></span></td>
    <td>普通样式</td>
</tr>
<tr>
    <td class="z-samp">.z-small</td>
    <td><pre class="z-text-preline">.z-small{font-size:80%;}</pre></td>
    <td><span class="z-small">这里是小号文本效果</span></td>
    <td>小号体，80%</td>
</tr>
<tr>
    <td class="z-samp">.z-sup</td>
    <td><pre class="z-text-preline">.z-sub,.z-sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}.z-sup{top:-0.5em;}</pre></td>
    <td>文本上标效果<span class="z-sup">superscript</span></td>
    <td>上标</td>
</tr>
<tr>
    <td class="z-samp">.z-sub</td>
    <td><pre class="z-text-preline">.z-sub,.z-sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}.z-sub{bottom:-0.25em;}</pre></td>
    <td>文本下标效果<span class="z-sub">subscript</span></td>
    <td>下标</td>
</tr>
<tr>
    <td class="z-samp">.z-mark</td>
    <td><pre class="z-text-preline">.z-mark{background:#ff0;color:#000;}</pre></td>
    <td>这里是<span class="z-mark">标记字体效果<mark></td>
    <td>标记体，颜色为通用的黑色+黄底#ffff00</td>
</tr>
<tr>
    <td class="z-samp">.z-abbr[title]</td>
    <td><pre class="z-text-preline">.z-abbr[title]{border-bottom:1px dotted;}</pre></td>
    <td>这里是<span class="z-abbr" title="微软雅黑字体">MSYH</span>缩写效果</td>
    <td>缩写体，显示下划虚线</td>
</tr>
</table>

<#-- 二、文本换行、不换行、省略和隐藏等属性 -->
<div class="tutorial title">二、文本换行、不换行、省略和隐藏等属性</div>

<table class="z-table z-bordered z-pd10 z-px14 z-relative-left">
<tr bgcolor="#f5f5f5">
    <td width="18%">名称</td>
    <td width="36%">样式</td>
    <td width="*">举例</td>
    <td width="20%">说明</td>
</tr>
<tr>
    <td class="z-samp">.z-text-break</td>
    <td><pre class="z-text-preline">.z-text-break{word-break:break-all; word-wrap:break-word;}</pre></td>
    <td class="z-text-break">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
    <td>国人是不管英文是不是单词的，直接换行</td>
</tr>
<tr>
    <td class="z-samp">.z-text-pre</td>
    <td><pre class="z-text-preline">.z-text-pre{white-space:pre;}</td>
    <td>
        <span class="z-pre z-text-pre">
            第一行第一行第一行第一行第一行
            第二行
            第三行
        </span>
    </td>
    <td>保留空白符列表，类似于&lt;pre&gt;，每行nowrap，撑大</td>
</tr>
<tr>
    <td class="z-samp">.z-text-prewrap</td>
    <td><pre class="z-text-preline">.z-text-prewrap{white-space:pre-wrap;}</td>
    <td>
        <span class="z-pre z-text-prewrap">
            第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行<br>
            第二行<br>
            第三行<br>
        </span>
    </td>
    <td>保留空白符列表，超时自动换行。</td>
</tr>
<tr>
    <td class="z-samp">.z-text-preline</td>
    <td><pre class="z-text-preline">.z-text-preline{white-space:pre-line;}</td>
    <td>
        <span class="z-pre z-text-preline">
            第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行<br>
            第二行<br>
            第三行<br>
        </span>
    </td>
    <td>合并空白符列表，但是保留换行符。如果第一个字符是\n，&lt;pre&gt;会清理，.z-text-preline不会，需借助JS删除该字符，:first-line设置行高为0时IE/Webkit可以,Firefox不行</td>
</tr>
<tr>
    <td class="z-samp">.z-text-nowrap</td>
    <td><pre class="z-text-preline">.z-text-nowrap{white-space:nowrap;}</td>
    <td class="z-text-nowrap">Except as required by law or in writing, the so</td>
    <td>不换行，会把td撑大，直到遇到 <br> 标签为止。</td>
</tr>
<tr>
    <td class="z-samp">.z-text-ellipsis</td>
    <td><pre class="z-text-preline">.z-text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;}</pre></td>
    <td><span class="z-bd z-w300 z-text-ellipsis">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
    <td>超过的显示省略号，缺点是必须指定宽度，且只能是一行</td>
</tr>
<tr>
    <td class="z-samp">
        .z-text-ellipsis<br>
        .z-text-ellipsis-line<br>
        .z-text-ellipsis-2line<br>
        .z-text-ellipsis-3line<br>
    </td>
    <td><pre class="z-text-preline">.z-text-ellipsis{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word;-webkit-line-clamp:1;}</pre></td>
    <td><span class="z-bd z-w300 z-text-ellipsis-2line">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
    <td>
    超过的显示省略号，为展示效果，最好依需要显示的行数指定行高、高度<br>
    因PC端兼容性较差，仅在 ZmUI 中定义
    </td>
</tr>
<tr>
    <td class="z-samp">.z-text-clip</td>
    <td><pre class="z-text-preline">.z-text-clip{text-overflow:clip;overflow:hidden;white-space:nowrap;display:inline-block;}</pre></td>
    <td><span class="z-bd z-w300 z-text-clip">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
    <td>超过的省略也不显示省略号，缺点是必须指定宽度，且只能是一行</td>
</tr>
</table>


<#-- 三、正文文本对齐方式 -->
<div class="tutorial title">三、正文文本对齐方式，其中z-为常用，zi-为优先</div>

<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="36%">样式</td>
    <td width="*">举例</td>
    <td width="20%">说明</td>
</tr>
<tr>
    <td class="z-samp">.z-text-left</td>
    <td><pre class="z-text-preline">.z-text-left{text-align:left;}</pre></td>
    <td class="z-text-left">文本左对齐<br>文本左对齐</td>
    <td>左对齐</td>
</tr>
<tr>
    <td class="z-samp">.z-text-center</td>
    <td><pre class="z-text-preline">.z-text-center{text-align:center;}</pre></td>
    <td class="z-text-center">文本居中对齐<br>文本居中对齐</td>
    <td>居中对齐</td>
</tr>
<tr>
    <td class="z-samp">.z-text-right</td>
    <td><pre class="z-text-preline">.z-text-right{text-align:right;}</pre></td>
    <td class="z-text-right">文本右对齐<br>文本右对齐</td>
    <td>右对齐</td>
</tr>
<tr>
    <td colspan="4" class="zi-text-cyan">以下为文本对齐优先</td>
</tr>
<tr>
    <td class="z-samp">.zi-text-left</td>
    <td><pre class="z-text-preline">.zi-text-left{text-align:left !important;}</pre></td>
    <td class="zi-text-left">文本左对齐<br>文本左对齐</td>
    <td>左对齐</td>
</tr>
<tr>
    <td class="z-samp">.zi-text-center</td>
    <td><pre class="z-text-preline">.zi-text-center{text-align:center !important;}</pre></td>
    <td class="zi-text-center">文本居中对齐<br>文本居中对齐</td>
    <td>居中对齐</td>
</tr>
<tr>
    <td class="z-samp">.zi-text-right</td>
    <td><pre class="z-text-preline">.zi-text-right{text-align:right !important;}</pre></td>
    <td class="zi-text-right">文本右对齐<br>文本右对齐</td>
    <td>右对齐</td>
</tr>
</table>


<#-- ；四、标题样式（h1-h3） -->
<div class="tutorial title">四、标题样式（h1-h3）</div>

<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="36%">样式</td>
    <td width="*">举例</td>
    <td width="20%">说明</td>
</tr>
<tr>
    <td class="z-samp">h1</td>
    <td><pre class="z-text-preline">h1{font-size:2em;margin:.67em 0;}</pre></td>
    <td><h1>微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</h1></td>
    <td>H1字体，上下边距14px</td>
</tr>
<tr>
    <td class="z-samp">h2</td>
    <td><pre class="z-text-preline">h2{font-size:1.5em;margin:.83em 0;}</pre></td>
    <td><h2>微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</h2></td>
    <td>H2字体，上下边距14px</td>
</tr>
<tr>
    <td class="z-samp">h3</td>
    <td><pre class="z-text-preline">h3{font-size:1.17em;margin:1em 0;}</pre></td>
    <td><h3>微软雅黑字体，20号字体<br>微软雅黑字体，22号字体</h3></td>
    <td>H3字体，上下边距14px</td>
</tr>
<tr>
    <td class="z-samp">.z-h1</td>
    <td><pre class="z-text-preline">.z-h1{font-size:0.32rem;line-height:normal;font-weight:bold;display:block;margin:0.2rem 0;}</pre></td>
    <td><span class="z-h1">微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</span></td>
    <td>模拟H1，当H1被覆盖时可以使用z-h1</td>
</tr>
<tr>
    <td class="z-samp">.z-h2</td>
    <td><pre class="z-text-preline">.z-h2{font-size:0.24rem;line-height:normal;font-weight:bold;display:block;margin:0.19rem 0;}</pre></td>
    <td><span class="z-h2">微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</span></td>
    <td>模拟H2，当H2被覆盖时可以使用z-h2</td>
</tr>
<tr>
    <td class="z-samp">.z-h3</td>
    <td><pre class="z-text-preline">.z-h3{font-size:0.18rem;line-height:normal;font-weight:bold;display:block;margin:0.18rem 0;}</pre></td>
    <td><span class="z-h3">微软雅黑字体，20号字体<br>微软雅黑字体，20号字体</span></td>
    <td>模拟H3，当H3被覆盖时可以使用z-h3</td>
</tr>
</table>

<#-- 五、文本编码样式 -->
<div class="tutorial title">五、文本编码样式（编码字体依次查找Consolas,"Courier New",monospace,Menlo,Monaco,"微软雅黑"）</div>

<table class="z-table z-bordered z-pd10 z-px14 z-relative-left">
<tr bgcolor="#f5f5f5">
    <td width="15%">名称</td>
    <td width="36%">样式</td>
    <td width="*">举例</td>
    <td width="20%">说明</td>
</tr>
<tr>
    <td class="z-samp">samp<br>.z-samp</td>
    <td>
    <pre class="z-text-preline">
        samp,.z-samp{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
    </pre>
    </td>
    <td>
        <samp>samp{font-family:"Courier New"}</samp><br><br>
        <span class="z-samp">.z-samp{border-radius:4px;}</span>
    </td>
    <td>无背景编码字体</td>
</tr>
<tr>
    <td class="z-samp">kbd<br>.z-kbd</td>
    <td>
    <pre class="z-text-preline">
        kbd,.z-kbd{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
        <code>kbd,.z-kbd{border-radius:4px;}</code>
        kbd,.z-kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.25);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.25);}
    </pre>
    </td>
    <td>
        <kbd>kbd{font-family:"Courier New"}</kbd><br><br>
        <span class="z-kbd">.z-kbd{border-radius:4px;}</span>
    </td>
    <td>黑背景白字键盘输入字体</td>
</tr>
<tr>
    <td class="z-samp">pre<br>.z-pre</td>
    <td>
    <pre class="z-text-preline">
        pre{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
        <code>pre{border-radius:4px;}</code>
        pre{overflow:auto;display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;word-break:break-all;word-wrap:break-word;color:#333;background-color:#f5f5f5;border:1px solid #cccccc;}
        pre code{padding:0;font-size:inherit;color:#c7254e;white-space:pre-wrap;background-color:transparent;border-radius:0;}
    </pre>
    </td>
    <td>
    <pre class="z-text-preline">
        pre{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
    </pre>
    <span class="z-pre z-text-preline"><code>.z-pre{border-radius:4px;}</code></span>
    </td>
    <td>预处理标记，默认是单行撑大、留白，这里增加了.z-text-preline，改为单行换行，留白合并<br><br>显示红色的为里面使用&lt;code&gt;封装</td>
</tr>
<tr>
    <td class="z-samp">code<br>.z-code</td>
    <td>
    <pre class="z-text-preline">
        code,.z-code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
        <code>code,.z-code{border-radius:4px;}</code>
        code,.z-code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;}
        pre code,.z-pre .z-code{padding:0;font-size:inherit;color:#c7254e;white-space:pre-wrap;background-color:transparent;border-radius:0;}
    </pre>
    </td>
    <td>
    <code class="z-text-preline">code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}</code><br><br>
    <span class="z-code z-text-preline">.z-code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}</span><br><br>
    <span class="z-pre z-text-preline"><span class="z-code">code{border-radius:4px;}</span></span>
    </td>
    <td>编码标记，默认是自动换行，且不保留空白<br><br>外边框是在显示红色的为使用&lt;pre&gt;内进行封装</td>
</tr>
</table>
</div>

<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
    <a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
    <div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
    <a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
    <div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}

<!-- content结束 -->
</div>

${zhiqim_com_chapter()}
<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>

${zhiqim_com_footer()}