Hur skapar jag stoppning i CSS?
CSS -stoppning gör det möjligt för en HTML -kodare att ställa in standardpolning eller dött utrymme utanför ett HTML -element.Fördelen med att göra detta är att det sparar kodaren från att upprepa den stoppningskoden för varje instans av det elementet och skapar lättare konsistens på sidan.HTML -elementet som ska vara vadderat kan vara valfritt antal saker, till exempel ett stycke, en tabell eller en rubrik.
För att skapa stoppning i CSS, måste du först identifiera HTML -elementet som du vill paddar.Detta element som du vill dyna kallas väljaren.Sedan vill du ange lämpliga stoppningsvärden.Det finns fem olika typer av stoppningsegenskaper i CSS MDASH;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 egenskap av korthet. Det kodande språket som används för att specificera en deklaration av CSS -stoppning är helt enkelt ordet "stoppning".Efter den etiketten är de relevanta värdena på stoppningen, eller, information om mängden önskat utrymme, vanligtvis representerad antingen av pixlar eller en procentandel.Polstringen och värdena är skrivna i lockiga hängslen eller lockiga konsoler (dvs. {och}).Före allt detta är HTML -elementet som ska vadderas (t.ex. P för stycket eller H2 för nivå 2 -rubriker).
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 är 50%, till exempel, kommer stoppningen att vara lika med halva storleken på elementet.
Följande exempel är HTML -koden för stoppning ett HTML -element med värden som återspeglas i en procentandel respektive längd.Om bara ett värde tilldelas tilldelar webbläsare denna stoppning till alla fyra sidor av HTML -elementet.
POLDING: 10%;
POLDING: 100px;
Att lägga till fler värden till typen av stoppningsdeklaration ovan kommer att få webbläsare att tolka dem på ett visst sätt.Om två värden tilldelas kommer den första att motsvara toppen och botten, medan den andra motsvarar vänster och höger.Tre värden kommer att få 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 orsakar de första, andra, tredje och fjärde värdena att motsvara topp-, 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 av mellanslag och slutas med en halvkolon, till exempel:
Polstring: 10px 20px 10px 20px;
Polstring i CSS kan göras en sida i taget också.I detta avseende finns det ytterligare fyra stoppningsegenskaper tillgängliga.Dessa är stoppningstopp, stoppning-höger, stoppningsbotten och stoppning-vänster.För att skapa stoppning 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 bara 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, förklarar stoppningsegenskaperna mellan stiltaggar ochanvänder dem sedan i ett styckeelement som anges av P -taggen.Texten mellan/ * och */är anteckningar för att förklara vilken typ av stoppning som används och skulle inte inkluderas i CSS -stoppningskod.
lt; html gt;
lt; head gt; lt; stil typ ' text/css gt;
p.example1 {padding: 10px;} /* korthandspolning för alla fyra sidor* /
p.example2 {padding: 50px 30px;} /* korthandspolning för topp och botten följt av vänsteroch höger * /
P.Example3 {
POLDING-TOP: 10PX;
POLDING-BOTTOM: 20PX;
POLDING-BOTTOM: 10PX;
POLDING-VELT: 20PX;
} / * Individuell padding.*/
lt;/style gt;
lt;/head gt;
lt; body gt;
lt; p class ' Exempel1 gt; Denna text har samma stoppning på varje sida.Polstringen på varje sida är 10px. Lt;/p gt;
lt; p klass ' exempel2 gt; Denna text har en topp- och bottenpolning på 50px och en vänster och höger stoppning på 30px. Lt;/p gt;
lt; P -klass' ”Exempel3” gt; Den här texten har en topppolning på 10px, en höger stoppning på 20px, en bottenpolning på 10px och en vänsterpolning på 20px. Lt;/p gt;
lt;/body gt;
lt;/html gt;
I exemplet ovan är "exempel1," etc. 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 som tilldelats ett stycke.Lägg märke till hängslen efter klassdeklarationen som omsluter tilldelningen för stoppningsegenskaper.
Även om detta kan verka som mycket arbete, är det mycket mindre arbetsintensivt än att ange stoppning för varje enskilt stycke.Du kan förklara en stoppningsegenskap 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 stoppning behövs för alla stycken, behöver du inte använda klasser alls.Använd bara följande kod mellan stiltaggarna och kod sedan styckena utan att ange någon klass.Den här koden skulle gå mellan kroppstaggarna istället för koden i exemplet ovan.
P {POLDING: 10PX 20PX 10PX 20PX;}
Denna CSS -stoppning som detta skulle skapa skulle påverka alla stycken även om det inte fanns någon klass specificerad.