Wie ändere ich die Groß-/Kleinschreibung von Text in einem Absatz mit CSS?-CSS-Tutorial-php.cn

Wie ändere ich die Groß-/Kleinschreibung von Text in einem Absatz mit CSS?

王林

Freigeben： 2023-08-26 21:01:04

nach vorne

759 Leute haben es durchsucht

如何使用 CSS 更改段落中文本的大小写？

CSS (Cascading Style Sheets) ist ein leistungsstarkes Tool zur Steuerung des Layouts und der Darstellung von Text auf Ihrer Website. In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS die Groß-/Kleinschreibung von Text in einem Absatz ändern.

Wenn es darum geht, Text auf einer Website zu formatieren, besteht eine der grundlegenden und gebräuchlichen Styling-Optionen darin, die Groß-/Kleinschreibung von Text zu ändern. Dies können wir ganz einfach mit der Eigenschaft text-transform in CSS tun. Das Texttransformationsattribut kann einen der folgenden Werte annehmen -

„Capital“ schreibt den ersten Buchstaben jedes Wortes im ausgewählten Element groß.
„Capital“ wandelt den gesamten Text im ausgewählten Element in Großbuchstaben um.
„Kleinbuchstaben“ wandelt den gesamten Text im ausgewählten Element in Kleinbuchstaben um.

Um die Groß-/Kleinschreibung von Text in einem Absatz zu ändern, müssen wir zunächst das Absatzelement mit einem CSS-Selektor auswählen. Um beispielsweise die Groß- und Kleinschreibung von Text in einem Absatz in Großbuchstaben zu ändern, würden wir das folgende CSS verwenden:

p {
   text-transform: uppercase;
}

Nach dem Login kopieren

Beispiel

Hier ist ein Beispiel für die Verwendung von CSS zum Ändern der Groß-/Kleinschreibung von Text in einem Absatz.

<html>
<head>
   <title>Change the cases of text in paragraphs using CSS</title>
   <style>
      body{
         text-align:center;
      }
      .capitalize{
         color: blue;
         text-transform: capitalize;
      }
      .uppercase{
         color: red;
         text-transform: uppercase;
      }
      .lowercase{
         color: green;
         text-transform: lowercase;
      }
   </style>
</head>
<body>
   <h2>Change the cases of text in paragraphs using CSS</h2>
   <p class="capitalize">capitalize the first letter of each word in the selected element</p>
   <p class="uppercase">Converted all the text in the selected element to uppercase letters</p>
   <p class="lowercase">CONVERTED ALL THE TEXT IN SELECTES ELEMENT TO LOWERCASE LETTERS</p>
</body>
</html>

Nach dem Login kopieren

Fazit

Um die Groß-/Kleinschreibung von Text in einem Absatz zu ändern, ist die Eigenschaft text-transform in CSS eine hervorragende Möglichkeit, die Groß-/Kleinschreibung von Text in einem Absatz zu ändern.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Groß-/Kleinschreibung von Text in einem Absatz mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!