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

在网页布局当中,肯定会涉及到段落的相关处理,主要会包括单词间隔属性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%。

例如:

效果:

关注微信公众号

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,721评论 0 1
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,893评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,844评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,839评论 0 2