Jak utworzyć wypełnienie w CSS?
Dopełnienie CSS pozwala koderowi HTML ustawić domyślne wypełnienie lub martwą przestrzeń poza elementem HTML. Zaletą takiego działania jest to, że oszczędza programowi kodującemu powtarzanie tego kodu wypełniania dla każdej instancji tego elementu, a łatwiej tworzy spójność na stronie. Element HTML, który ma być wypełniony, może być dowolną liczbą rzeczy, takich jak akapit, tabela lub nagłówek.
Aby utworzyć wypełnienie w CSS, musisz najpierw zidentyfikować element HTML, który chcesz wypełnić. Ten element, który chcesz wypełnić, jest nazywany selektorem. Następnie należy określić odpowiednie wartości wypełnienia. W CSS istnieje pięć różnych rodzajów dopełnienia - jedna dla wszystkich czterech stron elementu jednocześnie, i cztery inne dla każdej strony elementu (np. Lewa strona, prawa strona, strona górna lub strona dolna) ). Właściwość, która pozwala programiście na określenie wartości dla wszystkich czterech stron elementu HTML jednocześnie, jest nazywana właściwością stenografii .
Językiem kodowania używanym do określenia jednej deklaracji wypełnienia CSS jest po prostu słowo „wypełnienie”. Po tej etykiecie znajdują się odpowiednie „wartości” wypełnienia lub informacje o wymaganej ilości miejsca, zwykle reprezentowane albo przez piksele, albo odsetek. Wypełnienie i wartości są zapisywane w nawiasach klamrowych lub nawiasach klamrowych (tj. „{” I „}”). Przed tym wszystkim jest wstawiany element HTML (np. „P” dla akapitu lub „H2” dla nagłówków poziomu 2).
Pod względem sposobu reprezentowania wartości, wartości mogą być reprezentowane w pikselach (np. 1px lub 5px), punktach (np. 1pkt lub 5pkt) lub calach (np. 1 cal lub 5 cali) lub centymetrach (np. 1 cm lub 5 cm) . Wartości można również zadeklarować jako procent stylizowanego elementu HTML. Jeśli na przykład wartość wynosi 50%, wypełnienie będzie równe połowie wielkości elementu.
Następujące przykłady to kod HTML wypełniania elementu HTML za pomocą wartości odzwierciedlonych odpowiednio w procentach i długości. Jeśli przypisana jest tylko jedna wartość, przeglądarki internetowe przypiszą tę dopełnienie do wszystkich czterech stron elementu HTML.
wypełnienie: 10%;
wypełnienie: 100 pikseli;
Dodanie większej liczby wartości do powyższego rodzaju deklaracji wypełnienia spowoduje, że przeglądarki internetowe zinterpretują je w określony sposób. Jeśli zostaną przypisane dwie wartości, pierwsza będzie odpowiadać górze i dole, a druga - lewej i prawej. Trzy wartości spowodują, że pierwsza będzie odnosić się do góry, druga do lewej i prawej strony, a trzecia do dolnej części elementu HTML. Przypisanie maksymalnie czterech wartości powoduje, że pierwsza, druga, trzecia i czwarta wartość odpowiadają górnemu, prawemu, dolnemu i lewemu elementowi HTML w tej kolejności. Jeśli podano więcej niż jedną wartość, należy je oddzielić spacjami i zakończyć średnikiem, na przykład:
wypełnienie: 10px 20px 10px 20px;
Wypełnianie w CSS może być wykonywane jednocześnie po jednej stronie. Pod tym względem dostępne są jeszcze cztery właściwości wypełniania. Są to: padding-top, padding-right, padding-bottom i padding-left. Aby utworzyć dopełnienie w CSS w ten bardziej precyzyjny sposób, musisz oznaczyć właściwości tą samą składnią, co skrócone deklaracje jak wyżej. Każda z tych właściwości wypełnienia przyjmuje tylko jedną wartość w długości lub w procentach. Na przykład:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
Poniższy kod tworzy stronę internetową, deklaruje właściwości wypełnienia między znacznikami stylu, a następnie wykorzystuje je w elemencie akapitu określonym przez znacznik p. Tekst pomiędzy / * i * / to uwagi wyjaśniające rodzaj zastosowanego dopełniania i nie będzie uwzględniony w kodzie dopełniania CSS.
<html>
<head>
<style type = "text / css">
p. przykład1 {padding: 10px;} / * Wypełnienie krótkiej ręki dla wszystkich czterech stron * /
p.example2 {padding: 50px 30px;} / * Wypełnienie krótkiej ręki u góry iu dołu, a następnie po lewej i prawej stronie * /
p.przykład3 {
padding-top: 10px;
padding-bottom: 20px;
padding-bottom: 10px;
padding-left: 20px;
} / * indywidualne wypełnienie. * /
</style>
</head>
<body>
<p class = "example1"> Ten tekst ma takie same wypełnienie po każdej stronie. Wypełnienie po każdej stronie ma 10 pikseli. </p>
<p class = "example2"> Ten tekst ma górne i dolne wypełnienie o wielkości 50 pikseli oraz lewe i prawe wypełnienie o wielkości 30 pikseli. </p>
<p class = ”example3”> Ten tekst ma górne wypełnienie 10 pikseli, prawe wypełnienie 20 pikseli, dolne wypełnienie 10 pikseli i lewe wypełnienie 20 pikseli. </p>
</body>
</html>
W powyższym przykładzie „example1” itd. To nazwy przypisane do klasy, do których następnie odwołuje się paragrafy. Okres między znacznikiem p a nazwami klas na początku kodu oznacza deklarację klasy przypisanej do akapitu. Zwróć uwagę na nawiasy klamrowe po deklaracji klasy zawierającej przypisania wartości właściwości padding.
Chociaż może się to wydawać dużo pracy, jest o wiele mniej pracochłonne niż określenie wypełnienia dla każdego akapitu. Możesz zadeklarować jedną właściwość padding dla pożądanego elementu, która w powyższym przykładzie jest znacznikiem p, a następnie odwołać się do klasy, gdy używasz elementu między znacznikami body strony. Jeśli do wszystkich akapitów potrzebny jest tylko jeden rodzaj wypełnienia, nie musisz w ogóle używać klas. Wystarczy użyć następującego kodu między znacznikami stylu, a następnie kodować akapity bez określania żadnej klasy. Ten kod będzie przechodził między tagami body zamiast kodu w powyższym przykładzie.
p {padding: 10px 20px 10px 20px;}
To wypełnienie CSS, które stworzyłoby, wpłynęłoby na wszystkie akapity, nawet jeśli nie określono żadnej klasy.