美文网首页
《HTML+CSS+JS 网页制作》- 段落属性

《HTML+CSS+JS 网页制作》- 段落属性

作者: 架构与我 | 来源:发表于2017-06-18 21:02 被阅读0次

    在网页布局当中,肯定会涉及到段落的相关处理,主要会包括单词间隔属性word-spacing、字符间隔属性letter-spacing、文字修饰属性text-decoration、垂直对齐方式属性vertical-align、水平对齐方式属性text-align、文本缩进属性text-indent和文本行高属性line-height。

    单词间隔属性word-spacing和字符间隔属性letter-spacing

    使用单词间隔属性可以控制单词之间的间隔距离,语法:

    word-spacing:取值

    其中取值可以是normal,或者具体的长度值,例如3px、5px等,默认值为normal。

    注意:word-spacing属性一般用于英文句子中。

    字符间隔属性是可以控制每个字符之间的间隔,语法:

    letter-spacing:取值

    其中取值跟单词间隔属性的取值是一样的。

    注意:letter-spacing属性一般用于中文句子中。

    例如:

    效果:

    文字修饰属性text-decoration

    如果需要对文字进行修饰时,可以用文字修饰属性,语法:

    text-decoration:取值

    其中取值可以有:

    none:表示不修饰,默认值;

    underline:表示对文字添加下划线效果;

    overline:表示对文字添加上划线的效果;

    line-through:表示对文字添加删除线效果。

    例如:

    效果:

    垂直对齐方式属性vertical-align

    垂直对齐方式属性vertical-align,语法如下:

    vertical-align:取值

    其中取值如下:

    sub:文字的下标;

    super:文字的上标;

    top:垂直靠上对齐;

    middle:垂直居中对齐;

    bottom:垂直靠下对齐。

    例如:

    效果:

    水平对齐方式属性text-align

    水平对齐方式属性text-align的语法:

    text-align:取值

    其中取值如下:

    left:左对齐;

    right:右对齐;

    center:居中对齐;

    justify:两端对齐。

    例如:

    效果:

    文本缩进属性text-indent

    CSS中可以控制段落首行缩进以及缩进距离,语法:

    text-indent:取值

    其中取值可以是一个具体的长度值,例如5px,也可以是百分比10%。

    例如:

    效果:

    文本行高属性line-height

    文本行高属性line-height是用于控制行与行之间的距离的,语法:

    line-height:取值

    其中取值可以具体的数值,例如20px,或者用百分比,例如10%。

    例如:

    效果:

    关注微信公众号

    相关文章

      网友评论

          本文标题:《HTML+CSS+JS 网页制作》- 段落属性

          本文链接:https://www.haomeiwen.com/subject/ufdwqxtx.html