【CSS】【13】文字的排版

本例讲解如何设置如下的文字样式，通过这个设置来了解文字的排版，效果图：

一、HTML内容：

<h1>《桃姐》简介</h1>
<div>
   <p>主演：刘德华 叶德娴 秦海璐 秦沛</p>
   <p>导演：许鞍华</p>
   <p>年代：2012</p>
</div>
<div>
    桃姐（叶德娴 饰）是侍候了李家数十年的老佣人，把第二代的少爷罗杰（刘德华 饰）抚养成人。罗杰从事电影制片人，五十多岁了仍然独身，而桃姐也继续照顾罗杰，成为习惯……一日，桃姐如常到街市买菜，回寓所煲汤、做好满桌的饭菜，在等待从内地出差回家的罗杰，桃姐看着窗外的街景打发时间 ，不知不觉间却竟昏迷在地上……桃姐醒来时发现自己身在医院，桃姐是中风了！一边手臂不能活动自如，必须利用物理治疗尽量恢复活动能力。 罗杰在百忙工作中为桃姐找合适老人院，期间巧遇昔日电影拍摄认识的草蜢哥（黄秋生 饰），桃姐出院来到老人院，环境陌生，院友怪异，桃姐强装镇定。罗杰工余常到老人院探桃姐，主仆闲话家常一如母子，仍保持互相揶揄调侃习惯，桃姐嘴硬心甜，院友羡慕。 罗杰特意带桃姐参加电影首映礼，桃姐首次刻意打扮准备，取收藏已久的名贵衣服出发赴会；首映礼上桃姐大开眼界，更终有机会见到电影明星，桃姐感叹自己有生之年已然无憾。

</div>

这是一个纯的HTML文本，它的效果图如下：

二、给第二个<div>的第一个字“桃”增加<span class="firstletter">标记，然后定义firstletter类选择器，使其大小为三个字母大小，并且向左浮动。

.firstletter
{
   font-size:3em;
   float:left;
}

效果如下：

观察到第二个<div>中的内容行高过于紧密，为了视觉看得舒服所以调整一下行高。

三、给第二个<div>定义info类选择器，使其字体为“宋体”，字的大小为12px，行高为18px

.info
{
   font-family:"Arial";
   font-size:12px;
   line-height:18px;
}

效果如下：

但会发现虽然行的高度有变化，但第一个字“桃”却不是原字体的三倍大小了，这是因为<span>是<div class="info">的孩子，由于div class="info"的行高设置为了18px，所以<span>所属的盒子的行高也就变为了18px。如何保证首字下沉三倍但其他它的行高为18px呢？其实很简单，把line-hieght设置为1.5即可（注意：这里1.5后面没有单位，这是一个百分比，即为父盒子的1.5倍）。

.info
{
   font-family:"Arial";
   font-size:12px;
line-height:1.5;
}

四、设置标题

h1
{
   background:#678;
   color:#FFFFFF;
   text-align:center;
}

即标题的背景色为#678，字体颜色为白色（#FFFFFF），文本居中对齐，效果如下：

五、设置第一个div的字体样式

.actors
{
   float:left;
   margin:10px;
   padding:10px
   margin-left:0px;
   background-color:#678;
}

文本设置为向左浮动，除左外边距的距离为0像素之外，内边距和外边距的距离均为10像素，背景色设置为#678，所以最终效果如下：

六、说明：

   的backgroud-color属性和backgroud属性一样，都是设置字体的背景颜色；font-family:"Arial","宋体";表示浏览器在解析时先按Arial字体解析，若不存在Arial字体，则按宋体解析，若也不存在宋体，则按浏览器的默认字体显示。

七、关于字体的一些问题可参见如下链接：

http://www.w3school.com.cn/css/css_text.asp

     本文转自qingkechina 51CTO博客，原文链接http://blog.51cto.com/qingkechina/1261761：，如需转载请自行联系原作者