网站建设之如何为段落中的第一个字符添加首字下沉?

在此答案中,我们共享了如何使用CSS代码为段落中的第一个字符添加首字下沉。在样式表文件中添加以下CSS代码,以对每个段落的第一个字符应用首字下沉。 CSS代码 1 2 3 4 5 6 7 8 9 10 .firstcharacter {   color: #903;   float: left;   font WP网站建设

在此答案中,我们共享了如何使用CSS代码为段落中的第一个字符添加首字下沉。在样式表文件中添加以下CSS代码,以对每个段落的第一个字符应用首字下沉。

CSS代码

1
2
3
4
5
6
7
8
9
10

.firstcharacter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

HTML代码

1
2
3
4
5
6
7
8

<p>
<span class=“firstcharacter”>L</span> orem ipsum dolor sit amet, consectetur
adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget
diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada.
Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et
suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien.
Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>

如果您不想添加任何CSS类,请在CSS代码下方应用。

1
2
3
4
5
6
7
8
9
10

p:first-child:first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

 

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/10505

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code