Texttransformation (CSS-Eigenschaft)

CSS text-transform Detaillierte Erläuterung der Attribute

Diese Eigenschaft wird verwendet, um die Fallumwandlung von Elementtextinhalten zu steuern.

Grammatik:

text-transform: capitalize | lowercase | none | uppercase | inherit;

Beschreibung:

text-transform Attribute definieren, wie der Textinhalt eines Elements in Großbuchstaben, Kleinbuchstaben oder Initialen umgewandelt wird.

Beispiel:

Die folgenden Stilregeln lassen den h1 Titel nur Großbuchstaben verwenden, während der erste Buchstabe jedes Wortes im Titel aktiviert ist: h2

h1 {
  text-transform: uppercase;
}
h2 {
  text-transform: capitalize;
}

Attributwert:

• capitalize: Konvertieren Sie den ersten Buchstaben jedes Wortes in Großbuchstaben;
• lowercase: Alle Zeichen in Kleinbuchstaben konvertieren.
• none: Es wird keine Fallkonvertierung durchgeführt.
• uppercase: Alle Zeichen in Großbuchstaben konvertieren.
• inherit: Erben Sie den Attributwert des übergeordneten Elements. text-transform

CSS

Attribut FAQ: text-transform

1.

text-transform Eigenschaften sind ein leistungsstarkes Tool, mit dem Sie den Textfall steuern können. Es kann verwendet werden, um den Text in Großbuchstaben, in Kleinbuchstaben zu ändern oder den Anfangsbuchstaben jedes Wortes zu produzieren. Diese Eigenschaft funktioniert, indem er den Originaltext nimmt und ihn basierend auf dem von Ihnen festgelegten Wert konvertiert. Wenn Sie beispielsweise den Wert auf "Großbuchstaben" festlegen, werden alle Buchstaben im Text in Großbuchstaben umgewandelt, unabhängig davon, wie sie ursprünglich eingegeben wurden.

text-transform 2.

Um den Text mit der CSS -Eigenschaft in Großbuchstaben zu ändern, legen Sie einfach den Wert der Eigenschaft auf "Großbuchstaben" fest. Hier ist ein Beispiel dafür, wie es geht: text-transform

In diesem Beispiel wird der gesamte Text im 'P' Element in Großbuchstaben umgewandelt.

text-transform

3.

p {
  text-transform: uppercase;
}

Ja, Sie können den Anfangsbuchstaben jedes Wortes mit dem CSS

-attribut nutzen. Dazu müssen Sie den Wert der Immobilie so festlegen, dass sie "Kapitalisieren" haben. Hier ist ein Beispiel: text-transform In diesem Beispiel wird der Anfangsbuchstaben jedes Wortes im 'H1' -Element aktiviert.

text-transform 4.

h1 {
  text-transform: capitalize;
}

Der Wert "Großbuchstaben" in

CSS

wandelt alle Buchstaben im Text in Großbuchstaben um, während der Wert "Kapital" nur den ersten Buchstaben jedes Wortes in Großbuchstaben umwandelt. Die verbleibenden Buchstaben im Wort bleiben in ihrem ursprünglichen Schreibzustand.

5. text-transform

Ja, Sie können den Text mit der CSS

-Sache in Kleinbuchstaben ändern. Dazu müssen Sie den Wert der Eigenschaft auf "Kleinbuchstaben" festlegen. Hier ist ein Beispiel: text-transform

text-transform: capitalize | lowercase | none | uppercase | inherit;

In diesem Beispiel wird der gesamte Text im 'Div' -Element in Kleinbuchstaben umgewandelt.

6. Kann die Wirkung des CSS -attribut unototiert werden? text-transform

Ja, der Effekt des CSS

-attributs kann nicht totiert werden. Dazu müssen Sie den Wert der Eigenschaft auf "keine" festlegen. Dies stellt den Text ohne Transformationen wieder in seinen ursprünglichen Zustand. text-transform

7. text-transform Ja, das CSS

-TRUTION kann für jedes HTML -Element verwendet werden, das Text enthält. Dies umfasst Elemente wie "P", "H1", "Div", "Span".

text-transform

8.

text-transform Nein, CSS Eigenschaft ändert den Originaltext nicht. Es ändert nur, wie Text auf dem Bildschirm angezeigt wird. Der Originaltext bleibt im HTML -Dokument unverändert.

text-transform 9. Kann ich gleichzeitig mehrere CSS -Attributwerte verwenden?

Nein, Sie können nur ein CSS gleichzeitig text-transform Attributwert verwenden. Wenn Sie versuchen, mehrere Werte zu verwenden, wird nur der letzte Wert angewendet.

10. text-transform

Ja, alle modernen Browser unterstützen CSS Eigenschaften, einschließlich Chrom, Firefox, Safari und Edge. Ältere Versionen dieser Browser unterstützen es jedoch möglicherweise nicht. Daher ist es besser, die Browserkompatibilität zu überprüfen, bevor Sie diese Eigenschaft verwenden. text-transform

Das obige ist der detaillierte Inhalt vonTexttransformation (CSS-Eigenschaft). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!