CSS 首字下沉教程 | 排版设计

简介

在本实验中，我们将学习CSS中的首字下沉（Drop Cap）技术。首字下沉是一种排版技术，用于为第一段的首字母增添视觉吸引力。通过本实验，你将了解如何使用:first-child选择器和::first-letter伪元素，以独特且引人注目的方式为段落的首字母设置样式。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35193{{"时尚的首字下沉技术"}} css/colors -.-> lab-35193{{"时尚的首字下沉技术"}} css/fonts -.-> lab-35193{{"时尚的首字下沉技术"}} css/margin_and_padding -.-> lab-35193{{"时尚的首字下沉技术"}} css/width_and_height -.-> lab-35193{{"时尚的首字下沉技术"}} css/pseudo_classes -.-> lab-35193{{"时尚的首字下沉技术"}} css/pseudo_elements -.-> lab-35193{{"时尚的首字下沉技术"}} end

首字下沉

你可以在index.html和style.css中编写代码。

使第一段的首字母比文本的其余部分更大。

使用:first-child选择器仅选择第一段。
使用::first-letter伪元素为段落的第一个元素设置样式。

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo
  ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit.
  Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis
  libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit
  amet congue erat sodales commodo.
</p>
<p>
  Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae
  orci lectus. Nullam consectetur orci at pellentesque efficitur.
</p>

p:first-child::first-letter {
  color: #5f79ff;
  float: left;
  margin: 0 8px 0 4px;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}

总结

恭喜你！你已经完成了首字下沉实验。你可以在LabEx中练习更多实验来提升你的技能。