css中怎么设置段落样式?

来自:互联网
时间:2019-11-11
阅读:

段落是文章的基本单位,也是网页的基本单位。段落的放置与效果的显示会影响到页面的布局和风格。CSS样式提供了多种属性,来实现对页面中段落文本的控制。

css设置段落样式的方法:

对齐方式通过 text-align属性进行设置,可以设置为左、中、右、两端对齐等,最常用的是左对齐,也是默认的对齐方式。

大纲级别的作用是修改段落的级别,可以把段落修改为标题 h1 ~ h6,设置为标题后,段落文本会加粗显示,同时字体大小也会发生变化。

在网页设计中,如果纯纯为了应用标题的样式,而把段落修改为标题,是笔者极力反对的作法,推荐使用CSS来控制样式。

缩进通过 text-indent属性进行设置,对于中文,最常用的就是首行缩进两个字符,文本到达容器边界而自动换行后,首行文本相对于其他行,会缩进两个字符。

当然,也可以设置为悬挂缩进,它跟普通缩进正好相反,首行文本相对于其他行,会突出两个字符。设置缩进时,建议使用 em 单位,这样,无论字体大小是多少,首行始终缩进 n个字符的宽度。如:

p  {
   text-indent: 2em;
}

间距用来设置两个段落之间的垂直距离,通过段落的上下外边距来设置,margin-top 用来设置段前间距,marging-bottom属性用来设置段后间距。

默认情况下,段落为块级元素,两个相邻的垂直外边距相遇后,会发生外间距合并。所以,要给段前、段后分别设置 1 倍的行间距,就可以这么写:

p  {
   mAIgin: 1em;
}

行距用来设置段落内发生换行后,两行文本基线间的垂直距离,实际上就是CSS中的行高,使用 line-height属性来设置。Word中的行间距是直接使用数字,而不是长度单位,因为这样会更灵活。在CSS中,也建议直接使用数字。如:

p{
  line-height: 2;
}

在CSS中,段落默认是块级元素,盒模型中的 width、height、padding、border、margin属性,都适用于段落。除了这些属性外,还可以设置段落的文字方向、背景、边框、多列等属性,也可以为段落应用鼠标特性、动画等属性。

返回顶部
顶部