css如何让网站首字放大？

本章给大家介绍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>

效果如下：