Top wyściółki CSS

„Czy kiedykolwiek słyszałeś o koncepcji wyściółki podczas studiowania programowania HTML w twoich badaniach? Jeśli nie, jesteś we właściwym miejscu. HTML odnosi się do „Hyper Tekst Markup Language” i służy do zapewnienia stron internetowych stabilny wygląd. Wymyśliło styl CSS wspomniany jako „arkusz stylu kaskadowego.„CSS zapewnia witrynie atrakcyjny wygląd. Stylizacja CSS może być używana do zapewnienia strony internetowej nowego wyglądu i wyczucia, takiej jak odstępy w lewo lub w prawo, zastosowanie koloru tła, podział strony na segmenty i tak dalej. Jedną z funkcji CSS jest „Padding”, który służy do dodawania przestrzeni między zawartością elementu a jego granicą. Dzisiejszy artykuł obejmie użycie funkcji wyściółki CSS w skrypcie stylu CSS podczas tworzenia statycznej strony HTML. Zacznijmy więc od niektórych prostych przykładów HTML."

Przykład nr 01

Weźmy nasz pierwszy przykład HTML, aby utworzyć stronę statyczną z pewnymi nagłówkami i stylizuj je za pomocą stylizacji CSS w kodzie Visual Studio. Tak więc utworzyliśmy nowy plik notatnika o nazwie „Padding-Top” z rozszerzeniem „HTML” na jego końcu. Rozpoczęliśmy ten dokument „HTML” z znacznikiem „HTML” wymaganym do uczynienia pliku HTML. Główny znacznik tego dokumentu zawiera znacznik „tytułowy” wraz z tytułem „Top Padding”, jak wyświetlono. Na końcu będziemy omawiać tag „stylu”. Znacznik zostanie uruchomiony przy użyciu 4 tagów nagłówka.

Wszystkie te nagłówki będą wynosić 1^St nagłówki, ja.mi., największy rozmiar nagłówka zgodnie z HTML. Wszystkie nagłówki będą zawierać w nich różne tytuły nagłówka. Określiliśmy trzy różne klasy dla ostatnich trzech nagłówków, tj.mi., P1, P2 i P3. Te klasy zostaną wykorzystane w znaczniku stylu, aby określić stylizację dla każdego nagłówka osobno. Ciało i znacznik HTML został zakończony tutaj po użyciu nagłówków. W obrębie znacznika stylu nad tagiem „nadwozia” zdefiniowaliśmy stylizację dla każdej klasy nagłówka osobno w trzech liniach, i.mi., P1, P2, P3.

Korzystamy z opcji obramowania, aby ustawić 2-pikselową stałą niebieską obramowanie dla każdego nagłówka, i.mi., PX oznacza piksel. Ustawiamy tutaj funkcję wyściółki dla wszystkich trzech nagłówków zawierających osobno P1, P2 i P3. Pierwszy nagłówek będzie zawierał 100-pikselową wyściółkę z góry, drugi nagłówek będzie zawierał 50-pikselowy wyściółka górna, a ostatnia nagłówek będzie zawierać 10 pikseli górnej wyściółki z odpowiedniego powyższego nagłówka. Styl i znacznik główny zostaną ukończone tutaj, a my zapisamy ten kod, aby uruchomić go za pomocą przycisku „Uruchom”. Zostanie otwarty w przeglądarce, aby zobaczyć swój wynik.

Na ekranie przeglądarki otwarto następującą stronę pokazywaną z tytułem „Top Padding”. Pierwszy nagłówek został wyświetlony bez obramowania i wyściółki, ja.mi., Normalny nagłówek. Podczas gdy 2^Nd, 3. i 4^th Nagłówki zawierają wokół nich niebieską granicę. 2^Nd Nagłówek ma 100 pikselowych wyściółki z granicy, 3^{r & D} Nagłówek zawiera 50-pikselową wyściółkę z granicy i 4^th Nagłówek zawiera 10-pikselową wyściółkę z niebieskiej granicy. Możesz zrozumieć wariancję, używając wartości od wartości wyściółki za pośrednictwem „pikseli."

Przykład nr 02

