Hvordan lager jeg polstring i CSS?
CSS -polstring gjør det mulig for en HTML -koder å stille inn standard polstring eller død plass 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 putte. Dette elementet du vil pad er kjent som velgeren. Deretter vil du spesifisere de aktuelle polstringsverdiene. Det er fem forskjellige typer polstringsegenskaper i CSS - en for alle fire sider av et element samtidig, og fire andre for hver enkelt side av elementet (f.eks. Venstre side, høyre side, toppsiden eller undersiden). En egenskap som tillater programmereren å spesifisere verdier for alle fire sider av et HTML -element på en gang kalles en Shorthand -eiendom .
Kodingsspråket som brukes til å spesifisere en erklæring om CSS -polstring er ganske enkelt ordet "polstring." Etter den etiketten, er de relevante "verdiene" av polstringen, eller, informasjon om mengden som er ønsket plass, vanligvis representert enten av piksler eller en prosentandel. Polstringen og verdiene er skrevet i krøllete seler eller krøllete parenteser (dvs. "{" og "}"). Foregående alt dette er HTML -elementet som skal polstres (f.eks. "P" for avsnittet eller "H2" for nivå 2 -overskrifter).
Når det gjelder hvordan verdien er representert, kan verdier representeres 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 5cm). Verdier kan også erklæres som en prosentandel av HTML -elementet som blir stylet. Hvis verdien er 50%, for eksempel, vil polstringen være lik halvparten av størrelsen på elementet.
Følgende eksempler, er HTML -koden for polstring av en HTML Element som verdier gjenspeiles i henholdsvis en prosent og lengde. Hvis bare en verdi er tildelt, vil nettlesere tilordne denne polstringen til alle fire sider av HTML -elementet.
Padding: 10%;
Polstring: 100px;
Å legge til flere verdier til den type polstringsdeklarasjon ovenfor vil føre til at nettlesere tolker dem på en bestemt måte. Hvis to verdier er tildelt, vil de første samsvare med topp og bunn, mens den andre tilsvarer venstre og høyre. Tre verdier vil føre til at de første refererer til toppen, den andre til venstre og høyre side, og den tredje til bunnen av HTML -elementet. Å tilordne maksimalt fire verdier fører til at den første, andre, tredje og fjerde verdien samsvarer med topp, høyre, bunn og venstre for HTML -elementet, i den rekkefølgen. Når mer enn en verdi er gitt, bør de skilles ut av mellomrom og avsluttes med et semikolon, for eksempel:
Padding: 10px 20px 10px 20px;
polstring i CSS kan gjøres en side påen tid også. I denne forbindelse er det fire flere polstringsegenskaper tilgjengelig. Dette er polstringstopp, polstring-høyre, padding-bottom og padding-venstre. For å lage polstring på CSS på denne mer presise måten, må du merke egenskapene med samme syntaks som Shorthand -erklæringen som ovenfor. Hver av disse polstringsegenskapene tar bare en verdi i enten lengde eller prosentandel. For eksempel:
Padding-top: 10px;
Padding-høyre: 20px;
Padding-Bottom: 10px;
Padding-Left: 20px;
Følgende kode oppretter en webside, erklærer polstringsegenskapene mellom stilmerker, og bruker dem deretter i et avsnittelement spesifisert av P -taggen. Teksten mellom/ * og */er notater for å forklare typen polstring som brukes og vil ikke bli inkludert i CSS -polstringskode.
Denne teksten har samme polstring på hver side. Polstringen på hver side er 10px.
Denne teksten har en topp- og bunnpolstring av 50px og en venstre og høyre polstring på 30px.
Denne teksten har en topp polstring av 10px, en høyre polstring på 20px, en bunnpolstring på 10px og en venstre polstring på 20px.
I eksemplet over er "Eksempel1," etc., navn tildelt en klasse, som deretter blir referert til i avsnittet. Perioden mellom P -taggen og klassenavnene i begynnelsen av koden angir en erklæring om en klasse tildelt et avsnitt. Legg merke til seler etter klassedeklaringenation som omslutter Padding Eiendomsverdioppgaver.
Selv om dette kan virke som mye arbeid, er det langt mindre arbeidsintensivt enn å spesifisere polstring for hvert enkelt avsnitt. Du kan erklære en padding -egenskap for ønsket element, som i eksemplet over er P -taggen, og deretter referere til klassen når du bruker elementet mellom kroppskodene 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 stilmerker, og kode deretter avsnittet uten å spesifisere noen klasse. Denne koden vil gå mellom kroppskodene i stedet for koden i eksemplet ovenfor.
P {padding: 10px 20px 10px 20px;}
Denne CSS -polstringen dette vil skape ville påvirke alle avsnitt, selv om det ikke var noen klasse spesifisert.