CSS erster Brief

Ein Kaskadenstilblatt spielt eine wichtige Rolle bei der Dekoration des ersten Buchstabens des Wortes in HTML. Manchmal brauchen wir den Benutzer, der nach unserer Anforderung auf einen bestimmten Textstück achtet. Um diesen Zweck zu erreichen, verwenden wir die Textdekoration und die Auswirkungen auf den ersten Buchstaben des Wortes des Absatzes oder auf die Überschrift. Dies hilft dabei, den Fokus des Benutzers auf den relevanten Punkt auszulösen. Diese Auswahl erfolgt über den CSS :: Erstgeschichte, das CSS Pseudo-Element ist.

CSS Pseudo-Element

Es ist das Schlüsselwort, das dem Selektor hinzugefügt wird, mit dem Sie den bestimmten Abschnitt des ausgewählten Elements dekorieren oder stylen können. Die für dieses Styling verwendete grundlegende Syntax ist im Folgenden definiert:

Der Selektor in diesem Artikel repräsentiert den ersten Buchstaben des Wortes. Die Style-Eigenschaft umfasst auch die Bordereigenschaft, die Farbe, die Schriftart, der Rand, die Textdekoration, die Polsterung und die Hintergrundeigenschaft. Wir wenden die drei Haupteigenschaften im Hauptstil in diesem Leitfaden an.

Schriftart und Farbstil im ersten Buchstaben

Zunächst wenden wir die beiden Eigenschaften im ersten Buchstabenstyling an. Beginnend mit dem HTML -Eröffnungs -Tag deklarieren wir den Kopf und öffnen dann das Style -Tag. Da wir einen Einfluss auf den ersten Buchstaben anwenden müssen, muss es zum Zeitpunkt des Stylings erwähnt werden. Andernfalls wird der gesamte Text des Absatzes betroffen. Daher wird das „P“ für den Absatz zusammen mit der ersten Brieferklärung erwähnt. Die grüne Farbe und die Schriftgröße in Prozent werden angewendet.

Danach ist der Kopfabschnitt geschlossen. Das Body-Tag wird durch das zentrale ausgerichtete Tag ergänzt. Es ist ein Beispiel für das Inline -Styling. Im Körper fügen wir wieder eine Überschrift hinzu. Das Inline -CSS wird angewendet, um die Farbe darauf anzuwenden. Am Ende wird der Absatz hinzugefügt, in dem wir das Styling angewendet haben. Wir können auch jeden Stil auf den ersten Buchstaben der Überschrift wie im Absatz anwenden.

Code:

Speichern Sie den Code und führen Sie ihn im Browser aus. Sie werden die resultierende Webseite sehen, auf der der erste Buchstabe des Absatzes im Vergleich zum Rest des Textes größer ist und seine Farbe geändert wird. Diese Stiländerung ist nützlich, um den Fokus des Lesers abzulenken.

Ausgang:

Grenzstil im ersten Brief

Der zweite Weg, um den ersten Buchstaben herauszustellen, besteht darin, eine quadratische Form oder einen Rand um den ersten Buchstaben des Textes anzuwenden. Lassen Sie uns näher darauf eingehen, wie es funktioniert.

Dieses Mal nehmen wir die beiden Möglichkeiten, den ersten Buchstaben zu stylen, indem wir einen Stil auf die Überschrift anwenden und den anderen auf den Absatz anwenden. Innerhalb des Style-Tags wird der gleiche Wert der ersten Buchstaben auf die Überschrift „H3“ deklariert. Der Randstil ist auf „solide“ eingestellt.

Code:

In ähnlicher Weise wenden wir im ersten Buchstaben des Absatzes den Grenzstil als doppelt an. Wir können auch einen einfachen oder den gepunkteten Rand anwenden, indem wir den Namen des Grenzstils durch das „gepunktete“ Wort ersetzen. Im Körper werden eine Überschrift und ein Absatz deklariert, wobei beide den Dummy -Text enthalten, um die Auswirkungen anzuzeigen, die wir auf sie angewendet haben. Speichern Sie die Datei des Texteditors und führen Sie sie dann im Standardbrowser aus.

Ausgang:

Sie werden sehen, dass in der Überschrift der erste Buchstabe „T“ ist und er mit einem soliden Grenze gestaltet ist. Sie können auch mehr Effekte auf die Grenze anwenden, wie die Grenzefarbe usw. Dies wird im Vergleich zum gesamten Text mehr anziehen. Der Absatz hat den ersten Brief "L" von "Lorem". Dies wird durch die doppelte Grenze gestaltet.

