第7章 设计网页文本格式和段落版式
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.7 大小写
font-variant和text-transform
<style type="text/css"> .small-caps {/* 小型大写字母样式类 */ font-variant:small-caps; } </style> <p class="small-caps">font-variant </p> 示例： 7-10.html、 7-11.html
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.1 字体类型
font-family和font
body {/* 页面基本属性 */ font-family:Arial, Helvetica, sans-serif; /* 字体类型 */ } p {/* 段落样式 */ font:24px "隶书"; /* 24像素大小的隶书字体 */ }
7 设计网页文本格式和段落版式
文本是信息传递的主要载体，网页也不例外。传统桌面排版 中对于字体设计的要求是极高的，这不仅仅体现在字体的艺 术设计方面，更多的是重视字体的技术处理。网页排版源于 桌面印刷，但是技术要求就没有那么严格了。本章将从字体 的技术处理以及文本的格式化排版两个方面来讲解网页字体 的设计问题。
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.2 段落格式
7.2.3 字距和词距
letter-spacing和word-spacing 分别用来调整文本的字距和词距。
<style type="text/css"> .lspacing {/* 字距样式类 */ letter-spacing:1em; } .wspacing {/* 词距样式类 */ word-spacing:1em; } </style>
7.1 字体样式
7.1.5 斜体
CSS把斜体样式的重任赋予给了font-style属性：。 .italic {/* 斜体样式类 */ font-style:italic; /* 斜体 */ }
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.6 下划线
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.4 报刊式中文格式（示例：7-34.html）
设计思路：
中文报刊文章习惯以块的适度变化来营造灵活的设计版式，当然这要在 不影响读者的阅读习惯为前提。另外，中文版式中标题习惯居中显示， 正文之前喜欢设计一个题引，题引为左右缩进的段落文本显示效果，正 文的首字喜欢以首字下沉效果显示。 设计原则：
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.2 字体大小
font-size和font：
body {font-size:12px;} /* 以像素为单位设置字体大小 */ p {font-size:0.75em;} /* 以父辈字体大小为参考设置大小 */ div {font:9pt Arial, Helvetica, sans-serif;} /* 以点为单位设 置字体大小*/ 绝对单位和相对单位 像素（px）和百分比（%或em）
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.1 字体类型
设置字体类型时，注意两个问题： 第一，在font-family和font属性中，可以以列表的形式设 置字体类型。 p {font-family:"Times New Roman", Times, serif} 第二，对于英文字体（或其他西文字体）来说，CSS提供 了5类通用字体。
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.2 干练、洒脱的英文格式（示例：7-32.html）
设计思路： 下面我们在这个文档结构的基础上，调整页面风格，通过 增大前景色与背景色的对比度，调整标题行的对齐方式， 适当收缩行距，使页面看起来有些炫目、，行文也趋于紧 凑，这样页面风格就更具洒脱、干练。
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.3 层级式中文格式（示例：7-33.html）
设计思路： 中文阅读习惯与西文存在很多不同。如果仔细比较中西版 式的特点，你能够体会到这这种差异。例如，中文段落文 本喜欢缩进，而西文喜欢悬垂列表；中文段落一般没有段 距，而西文习惯设置一行的段距等。下面这个示例将展示 一个简单的层级式中文版式，把一级标题、二级标题、三 级标题和段落文本以阶梯状缩进，从而使信息的轻重分明， 更有利于读者阅读。
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.2 干练、洒脱的英文格式
设计步骤： 第一步，调整页面基本属性。加深背景色，增强前景色。 第二步，定义标题下边界为一个字符大小，以小型大写样 式显示，适当增加字距，定义字体为无衬线类型。 第三步，分别定义一级、二级和三级标题的样式。 第四步，收缩段落文本行的间距，压缩段落之间的间距， 适当减弱段落文本的颜色。
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.3 层级式中文格式
设计步骤：
第一步，首先还是先定义页面的基本属性。这里定义页面背景色为灰绿 浅色，前景色为深黑色，字体大小为0.875em（约为14px）。 第二步，统一标题为下划线样式，且不再加粗显示，限定上下边距为1 个字距。 第三步，分别定义不同标题级别的缩进大小，设计阶梯状缩进效果。 第四步，定义段落文本左缩进，同时定义首行缩进效果。另外，清除段 落默认的上下边界距离。
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
这是一个简单的段落文本示例。为了方便读者学习，我们 截 取 了 禅 意 花 园 （ http://www.csszengarden.com/ ） 的 HTML文档结构的第一部分。 示例：7-30.html
《网页制作与网站开发从入门到精通》配套视频
1. serif：衬线字体，衬线字体通常是变宽的，字体较明显的显示粗与细的笔划和装饰细 线。 2. sans-serif：无衬线字体，没有突变、交叉笔划或其它修饰线，无衬线字体通常是变 宽的，字体粗细笔划的变化不明显。 3. cursive：草体，表现为斜字型、联笔或其它草体的特征。看起来像是用手写笔或Biblioteka Baidu 子书写，而不是印刷出来。 4. fantasy：奇异字体，主要是装饰性的，但保持了字符的呈现效果，换句说就是艺术 字，用画写字，或者说字体象画。 5. monospace：等宽字体，唯一标准就是所有的字型宽度都是一样的。
方块感越强越能给读者方向感。 方块越少越容易阅读。 方块之间以空白的形式进行分隔，从而组合为一个更大的方块。
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.4 报刊式中文格式
设计步骤：
第一步，定义网页基本属性。定义背景色为白色，字体为黑色。 第二步，定义标题居中显示，适当调整标题底边距，统一为1个字距。间距设 计的一般规律：字距小于行距，行距小于段距，段距小于块距。 第三步，为二级标题定义一个下划线，并调暗字体颜色。目的就是使一级标题、 二级标题和三级标题在同一个中轴线显示时，产生一个变化，避免单调。 第四步，定义段落文本的样式。统一清除段落间距为0，定义行高为1.8倍字体 大小。 第五步，定义第一文本块中的第1段文本字体为深灰色，定义第一文本块中的 第2段文本右对齐，定义第一文本块中的第1、2段文本首行缩进2个字距，同时 定义第二文本块的第1、2、3段文本首行缩进2个字距。 第六步，为第1个文本块定义左右缩进样式，设计引题的效果。 第七步，定义首字下沉效果。
示例： 7-22.html
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.2 段落格式
7.2.4 行高
line-height
<style type="text/css"> .p1 {/* 行高样式类1 */ line-height:1em; /* 行高为1个字大小 */ } </style> 示例： 7-23.html~ 7-25.html
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.2 段落格式
7.2.1 水平对齐
text-align
<style type="text/css"> .center {/* 居中对齐样式类 */ text-align:center; } </style>
块元素居中： 7-14.html（兼容）
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.2 段落格式
7.2.2 垂直对齐
vertical-align
<style type="text/css"> . super { vertical-align:super;} </style> 示例： 7-16.html~ 7-18.html 块对齐： 7-19.html（不兼容） 表格对齐 ： 7-20.html（兼容） 不同对齐方式演示：7-21.html
奇怪的行高： 7-26.html 奇怪的行高解决方法：7-27.html
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.2 段落格式
7.2.5 首行缩进
首行缩进：text-indent。
示例： 7-28.html
悬垂缩进： 7-29.html
《网页制作与网站开发从入门到精通》配套视频
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.1 宁静、含蓄的英文格式
设计步骤： 第一步，规划整个页面的基本显示属性：背景色、前景色 （字体颜色）、字体基本类型、网页字体大小。 第二步，统一标题文本的样式。 第三步，为了区分不同级别标题的大小。这里以页面字体 大小（13px）为参考进行统一规划。 第四步，定义段落文本的行高为180%。疏朗的行距更有利 于深色背景下用户阅读体验。
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.1 宁静、含蓄的英文格式（示例：7-31.html）
设计思路： 以深黑色为底色，浅灰色为前景色，营造一种宁静、含蓄 的页面风格。字体以无衬线字体为主，这样给人感觉页面 比较干净，避免字体的衬线使页面看起来拖泥带水的感觉。 文本行以疏朗的风格进行设计。
text-decoration
<style type="text/css"> .underline {text-decoration:underline;} /* 下划线样式类 */ .overline {text-decoration:overline;} /* 上划线样式类 */ .line-through {text-decoration:line-through;} /* 删除线 样式类 */ </style> 示例： 7-9.html
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.4 字体粗细
font-weight：
.bold {/* 粗体样式类 */ font-weight:bold; /* 加粗显示 */ }
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.3 字体颜色
color：
body { color:gray;} /* 使用颜色名 */ p { color:#666666;} /* 使用十六进制 */ div { color:rgb(120,120,120);} /* 使用RGB */ span { color:rgb(50%,50%,50%);} /* 使用RGB */
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.7 大小写
font-variant和text-transform
<style type="text/css"> .small-caps {/* 小型大写字母样式类 */ font-variant:small-caps; } </style> <p class="small-caps">font-variant </p> 示例： 7-10.html、 7-11.html
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.1 字体类型
font-family和font
body {/* 页面基本属性 */ font-family:Arial, Helvetica, sans-serif; /* 字体类型 */ } p {/* 段落样式 */ font:24px "隶书"; /* 24像素大小的隶书字体 */ }
7 设计网页文本格式和段落版式
文本是信息传递的主要载体，网页也不例外。传统桌面排版 中对于字体设计的要求是极高的，这不仅仅体现在字体的艺 术设计方面，更多的是重视字体的技术处理。网页排版源于 桌面印刷，但是技术要求就没有那么严格了。本章将从字体 的技术处理以及文本的格式化排版两个方面来讲解网页字体 的设计问题。
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.2 段落格式
7.2.3 字距和词距
letter-spacing和word-spacing 分别用来调整文本的字距和词距。
<style type="text/css"> .lspacing {/* 字距样式类 */ letter-spacing:1em; } .wspacing {/* 词距样式类 */ word-spacing:1em; } </style>
7.1 字体样式
7.1.5 斜体
CSS把斜体样式的重任赋予给了font-style属性：。 .italic {/* 斜体样式类 */ font-style:italic; /* 斜体 */ }
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.6 下划线
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.4 报刊式中文格式（示例：7-34.html）
设计思路：
中文报刊文章习惯以块的适度变化来营造灵活的设计版式，当然这要在 不影响读者的阅读习惯为前提。另外，中文版式中标题习惯居中显示， 正文之前喜欢设计一个题引，题引为左右缩进的段落文本显示效果，正 文的首字喜欢以首字下沉效果显示。 设计原则：
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.2 字体大小
font-size和font：
body {font-size:12px;} /* 以像素为单位设置字体大小 */ p {font-size:0.75em;} /* 以父辈字体大小为参考设置大小 */ div {font:9pt Arial, Helvetica, sans-serif;} /* 以点为单位设 置字体大小*/ 绝对单位和相对单位 像素（px）和百分比（%或em）
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.1 字体类型
设置字体类型时，注意两个问题： 第一，在font-family和font属性中，可以以列表的形式设 置字体类型。 p {font-family:"Times New Roman", Times, serif} 第二，对于英文字体（或其他西文字体）来说，CSS提供 了5类通用字体。
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.2 干练、洒脱的英文格式（示例：7-32.html）
设计思路： 下面我们在这个文档结构的基础上，调整页面风格，通过 增大前景色与背景色的对比度，调整标题行的对齐方式， 适当收缩行距，使页面看起来有些炫目、，行文也趋于紧 凑，这样页面风格就更具洒脱、干练。
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.3 层级式中文格式（示例：7-33.html）
设计思路： 中文阅读习惯与西文存在很多不同。如果仔细比较中西版 式的特点，你能够体会到这这种差异。例如，中文段落文 本喜欢缩进，而西文喜欢悬垂列表；中文段落一般没有段 距，而西文习惯设置一行的段距等。下面这个示例将展示 一个简单的层级式中文版式，把一级标题、二级标题、三 级标题和段落文本以阶梯状缩进，从而使信息的轻重分明， 更有利于读者阅读。
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.2 干练、洒脱的英文格式
设计步骤： 第一步，调整页面基本属性。加深背景色，增强前景色。 第二步，定义标题下边界为一个字符大小，以小型大写样 式显示，适当增加字距，定义字体为无衬线类型。 第三步，分别定义一级、二级和三级标题的样式。 第四步，收缩段落文本行的间距，压缩段落之间的间距， 适当减弱段落文本的颜色。
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.3 层级式中文格式
设计步骤：
第一步，首先还是先定义页面的基本属性。这里定义页面背景色为灰绿 浅色，前景色为深黑色，字体大小为0.875em（约为14px）。 第二步，统一标题为下划线样式，且不再加粗显示，限定上下边距为1 个字距。 第三步，分别定义不同标题级别的缩进大小，设计阶梯状缩进效果。 第四步，定义段落文本左缩进，同时定义首行缩进效果。另外，清除段 落默认的上下边界距离。
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
这是一个简单的段落文本示例。为了方便读者学习，我们 截 取 了 禅 意 花 园 （ http://www.csszengarden.com/ ） 的 HTML文档结构的第一部分。 示例：7-30.html
《网页制作与网站开发从入门到精通》配套视频
1. serif：衬线字体，衬线字体通常是变宽的，字体较明显的显示粗与细的笔划和装饰细 线。 2. sans-serif：无衬线字体，没有突变、交叉笔划或其它修饰线，无衬线字体通常是变 宽的，字体粗细笔划的变化不明显。 3. cursive：草体，表现为斜字型、联笔或其它草体的特征。看起来像是用手写笔或Biblioteka Baidu 子书写，而不是印刷出来。 4. fantasy：奇异字体，主要是装饰性的，但保持了字符的呈现效果，换句说就是艺术 字，用画写字，或者说字体象画。 5. monospace：等宽字体，唯一标准就是所有的字型宽度都是一样的。
方块感越强越能给读者方向感。 方块越少越容易阅读。 方块之间以空白的形式进行分隔，从而组合为一个更大的方块。
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.4 报刊式中文格式
设计步骤：
第一步，定义网页基本属性。定义背景色为白色，字体为黑色。 第二步，定义标题居中显示，适当调整标题底边距，统一为1个字距。间距设 计的一般规律：字距小于行距，行距小于段距，段距小于块距。 第三步，为二级标题定义一个下划线，并调暗字体颜色。目的就是使一级标题、 二级标题和三级标题在同一个中轴线显示时，产生一个变化，避免单调。 第四步，定义段落文本的样式。统一清除段落间距为0，定义行高为1.8倍字体 大小。 第五步，定义第一文本块中的第1段文本字体为深灰色，定义第一文本块中的 第2段文本右对齐，定义第一文本块中的第1、2段文本首行缩进2个字距，同时 定义第二文本块的第1、2、3段文本首行缩进2个字距。 第六步，为第1个文本块定义左右缩进样式，设计引题的效果。 第七步，定义首字下沉效果。
示例： 7-22.html
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.2 段落格式
7.2.4 行高
line-height
<style type="text/css"> .p1 {/* 行高样式类1 */ line-height:1em; /* 行高为1个字大小 */ } </style> 示例： 7-23.html~ 7-25.html
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.2 段落格式
7.2.1 水平对齐
text-align
<style type="text/css"> .center {/* 居中对齐样式类 */ text-align:center; } </style>
块元素居中： 7-14.html（兼容）
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.2 段落格式
7.2.2 垂直对齐
vertical-align
<style type="text/css"> . super { vertical-align:super;} </style> 示例： 7-16.html~ 7-18.html 块对齐： 7-19.html（不兼容） 表格对齐 ： 7-20.html（兼容） 不同对齐方式演示：7-21.html
奇怪的行高： 7-26.html 奇怪的行高解决方法：7-27.html
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.2 段落格式
7.2.5 首行缩进
首行缩进：text-indent。
示例： 7-28.html
悬垂缩进： 7-29.html
《网页制作与网站开发从入门到精通》配套视频
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.1 宁静、含蓄的英文格式
设计步骤： 第一步，规划整个页面的基本显示属性：背景色、前景色 （字体颜色）、字体基本类型、网页字体大小。 第二步，统一标题文本的样式。 第三步，为了区分不同级别标题的大小。这里以页面字体 大小（13px）为参考进行统一规划。 第四步，定义段落文本的行高为180%。疏朗的行距更有利 于深色背景下用户阅读体验。
样吧视频教室（www.css8.cn）
7.3 网页文本格式实战
7.3.1 宁静、含蓄的英文格式（示例：7-31.html）
设计思路： 以深黑色为底色，浅灰色为前景色，营造一种宁静、含蓄 的页面风格。字体以无衬线字体为主，这样给人感觉页面 比较干净，避免字体的衬线使页面看起来拖泥带水的感觉。 文本行以疏朗的风格进行设计。
text-decoration
<style type="text/css"> .underline {text-decoration:underline;} /* 下划线样式类 */ .overline {text-decoration:overline;} /* 上划线样式类 */ .line-through {text-decoration:line-through;} /* 删除线 样式类 */ </style> 示例： 7-9.html
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.4 字体粗细
font-weight：
.bold {/* 粗体样式类 */ font-weight:bold; /* 加粗显示 */ }
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
《网页制作与网站开发从入门到精通》配套视频
样吧视频教室（www.css8.cn）
7.1 字体样式
7.1.3 字体颜色
color：
body { color:gray;} /* 使用颜色名 */ p { color:#666666;} /* 使用十六进制 */ div { color:rgb(120,120,120);} /* 使用RGB */ span { color:rgb(50%,50%,50%);} /* 使用RGB */