本例讲解如何设置如下的文字样式，通过这个设置来了解文字的排版，效果图：
一、HTML内容：
<h1>《桃姐》简介</h1>
<div>
<p>主演：刘德华 叶德娴 秦海璐 秦沛</p>
<p>导演：许鞍华</p>
<p>年代：2012</p>
</div>
<div>
桃姐（叶德娴 饰）是侍候了李家数十年的老佣人，把第二代的少爷罗杰（刘德华 饰）抚养成人。罗杰从事电影制片人，五十多岁了仍然独身，而桃姐也继续照顾罗杰，成为习惯……一日，桃姐如常到街市买菜，回寓所煲汤、做好满桌的饭菜，在等待从内地出差回家的罗杰，桃姐看着窗外的街景打发时间 ，不知不觉间却竟昏迷在地上……桃姐醒来时发现自己身在医院，桃姐是中风了！一边手臂不能活动自如，必须利用物理治疗尽量恢复活动能力。 罗杰在百忙工作中为桃姐找合适老人院，期间巧遇昔日电影拍摄认识的草蜢哥（黄秋生 饰），桃姐出院来到老人院，环境陌生，院友怪异，桃姐强装镇定。罗杰工余常到老人院探桃姐，主仆闲话家常一如母子，仍保持互相揶揄调侃习惯，桃姐嘴硬心甜，院友羡慕。 罗杰特意带桃姐参加电影首映礼，桃姐首次刻意打扮准备，取收藏已久的名贵衣服出发赴会；首映礼上桃姐大开眼界，更终有机会见到电影明星，桃姐感叹自己有生之年已然无憾。
<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;
}
{
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;
}
{
background:#678;
color:#FFFFFF;
text-align:center;
}
即标题的背景色为#678，字体颜色为白色（#FFFFFF），文本居中对齐，效果如下：
五、设置第一个div的字体样式
.actors
{
float:left;
margin:10px;
padding:10px
margin-left:0px;
background-color:#678;
}
{
float:left;
margin:10px;
padding:10px
margin-left:0px;
background-color:#678;
}
文本设置为向左浮动，除左外边距的距离为0像素之外，内边距和外边距的距离均为10像素，背景色设置为#678，所以最终效果如下：
六、说明：
的backgroud-color属性和backgroud属性一样，都是设置字体的背景颜色；font-family:"Arial","宋体";表示浏览器在解析时先按Arial字体解析，若不存在Arial字体，则按宋体解析，若也不存在宋体，则按浏览器的默认字体显示。
七、关于字体的一些问题可参见如下链接：
本文转自qingkechina 51CTO博客，原文链接http://blog.51cto.com/qingkechina/1261761：，如需转载请自行联系原作者
