Hvordan skaber jeg polstring i CSS?

CSS -polstring giver en HTML -koder mulighed for at indstille standardpolstring eller død plads uden for et HTML -element. Fordelen ved at gøre dette er, at det sparer koderen fra at gentage den polstringkode for hver forekomst af dette element og lettere skaber konsistens på siden. HTML -elementet, der skal polstres, kan være et vilkårligt antal ting, såsom et afsnit, et tabel eller en overskrift.

For at oprette polstring i CSS skal du først identificere det HTML -element, du vil pude. Dette element, som du vil pude, er kendt som vælgeren. Derefter vil du specificere de passende polstringværdier. Der er fem forskellige typer polstringegenskaber i CSS - en for alle fire sider af et element på én gang og fire andre for hver enkelt side af elementet (f.eks. Venstre side, højre side, øverste side eller bunden). En egenskab, der tillader programmereren at specificere værdier for alle fire sider af et HTML -element på én gang kaldes en shorthand -egenskab .

Det kodende sprog, der bruges til at specificere en erklæring om CSS -polstring, er simpelthen ordet "polstring." Efter denne etiket er de relevante "værdier" af polstring, eller information om den ønskede plads, normalt repræsenteret enten af ​​pixels eller en procentdel. Polstret og værdierne er skrevet inde i krøllede seler eller krøllede parenteser (dvs. "{" og "}"). Forud for alt dette er HTML -elementet, der skal polstres (f.eks. "P" for afsnittet eller "H2" for niveau 2 -overskrifter).

Med hensyn til, hvordan værdien er repræsenteret, kan værdier repræsenteres i pixels (f.eks. 1px eller 5px), punkter (f.eks. 1pt eller 5pt) eller inches (f.eks. 1in eller 5in) eller centimeter (f.eks. 1 cm eller 5 cm). Værdier kan også erklæres som en procentdel af HTML -elementet, der er stylet. Hvis værdien for eksempel er 50%, vil polstringen lig med halvdelen af ​​elementets størrelse.

Følgende eksempler er HTML -koden til polstring af en HTML -element ved hjælp af værdier, der afspejles i henholdsvis en procentdel og længde. Hvis der kun tildeles en værdi, tildeler webbrowsere denne polstring til alle fire sider af HTML -elementet.

polstring: 10%;
Polstring: 100px;

Tilføjelse af flere værdier til typen af ​​polstringserklæring ovenfor vil få webbrowsere til at fortolke dem på en bestemt måde. Hvis to værdier tildeles, svarer den første til toppen og bund, mens den anden svarer til venstre og højre. Tre værdier får den første til at henvise til toppen, den anden til venstre og højre side og den tredje til bunden af ​​HTML -elementet. Tildeling af maksimum på fire værdier får den første, anden, tredje og fjerde værdi til at svare til toppen, højre, bund og venstre for HTML -elementet i den rækkefølge. Når der leveres mere end en værdi, skal de adskilles med mellemrum og endte med en semi-colon, for eksempel:

polstring: 10px 20px 10px 20px;

polstring i CSS kan udføres på den ene side vedogså en tid. I denne henseende er der fire flere polstringegenskaber tilgængelige. Dette er polstring-top, polstring til højre, polstring-bottom og polstring-venstre. For at skabe polstring i CSS på denne mere præcise måde, skal du mærke egenskaberne med den samme syntaks som de kortfattede erklæringer som ovenfor. Hver af disse polstringegenskaber tager kun en værdi i enten længde eller procentdel. For eksempel:

polstring-top: 10px;
Polstring-højre: 20px;
Padding-bottom: 10px;
Padding-venstre: 20px;

Følgende kode opretter en webside, erklærer polstringegenskaber mellem stilmærker og bruger dem derefter i et afsnit, der er specificeret af P -mærket. Teksten mellem/ * og */er noter for at forklare den anvendte polstring og ville ikke blive inkluderet i CSS -polstringskode.