首页 / CSS / CSS设置首字放大效果（代码实例）
CSS设置首字放大效果（代码实例）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS设置首字放大效果（代码实例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3803字，纯文字阅读大概需要6分钟。
内容图文
本章给大家介绍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>
</span>可以看到，各个段落的第一行文字都加上了下划线，此外，CSS属性中伪类别的具体使用方法还有很多。
内容总结
以上是互联网集市为您收集整理的CSS设置首字放大效果（代码实例）全部内容，希望文章能够帮你解决CSS设置首字放大效果（代码实例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。