美文网首页
《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 网页制作》- 段落属性

    在网页布局当中,肯定会涉及到段落的相关处理,主要会包括单词间隔属性word-spacing、字符间隔属性lette...

  • 无标题文章

    1.制作一个HTML文本格式元素标记的网页,设置段落及文字相应属性,段落标题设置超链接,当鼠标经过标题链接时,点击...

  • js基础

    1.网页 网页=html+css+js html:网页元素内容 css:控制网页样式 js:操作网页内容,实现功能...

  • CSS浮动(float)和定位(position)

    float属性 float属性经常用于制作Horizontal Menu(横向菜单)和实现多列式网页布局。属性le...

  • 这是我第一天的成果(记录用)

    1、前端是做什么的 前端是用 html+css+js技术制作但不限于PC/M端的网页/app,向用户呈现一个美观且...

  • 小白理解css中position属性及z-index属性

    在网页制作中,position属性的使用是非常重要的。所以熟悉这个属性也至关重要。 position属性共有四种不...

  • PHP初学者教程

    (1)熟悉HTML/CSS/JS等网页基本元素,完成阶段可自行制作简单的网页,对元素属性相对熟悉。 (2)理解动态...

  • PHP学习路线

    (1) 熟悉HTML/CSS/JS等网页基本元素,完成阶段可自行制作简单的网页,对元素属性相对熟悉。 1.HTML...

  • 2018-02-01

    2-4.#了解标签,为你的网页添加标题 ——————文章的段落用 标签,我又将学习使用标签制作文章...

  • margin 重叠问题

    在网页制作中我们经常用到margin属性,但我们有没有注意到在设置 margin 属性时会存在重叠问题呢?我们来看...

网友评论

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

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