3.4 案例实战

CSS3优化和增强了CSS2.1的字体和文本属性，使网页文字更具表现力和感染力，丰富了网页文本的样式和版式。

3.4.1 设计正文版式1

中文版式与西文版式存在很多不同。例如，中文段落文本缩进，而西文悬垂列表；中文段落一般没有段距，而西文习惯设置一行的段距等。中文报刊文章习惯以块的适度变化来营造灵活的设计版式，中文版式中，标题习惯居中显示，正文之前喜欢设计一个题引，题引为左右缩进的段落文本显示效果，正文以首字下沉效果显示。

本案例将展示一个简单的中文版式，分别设计一级标题、二级标题、三级标题和段落文本的样式，从而使信息的轻重分明，更有利于用户阅读，演示效果如图3.21所示。

【操作步骤】

第1步，设计网页结构。本案例的HTML文档结构依然采用禅意花园的结构，截取第一部分的结构和内容，并把英文全部译为中文。

图3.21 报刊式中文格式效果

第2步，定义网页基本属性。定义背景色为白色，字体为黑色。大多数浏览器默认网页就是这个样式，但是考虑到部分浏览器会以灰色背景显示，显式声明这些基本属性会更加安全。字体大小为14px，字体为宋体。

第3步，定义标题居中显示，适当调整标题底边距，统一为一个字距。间距设计的一般规律：字距小于行距，行距小于段距，段距小于块距。检查的方法可以尝试将网站的背景图案和线条全部去掉，看是否还能保持想要的区块感。

第4步，为二级标题定义一个下画线，并调暗字体颜色，目的是使一级标题、二级标题和三级标题在同一个中轴线显示时产生一个变化，避免单调。由于三级标题字数少（4个汉字），可以通过适当调节字距来设计一种平衡感，避免因为字数太少而使标题看起来很单调。

第5步，定义段落文本的样式。统一清除段落间距为0，定义行高为1.8倍字体大小。

第6步，定义第一文本块中的第一段文本字体为深灰色，定义第一文本块中的第二段文本右对齐，定义第一文本块中的第一段和第二段文本首行缩进两个字距，同时定义第二文本块的第一段、第二段和第三段文本首行缩进两个字距。

第7步，为第一个文本块定义左右缩进样式，设计引题的效果。

第8步，定义首字下沉效果。CSS提供了一个首字下沉的属性：first-letter，这是一个伪对象。什么是伪、伪类和伪对象，我们将在超链接设计章节中进行详细讲解。但是first-letter属性所设计的首字下沉效果存在很多问题，所以还需要进一步设计。例如，设置段落首字浮动显示（什么是浮动请参阅CSS布局章节讲解），同时定义文字字号很大，以实现下沉效果。为了使首字下沉效果更明显，这里设计首字加粗、反白显示。

注意：由于IE早期版本浏览器存在Bug，无法通过:first-letter选择器来定义首字下沉效果，故这里重新定义了一个首字下沉的样式类（first），然后手动把这个样式类加入HTML文档结构对应的段落中。

        <p class="p1 first"><span>不同浏览器随意定义标签，导致无法相互兼容的<acronym
        title="document object model">DOM</acronym>结构，或者提供缺乏标准支持的<acronym
        title="cascading style sheets">CSS</acronym>等陋习随处可见，如今当使用这些不兼容的标签和样式时，设计之路会很坎坷。</span></p>

提示：在阅读信息时，段落文本的呈现效果多以块状存在。如果说单个字是点，一行文本为线，那么段落文本就成面了，而面以方形呈现的效率最高，网站的视觉设计大部分其实都是在拼方块。在页面版式设计中，建议坚持如下设计原则。


方块感越强，越能给用户方向感。

方块越少，越容易阅读。

方块之间以空白的形式进行分隔，从而组合为一个更大的方块。


其他样式以及整个案例效果请参阅本节实例源代码。

3.4.2 设计正文版式2

本案例将展示一个简单的层级式中文版式，将一级标题、二级标题、三级标题和段落文本以阶梯状缩进，从而使信息的轻重分明，更有利于用户阅读，演示效果如图3.22所示。

【操作步骤】

第1步，复制3.4.1节示例源代码，删除所有的CSS内部样式表源代码。

第2步，定义页面的基本属性。这里定义页面背景色为灰绿浅色，前景色为深黑色，字体大小为0.875em（约为14px）。

图3.22 层级缩进式中文版式效果

第3步，统一标题为下画线样式，且不再加粗显示，限定上下边距为1个字距。在默认情况下，不同级别的标题上下边界是不同的。适当调整字距之间的疏密。

第4步，分别定义不同标题级别的缩进大小，设计阶梯状缩进效果。

第5步，定义段落文本左缩进，同时定义首行缩进效果。清除段落默认的上下边界距离。

上一章目录下一章