Miejmy kolejny podobny przykład, aby dodać wyściółkę u góry dowolnego aspektu HTML. Tym razem będziemy używać opcji procentowej zamiast piksela. Ten plik został uruchomiony od znacznika HTML, a następnie znacznika głowy i tytułu. Ta sama etykieta została określona w tym pliku. Używamy tylko trzech nagłówków w znaczniku ciała tego pliku HTML. Wszystkie trzy nagłówki zawierają te same trzy klasy, P1, P2 i P3, do użytku w stylizacji.

W obrębie znacznika „stylu” używamy klas P1, P2 i P3 dla każdego na czele, aby je stylizować osobno. Używamy tej samej 2-pikselowej niebieskiej niebieskiej niebieskiej niebieskiej dla wszystkich trzech nagłówków. Następnie używamy właściwości wyściółki do ustalenia różnych wartości dla wyściółki nagłówków z ich granic. Pierwszy nagłówek będzie zawierał 20 -procentową górną wyściółkę po granice. Drugi zostanie wyściełany o 15 procent od górnej granicy, a ostatni nagłówek będzie 5 procent od granicy od górnej strony. Zapiszmy ten program i uruchommy go, aby zobaczyć wyniki.

Po uruchomieniu tego kodu HTML do zilustrowania właściwości wyściółki z procentową wartością liczbową, mamy wyjście Phise-Beelow w przeglądarce Chrome. Ta strona zawiera w sumie 3 nagłówki z niebieskimi solidnymi granicami wokół nich. Pierwsza zawartość na czele jest 20 procent od jej granicy, tj.mi., 20 -procentowy górny wyściółka. Drugi nagłówek znajduje się o 15 procent od zawartej granicy, ja.mi., 15 -procentowa wyściółka. Ostatnie nagłówek zawiera 5 procent górnej wyściółki z niebieskiej stałej granicy, jak pokazano na poniższym obrazku. Istnieje wyraźna różnica między nagłówkami wyjściowymi przy użyciu różnych wartości dla górnej wyściółki.

Urządzenie „EM” można również użyć do wstawienia wyściółki. Urządzenie „EM” można użyć do podania wyściółki elementowi 2 -krotnie większej ilości zawartości elementu. Powiedzmy, że mamy te same trzy nagłówki w treści pliku HTML i używamy wartości 5EM, 3EM i 1EM dla właściwości wyściółki, jak pokazano poniżej.

Wyjście do użycia jednostki „EM” do dodania górnej wyściółki pokazano poniżej. 5EM, 3EM i 1EM są stosunkowo większymi wartościami niż jednostki „PX” i „%”.

Przykład nr 03

Miejmy ostatni przykład, aby zademonstrować użycie właściwości wyściółki w plikach CSS lub HTML. Tak więc będziemy porównywać między wyściółką i innymi powiązanymi właściwościami wyściółki, takimi jak prawy, lewy i na dole. Używamy nagłówków „H1” o nieco innym tytule nagłówka, jak pokazano w znaczniku ciała tego pliku HTML. W obrębie znacznika „stylu” zdefiniowaliśmy klasy P1, P2 i P3 dla każdego naśladowania, aby ustawić granicę i wartość wyściółki. Do wszystkich trzech nagłówków używamy tej samej 1-pikselowej stałej niebieskiej.

Następnie używamy wartości lewej, prawej, górnej i dolnej osobno dla każdego nagłówka. Po pierwsze, nagłówek wykorzysta 10% wyściółki dla wszystkich jego boków, podczas gdy drugi nagłówek zawiera 10 procent wyściółki ze wszystkich stron. Ostatni nagłówek będzie zawierał 2em wyściółkę dla wszystkich stron.

Wyjście kodu HTML pokazuje wyściółkę dla każdego nagłówka od góry, dolnej, lewej i prawej strony granicy.

Wniosek

Wprowadzenie tego artykułu dotyczy użycia stylizacji CSS i użycia właściwości „wyściółki” w pliku HTML. Wykazaliśmy przykłady zawierające użycie właściwości wyściółki CSS do dodania wyściółki z góry elementu z jego granicy. W tym celu wypróbowaliśmy „PX” dla pikseli, „%” dla procent i „EM” dla pomnożenia wielkości elementu o określonej wartości, aby dodać wyściółkę. Ilustrowane tutaj przykłady są dość proste i łatwe w użyciu. Stąd każdy początkujący może dostosować się do tych przykładów w dowolnym momencie.