本章给大家介绍CSS如何设置首字放大效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
在很多的文章中,都有一个首字放大的效果,在CSS中同样可以实现该效果。
CSS中通过对第一个字,进行单独的设置从而实现该效果。
首字放大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;
}
首字放大示例,首字放大示例,首字放大示例,首字放大示例,
首字放大示例,首字放大示例,首字放大示例,首字放大示例,首字放大示例,
效果如下:
主要是通过float与对首字下沉进行控制,并且用标记,对首字设置单独的样式,从而到达突出显示的目的。
在CSS中还可以通过设置伪类别first-letter,来控制段落的第一个字母,也可以实现首字放大的效果,将如上代码的pspan改为p:first-letter。
首字放大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;
}
首字放大示例,首字放大示例,首字放大示例,
首字放大示例,首字放大示例,首字放大示例,首字放大示例,
首字放大示例,首字放大示例,首字放大示例,首字放大示例,
首字放大示例,
首字放大示例,首字放大示例,首字放大示例,首字放大示例,首字放大示例,
效果如下:
但是,设置了该属性的文字对一些其他的CSS样式支持得不好,所以,不推荐使用这种方法。
除了first-letter之外,伪类别first-line可以设置元素内第一行的样式风格,给如上代码添加一行代码。
首字放大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;
}
首字放大示例,首字放大示例,首字放大示例,
首字放大示例,首字放大示例,首字放大示例,首字放大示例,
首字放大示例,首字放大示例,首字放大示例,首字放大示例,
首字放大示例,
首字放大示例,首字放大示例,首字放大示例,首字放大示例,首字放大示例,
效果如下: