Hoe maak ik opvulling in CSS?
Met CSS-opvulling kan een HTML-codeerder de standaard opvulling of dode ruimte buiten een HTML-element instellen. Het voordeel hiervan is dat het de coder redt van het herhalen van die opvulcode voor elke instantie van dat element, en gemakkelijker zorgt voor consistentie op de pagina. Het HTML-element dat moet worden opgevuld, kan een willekeurig aantal dingen zijn, zoals een alinea, een tabel of een kop.
Om opvulling in CSS te maken, moet u eerst het HTML-element identificeren dat u wilt opvullen. Dit element dat u wilt opvullen, staat bekend als de selector. Vervolgens wilt u de juiste opvulwaarden opgeven. Er zijn vijf verschillende soorten opvullingseigenschappen 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 in één keer waarden voor alle vier zijden van een HTML-element kan opgeven, wordt een steno-eigenschap genoemd .
De codeertaal die wordt gebruikt om één declaratie van CSS-padding op te geven, is gewoon het woord "padding". Na dat label zijn de relevante "waarden" van de padding, of informatie over de gewenste hoeveelheid ruimte, meestal weergegeven door pixels of een percentage. De opvulling en de waarden staan tussen accolades of accolades (bijv. "{" En "}"). Daaraan vooraf gaat het HTML-element dat moet worden opgevuld (bijvoorbeeld 'p' voor de alinea of 'H2' voor niveau 2-headers).
In termen van hoe de waarde wordt weergegeven, kunnen waarden worden weergegeven in pixels (bijvoorbeeld 1px of 5px), punten (bijvoorbeeld 1pt of 5pt) of inches (bijvoorbeeld 1in of 5in), of centimeters (bijvoorbeeld 1cm of 5cm) . Waarden kunnen ook worden gedeclareerd als een percentage van het HTML-element dat wordt opgemaakt. Als de waarde bijvoorbeeld 50% is, is de opvulling 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 een lengte. Als slechts één waarde wordt toegewezen, wijzen webbrowsers deze opvulling toe aan alle vier de zijden van het HTML-element.
vulling: 10%;
padding: 100px;
Als u meer waarden toevoegt aan het type opvulverklaring hierboven, zullen webbrowsers deze 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 zorgen ervoor dat de eerste verwijst naar de bovenkant, de tweede naar de linker- en rechterkant en de derde naar de onderkant van het HTML-element. Als u maximaal vier waarden toewijst, komen de eerste, tweede, derde en vierde waarden overeen met de boven-, rechter-, onder- en linkerkant van het HTML-element, in die volgorde. Wanneer meer dan één waarde wordt opgegeven, moeten deze worden gescheiden door spaties en worden afgesloten met een puntkomma, bijvoorbeeld:
vulling: 10 px 20 px 10 px 20 px;
Opvulling in CSS kan ook één kant tegelijk worden gedaan. In dit verband zijn er nog vier opvullingseigenschappen beschikbaar. Dit zijn padding-top, padding-rechts, padding-onderkant en padding-links. Om padding in CSS op deze meer precieze manier te maken, moet u de eigenschappen labelen met dezelfde syntaxis als de steno-verklaringen zoals hierboven. Elk van deze opvullingseigenschappen heeft slechts één waarde in lengte of percentage. Bijvoorbeeld:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
Padding-left: 20px;
De volgende code maakt een webpagina, declareert de opvullingseigenschappen tussen stijltags en gebruikt deze vervolgens in een alinea-element dat wordt opgegeven door de p-tag. De tekst tussen de / * en de * / zijn opmerkingen om het gebruikte type opvulling uit te leggen en zou niet worden opgenomen in de CSS-opvulcode.
<Html>
<Head>
<style type = "text / css">
p.example1 {padding: 10px;} / * Padding met korte hand voor alle vier zijden * /
p.example2 {padding: 50px 30px;} / * Korte opvulling voor de boven- en onderkant gevolgd door links en rechts * /
p.example3 {
padding-top: 10px;
padding-bottom: 20px;
padding-bottom: 10px;
Padding-left: 20px;
} / * individuele opvulling. * /
</ Style>
</ Head>
<Body>
<p class = "example1"> Deze tekst heeft aan elke zijde dezelfde opvulling. De vulling aan elke zijde is 10 px. </p>
<p class = "example2"> Deze tekst heeft een opvulling boven en onder van 50 px en een opvulling links en rechts van 30 px. </p>
<p class = ”example3”> Deze tekst heeft een bovenste opvulling van 10 px, een rechtse opvulling van 20 px, een onderste opvulling van 10 px en een linkse opvulling van 20 px. </p>
</ Body>
</ Html>
In het bovenstaande voorbeeld zijn 'voorbeeld1' enz. Namen die aan een klasse zijn toegewezen en waarnaar in de alinea's 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 alinea. Let op de accolades na de klasseaangifte die de waardetoewijzingen van de opvuleigenschap omsluit.
Hoewel dit misschien veel werk lijkt, is het veel minder arbeidsintensief dan het specificeren van opvulling voor elke individuele paragraaf. U kunt een opvullingseigenschap voor het gewenste element opgeven, in het bovenstaande voorbeeld de p-tag, en vervolgens naar de klasse verwijzen wanneer u het element tussen de body-tags van de pagina gebruikt. Als slechts één type opvulling nodig is voor alle alinea's, hoeft u helemaal geen klassen te gebruiken. Gebruik eenvoudig de volgende code tussen de stijltags en codeer vervolgens de alinea's 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 maken, zou van invloed zijn op alle alinea's, hoewel er geen klasse was opgegeven.