Nowa linia CSS
jest odpowiedzialny za tworzenie przerwy w treści, ale CSS ma swoje sposoby na stylizowanie wpływu na przedmioty w ciele. W tym artykule zobaczymy, jak za pomocą CSS możemy dodać nową linię w kodzie HTML.
Przykład 1:
Aby wdrożyć zjawisko przerwy na linii, używamy prostego przykładu do opracowania koncepcji. Prosty program najpierw pokazuje teksty HTML bez odstępów i jak wygląda używając tekstu w akapicie lub znacznikach bez użycia pustych przestrzeni. Najpierw pojawia się sekcja ciała HTML. Nagłówek
jest dodawany do sekcji. Następnie, używając dwóch znaczników Span, używamy do niego prostego tekstu. Tag Span działa jak
Tag akapitowy. Zamknij ciało HTML. Ten znacznik nie zawiera CSS ani żadnego innego znacznika treści. Deklarowane są tylko dwie linie, aby uzyskać pożądane wyjście.
Zapisz kod pliku tekstowego z rozszerzeniem HTML i wykonaj go w przeglądarce.
Zobaczysz, że dwa zdania bez przerwy są wyświetlane, chociaż są one zapisane na osobnych wierszach. Ale nie ma to znaczenia, ponieważ każda linia rozpiętości jest wyświetlana na tych samych liniach.
Przykład 2:
Istnieje właściwość CSS, która jest stosowana do zawartości HTML, aby dodać w nich przerwy. Jest to znak powrotu powozu (\ a). Jest podzielony na dwa elementy, które są „:.
Jest to efekt, który jest stosowany zarówno w elementach lub za pomocą jednego z nich. Początkowo idziemy na użycie elementu After do tekstu. Zobaczmy, jak to działa.
W sekcji ciała ta sama zawartość jest używana jako nagłówek, a następnie nakładane są dwa znaczniki rozpiętości. Tym razem identyfikator CSS jest wspomniany w znaczniku Span. Ten identyfikator stosuje wszystkie efekty zadeklarowane wewnątrz głowy ciała HTML. Teraz zamknij ciało. W sekcji głównej użyj tagów stylów, aby wykonać wewnętrzne CSS. Wewnątrz znaczników użyj identyfikatora, który jest stosowany i podążaj za znakiem powozu „:: po”. W tym opisie identyfikatora używamy właściwości treści, która jest tylko postacią „\ a”. Powoduje tylko nową linię do istniejącego tekstu. Korzystając z tego, oba zdania są wyświetlane na osobnych liniach. Kolejną właściwością napisaną w opisie jest „biała przestrzeń”. Ta biała przestrzeń jest zawsze przyjmowana w stylu precyzyjnym.
#Content1 :: poTreść: „\ A”;
Biała przestrzeń: PRE;
Ten identyfikator stylu wpływa na treść rozpiętości w taki sposób, że dwa zdania nie są wyświetlane na tej samej linii. Element „po” powoduje zerwanie linii między dwoma zdaniami. Jak deklaruje nazwa, przerwa jest po pierwszej linii.
Zapisz kod i wykonaj go w przeglądarce, aby zobaczyć utworzoną stronę internetową.
Zobaczysz to w ten sposób, stworzyliśmy nową linię, używając właściwości CSS.
Przykład 3:
W tym przykładzie użyjemy obu elementów znaku powrotu wózka. Niech sekcja ciała HTML będzie taka, jak było w poprzednim przykładzie, ale z jedną zmianą poprzez dodanie identyfikatora Content2 wewnątrz znacznika drugiego rozpiętości. To powoduje wpływ na oba znaczniki rozpiętości. Jest tylko zmiana tagów stylowych sekcji głównej. Identyfikator Content1 jest taki sam, który ma w nim element „po”.
Ale identyfikator Content2 ma ze sobą element „przed” postaci.
#content2 :: przedTreść: „\ A”;
Biała przestrzeń: PRE;
Jak pokazuje opis stylu, element przed nałożeniem do drugiego okresu. W pierwszym okresie zastosowaliśmy identyfikator Conent1. Ze względu na identyfikator Content1 przestrzeń jest tworzona po pierwszym okresie. Ale z powodu identyfikatora Content2 z elementem „przed”, drugi rozpiętość ma nową linię przed drugim zdaniem. Wynika to z elementu „przed” zadeklarowanym w identyfikatorze Content2.
Po wykonaniu zobaczysz, że istnieje szczelina jednej pustej linii między dwoma zdaniami. Efekt „po” jest stosowany przez pierwszy identyfikator Conten1, podczas gdy efekt „przed” jest stosowany przez identyfikator Content2.
Przykład 4:
Zadeklarowany jest tutaj kolejny przykład nowej linii CSS, która polega na użyciu właściwości CSS, w której efekt białej przestrzeni otrzymuje wartość wstępnej linii. Ta wartość przed liniami tworzy lukę przed zawartością HTML, do której jest stosowana. Rozważmy teraz następujący przykład:
W sekcji ciała HTML dwa nagłówki,
I
, są podane. Po tych nagłówkach akapit jest zadeklarowany z każdym słowem w osobnej linii.
Teraz, w głowie, po nadaniu tytułu na stronie, zastosowano wewnętrzny CSS, aby mieć styl tag. Wewnątrz stylu używamy znacznika akapitowego, aby zastosować kolor czcionki do tekstu wraz z właściwością białej przestrzeni.
PKolor pomarańczowy;
Biała przestrzeń: wstępna linia;
Ten kod „wstępnej” powoduje pustą linię przed rozpoczęciem akapitu.
Po wykonaniu zobaczysz, że przestrzeń jest tworzona przed rozpoczęciem akapitu.
Przykład 5:
Ten przykład różni się od poprzednich przykładów, ponieważ nie tylko użyjemy tutaj pustej nowej linii, ale także dodamy nowy tekst do nowych linii wygenerowanych wcześniej. W sekcji ciała tworzone są dwa nagłówki -
I
. Po nich do utworzenia tekstu dwóch akapitów używany jest znacznik akapitowy.
W sekcji głównej używamy akapitu w celu stylizacji.
P :: przedKolor czerwony;
Treść: „Linuxhint \ A”
„Artykuł online”;
Blok wyświetlacza;
Biała przestrzeń: pre
Ten efekt obejmuje kolor czcionki i zawartość, którą chcemy dodać do każdego akapitu po dodaniu pustej linii. Właściwość białej przestrzeni otrzymuje wartość „przed”, aby dodać pustą przestrzeń przed akapitem.
Zapisz kod i wykonaj plik. Zobaczysz to przed każdym akapitem, dodaje się pusta linia, a następnie zawartość jest dodawana po pustej przestrzeni.
Wniosek
Nowa linia CSS to opis tworzenia nowej linii za pomocą niektórych funkcji CSS, które są zadeklarowane z dowolną funkcją HTML. Dzięki efektom CSS można dodać nową linię przed, po lub między zawartością HTML. Wdrożyliśmy różne przykłady, aby krótko rozwinąć koncepcję. Na początku używany jest przykład akapitu HTML bez miejsca. Następnie, używając tego samego kodu, dodaliśmy właściwość CSS znaku znaku. „Znak powracający powrót” służy do dodania nowych linii między zawartością, którą deklarujemy w korpusie HTML. Ten znak można dodać bezpośrednio lub z nową treścią do dodania.