您现在的位置:首页 >> 前端 >> 内容

CSS_文本样式

时间:2017/1/25 10:24:03 点击:

  核心提示:text-align 水平对齐left/center/right左中右justify 两端对齐inherit 继承line-height 文本行间距行高不够时,行与行之间后重叠数字px 数字em数字%...

text-align 水平对齐

left/center/right左中右

justify 两端对齐

inherit 继承

line-height 文本行间距

行高不够时,行与行之间后重叠

数字px 数字em

数字% 基于字体大小的百分比

text-indent 缩进文本

数字% 父元素的百分比

数字px/数字em 固定值默认为0

inherit继承

letter-spacing 字母间距

normal 默认

数字px 固定值(可为负值)

inherit 继承

word-spacing 单词间距

normal 标准间距

数字px 固定值(可正可负)

inherit 继承

direction 文本方向

ltr 从左到右

rtl 从右到左(类似右对齐)

inherit 继承

text-transform 字符转换

capitalize 每个单词首字母大写

uppercase 全部大写

lowercase 全部小写

none 不做改动

text-decoration 文本装饰

underline 下划线

overline 上划线

line-through 在文本中间的贯穿线

blink 文本闪烁

none 关闭原本应用到一个元素上的所有装饰

white-space 处理空白符

normal 像正常的方式那样忽略换行和多余的空格

pre 可以实现pre标签的样式,不忽略空格和换行

nowrap 防止元素换行

pre-wrap 不仅会保留空白符并保留换行符,还允许自动换行

pre-line 保留换行符,并允许自动换行,但是会合并空白符,这是与 pre-wrap 值的不同之处。

他们的区别总结如下:

CSS_文本样式
<html>
    <head>
        <style type="text/css">
            p.normal{
                white-space:normal;
            }
            p.pre{
                white-space:pre;
            }
            p.nowrap{
                white-space:nowrap;
            }
            p.pre-wrap{
                white-space:pre-wrap;
            }
            p.pre-line{
                white-space:pre-line;
            }
        </style>
    </head>
    <body>
    <p class="normal" >normal: This is a normal line 
    This     paragraph has    many
    spaces           in it </p>

    <p class="pre" >pre: This is a normal line 
    This     paragraph has    many
    spaces           in it </p>

    <p class="nowrap" >newrap: This is a normal line 
    This     paragraph has    many
    spaces           in it </p>

        <p class="pre-wrap" >pre-wrap: This is a normal line 
    This     paragraph has    many
    spaces           in it </p>

        <p class="pre-line" >pre-line: This is a normal line 
    This     paragraph has    many
    spaces           in it </p>
    </body>
</html>
CSS_文本样式

Tags:CS SS S_ _文 
作者:网络 来源:twilight_k
  • 上一篇:Hibernate初级入门
  • 下一篇:表单页面设计