Wskaźnik tekstu CSS

Wcięcie jest definiowane jako dodatkowa przestrzeń na początku linii. W CSS indent tekstowy jest zdefiniowany jako dodatkowa przestrzeń na początku pierwszej linii. Używamy właściwości „indentacji tekstu” do zastosowania wcięcia w pierwszym wierszu akapitu. Ustawiamy jego wartość w „PX”, „EM” lub w „%”. Ustawiamy również wartość ujemną dla tej właściwości wskaźnika tekstu. Kiedy użyjemy tej „indentnej tekstu” właściwości CSS, pierwsza wiersz bloku lub akapitu stworzy trochę miejsca na początku linii. Ustawia to tylko trochę miejsca na początku pierwszej linii i nie wpływa na inne linie akapitu lub bloku. Nie tworzy miejsca na pozostałych liniach, z wyjątkiem pierwszej linii. W tym samouczku użyjemy tej właściwości „indentnej tekstu” i ustawimy wartości ujemne i dodatnie dla wcięcia.

Przykład nr 1: Aby użyć tej właściwości „indentnej tekstu” w CSS, musimy mieć S

blok danych lub akapitów. W tym celu musimy najpierw do pliku HTML. W tym samouczku używamy oprogramowania. Yocreate u może użyć do tego dowolnego edytora tekstu lub notatnika. Kiedy używamy tego oprogramowania, musimy wybrać język, w którym zamierzamy napisać kod. Tutaj wybieramy „HTML” jako jego język.

Następnie zaczniemy kodować w tym pliku. Umieściliśmy też „!”A następnie naciskając„ Enter ”, otrzymujemy podstawowe tagi HTML, których potrzebujemy we wszystkich kodach HTML. W ciele stworzymy niektóre klasy „div” o różnych nazwach. Wewnątrz każdego div stworzyliśmy akapit za pomocą „

”Tag. Tworzymy trzy Divy o różnych nazwach jako „A”, „B” i „C”. Wewnątrz tych Divów mamy akapit. W ten sposób stworzyliśmy tutaj trzy akapity. Będziemy używać tych trzech akapitów we wszystkich przykładach w tym samouczku. Teraz przejdziemy do pliku CSS, w którym używamy właściwości „indentka tekstu” i zastosujemy wcięcie do wszystkich tych akapitów. Połączyliśmy również plik CSS z tym plikiem HTML w znaczniku „głowicy” kodu HTML.

Używamy nazwy „Div” „A”, a następnie używamy właściwości „indentka tekstu”. Zatem stworzy wcięcie w pierwszym wierszu akapitu Div „A”. Pierwszy wiersz tego akapitu tworzy przestrzeń na początku linii akapitu. W tym kodzie używamy wartości w „PX”. Ustawiamy wartość „80px” dla pierwszego akapitu Div. Tak więc utworzy wolne miejsce „80px” w pierwszym wierszu i odpowiednio zarządzać tekstem. Następnie zamierzamy wdrożyć drugi akapit DIV i użyć „B” z „Div”. Następnie użyjemy wartości ujemnej we właściwości „indentacji tekstu”. W drugim akapicie stosujemy ujemne wcięcie do ustawienia tekstu na lewą stronę.

Następnie użyjemy ostatniego akapitu, a także zastosujemy do tego właściwość „indentacji tekstu”. Ustawiliśmy „30px” na trzeci akapit Div. Tak więc tekst pierwszego wiersza akapitu przenosi się do „30px” po prawej stronie i tworzy przestrzeń „30px” na początku pierwszej linii. Po zakończeniu tego kodu zapisz go z „.Rozszerzenie pliku CSS ”, a także z nazwą, której użyliśmy w znaczniku linku„ HTML ”. Następnie sprawdź wyjście.

Na tym zrzucie ekranu widać, że pierwszy akapit tworzy przestrzeń tylko na początku pierwszej linii. Tutaj tworzy przestrzeń „80px”, ponieważ użyliśmy „80px” jako wartości właściwości „indenta”. Teraz spójrz na drugi akapit, niektóre teksty znikają z ekranu, gdy przesuwa się na lewą stronę z powodu właściwości „indentnej tekstu”. Winuje ten akapit „-70px” i dotyczy to tylko pierwszego wiersza akapitu. Następnie pojawia się ostatni akapit, w którym używamy wartości „30px” tej właściwości. W tym akapicie tworzy przestrzeń „30px” w pierwszej linii.

Przykład nr 2:

