CSS -Texteinstellungen

Einzug ist definiert als der zusätzliche Raum zu Beginn der Linie. In CSS ist der Textindent als zusätzlicher Platz zu Beginn der ersten Zeile definiert. Wir verwenden die Eigenschaft „Text-Indent“, um die Eindrücke in der ersten Zeile des Absatzes anzuwenden. Wir setzen seinen Wert in "PX", "EM" oder auch in "%". Wir setzen auch einen negativen Wert für diese Einrückungs-Text-Eigenschaft. Wenn wir diese „textindente“ Eigenschaft von CSS verwenden, schafft die erste Zeile des Blocks oder Absatzes zu Beginn der Zeile Platz. Zu Beginn der ersten Zeile wird nur Platz eingestellt und hat keine anderen Zeilen des Absatzes oder des Blocks. Auf den anderen Zeilen schafft es außer der ersten Zeile keinen Platz. In diesem Tutorial werden wir diese „textinische“ Eigenschaft verwenden und die negativen und positiven Werte für die Einklage festlegen.

Beispiel Nr. 1: Für die Verwendung dieser Eigenschaft "textindent" in CSS müssen wir s haben

OME -Datenblock oder Absätze. Dafür müssen wir zuerst die HTML -Datei haben. In diesem Tutorial ist die von uns verwendete Software der Visual Studio Code. Yocreate u kann einen Texteditor oder einen Notizblock dafür verwenden. Wenn wir diese Software verwenden, müssen wir die Sprache auswählen, in der wir den Code schreiben werden. Hier wählen wir "HTML" als seine Sprache aus.

Danach werden wir in dieser Datei mit der Codierung beginnen. Wir setzen auch "!Und dann durch Drücken von "Eingabetaste" erhalten wir die grundlegenden Tags der HTML, die wir in allen HTML -Codes benötigen. Im Körper werden wir einige „Div“ -Kurse mit unterschiedlichen Namen erstellen. In jedem Div haben wir einen Absatz mit der “erstellt“

" Schild. Wir erstellen drei Divs mit unterschiedlichen Namen als "A", "B" und "C". In diesen Divs haben wir einen Absatz. Auf diese Weise haben wir hier drei Absätze erstellt. Wir werden diese drei Absätze in allen Beispielen in diesem Tutorial verwenden. Jetzt werden wir zur CSS-Datei gehen, in der wir die Eigenschaft „Text-Indent“ verwenden, und die Einrückung auf all diese Absätze anwendet. Wir haben auch die CSS -Datei mit dieser HTML -Datei im Tag "Head" des HTML -Codes verknüpft.

Wir verwenden den "Div" -Namen "A" und dann die Eigenschaft "Text-Indent". Daher wird es eine Eindrücke in der ersten Zeile des Absatzes Div „A“ erzeugen. Die erste Zeile dieses Absatzes schafft zu Beginn der Absatzzeile einen Raum. Wir verwenden die Werte in „PX“ in diesem Code. Wir setzen den Wert "80px" für den ersten DIV -Absatz. Daher wird in der ersten Zeile „80px“ freier Speicherplatz erstellt und den Text entsprechend verwaltet. Dann werden wir den zweiten Div -Absatz einbeziehen und „B“ mit dem „Div“ verwenden. Dann werden wir den negativen Wert in der Eigenschaft „Text-Indent“ verwenden. Für den zweiten Absatz wenden wir die negative Eindrücke zum Einstellen des Textes auf der linken Seite an.

Danach werden wir den letzten Absatz verwenden und auch die Eigenschaft „Text-Indent“ dafür anwenden. Wir setzen "30px" für den dritten Absatz der Div. Der Text der ersten Zeile des Absatzes bewegt sich also auf die rechte Seite auf „30px“ und erstellt zu Beginn der ersten Zeile einen 30px -Raum. Speichern Sie ihn nach Abschluss dieses Codes mit dem “.CSS ”Dateierweiterung und auch mit dem Namen, den wir im Link -Tag von„ HTML “verwendet haben. Überprüfen Sie dann die Ausgabe.

In diesem Screenshot können Sie sehen, dass der erste Absatz zu Beginn der ersten Zeile nur Platz schafft. Hier schafft es einen „80px“ -Raum, da wir „80px“ als Wert der Eigenschaft „textindent“ verwendet haben. Schauen Sie sich nun den zweiten Absatz an, einige Texte verschwinden aus dem Bildschirm, wenn er sich aufgrund der Eigenschaft „Text-Indent“ zur linken Seite bewegt. Es führt diesen Absatz „-70px“ ein und dies gilt nur für die erste Zeile des Absatzes. Dann kommt der letzte Absatz, in dem wir den Wert "30px" dieser Eigenschaft verwenden. In diesem Absatz schafft es in der ersten Zeile Platz von „30px“.

