CSS Pre Tag
Przykład 01:
Zacznijmy od pierwszego przykładu naszego artykułu. Musimy rozpocząć ten przykład kodu HTML za pomocą podstawowego znacznika „HTML”. Tag główny jest kontynuowany przy użyciu w nim tagu tytułowego, ja.mi. „CSS PRE”. Aby w pełni zrozumieć skrypt HTML, musimy najpierw spojrzeć na sekcję ciała naszej strony internetowej. Nagłówek rozmiaru 1 jest inicjowany w ciele. Następnie odrzuca się element „div”, aby utworzyć nową sekcję i dodać do niej inne elementy. Ta sekcja DIV zawiera nagłówek rozmiaru 2. Po nagłówku wykorzystuje się znacznik rozpiętości do utworzenia nowego rozpiętości w sekcji „Div”. Ten zakres zawiera długie dane tekstowe.
Po tych wszystkich zdaniach znacznik rozprzestrzeni się uważnie zamknięcie znacznika „Div”. Ciało naszej strony HTML jest zakończone. Następnie musimy rzucić okiem na styl CSS tego kodu HTML w znaczniku stylu. Element rozpiętości służy do odpowiednio go stylizowania. Atrybut „białej przestrzeni” jest używany z wartością „przed”. Atrybut „pre -” jest tutaj używany do zachowania wszystkich przestrzeni i pęknięć linii, które zawiera element „rozpiętości”. Następnie rodzina czcionek jest ustawiona na Monospace, a właściwość wyświetlacza przypisuje wartość „blok”. Rozmiar czcionki jest ustawiony na 20 pikseli z kolorem brązowym. Podczas gdy kolor tła jest ustawiony na „Bisque”. Istnieją inne rodziny czcionek używane w stylizacji do użycia w tym zakresie. Znacznik jest kompletny i możemy uruchomić nasz kod z kodem VS.
Wyjście dla tej strony HTML w przeglądarce Chrome podano na następującym obrazie. Możesz zobaczyć, że strona utworzyła nową sekcję i dodała w niej element rozpiętości. Element rozpiętości zawiera niektóre linie jako treść, podczas gdy linia pęka i przestrzenie są zachowane ze względu na użycie atrybutu „przed” jako wartości właściwości „białej przestrzeni” CSS.
Przykład 02:
W poprzednim przykładzie spojrzeliśmy na użycie atrybutu „przed” jako wartości właściwości białej. Teraz używamy go jako znacznika w pliku HTML. Rozpoczynamy ten przykład od tego samego formatu HTML, głowy i znacznika ciała. W obrębie znacznika tego przykładowego kodu używamy prostego nagłówka rozmiaru 1, a następnie znacznika „przed” zawierającego w nim bardzo dużą zawartość tekstu. Ta zawartość zawiera przerwy w linii i przestrzenie między słowami.
Następnie wykorzystujemy kolejny nagłówek rozmiaru 1, aby stwierdzić, że przedelement zawiera stałą szerokość i wysokość. Element „div” jest tutaj używany do utworzenia nowej sekcji po nagłówku. Tag stylowy jest wykorzystywany w ramach „div” otwierającej się do stylizowania sekcji „Div” do szerokości 300 pikseli, przepełniania ustawionego na automatyczne, wysokość 200 pikseli i kolor tła jasnozielonej. Ta sekcja „Div” zawiera w nim znacznik „przed”, aby wyświetlić niektóre zestawy linii w zupełnie inny sposób, zamiast używać niektórych linii tekstowych jako treści. Ta stylowa zawartość znacznika „przed” jest wyświetlana na następującym obrazie. Tag i tag „div” są tutaj zamknięte.
Następnie zamykamy znaczniki „Body” i „HTML”, ponieważ ten kod nie zawiera żadnej stylizacji więcej niż podstawy, które już dostarczyliśmy w linii. Ten kod jest gotowy do wykonania w kodzie Visual Studio za pomocą opcji „Uruchom”.
Dane wyjściowe tego kodu HTML pokazano poniżej na poniższym obrazie. Wyraźnie pokazuje użycie standardowego poziomu przedprzewodnika w prostych liniach tekstów zawierających przestrzenie. Breaks wyświetla tekst treści, jaki jest bez zmiany jednej postaci. Ponadto użycie stałej szerokości i wysokości dla sekcji „Div” nie uniemożliwia znacznika „przed” wyświetlania jego danych. Po nagłówku 2 zielone tło z ScrollBar pokazuje te same dane stylowe określone za pomocą znacznika „przed”.
Przykład 03:
Zróbmy nasz ostatni przykład tego artykułu zawierającego w nim punkt przed. Kod HTML rozpoczyna się od tego samego formatu - znacznika HTML i znacznika głównego po znaczniku „tytułu”, aby nadać stronie HTML nową nazwę. Następnie użycie znacznika ciała do dodania niektórych elementów, które można wyświetlić na ekranie przeglądarki. Po użyciu znacznika głowy używamy nagłówka rozmiaru 1 w korpusie strony HTML. Tag figury jest wykorzystywany przed użyciem „przed”. Ze-tag jest stylizowany z brązowym tłem, białym kolorem tekstu, szerokością 600 pikseli, wyściółką 10 pikseli i czcionką 16 pikseli za pomocą stylistyki inline.
Dodajemy znak mniej niż i większy niż strona HTML za pomocą znaków słów kluczowych, takich jak LT, GT i kształt krowy stworzonej przez niektóre postacie specjalne wraz z niektórymi tekstami. Tag przed. Identyfikator znacznika figcaption jest określony jako „kowal krowy” i zawiera 2 wiersze danych z niektórymi przestrzeniami i przełomami linii. Tag figury, znacznik ciała i znaczniki HTML są później zamknięte. Do jego wykonania używamy tego kodu w kodzie VS.
Wyjście pokazuje, że nagłówek jest oddzielony od oddzielnej sekcji „Div”. Ta sekcja Div zawiera kształt krowy z brązowym tłem i podanym podpisem na końcu tej postaci przypominającej obraz. Przestrzenie są usuwane z podpisu.
Wniosek
Ten artykuł dotyczy użycia tagów pre -w ramach kodu HTML na kilka sposobów, aby umożliwić przerwy na linii i przestrzenie z jakiegokolwiek powodu. Próbowaliśmy kilku przykładów, aby zademonstrować jego zastosowanie w najłatwiejszy i najlepszy możliwy sposób. Próbowaliśmy użyć słowa kluczowego „przed” jako wartości atrybutu właściwości białej przestrzeni w jednym z naszych przykładów. W pozostałej części przykładów próbowaliśmy go jako osobny tag, aby wykazać, że działa bardziej wyraźnie i wydajnie.