Ustawiliśmy „Font-Font-Family” nagłówek na „Algierskie”, a także w wyrównaniu „Center”. Ustawiliśmy jego „kolor” na „bordowy”. Następnie mamy na kierunku 2. Do tego nagłówka używamy „Times New Roman” jako „rodziny czcionki” i „fioletowej” jako „koloru” czcionki. Teraz użyjemy właściwości „Aligacja tekstu” dla wszystkich Divów osobno. Po pierwsze, mamy „div.a ”, a my ustawiamy wartości właściwości„ indentne tekstu ”w„ EM ”. Tutaj „10EM” jest ustawiony dla pierwszego akapitu Div, a dla drugiego div używamy wartości ujemnej jako „-5em”. A dla ostatniego Div ustawiamy wartość „indentalną tekstową” na „2EM”.

Pierwszy wiersz pierwszego akapitu jest wcięty „10em” po prawej stronie, co oznacza, że ​​tworzy przestrzeń „10em” w pierwszym wierszu pierwszego akapitu. Następnie stosuje wartość ujemną do drugiego akapitu i przesuwa pierwszą linię drugiego akapitu na lewą stronę. Więc jakiś tekst nie pojawia się tutaj. A w pierwszym wierszu trzeciego akapitu używamy wcięcia tekstu „2EM”, więc tworzy to przestrzeń „2EM” lub wcięcie w pierwszym wierszu.

Przykład nr 3:

Stylikujemy tutaj nagłówek, z „radością czcionki” na „Algierii” i wyrównania „centrum”. Jego kolor jest tutaj dostosowywany do „pomarańczowej”. Następnie jest nagłówek 2, który jest ustawiony na „Calibri” jako „rodzinę czcionki” i „zielony” jako „kolor czcionki.„Teraz używamy właściwości„ Aligacja tekstu ”dla każdego div indywidualnie. Po pierwsze, mamy „div.a, ”i używamy procentowego„%”, aby ustawić wartości właściwości„ indentka tekstu ”. W pierwszym akapicie Div używamy dodatniej wartości „20%”, a dla drugiego Div używamy ujemnej wartości „-10%”. Wartość „indentna tekstu” dla ostatecznego Div została ustawiona na „40%”

Pierwsza linia pierwszego akapitu stosuje wcięcie „20%”, które sugeruje, że wytwarza wcięcie „20%” w pierwszym wierszu pierwszego akapitu. Drugi akapit jest następnie podawany wartość ujemna, a początkowa linia drugiego akapitu jest przenoszona na lewą stronę, zapobiegając pojawieniu się tekstu. Pierwszy wiersz drugiego akapitu przesuwa się „10%” w lewo. Używamy również wgłębienia tekstu „40%” na pierwszym wierszu trzeciego akapitu, co skutkuje przestrzenią „10%” lub wcięciem na pierwszej linii.

Przykład nr 4:

Ustaw rodzinę czcionki na „Algierskie” i „Centrum” w tym nagłówku. Jego kolor jest zmieniany na „czerwony” w tym przypadku. Następnie mamy również nagłówek 2, który ma „Calibri” jako „rodzinę czcionki” i „niebieski” jako „kolor” nagłówka. Teraz używamy atrybutu „-align” dla każdego Div osobno. Najpierw używamy „div. a, ”, a my ustawiamy wartości właściwości„ indentne tekstu ”z pikselem na„ 50px ”. W drugim akapicie ustawiamy wartość „indentarza tekstu” w „EM”, a także negatywne. Używamy „-3EM” do drugiego akapitu Div. W ostatnim akapicie Div ustawiamy wartość w „%”. Ustawiliśmy „30%” na ostatni akapit. W tym kodzie używamy „PX”, „EM”, a także „%”.

W pierwszym akapicie używamy „50px” na zrzucie ekranu. Dostosowuje wcięcie „50px”. W drugim akapicie ustawiamy wartość ujemną w „EM”, która jest „-3em”. Pierwsza linia jest wcięta na lewą stronę. W ostatnim akapicie ustawiamy wartość w „%”, która jest „30%” i ​​widać, że wskaże pierwszą linię trzeciego akapitu po prawej stronie.

Wniosek:

Stworzyliśmy ten samouczek, aby rozwinąć „indenta tekstu” w CSS. Tutaj omówiliśmy, co jest indentem tekstu i jak ustawić wgłębienie w CSS i której właściwości CSS użyliśmy do wcięcia tekstu. Jak omówiliśmy w tym samouczku, właściwość „indentna tekstu” jest używana do stosowania wgłębienia do naszego tekstu i użyliśmy wartości negatywnych i pozytywnych tutaj w naszych przykładach. Ta właściwość wcięła tylko pierwszą linię akapitu.