Hur skapar jag stoppning i CSS?
CSS-polstring tillåter en HTML-kodare att ställa in standard stoppning eller dödutrymme utanför ett HTML-element. Fördelen med att göra detta är att den sparar kodaren från att upprepa den stoppningskoden för varje instans av det elementet och lättare skapar konsistens på sidan. HTML-elementet som ska stoppas kan vara valfritt antal saker, t.ex. ett stycke, en tabell eller en rubrik.
För att skapa padding i CSS måste du först identifiera HTML-elementet som du vill padda. Detta element som du vill pad är känt som väljaren. Då vill du ange lämpliga stoppningsvärden. Det finns fem olika typer av stoppningsegenskaper i CSS - en för alla fyra sidor av ett element på en gång, och fyra andra för varje enskild sida av elementet (t.ex. vänster sida, höger sida, översidan eller undersidan ). En egenskap som tillåter programmeraren att specificera värden för alla fyra sidor av ett HTML-element på en gång kallas en korthetegenskap .
Kodningsspråket som används för att specificera en deklaration av CSS-padding är helt enkelt ordet "padding". Efter den etiketten är de relevanta "värdena" för utfyllningen, eller information om den mängd utrymme som önskas, vanligtvis representerad av antingen pixlar eller en procentsats. Polstret och värdena skrivs inuti lockiga hängslen eller lockiga parenteser (dvs. "{" och "}"). Före allt detta är HTML-elementet som ska stoppas (t.ex. "p" för stycket eller "H2" för rubriker på nivå 2).
När det gäller hur värdet representeras kan värden representeras i pixlar (t.ex. 1px eller 5px), punkter (t.ex. 1pt eller 5pt) eller tum (t.ex. 1in eller 5in) eller centimeter (t.ex. 1 cm eller 5 cm) . Värden kan också deklareras som en procentandel av HTML-elementet som utformas. Om värdet till exempel är 50% kommer stoppningen att vara lika med halva storleken på elementet.
Följande exempel är HTML-koden för utfyllning av ett HTML-element med hjälp av värden som återspeglas i respektive procent och längd. Om endast ett värde tilldelas, tilldelar webbläsare denna utfyllnad till alla fyra sidorna av HTML-elementet.
padding: 10%;
padding: 100px;
Om du lägger till fler värden till typen av stoppningsdeklaration ovan kommer webbläsarna att tolka dem på ett visst sätt. Om två värden tilldelas kommer den första att motsvara den övre och den nedre, medan den andra motsvarar vänster och höger. Tre värden får den första att hänvisa till toppen, den andra till vänster och höger sida och den tredje till botten av HTML-elementet. Att tilldela maximalt fyra värden gör att de första, andra, tredje och fjärde värdena motsvarar toppen, höger, botten och vänster om HTML-elementet i den ordningen. När mer än ett värde tillhandahålls, bör de separeras med mellanrum och avslutas med en halvkolon, till exempel:
stoppning: 10px 20px 10px 20px;
Polstring i CSS kan också göras en sida åt gången. I detta avseende finns det fyra ytterligare stoppningsegenskaper tillgängliga. Dessa är vadderad-topp, vadder-höger, vadder-botten och vaddering-vänster. Om du vill skapa polstring i CSS på detta mer exakta sätt måste du märka egenskaperna med samma syntax som de korta deklarationerna som ovan. Var och en av dessa stoppningsegenskaper tar endast ett värde i antingen längd eller procent. Till exempel:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
Följande kod skapar en webbsida, deklarerar vadderingsegenskaperna mellan stiltaggar och använder dem sedan i ett styckeelement som specificeras av p-taggen. Texten mellan / * och * / är anteckningar för att förklara vilken typ av polstring som används och skulle inte inkluderas i CSS-paddingkod.
<Html>
<Head>
<style type = "text / css">
p.example1 {padding: 10px;} / * Kort-hand padding för alla fyra sidor * /
p.example2 {polstring: 50px 30px;} / * Kortstödspolstring för topp och botten följt av vänster och höger * /
p.example3 {
padding-top: 10px;
padding-bottom: 20px;
padding-bottom: 10px;
padding-left: 20px;
} / * individuell stoppning. * /
</ Style>
</ Head>
<Body>
<p class = "example1"> Den här texten har samma stoppning på varje sida. Polstret på varje sida är 10px. </p>
<p class = "example2"> Den här texten har en topp- och bottenplastning på 50px och en vänster- och högerpolstring av 30px. </p>
<p class = ”example3”> Den här texten har en toppfyllning på 10px, en höger polstring på 20px, en botten stoppning av 10px och en vänster stoppning på 20px. </p>
</ Body>
</ Html>
I exemplet ovan, "exempel1", etc. är namn tilldelade en klass, som sedan hänvisas till i styckena. Perioden mellan p-taggen och klassnamnen i början av koden anger en deklaration av en klass tilldelad ett stycke. Lägg märke till hängslen efter klassdeklarationen som inkluderar tilldelningarna för vadderingsegenskaperna.
Även om detta kan verka som mycket arbete, är det mycket mindre arbetsintensivt än att specificera polstring för varje enskilt stycke. Du kan förklara en utfyllningsegenskap för det önskade elementet, som i exemplet ovan är p-taggen, och sedan referera till klassen när du använder elementet mellan kroppens taggar på sidan. Om bara en typ av polstring behövs för alla stycken behöver du inte använda klasser alls. Använd bara följande kod mellan formatmallarna och kod sedan styckena utan att ange någon klass. Den här koden skulle gå mellan karaktärstaggarna istället för koden i exemplet ovan.
p {stoppning: 10px 20px 10px 20px;}
Denna CSS-padding som detta skulle skapa skulle påverka alla stycken även om det inte anges någon klass.