这篇文章将为大家详细讲解有关css如何实现段落排版,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
段落排版
缩进
中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:
p{text-indent:2em;}
注意:2em的意思就是文字的2倍大小
行间距(行高)
这一小节我们来学习一下另一个在段落排版中起重要作用的行间距(行高)属性(line-height),如下代码实现设置段落行间距为1.5倍。
p{line-height:1.5em;}
中文字间距、字母间距
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现,如下面代码:
h2{ letter-spacing:50px; }
注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。
如果我想设置英文单词之间的间距呢?可以使用 word-spacing来实现。如下代码:
h2{ word-spacing:50px; } ... <h2>welcome to imooc!</h2>
对齐
想为块状元素中的文本、图片设置居中样式吗?可以使用text-align样式代码,如下代码可实现文本居中显示。
h2{ text-align:center; } <h2>了不起的盖茨比</h2>
同样可以设置居左:
h2{ text-align:left; } <h2>了不起的盖茨比</h2>
还可以设置居右:
h2{ text-align:right; } <h2>了不起的盖茨比</h2>
图文环绕
在css中有一个常见的图文环绕效果。实现方式主要是通过float标签,将图片左浮动,或者右浮动。其相邻的文字,就会环绕图片排列,代码和效果如下:
竖排文字
使用writing-mode实现。writing-mode属性有两个值lr-tb和tb-rl,前者是默认的左-右、上-下,后者是上-下、右-左。
比如:
p{ writing-mode: tb-rl;}
可以结合direction排版。
首字下沉
伪对象:first-letter配合font-size、float可以制作首字下沉效果。
比如:
p:first-letter{ padding: 6px; font-size: 32pt; float: left;}
汉字注音
如果我们想为汉字注音,就可以使用ruby标签和ruby-align属性来实现,比如:
<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>
然后通过ruby-align设置其对齐方式。
关于“css如何实现段落排版”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。