Notiz: Beide Randeffekte werden auf den ersten Buchstaben des ersten Wortes angewendet, wie wir in CSS erwähnt haben. Wenn jedoch die Definition der ersten Buchstaben entfernt wird, wird der Rand entweder in der Überschrift oder im Absatz auf den gesamten Text angewendet.

Textdekorationsstil im ersten Brief

Der erste Buchstabe des Textes kann auch durch Dekorieren des Textes gestylt werden. Diesmal verwenden wir den ersten Buchstaben der Liste. Jede Liste wird von einem anderen Stil der Textdekoration betroffen. CSS -Textdekorationseigenschaft hat mehrere Aspekte; Wir werden mit der Textdekorationslinie gehen.

Betrachten Sie zunächst den Körperabschnitt des HTML -Code. Zwei einfache Überschriften werden angewendet. Achten Sie darauf, dass wir eine einfache Liste deklarieren. Aus den beiden Arten von Listen verwenden wir hier eine ungeordnete Liste. Der

Tag wird deklariert. In den Tags der ungeordneten Liste deklarieren wir die Listen mit dem Tag
• .

  1 2 3 4 5

  Shiza Ahsan

  Alle drei Listen werden im Tag von deklariert

  . Jede Liste ist separat geschlossen und nach der Erklärung aller Listen,
  wird angewandt. Jede Liste wird mit einem ID -Namen angewendet. Der Stil des ersten Buchstabens wird angewendet, indem jedes Beispiel identifiziert wird, wenn wir die verschiedenen Stile für jede Zeile in der Liste anwenden.

  HTML Quelltext:

  Wenn die IDs aus der Liste entfernt werden, wird ein einzelner Stil auf alle Zeilen in der Liste angewendet. Schließen Sie nun den Körperabschnitt. Gehen Sie zum Kopfabschnitt des HTML -Körpers.

  Innerhalb des Style -Tags wird die Farbe der Überschrift angewendet. Es ist ein optionaler Effekt, nur die Arbeit zu erklären. Der ganze Körper wird vom Stil angewendet, um sich auf der linken Seite der Webseite auszurichten.

  1 2 3 4 5

  Ul li Rand: 15px;

  Ein gemeinsamer Effekt, der auf alle Zeilen in der Liste angewendet wird, ist ein Randeffekt. Um den Abstand zwischen zwei Zeilen in der Liste zu halten, wenden wir diesen Effekt an. Danach wird jede Zeile in der Liste in den verschiedenen Stilen angewendet. In Beispiel1 -ID wenden wir beispielsweise die Auswirkung der Textdekoration mit einer unterstreichen auf dem ersten Buchstaben an.

  1 2 3 4 5

  #Beispiel1 :: Erstgeschichte Textdekoration: Unterstreichung gepunktet;

  In ähnlicher Weise werden Beispiel2 und Beispiel3 durch die Textdekoration einer roten Linie durch den Buchstaben angewendet. Während die dritte Zeile in der Liste einen überaus blauen Effekt hat.

  CSS -Code:

  Speichern Sie nach dem Hinzufügen aller Effekte den Code und wir führen die Datei aus. Der erste Buchstabe "S" des Wortes 'Shiza "hat eine gepunktete Linie darunter. Der erste Buchstabe „S“ der zweiten Zeile hat eine rote Linie durch sie. Und das „Z“ von Zaroon enthält eine blaue Linie, die darüber vorbeikommt.

  Ausgang:

  Abschluss

  Das CSS -erste Buchstaben des Textes in HTML spielt eine wichtige Rolle bei der Ausleitung der Aufmerksamkeit des Benutzers. In diesem Artikel geben wir kurz die grundlegende Einführung in den Erstgeschichte aus, das ein Element der CSS-Pseudo-Eigenschaft ist. Diese Art der Eigenschaft hat mehrere Kategorien. Wir können jeden anwenden, um den ersten Buchstaben hervorzuheben. Die drei angewendeten Eigenschaften sind der Schriftart und den Farb-Effekt, der Randeffekt und die textdekorationale Eigenschaft mit unterschiedlichen Stilen und Farben der Linien, die unter oder durch die ersten Buchstaben verlaufen.