LabEx
LoginBeitreten

Stylish Drop Cap Technik

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir die Drop-Cap-Technik in CSS kennenlernen. Drop Cap ist eine typografische Technik, die verwendet wird, um dem ersten Buchstaben des ersten Absatzes visuelle Attraktivität zu verleihen. Durch dieses Lab werden Sie verstehen, wie Sie den :first-child-Selector und das ::first-letter-Pseudo-Element verwenden, um den ersten Buchstaben eines Absatzes auf eine einzigartige und auffällige Weise zu gestalten.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 92% von den Lernenden erhalten.

Drop Cap

Sie können den Code in index.html und style.css schreiben.

Lässt den ersten Buchstaben des ersten Absatzes größer erscheinen als der Rest des Textes.

  • Verwenden Sie den :first-child-Selector, um nur den ersten Absatz auszuwählen.
  • Verwenden Sie das ::first-letter-Pseudo-Element, um das erste Element des Absatzes zu gestalten.
<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;
}

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Drop-Cap-Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.