CSS wcięcie

"Wcięcie CSS jest właściwością CSS używanej w bloku DIV lub dowolnym pojemniku do pokazania wcięcia pierwszego wiersza tekstu. Gdy wcięcie CSS nie jest wymienione z żadną linią, to domyślnie dotyczy pierwszego wiersza tekstu. Bierze również wartości z znakami dodatnimi i ujemnymi.

Niniejszą właściwość wcięcia można zastosować do dowolnej zawartości HTML, ale w tym artykule użyliśmy tekstu do wcięcia tekstu w pierwszym wierszu akapitu."

Praca nad właściwością tekstową wskaźnika CSS

Służy do pokazania liczby pustych przestrzeni, które rozróżniają akapity zaczynające się od lewej lub prawej marginesy zewnętrznej zawartości, która jest w większości div. Właściwość CSS wcięcia ułatwia odczytanie i zrozumiałe programy, utrzymując tekst na określonej długości. To robi chwytliwy efekt dla tekstu dla użytkownika.

Podstawowa składnia używana dla właściwości indentnej tekstu to:

Tekst-Indent: Długość;

Przykład 1

W tym przykładzie utworzymy stronę internetową za pomocą tylko treści tekstu HTML w formie nagłówków lub akapitów. Najpierw w sekcji ciała użyj nagłówka

tag, aby wprowadzić nagłówek. Po przerwie
, Znowu używany jest nagłówek. Tag Break tworzy pustą linię i przeskakuje do następnego wiersza, aby utworzyć nową treść. Po ogłoszeniu nagłówków powstaje DIV. Div jest ważnym pojemnikiem HTML, ponieważ jest to pojemnik, który utrzymuje zawartość HTML w określonym miejscu. Niezależnie od elementów, których używamy w Div, są wymagane o określonym rozmiarze, aby zachować wszystkie elementy w tym rozmiarze. W takim przypadku wspomnieliśmy o nazwie klasy, która zostanie ogłoszona w sekcji głównej kodu HTML. Wszystkie właściwości stylu CSS są zapisane wewnątrz wspomnianej klasy, które zostaną zastosowane do Div i zawartości w nim.

Wewnątrz div po prostu użyjemy tekstu. Prosta zawartość tekstu może być używana z lub bez tagów akapitowych.

Po zamknięciu tagu div, nazwa nagłówka ponownie jest używana

. Div zostanie ponownie zadeklarowany z nową nazwą klasy, która będzie zawierać CSS dla tej klasy osobno. Zamknij również wszystkie tagi i ciało HTML. Teraz weź pod uwagę znaczniki CSS zadeklarowane w części głównej, co czyni go wewnętrznym CSS. W CSS dwie klasy są zadeklarowane osobno; Pierwsza klasa zawiera wcięcie tekstu o 50px o szerokości DIV o długości 650px, utrzyma to tekst na tej długości Div, a na pierwszym wierszu tekstu będzie miała wpływ na tę wartość wgłębienia.

.MyText
Tekst-indent: 50px;

Podobnie, dla drugiej klasy zadeklarowanej dla drugiej div, indent tekstu zastosowanego do tekstu ma wartość ujemną. Podobna długość jest również stosowana do DIV.

Teraz zapisz kod z rozszerzeniem HTML, aby otworzył go zarówno jako kod HTML w edytorze, jak i jako strona internetowa w przeglądarce.

Zobaczysz, że pierwsza div z tekstem 50px ma pierwszy wiersz tekstu, który przesunął zobowiązanie 50px od lewej strony. Podczas gdy druga div ma 10em, tekst przesunie się w kierunku lewej strony wciętej w określonej wartości, dzięki czemu słowa pierwszego wiersza zostaną ukryte.

Przykład 2

Jednostka używana do wcięcia nie zawsze jest w pikselach; można go również używać w wartościach procentowych. W tym przykładzie kod nadwozia HTML jest prawie taki sam; Tylko nazwa nagłówka jest inna, ponieważ określają nowe wartości w procentach. Te same dwie klasy dla CSS będą również używane w kodzie.

Przechodząc w kierunku części CSS, znacznik stylu ma klasę zawierającą wcięcie o wartości 20 procent i szerokości, jak podaliśmy w pierwszym przykładzie.

.MyText
Tekst-indent: 20%;

Podobnie, MyText1 drugiej klasy ma zastosować styl do drugiej div, będzie miał tę samą szerokość, ale wcięcie tekstu wynosi 40%. Ten wzrost indenta tekstu spowoduje, że pierwszy wiersz tekstu porusza się we właściwym kierunku ze zmianą.

Możesz zobaczyć, że po wykonaniu pliku HTML w przeglądarce zostanie utworzona strona internetowa o dwóch akapitach tekstowych. Pierwszy zaczyna się blisko lewej, podczas gdy drugi akapit zaczyna się od środka div.

Przykład 3

Trzeci i ostatni przykład dotyczy wiszącego tekstu. W tym przykładzie pierwsze zdanie jest poruszane w kierunku wstecznym, podczas gdy reszta akapitu jest nadal w jego pozycji; W tym przypadku przemieszczenie ma głównie wartość ujemną, aby przesunąć pierwszą sekcję tekstową w lewym kierunku. Biorąc pod uwagę korpus HTML, istnieje pojedynczy nagłówek i div zawierający tekst. Pojemnik Div ​​ma klasę, aby stylizować tekst w nim za pomocą wewnętrznych CSS.

< div class = mytext >

Wewnątrz znacznika stylu w głowie HTML klasa zadeklarowana w znaczniku div jest zadeklarowana specyfikacjami. Ma tekst -28px. Oznacza to, że pierwsza linia rozpocznie się od wgłębienia o ujemnej 28. wartości, przenosząc tekst na lewą stronę. Ponieważ negatywna wartość indentacji tekstu powoduje, że tekst porusza się w kierunku strony negatywnej, wyjaśniliśmy to w pierwszym przykładzie, ale w przeciwieństwie do tego przykładu, w którym ruchomą część pierwszej linii nie była widoczna, tutaj całe pierwsze zdanie pojawiło się w środku Div.

.MyText
Tekst -indent: -28px;
Padding-Left: 28px;

W przeciwieństwie do indentacji tekstu, ponieważ jest ono przyjmowane w wartości ujemnej, wartość lewicy wyściółki jest przyjęta dodatnio, ponieważ cały akapit zmieści się w tym rozmiarze DIV; To sprawi, że tekst pierwszej linii jest bardziej widoczny w lewym kierunku.

Reszta kodu nadwozia HTML jest taka sama, mając nagłówek i div z klasą.

Po zapisaniu kodu wykonaj go w przeglądarce. Zobaczysz, że pierwszy rząd tekstu znajduje się w lewym kierunku, a reszta akapitu z drugiej linii znajduje się w prawo.

Wniosek

Artykuł wyjaśnia działanie i wykorzystanie właściwości wcięcia CSS tekstu na stronach internetowych. Ilekroć jesteśmy gotowi opisać cokolwiek za pośrednictwem tekstu na stronie internetowej, niezależnie od tego, czy chodzi o stronę internetową, czy jakakolwiek inna informacja, używamy tej właściwości wcięcia, aby wypierać tekst pierwszego wiersza w prawym lub lewym kierunku. W tym artykule zastosowaliśmy różne przykłady, które wyjaśniają działanie tej właściwości wcięcia na właściwości tekstowej strony internetowej, utworzonej razem za pomocą HTML i CSS.