Hvordan lager jeg polstring i CSS?
CSS-polstring lar en HTML-koder angi standard polstring eller dødplass utenfor et HTML-element. Fordelen med å gjøre dette er at den sparer koderen fra å gjenta den polstringskoden for hver forekomst av det elementet, og lettere skaper konsistens på siden. HTML-elementet som skal polstres, kan være et hvilket som helst antall ting, for eksempel et avsnitt, en tabell eller en overskrift.
For å lage polstring i CSS, må du først identifisere HTML-elementet du vil polstere. Dette elementet du vil putte er kjent som velgeren. Deretter vil du spesifisere de aktuelle polstringverdiene. Det er fem forskjellige typer polstringegenskaper i CSS - en for alle fire sider av et element på en gang, og fire andre for hver individuelle side av elementet (f.eks. Venstre side, høyre side, overside eller underside ). En egenskap som gjør det mulig for programmereren å spesifisere verdier for alle fire sider av et HTML-element på en gang, kalles en stenografiegenskap .
Kodingsspråket som brukes til å spesifisere en deklarering av CSS-polstring er ganske enkelt ordet “polstring.” Etter den etiketten er de relevante “verdiene” for polstring, eller informasjon om mengden plass ønsket, vanligvis representert enten med piksler eller en prosentdel. Polstringen og verdiene er skrevet inne i krøllete seler eller krøllete parenteser (dvs. "{" og "}"). Forut for alt dette er HTML-elementet som skal polstres (f.eks. "P" for avsnittet eller "H2" for topp 2-overskrifter).
Når det gjelder hvordan verdien er representert, kan verdier være representert i piksler (f.eks. 1px eller 5px), punkter (f.eks. 1pt eller 5pt) eller tommer (f.eks. 1in eller 5in), eller centimeter (f.eks. 1 cm eller 5 cm) . Verdier kan også deklareres som en prosentandel av HTML-elementet som blir stylet. Hvis verdien for eksempel er 50%, vil polstringen være lik halvparten av elementets størrelse.
Følgende eksempler er HTML-koden for polstring av et HTML-element ved hjelp av verdier reflektert i henholdsvis en prosent og lengde. Hvis bare en verdi er tildelt, tilordner nettlesere denne polstringen til alle fire sider av HTML-elementet.
padding: 10%;
padding: 100 piksler;
Å legge til flere verdier til typen polstringdeklarasjon ovenfor vil føre til at nettlesere tolker dem på en bestemt måte. Hvis det tilordnes to verdier, tilsvarer den første toppen og bunnen, mens den andre tilsvarer venstre og høyre. Tre verdier vil føre til at den første refererer til toppen, den andre til venstre og høyre side, og den tredje til bunnen av HTML-elementet. Tildeling av maksimalt fire verdier får den første, andre, tredje og fjerde verdiene til å samsvare med toppen, høyre, bunn og venstre for HTML-elementet, i den rekkefølgen. Når det er gitt mer enn én verdi, skal de skilles med mellomrom og avsluttes med en halvkolon, for eksempel:
polstring: 10px 20px 10px 20px;
Polstring i CSS kan også gjøres på den ene siden av gangen. I denne forbindelse er det fire ekstra polstringegenskaper tilgjengelig. Disse er polstring-topp, polstring-høyre, polstring-bunn og polstring-venstre. Hvis du vil lage polstring i CSS på denne mer presise måten, må du merke egenskapene med samme syntaks som stikkorddeklarasjonene som ovenfor. Hver av disse polstringegenskapene tar bare en verdi i enten lengde eller prosentandel. For eksempel:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-venstre: 20 piksler;
Følgende kode oppretter en webside, deklarerer polstringegenskapene mellom stilkoder og bruker dem deretter i et avsnittelement spesifisert av p-koden. Teksten mellom / * og * / er notater for å forklare hvilken type polstring som er brukt, og vil ikke være inkludert i CSS-polstringskode.
<Html>
<Head>
<style type = "text / css">
p.example1 {polstring: 10px;} / * Korthånds polstring for alle fire sider * /
p.example2 {polstring: 50px 30px;} / * Kortpolstring for topp og bunn etterfulgt av venstre og høyre * /
p.example3 {
padding-top: 10px;
padding-bottom: 20 piksler;
padding-bottom: 10px;
padding-venstre: 20 piksler;
} / * individuell polstring. * /
</ Style>
</ Head>
<Body>
<p class = "example1"> Denne teksten har samme polstring på hver side. Polstringen på hver side er 10px. </p>
<p class = "example2"> Denne teksten har en topp- og bunnpolstring på 50px og en venstre og høyre polstring på 30px. </p>
<p class = ”example3”> Denne teksten har en toppfylling på 10px, en høyre polstring på 20px, en bunnpolstring på 10px og en venstrepolstring på 20px. </p>
</ Body>
</ Html>
I eksemplet over, "eksempel1", osv., Er navn tildelt en klasse, som det refereres til i avsnittene. Perioden mellom p-taggen og klassens navn i begynnelsen av koden betegner en erklæring om en klasse som er tilordnet et avsnitt. Legg merke til tannreguleringen etter klassedeklarasjonen som inneholder vedlagte tildelinger for polstingsegenskaper.
Selv om dette kan virke som mye arbeid, er det langt mindre arbeidskrevende enn å spesifisere polstring for hvert enkelt avsnitt. Du kan deklarere en polstringegenskap for det ønskede elementet, som i eksemplet ovenfor er p-koden, og deretter referere til klassen når du bruker elementet mellom karosserikodene på siden. Hvis bare en type polstring er nødvendig for alle avsnitt, trenger du ikke å bruke klasser i det hele tatt. Bare bruk følgende kode mellom stilkodene, og koder deretter avsnittene uten å spesifisere noen klasse. Denne koden vil gå mellom kroppskodene i stedet for koden i eksemplet ovenfor.
p {polstring: 10px 20px 10px 20px;}
Denne CSS-polstringen dette ville opprette, vil påvirke alle avsnitt, selv om det ikke var spesifisert noen klasse.