Hvordan skaber jeg polstring i CSS?

CSS -polstring tillader en HTML -koder 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 MDASH;Én 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 nederste side).En egenskab, der tillader programmereren at specificere værdier for alle fire sider af et HTML -element på én gang kaldes en korthundens 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 for 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 størrelsen på elementet.

Følgende eksempler er HTML -koden til polstring af et 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 tilvejebringes 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 også udføres en side ad gangen.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:

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

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

lt; html gt;
lt; head gt;
lt; stil type ' tekst/css gt;
p.example1 {polstring: 10px;} /* kort hånd polstring til alle fire sider* /
p.example2 {polstring: 50px 30px;} /* kort hånd polstring til toppen og nederst efterfulgt af venstreog højre * /
p.example3 {
polstring-top: 10px;
polstring-bottom: 20px;
polstring-bottom: 10px;
Padding-venstre: 20px;
} / * individuel polstring.*/
lt;/stil gt;
lt;/head gt;

lt; body gt;
lt; p class ' eksempel1 gt; denne tekst har den samme polstring på hver side.Polstret på hver side er 10px. Lt;/p gt;
lt; p class ' eksempel2 gt; denne tekst har en top og bund polstring på 50px og en venstre og højre polstring af 30px. Lt;/p gt;
lt; p -klasse' ”Eksempel3” gt; Denne tekst har en top polstring på 10px, en højre polstring på 20px, en bund polstring af 10px og en venstre polstring af 20px.;

I eksemplet ovenfor er “Eksempel1” osv. Navne, der er tildelt en klasse, som derefter henvises til i afsnittet.Perioden mellem P -mærket og klassenavne i begyndelsen af koden angiver en erklæring om en klasse, der er tildelt et afsnit.Bemærk seler efter klasseklarationen, der omslutter opgaverne af polstring af ejendomsværdi.

Selvom dette kan virke som en masse arbejde, er det langt mindre arbejdskrævende end at specificere polstring til hvert enkelt afsnit.Du kan erklære en polstringejendom til det ønskede element, som i eksemplet ovenfor er P -mærket og derefter henvise til klassen, når du bruger elementet mellem kropsmærkerne på siden.Hvis der kun er behov for en type polstring til alle afsnit, behøver du slet ikke bruge klasser.Brug blot følgende kode mellem stilmærkerne, og kod derefter afsnittene uden at specificere nogen klasse.Denne kode ville gå mellem kropsmærkerne i stedet for koden i ovenstående eksempel.

p {polstring: 10px 20px 10px 20px;}

Dette CSS -polstring, dette ville skabe, ville påvirke alle afsnit, selvom der ikke var nogen klasse specificeret.