CSS Drop Cap Tutorial | Typografische Gestaltung

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.

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{{"Stylish Drop Cap Technik"}} css/colors -.-> lab-35193{{"Stylish Drop Cap Technik"}} css/fonts -.-> lab-35193{{"Stylish Drop Cap Technik"}} css/margin_and_padding -.-> lab-35193{{"Stylish Drop Cap Technik"}} css/width_and_height -.-> lab-35193{{"Stylish Drop Cap Technik"}} css/pseudo_classes -.-> lab-35193{{"Stylish Drop Cap Technik"}} css/pseudo_elements -.-> lab-35193{{"Stylish Drop Cap Technik"}} end

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.