揭秘CSS(第 1 版)
11.3.2 段落
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

构建网页版WORD

布局设计

目录树设计

正文设计

正文设计

段落

在 word 中,一般都是通过段落来组织文本,段落是十分重要的组成部分。而 word 中的段落,主要有字体和段落两大属性。本节重点介绍字体和段落属性,在CSS中的对应属性及应用方法。

字体属性

word中的字体属性包括字体、字形、字号、字体颜色、下划线、效果等,如图 11‑11 所示:

word中的字体属性
图11-11 word中的字体属性

字体通过 font-family属性进行设置,为属性设置两个值,并把英文字体写在前面,中文字体写在后面,实现中文和英文使用不同字体。如:

p  {
    font-family:  "Arial", "SimSun";
}

字形的可选值有常规、加粗、倾斜、加粗 倾斜,共 4 个选项。默认情况下,就是常规字形。把 font-weight属性设置为bold,可实现加粗效果。把 font-style属性设置为 italic 或 oblique,则可实现倾斜效果。而要实现加粗 倾斜的效果,单一属性就无法实现,就需要定义两个类选择器,一个用于定义加粗,一个用于定义倾斜。CSS代码如下:

.bold  {
    font-weight: bold;
}
.italic {
    font-style: italic;
}

然后,为段落应用这两个类,类名称之间用空格隔开即可。HTML代码如下:

<p class="bold italic ">…</p>

默认情况下,字体颜色为黑色,通过 color属性来改变字体颜色。可以使用预定义颜色名、或RGB颜色的十六进制表示法、数字表示法、百分比表示法,也可以使用RGBA、HSL、HSLA颜色。如:

p  {
    color:  black;
}

文本的下划线,可以通过 text-decoration: underline 来实现。但是,word 中的下划线种类繁多,而CSS的下划线就是一条线,类型单一,目前还无法模拟这么多的下划线类型,期待 text-decoration属性支持自定义线条或图像后,才能通过CSS实现该功能。

效果中的删除线,可以通过 text-decoration: line-through 来实现,而双删除线目前还无法实现。上标和下标无需CSS,可以分别通过HTML的标记 sup 和 sub 来实现。阴影、空心、阳文、阴文效果,都可以通过 text-shadow属性实现,在5.2.2节已经详细介绍,这里就不再赘述。

段落属性

word中的段落属性包括对齐方式、大纲级别、缩进、间距、行距等,如图 11‑12 所示:

word的段落属性
图11-12 word的段落属性

对齐方式通过 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属性,都适用于段落。除了这些属性外,还可以设置段落的文字方向、背景、边框、多列等属性,也可以为段落应用鼠标特性、动画等属性。具体的细节,读者可以参阅相关章节,限于篇幅,不再赘述。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验