本章给大家介绍CSS如何设置首字放大效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
在很多的文章中，都有一个首字放大的效果，在CSS中同样可以实现该效果。
CSS中通过对第一个字，进行单独的设置从而实现该效果。
<html>
<head>
<title>首字放大</title>
<style>
body{
background-color:black;
}
p{
font-size:15px;
color:white;
}
p span{
font-size:60px;
float:left;
padding-right:5px;
font-weight:bold;
font-family:黑体;
color:yellow;
}
</style>
</head>
<body>
<p><span>首</span>字放大示例，首字放大示例，首字放大示例，首字放大示例，</p>
<p>首字放大示例，首字放大示例，首字放大示例，首字放大示例，首字放大示例，</p>
</body>
</html>
效果如下：
主要是通过float与对首字下沉进行控制，并且用<span>标记，对首字设置单独的样式，从而到达突出显示的目的。
在CSS中还可以通过设置伪类别first-letter，来控制段落的第一个字母，也可以实现首字放大的效果，将如上代码的pspan改为p:first-letter。
<html>
<head>
<title>首字放大</title>
<style>
body{
background-color:black;
}
p{
font-size:15px;
color:white;
}
p:first-letter{
font-size:60px;
float:left;
padding-right:5px;
font-weight:bold;
font-family:黑体;
color:yellow;
}
</style>
</head>
<body>
<p><span>首</span>字放大示例，首字放大示例，首字放大示例，
首字放大示例，首字放大示例，首字放大示例，首字放大示例，
首字放大示例，首字放大示例，首字放大示例，首字放大示例，
首字放大示例，</p>
<p>首字放大示例，首字放大示例，首字放大示例，首字放大示例，首字放大示例，</p>
</body>
</html>
效果如下：
但是，设置了该属性的文字对一些其他的CSS样式支持得不好，所以，不推荐使用这种方法。
除了first-letter之外，伪类别first-line可以设置元素内第一行的样式风格，给如上代码添加一行代码。
<html>
<head>
<title>首字放大</title>
<style>
body{
background-color:black;
}
p{
font-size:15px;
color:white;
}
p:first-letter{
font-size:60px;
float:left;
padding-right:5px;
font-weight:bold;
font-family:黑体;
color:yellow;
}
p:first-line{
text-decoration:underline;
}
</style>
</head>
<body>
<p><span>首</span>字放大示例，首字放大示例，首字放大示例，
首字放大示例，首字放大示例，首字放大示例，首字放大示例，
首字放大示例，首字放大示例，首字放大示例，首字放大示例，
首字放大示例，</p>
<p>首字放大示例，首字放大示例，首字放大示例，首字放大示例，首字放大示例，</p>
</body>
</html>
效果如下：
