Hoe maak ik vulling in CSS?

Met

CSS -vulling kan een HTML -coder de standaardvulling of dode ruimte buiten een HTML -element instellen.Het voordeel hiervan is dat het de coder opslaat om die paddingcode voor elk exemplaar van dat element te herhalen en gemakkelijker consistentie op de pagina creëert.Het html -element dat moet worden opgevuld, kan een willekeurig aantal dingen zijn, zoals een paragraaf, een tabel of een kop.

Om vulling in CSS te maken, moet u eerst het HTML -element identificeren dat u wilt vullen.Dit element dat u wilt vullen, staat bekend als de selector.Vervolgens wilt u de juiste opvulwaarden opgeven.Er zijn vijf verschillende soorten vullingseigenschappen in CSS Mdash;één voor alle vier de zijden van een element tegelijk, en vier andere voor elke individuele zijde van het element (bijv. De linkerkant, de rechterkant, de bovenkant of de onderkant).Een eigenschap waarmee de programmeur waarden voor alle vier zijden van een HTML -element tegelijk toestaat, wordt een steno -eigenschap genoemd.

De coderingstaal die wordt gebruikt om één verklaring van CSS -vulling op te geven, is gewoon het woord 'vulling'.Volgens dat label zijn de relevante waarden van de opvulling, of informatie over de gewenste hoeveelheid ruimte, meestal weergegeven door pixels of een percentage.De vulling en de waarden zijn geschreven in krullende beugels of krullende beugels (d.w.z. {en}).Voorafgaand aan dat alles is het HTML -element dat moet worden opgevuld (bijv. P voor de paragraaf of H2 voor headers van niveau 2).

In termen van hoe de waarde wordt weergegeven, kunnen waarden worden weergegeven in pixels (bijv. 1px of 5px), punten (bijv. 1pt of 5pt) of inches (bijv. 1in of 5in) of centimeters (bijv. 1 cm of 5 cm).Waarden kunnen ook worden verklaard als een percentage van het HTML -element dat wordt gestileerd.Als de waarde bijvoorbeeld 50%is, is de vulling gelijk aan de helft van de grootte van het element.

De volgende voorbeelden, zijn de HTML -code voor het opvullen van een HTML -element door middel van waarden die worden weergegeven in respectievelijk een percentage en lengte.Als er slechts één waarde wordt toegewezen, wijst webbrowsers deze vulling toe aan alle vier de zijden van het HTML -element.

Vulling: 10%;
Vulling: 100 px;

Het toevoegen van meer waarden aan het type vullingaangifte hierboven zal ervoor zorgen dat webbrowsers ze op een bepaalde manier interpreteren.Als twee waarden worden toegewezen, komt de eerste overeen met de boven- en onderkant, terwijl de tweede overeenkomt met links en rechts.Drie waarden zullen ervoor zorgen dat de eerste verwijst naar de bovenkant, de tweede naar de linker- en rechterkant en de derde naar de onderkant van het HTML -element.Het toewijzen van het maximum van vier waarden zorgt ervoor dat de eerste, tweede, derde en vierde waarden overeenkomen met de boven-, rechts, onder en links van het HTML -element, in die volgorde.Wanneer meer dan één waarde wordt verstrekt, moeten deze worden gescheiden door spaties en worden beëindigd met een semi-kolon, bijvoorbeeld:

Vulling: 10px 20px 10px 20px;

Vulling in CSS kan ook één kant tegelijk worden gedaan.In dit opzicht zijn er nog vier vullingseigenschappen beschikbaar.Dit zijn padding-top, padding-rechts, vulling-bottom en padding-links.Om vulling in CSS op deze meer preciezere manier te maken, moet u de eigenschappen met dezelfde syntaxis labelen als de steno -verklaringen als hierboven.Elk van deze vullingseigenschappen heeft slechts één waarde in lengte of percentage.Bijvoorbeeld:

Padding-top: 10px;
Padding-recht: 20px;
Padding-bottom: 10px;
Padding-links: 20px;

De volgende code maakt een webpagina, verklaart de vullingseigenschappen tussen stijltags, enGebruik ze vervolgens in een paragraafelement dat is opgegeven door de P -tag.De tekst tussen de/ * en de */zijn notities om het type vulling uit te leggen en zou niet worden opgenomen in CSS -paddingcode.

lt; html gt;
lt; head gt;
lt; stijl type ' text/css gt;
P.Example1 {vulling: 10px;} /* Vulling met korte hand voor alle vier de zijden* /
P.Example2 {Padding: 50px 30px;} /* Korte handvulling voor de boven- en onderkant gevolgd door de linkeren rechts * /
P. Example3 {
Padding-top: 10px;
Padding-bottom: 20px;
Padding-bottom: 10px;
Padding-links: 20px;
} / * Individuele vulling.*/
lt;/style gt;
lt;/head gt;

lt; body gt;
lt; p class ' voorbeeld1 gt; Deze tekst heeft dezelfde vulling aan elke kant.De vulling aan elke kant is 10px. Lt;/p gt;
lt; p class ' voorbeeld2 gt; Deze tekst heeft een bovenste en bodemvulling van 50 px en een linker en rechter vulling van 30 px. Lt;/p gt;
lt; p -klasse' ”Voorbeeld3” gt; Deze tekst heeft een bovenste vulling van 10px, een rechtsvulling van 20 px, een bodemvulling van 10 px en een linker opvulling van 20 px. Lt;/p gt;
lt;/body gt;
lt;/html gt;

In het bovenstaande voorbeeld zijn 'Voorbeeld1' enz. Namen toegewezen aan een klasse, waarnaar vervolgens in de paragrafen wordt verwezen.De periode tussen de P -tag en de klassennamen aan het begin van de code geeft een verklaring aan van een klasse die is toegewezen aan een paragraaf.Let op de beugels na de klassenverklaring die de waarde -opdrachten van de vulling -eigenschap heeft ingesloten.

Hoewel dit misschien veel werk lijkt, is het veel minder arbeidsintensief dan het specificeren van vulling voor elke individuele paragraaf.U kunt één vullingseigenschap verklaren voor het gewenste element, dat in het bovenstaande voorbeeld de P -tag is en vervolgens naar de klasse verwijzen wanneer u het element tussen de body -tags van de pagina gebruikt.Als slechts één type vulling nodig is voor alle paragrafen, hoeft u helemaal geen klassen te gebruiken.Gebruik eenvoudig de volgende code tussen de stijltags en coderen vervolgens de paragrafen zonder een klasse op te geven.Deze code zou tussen de body -tags gaan in plaats van de code in het bovenstaande voorbeeld.

P {padding: 10px 20px 10px 20px;}

Deze CSS -opvulling zou alle paragrafen beïnvloeden, hoewel er geen klasse was opgegeven.