用過word，看過報紙的朋友，是不是對它們的首字下沉效果很感興趣？
有的時候適當的在web中使用些首字下沉的效果，能爲你的web增色不少。
通過僞對象:first-letter可以搞定這個效果：
［演示地址：http://www.doyoe.com/model/xhtmlcss/style/first.htm］
CSS部分：
.dyfirst {
width:300px;
border:1px solid #ddd;
padding:5px;
font-size:12px;
}
.dyfirst:first-line {
color:#050;
}
.dyfirst:first-letter {
font-size:300%;
font-weight:bold;
color:#000;
float:left;
}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="Author" content="飄零霧雨|[email protected]" />
<title>CSS Pseudo-Elements 搞定首字下沉</title>
</head>
<body>
<div class="dyfirst">
To the world you may be one person, but to one person you may be theworld. Never frown, even when you are sad, because you never know who is fallingin love with your smile.
</div>
</body>
</html>
以上的CSS只有.dyfirst:first-letter是用來做首字下沉效果的，其餘的兩個東東，只是爲了讓這個效果看起來更明顯。同時也把:first-line的用法寫了下，畢竟和:first-letter是“胞兄弟”，稱不離砣嘛。
用CSS Pseudo-Elements做首字下沉的原理大致就是這樣的，這只是一個演示，朋友們可以把效果做得更贊。
