Druga linia CSS
Własność tekstowa
Przeglądając niektóre strony edukacyjne, musiałeś zobaczyć takie akapity lub pola tekstowe, które zaczynają się od pierwszej linii z odległości całego akapitu, co czyni go bardziej widocznym i atrakcyjnym. Odbywa się to poprzez wcięcie pierwszego wiersza tekstu. Nie tylko pierwsza linia, ale możemy również wdrożyć drugą linię, utrzymując pierwszą linię nienaruszoną. Ta właściwość tekstowa jest pobierana w pikseli lub wartościach procentowych. Składnia do wcięcia tekstu to:
Tekst-indent: wartość;Ta właściwość można zastosować na dowolnej zawartości HTML. Jednak teraz zastosujemy tę właściwość w tekście. HTML i CSS są językami kręgosłupa dla opracowywania front-end i projektowania strony internetowej. HTML zawiera dwie podstawowe sekcje: sekcje głowy i ciała. Obie te części są opisane za pomocą tagów:
… .
Cała zawartość HTML opisano w sekcjach ciała. Sekcja główna zawiera tytuł strony internetowej i CSS, jeśli jest to wewnętrzne CSS. Podstawowe znaczniki HTML użyte w tym artykule zostaną wyjaśnione w czasie implementacji. Mówiąc o deklaracji CSS, zastosowaliśmy wewnętrzne CSS wśród trzech typów CSS. Właściwości CSS są zadeklarowane wewnątrz znacznika stylu, który jest zadeklarowany w znaczniku głowy.
Istnieje kilka podejść do wcięcia drugiej linii akapitu HTML. Niektóre z prostych metod zostały wyjaśnione poniżej.
Przykład 1
Najpierw użyliśmy przykładu do zastosowania właściwości CSS wcięcia na tekst akapitu HTML. Jak pokazuje nazwa artykułu, musimy wdrożyć drugi wiersz tekstu. W tym przykładzie zastosowaliśmy właściwość wcięcia, aby pierwszy wiersz akapitu pozostał taki sam w punkcie, w którym był wcześniej. Jednak akapit z drugiej linii zostanie wcięty. Zacznijmy od przykładowego kodu. Najpierw rozważ sekcję ciała, w której do zastosowania wgłębie.
Zadeklarowano prosty nagłówek, którego nie zastosujemy żadnego efektu. Znacznik akapitu jest zadeklarowany w Div. Jest to pojemnik, który utrzymuje zawartość HTML w określonym punkcie. Podobnie tutaj ogłosimy Div. Zadeklarowana jest również klasa.
W CSS projektowanie odbywa się za pośrednictwem identyfikatorów lub klas. Wszystkie efekty, które chcemy zastosować, są zapisane wewnątrz deklaracji klasowej w ciele CSS. W części głównej musimy wspomnieć o nazwie w punkcie, w którym chcemy zastosować te efekty.
Zamknij wszystkie tagi i ciało HTML. Po ogłoszeniu zawartości HTML pojedynczy akapit i nagłówek zostanie wyświetlony po uruchomieniu strony na stronie internetowej. Użyjemy następującego kodu CSS, aby zastosować na tym efekty.
Kierując się w kierunku znacznika stylu, Div dla klasy wyjaśniono z funkcjami, które chcemy zastosować do tego pojemnika. Używany jest indent tekstowy -36px, co oznacza, że pierwsza linia nie zostanie wcięta. Jednak pierwsza linia jest przesuwana w lewo w porównaniu do pozostałych linii akapitowych. Odbywa się to poprzez deklarowanie lewej strony DIV 36px. Obie wartości są ustawione w jednostkach pikselowych.
div.ATekst -Indent: -36px;
Padding-Left: 36px;
Właściwość wyściółka jest przeznaczona do zawartości wewnętrznej, którą kontroluje zewnętrzny. Jest to odległość między granicą tekstu a granicą kontenera Div. Teraz zapisz kod w rozszerzeniu HTML i wykonaj stronę internetową w przeglądarce.
Zobaczysz prosty nagłówek. Akapit ma nienaruszoną pierwszą linię, ale druga i wszystkie pozostałe linie są przesunięte w prawo. Robi to indentna tekst CSS.
Przykład 2
W tym przykładzie właściwość indentacji tekstu zostanie zastosowana do nagłówka. Zadeklarowano prosty nagłówek. Następnie użyliśmy znacznika akapitu, aby dodać do niego tekst. Identyfikator w pojemniku Div zostanie zastosowany do całego Div dokładnie w ten sam sposób. Zastosowano efekty opisane w klasie.
W sekcji Head znacznik stylu będzie zawierał funkcje identyfikacyjne. Div otrzymuje margines i szerokość do zastosowania. Identyfikator jest zadeklarowany ze znakiem skrótu.
Aby zastosować wpływ na akapit, musimy wspomnieć o „P” z identyfikatorem. Obramowanie nad akapitem jest podawane kolorami i rozmiarem. Stosowany jest efekt wyściółki. To jest odległość między akapitem a nagłówkiem. Lewe dwie funkcje to rozmiar tekstu i waga akapitu. Będzie to bez wciętej funkcji tekstu. Nagłówek jest stosowany z właściwością indentną tekstową -26 pikseli i wyściełanie nagłówka w lewo z tą samą wartością za pomocą znaku dodatniego.
#Container H2Tekst -Indent: -26px;
Padding-Left: 26px;
Zapisz kod i wykonaj plik, aby zbadać dane wyjściowe.
Podczas wykonania zobaczysz, że nagłówek jest wyświetlany tak, aby druga linia nagłówka była wcięta w lewy kierunek. Jednak pierwsza linia pozostaje taka sama.
Notatka: Aby zrobić drugi wiersz tekstu w akapicie lub nagłówek, musimy wziąć wartość indenta tekstu w negatywnym kierunku. W tym samym czasie wyściółka tekstu powinna być wykonana w lewym kierunku z wartością dodatnią. Użytkownik powinien potwierdzić, że obie te wartości powinny być takie same. W obu przykładach zastosowaliśmy tę samą koncepcję.
Wniosek
Właściwość wcięcia CSS dla drugiego wiersza jest istotną cechą treści tekstu, która jest stosowana do akapitów i nagłówków w celu odróżnienia tego tekstu od innych, dzięki czemu tekst jest atrakcyjny dla użytkownika. Wartości wcięcia można również przyjmować w pikselach i procentach. Ta właściwość jest stosowana do pierwszej i drugiej linii akapitu. Tekst-indent funkcji drugiego wiersza CSS jest osiągany poprzez posiadanie wartości ze znakiem ujemnym i taką samą wartością dla wyściółki z dodatnim znakiem. Kierunek wyściółki powinien być pobrany jako lewy. Wykorzystaliśmy dwa przykłady do rozwinięcia tej koncepcji tekstu, która będzie wystarczająca, aby zwiększyć twoją wiedzę na temat właściwości tekstu.