Beispiel # 2:

Wir haben die „Schriftfamilie“ der Überschriften auf „algerisch“ und auch in der „zentralen“ Ausrichtung eingestellt. Wir setzen seine „Farbe“ auf „Maroon“. Dann haben wir die Überschrift 2. Für diese Überschrift verwenden wir "Times New Roman" als "Schriftfamilie" und "lila" als "Farbe" der Schriftart. Jetzt werden wir die Eigenschaft „Text-Align“ für alle Divs separat verwenden. Erstens haben wir das „Div.a ”und wir setzen die Eigenschaftswerte„ textindent “in" em "fest. Hier ist „10EM“ für den ersten Div-Absatz festgelegt und für den zweiten Div verwenden wir einen negativen Wert als „-5em“. Und für die letzte DIV haben wir den Wert "text-in" auf "2EM" festgelegt.

Die erste Zeile des ersten Absatzes ist „10EM“ auf die rechte Seite, was bedeutet. Dann wendet es einen negativen Wert auf den zweiten Absatz an und bewegt die erste Zeile des zweiten Absatzes auf die linke Seite. Ein Text erscheint also nicht hier. Und in der ersten Zeile des dritten Absatzes verwenden wir "2EM" -Text -Einrückung, so.

Beispiel # 3:

Wir werden die Überschrift hier stylen, wobei die „Schriftfamilie“ auf „Algerian“ eingestellt und sich an das „Zentrum“ ausrichtet. Die Farbe wird hier an "Orange" angepasst. Dann gibt es eine Überschrift 2, die auf "Calibri" als "Schriftfamilie" und "grün" als "Farbe der Schriftart" eingestellt ist."Jetzt verwenden wir die Eigenschaft" Text-Align "für jedes Div einzeln. Erstens haben wir "Div".a, und wir verwenden den Prozentsatz "%", um die Eigenschaftswerte "textindent" festzulegen. Für den ersten Div-Absatz verwenden wir einen positiven Wert von „20%“ und für den zweiten Div verwenden wir einen negativen Wert von „-10%“. Der Wert "textindent" für die endgültige DIV wurde auf "40%" gesetzt

Die erste Zeile des ersten Absatzes wendet eine 20%ige Einrückung an. Der zweite Absatz erhält dann einen negativen Wert und die Anfangszeile des zweiten Absatzes wird auf die linke Seite verschoben, wodurch ein Text erscheint. Die erste Zeile des zweiten Absatzes bewegt sich „10%“ nach links. Wir verwenden auch "40%" -Text -Einrückung in der ersten Zeile des dritten Absatzes, was zu einem "10%" -Raum oder einer Einrückung in der ersten Zeile führt.

Beispiel Nr. 4:

Stellen Sie die Schriftfamilie in dieser Überschrift auf "Algerian" und "Center" ein. Seine Farbe wird in diesem Fall in „rot“ geändert. Dann haben wir auch die Überschrift 2, die "Calibri" als "Schriftfamilie" und "blau" als "Farbe" der Überschrift hat. Jetzt verwenden wir das Attribut „Text-Align“ für jedes Div getrennt. Erstens verwenden wir das „Div. A “und wir stellen die Eigenschaftswerte„ textindent “mit dem Pixel auf„ 50px “ein. Für den zweiten Absatz setzen wir den Wert von "textindent" in "EM" und auch negativ. Wir verwenden "-3em" für den zweiten Absatz. Für den letzten Div -Absatz setzen wir den Wert in "%" fest. Wir setzen "30%" für den letzten Absatz. In diesem Code verwenden wir "PX", "EM" und auch "%".

Im ersten Absatz verwenden wir "50px" im Screenshot. Es passt die „50px“ -Irgabation ein. Im zweiten Absatz setzen wir den negativen Wert in „EM“, der „-3em“ ist, den negativen Wert. Die erste Zeile ist auf der linken Seite eingerückt. Für den letzten Absatz setzen wir den Wert in „%“, der „30%“ ist, und Sie können sehen, dass er die erste Zeile des dritten Absatzes auf die rechte Seite einbringt.

Abschluss:

Wir haben dieses Tutorial erstellt, um das „Textindent“ in CSS zu erläutern. Hier haben wir diskutiert, was textindent ist und wie die Einklebung in CSS festgelegt wird und welche Eigenschaften von CSS wir verwendet haben, um den Text einzurufen. Wie wir in diesem Tutorial erläutert haben. Diese Eigenschaft hat nur die erste Zeile des Absatzes eingereicht.