Hoe maak ik vulling in CSS?

CSS -vulling kan een HTML -coder in staat stellen de standaardvulling of dode ruimte in te stellen buiten een HTML -element. 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 - één voor alle vier 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 eenvoudigweg het woord "vulling". Volgens dat label zijn de relevante "waarden" van de vulling, 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 weerspiegeld 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: 100px;

Door meer waarden toe te voegen aan het type vullingverklaring hierboven zal ertoe leiden 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 eindigen met een semi-kolon, bijvoorbeeld:

Vulling: 10px 20px 10px 20px;

vulling in CSS kan één kant worden gedaanook een tijd. 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 precieze 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 en gebruikt 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 -opvulcode.

Deze tekst heeft dezelfde opvulling aan elke kant. De vulling aan elke kant is 10 px.

Deze tekst heeft een boven- en onderste vulling van 50 px en een linker en rechtsgevulling van 30 px.

Deze tekst heeft een bovenste vulling van 10 px, een rechtsvulling van 20 px, een bodemvulling van 10 px en een linker opvulling van 20 px.

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 beugel na de klasseation die de opdrachten van de vulling -eigenschapswaarde omsluit.

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 die dit zou creëren, zou alle paragrafen beïnvloeden, hoewel er geen klasse was opgegeven.