<#def title = "文本样式"/> <#def keyword = "ZhiqimUI"/> <#def desc = "文本样式是指对文本文字增加样式规则,如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等"/> <#def prevUrl = "ico.htm"/> <#def nextUrl = "block.htm"/> ${zhiqim_com_header()} ${zhiqim_com_topnav()}
${zhiqim_com_ui("tutorial", "ui", "css", "text")}
${zhiqim_com_breadcrumb("文库", "教程", "文本样式")}
<#-- 标题 -->

文本样式:

文本样式是指对文本文字增加样式规则,如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等。

<#-- 一、粗斜体上下标和删除线下划线文本 -->
一、粗斜体、上下标、删除线、下划线、标记字体、缩写效果等标签样式和定义样式
名称 样式 举例 说明
b
b{font-weight:bold;}
微软雅黑字体 粗体
i
i{font-style:italic;}
微软雅黑字体 斜体
u
u{text-decoration:underline;}
带下划线文本效果 下划线体
del
del{text-decoration:line-through;}
带删除线文本效果 删除线体
small
small{font-size:80%;}
这里是小号文本效果 小号体,80%
sup
sub,sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}
sup{top:-0.5em;}
文本上标效果superscript 上标
sub
sub,sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}
sub{bottom:-0.25em;}
文本下标效果subscript 下标
mark
mark{background:#ff0;color:#000;}
这里是标记字体效果 标记体,颜色为通用的黑色+黄底#ffff00
abbr[title]
abbr[title]{border-bottom:1px dotted;}
@-moz-document url-prefix(){abbr[title]{border-bottom:0;}}
这里是MSYH缩写效果 缩写体,显示下划虚线,firefox原来就有,所以要用hack去掉
.z-bold
.z-bold{font-weight:bold;}
这里是字体加粗效果 粗体
.z-italic
.z-italic{font-style:italic;}
这里是文本斜体效果 斜体
.z-underline
.z-underline{text-decoration:underline;}
带下划线文本效果 下划线体
.z-delline
.z-delline{text-decoration:line-through;}
带删除线文本效果 删除线体
.z-small
.z-small{font-size:80%;}
这里是小号文本效果 小号体,80%
.z-sup
.z-sub,.z-sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}.z-sup{top:-0.5em;}
文本上标效果superscript 上标
.z-sub
.z-sub,.z-sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}.z-sub{bottom:-0.25em;}
文本下标效果subscript 下标
.z-mark
.z-mark{background:#ff0;color:#000;}
这里是标记字体效果 标记体,颜色为通用的黑色+黄底#ffff00
.z-abbr[title]
.z-abbr[title]{border-bottom:1px dotted;}
这里是MSYH缩写效果 缩写体,显示下划虚线
<#-- 二、文本换行、不换行、省略和隐藏等属性 -->
二、文本换行、不换行、省略和隐藏等属性
名称 样式 举例 说明
.z-text-break
.z-text-break{word-break:break-all; word-wrap:break-word;}
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. 国人是不管英文是不是单词的,直接换行
.z-text-pre
.z-text-pre{white-space:pre;}
第一行第一行第一行第一行第一行 第二行 第三行 保留空白符列表,类似于<pre>,每行nowrap,撑大
.z-text-prewrap
.z-text-prewrap{white-space:pre-wrap;}
第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行
第二行
第三行
保留空白符列表,超时自动换行。
.z-text-preline
.z-text-preline{white-space:pre-line;}
第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行
第二行
第三行
合并空白符列表,但是保留换行符。如果第一个字符是\n,<pre>会清理,.z-text-preline不会,需借助JS删除该字符,:first-line设置行高为0时IE/Webkit可以,Firefox不行
.z-text-nowrap
.z-text-nowrap{white-space:nowrap;}
Except as required by law or in writing, the so 不换行,会把td撑大,直到遇到
标签为止。
.z-text-ellipsis
.z-text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;}
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. 超过的显示省略号,缺点是必须指定宽度,且只能是一行
.z-text-clip
.z-text-clip{text-overflow:clip;overflow:hidden;white-space:nowrap;display:inline-block;}
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. 超过的省略也不显示省略号,缺点是必须指定宽度,且只能是一行
<#-- 三、正文文本对齐方式 -->
三、正文文本对齐方式,其中z-为常用,zi-为优先
名称 样式 举例 说明
.z-text-left
.z-text-left{text-align:left;}
文本左对齐
文本左对齐
左对齐
.z-text-center
.z-text-center{text-align:center;}
文本居中对齐
文本居中对齐
居中对齐
.z-text-right
.z-text-right{text-align:right;}
文本右对齐
文本右对齐
右对齐
以下为文本对齐优先
.zi-text-left
.zi-text-left{text-align:left !important;}
文本左对齐
文本左对齐
左对齐
.zi-text-center
.zi-text-center{text-align:center !important;}
文本居中对齐
文本居中对齐
居中对齐
.zi-text-right
.zi-text-right{text-align:right !important;}
文本右对齐
文本右对齐
右对齐
<#-- ;四、标题样式(h1-h3) -->
四、标题样式(h1-h3)
名称 样式 举例 说明
h1
h1{font-size:24px;color:#333;line-height:150%;}

微软雅黑字体,24号字体
微软雅黑字体,24号字体

H1字体,上下边距14px
h2
h2{font-size:22px;color:#333;line-height:150%;}

微软雅黑字体,22号字体
微软雅黑字体,22号字体

H2字体,上下边距14px
h3
h3{font-size:20px;color:#333;line-height:150%;}

微软雅黑字体,20号字体
微软雅黑字体,22号字体

H3字体,上下边距14px
.z-h1
.z-h1{font-size:24px;color:#333;line-height:150%;display:block;margin:14px 0;font-weight:bold;}
微软雅黑字体,24号字体
微软雅黑字体,24号字体
模拟H1,当H1被覆盖时可以使用z-h1
.z-h2
.z-h2{font-size:22px;color:#333;line-height:150%;display:block;margin:14px 0;font-weight:bold;}
微软雅黑字体,22号字体
微软雅黑字体,22号字体
模拟H2,当H2被覆盖时可以使用z-h2
.z-h3
.z-h3{font-size:20px;color:#333;line-height:150%;display:block;margin:14px 0;font-weight:bold;}
微软雅黑字体,20号字体
微软雅黑字体,20号字体
模拟H3,当H3被覆盖时可以使用z-h3
<#-- 五、正文文本字体大小(px10-px30) -->
五、正文文本字体大小(px10-px30),其中z-为常用,zi-为优先
名称 样式 举例
.z-px10
.z-px10{font-size:10px;}
微软雅黑字体,10号字体
微软雅黑字体,10号字体
.z-px11
.z-px11{font-size:11px;}
微软雅黑字体,11号字体
微软雅黑字体,11号字体
.z-px12
.z-px12{font-size:12px;}
微软雅黑字体,12号字体
微软雅黑字体,12号字体
.z-px13
.z-px13{font-size:13px;}
微软雅黑字体,13号字体
微软雅黑字体,13号字体
.z-px14
.z-px14{font-size:14px;}
微软雅黑字体,14号字体
微软雅黑字体,14号字体
.z-px15
.z-px15{font-size:15px;}
微软雅黑字体,15号字体
微软雅黑字体,15号字体
.z-px16
.z-px16{font-size:16px;}
微软雅黑字体,16号字体
微软雅黑字体,16号字体
.z-px17
.z-px17{font-size:17px;}
微软雅黑字体,17号字体
微软雅黑字体,17号字体
.z-px18
.z-px18{font-size:18px;}
微软雅黑字体,18号字体
微软雅黑字体,18号字体
.z-px19
.z-px19{font-size:19px;}
微软雅黑字体,19号字体
微软雅黑字体,19号字体
.z-px20
.z-px20{font-size:20px;}
微软雅黑字体,20号字体
微软雅黑字体,20号字体
.z-px22
.z-px22{font-size:22px;}
微软雅黑字体,22号字体
微软雅黑字体,22号字体
.z-px24
.z-px24{font-size:24px;}
微软雅黑字体,24号字体
微软雅黑字体,24号字体
.z-px26
.z-px26{font-size:26px;}
微软雅黑字体,26号字体
微软雅黑字体,26号字体
.z-px30
.z-px30{font-size:30px;}
微软雅黑字体,30号字体
微软雅黑字体,30号字体
以下为文本优先zi-px10 - zi-px30
.zi-px10
.zi-px10{font-size:10px !important;}
微软雅黑字体,10号字体
微软雅黑字体,10号字体
.zi-px11
.zi-px11{font-size:11px !important;}
微软雅黑字体,11号字体
微软雅黑字体,11号字体
.zi-px12
.zi-px12{font-size:12px !important;}
微软雅黑字体,12号字体
微软雅黑字体,12号字体
.zi-px13
.zi-px13{font-size:13px !important;}
微软雅黑字体,13号字体
微软雅黑字体,13号字体
.zi-px14
.zi-px14{font-size:14px !important;}
微软雅黑字体,14号字体
微软雅黑字体,14号字体
.zi-px15
.zi-px15{font-size:15px !important;}
微软雅黑字体,15号字体
微软雅黑字体,15号字体
.zi-px16
.zi-px16{font-size:16px !important;}
微软雅黑字体,16号字体
微软雅黑字体,16号字体
.zi-px17
.zi-px17{font-size:17px !important;}
微软雅黑字体,17号字体
微软雅黑字体,17号字体
.zi-px18
.zi-px18{font-size:18px !important;}
微软雅黑字体,18号字体
微软雅黑字体,18号字体
.zi-px19
.zi-px19{font-size:19px !important;}
微软雅黑字体,19号字体
微软雅黑字体,19号字体
.zi-px20
.zi-px20{font-size:20px !important;}
微软雅黑字体,20号字体
微软雅黑字体,20号字体
.zi-px22
.zi-px22{font-size:22px !important;}
微软雅黑字体,22号字体
微软雅黑字体,22号字体
.zi-px24
.zi-px24{font-size:24px !important;}
微软雅黑字体,24号字体
微软雅黑字体,24号字体
.zi-px26
.zi-px26{font-size:26px !important;}
微软雅黑字体,26号字体
微软雅黑字体,26号字体
.zi-px30
.zi-px30{font-size:30px !important;}
微软雅黑字体,30号字体
微软雅黑字体,30号字体
<#-- 六、行高定义 -->
六、行高定义(像素高度 & 百分比高度)
名称 样式 举例 说明
行高定义lh10-lh40
.z-lh10
.zi-lh10
        .z-lh10{height:10px;}
        .zi-lh10{height:10px !important;}
    
行高
行高
行高10px
.z-lh12
.zi-lh12
        .z-lh12{height:12px;}
        .zi-lh12{height:12px !important;}
    
行高
行高
行高12px
.z-lh14
.zi-lh14
        .z-lh14{height:14px;}
        .zi-lh14{height:14px !important;}
    
行高
行高
行高14px
.z-lh15
.zi-lh15
        .z-lh15{height:15px;}
        .zi-lh15{height:15px !important;}
    
行高
行高
行高15px
.z-lh16
.zi-lh16
        .z-lh16{height:16px;}
        .zi-lh16{height:16px !important;}
    
行高
行高
行高16px
.z-lh18
.zi-lh18
        .z-lh18{height:18px;}
        .zi-lh18{height:18px !important;}
    
行高
行高
行高18px
.z-lh20
.zi-lh20
        .z-lh20{height:20px;}
        .zi-lh20{height:20px !important;}
    
行高
行高
行高20px
.z-lh22
.zi-lh22
        .z-lh22{height:22px;}
        .zi-lh22{height:22px !important;}
    
行高
行高
行高22px
.z-lh25
.zi-lh25
        .z-lh25{height:25px;}
        .zi-lh25{height:25px !important;}
    
行高
行高
行高25px
.z-lh28
.zi-lh28
        .z-lh28{height:28px;}
        .zi-lh28{height:28px !important;}
    
行高
行高
行高28px
.z-lh30
.zi-lh30
        .z-lh30{height:30px;}
        .zi-lh30{height:30px !important;}
    
行高
行高
行高30px
.z-lh35
.zi-lh35
        .z-lh35{height:35px;}
        .zi-lh35{height:35px !important;}
    
行高
行高
行高35px
.z-lh40
.zi-lh40
        .z-lh40{height:40px;}
        .zi-lh40{height:40px !important;}
    
行高
行高
行高40px
行高百分比
.z-lh100p
.zi-lh100p
        .z-lh100p{line-height:100%;}
        .zi-lh100p{line-height:100% !important;}
    
行高
行高
行高100%
.z-lh110p
.zi-lh110p
        .z-lh110p{line-height:110%;}
        .zi-lh110p{line-height:110% !important;}
    
行高
行高
行高110%
.z-lh120p
.zi-lh120p
        .z-lh120p{line-height:120%;}
        .zi-lh120p{line-height:120% !important;}
    
行高
行高
行高120%
.z-lh130p
.zi-lh130p
        .z-lh130p{line-height:130%;}
        .zi-lh130p{line-height:130% !important;}
    
行高
行高
行高130%
.z-lh140p
.zi-lh140p
        .z-lh140p{line-height:140%;}
        .zi-lh140p{line-height:140% !important;}
    
行高
行高
行高140%
.z-lh150p
.zi-lh150p
        .z-lh150p{line-height:150%;}
        .zi-lh150p{line-height:150% !important;}
    
行高
行高
行高150%
.z-lh180p
.zi-lh180p
        .z-lh180p{line-height:180%;}
        .zi-lh180p{line-height:180% !important;}
    
行高
行高
行高180%
.z-lh200p
.zi-lh200p
        .z-lh200p{line-height:200%;}
        .zi-lh200p{line-height:200% !important;}
    
行高
行高
行高200%
.z-lh250p
.zi-lh250p
        .z-lh250p{line-height:250%;}
        .zi-lh250p{line-height:250% !important;}
    
行高
行高
行高250%
<#-- 七、文本编码样式 -->
七、文本编码样式(编码字体依次查找Consolas,"Courier New",monospace,Menlo,Monaco,"微软雅黑")
名称 样式 举例 说明
samp
.z-samp
        samp,.z-samp{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
    
samp{font-family:"Courier New"}

.z-samp{border-radius:4px;}
无背景编码字体
kbd
.z-kbd
        kbd,.z-kbd{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
        kbd,.z-kbd{border-radius:4px;}
        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);}
    
kbd{font-family:"Courier New"}

.z-kbd{border-radius:4px;}
黑背景白字键盘输入字体
pre
.z-pre
        pre{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
        pre{border-radius:4px;}
        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{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
    
.z-pre{border-radius:4px;}
预处理标记,默认是单行撑大、留白,这里增加了.z-text-preline,改为单行换行,留白合并

显示红色的为里面使用<code>封装
code
.z-code
        code,.z-code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
        code,.z-code{border-radius:4px;}
        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;}
    
code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}

.z-code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}

code{border-radius:4px;}
编码标记,默认是自动换行,且不保留空白

外边框是在显示红色的为使用<pre>内进行封装
${zhiqim_com_chapter()}
${zhiqim_com_footer()}