Hvordan opretter jeg polstring i CSS?
CSS-polstring giver en HTML-kode 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 denne polstringskode for hver forekomst af dette element, og lettere skaber konsistens på siden. HTML-elementet, der skal polstret, kan være et vilkårligt antal ting, såsom et afsnit, en tabel eller en overskrift.
Hvis du vil oprette polstring i CSS, skal du først identificere det HTML-element, du vil pude. Dette element, som du vil pude, kaldes vælgeren. Derefter ønsker du at specificere de passende polstringværdier. Der er fem forskellige typer polstringegenskaber i CSS - en for alle fire sider af et element på en gang, og fire andre for hver individuelle side af elementet (f.eks. Venstre side, højre side, overside eller bundside ). En egenskab, der tillader programmøren at specificere værdier for alle fire sider af et HTML-element på én gang kaldes en kortvarig egenskab .
Det kodesprog, 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 procent. 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. 1 px eller 5 px), 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å deklareres som en procentdel af HTML-elementet, der er stylet. Hvis værdien for eksempel er 50%, vil polstret svare til halvdelen af elementets størrelse.
Følgende eksempler er HTML-koden til polstring af et HTML-element ved hjælp af værdier, der er afspejlet i henholdsvis en procentdel og længde. Hvis der kun tildeles én værdi, tildeler webbrowsere denne polstring til alle fire sider af HTML-elementet.
padding: 10%;
padding: 100px;
Tilføjelse af flere værdier til typen af polsterdeklaration ovenfor vil få browsere til at tolke dem på en bestemt måde. Hvis der tildeles to værdier, svarer den første til toppen og bunden, 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 maksimalt fire værdier får den første, anden, tredje og fjerde værdi til at svare til øverste, højre, nederste og venstre side af HTML-elementet i den rækkefølge. Når der findes mere end en værdi, skal de adskilles af mellemrum og afsluttes med en halvtarm, for eksempel:
polstring: 10px 20px 10px 20px;
Polstring i CSS kan også udføres en side ad gangen. I denne forbindelse er der fire yderligere polstringegenskaber tilgængelige. Disse er polstring-top, polstring-højre, polstring-bund og polstring-venstre. Hvis du vil oprette polstring i CSS på denne mere præcise måde, skal du markere egenskaberne med den samme syntaks som kortholdsangivelserne som ovenfor. Hver af disse polstringegenskaber tager kun en værdi i enten længde eller procentdel. For eksempel:
padding-top: 10px;
padding-højre: 20px;
padding-bottom: 10px;
padding-venstre: 20px;
Følgende kode opretter en webside, erklærer polstringegenskaber mellem stilkoder og bruger dem derefter i et afsnitelement, der er specificeret af p-koden. Teksten mellem / * og * / er noter til at forklare den anvendte polstringstype og vil ikke være inkluderet i CSS-polstringskode.
<Html>
<Head>
<style type = "text / css">
p.example1 {polstring: 10px;} / * Korthåndspolstring til alle fire sider * /
p.example2 {polstring: 50px 30px;} / * Korthåndspolstring til top og bund efterfulgt af venstre og højre * /
p.example3 {
padding-top: 10px;
padding-bottom: 20px;
padding-bottom: 10px;
padding-venstre: 20px;
} / * individuel polstring. * /
</ Style>
</ Head>
<Body>
<p class = "example1"> Denne tekst har den samme polstring på hver side. Polstret på hver side er 10px. </p>
<p class = "example2"> Denne tekst har en top og bund polstring på 50px og en venstre og højre polstring på 30px. </p>
<p class = ”eksempel3”> Denne tekst har en top polstring på 10px, en højre polstring på 20px, en bundpolstring af 10px og en venstre polstring på 20px. </p>
</ Body>
</ Html>
I eksemplet ovenfor "eksempel 1" osv. Er navne, der er tildelt en klasse, som derpå henvises til i afsnittene. Perioden mellem p-mærket og klassens navne i begyndelsen af koden angiver en erklæring af en klasse, der er tildelt et afsnit. Vær opmærksom på klammeparenteserne efter klassedeklarationen vedlagt tildelingen til polstringens værdi.
Selvom dette kan virke som en masse arbejde, er det langt mindre arbejdskrævende end at specificere polstring for hvert enkelt afsnit. Du kan erklære en polstringsejendom for det ønskede element, som i eksemplet ovenfor er p-mærket, og derefter henvise til klassen, når du bruger elementet mellem kropskoder på siden. Hvis der kun er brug for en type polstring til alle afsnit, behøver du slet ikke bruge klasser. Brug blot følgende kode mellem typetagene, og kode derefter afsnit uden at specificere nogen klasse. Denne kode vil gå mellem body tags i stedet for koden i ovenstående eksempel.
p {polstring: 10px 20px 10px 20px;}
Denne CSS-polstring, dette ville oprette, ville påvirke alle afsnit, selvom der ikke var angivet nogen klasse.