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 ä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 korthårighet .
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" för stoppningen, eller, information om mängden önskat utrymme, vanligtvis representerad antingen av pixlar eller en procentandel. Polstring 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 5cm). 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 hälften av elementet.
Följande exempel är HTML -koden för stoppning av en HTML -element genom värden å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 med utrymmen och slutas med en halvkolon, till exempel:
POLDING: 10px 20px 10px 20px;
stoppning i CSS kan göras en sida viden tid 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 förklaringarna som ovan. Var och en av dessa stoppningsegenskaper tar bara ett värde i antingen längd eller procent. Till exempel:
POLDING-TOP: 10px;
POLDING-RIGHT: 20px;
POLDING-BOTTOM: 10px;
POLDING-LEFT: 20px;
Följande kod skapar en webbsida, förklarar stoppningsegenskaperna mellan stiltaggar och använder dem sedan i ett styckelement 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.
Den här texten har samma stoppning på varje sida. Polstring på varje sida är 10px.
Den här texten har en topp- och bottenpolning på 50px och en vänster och höger stoppning på 30px.
Den här texten har en topppolning på 10px, en höger stoppning på 20px, en bottenpolning på 10px och en vänster stoppning på 20px.
I exemplet ovan är "exempel1," etc. namn som tilldelas 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 klassdeklarenation som omsluter tilldelningen av 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 hänvisa 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 stycken utan att ange någon klass. Den här koden skulle gå mellan kroppstaggarna istället för koden i exemplet ovan.
p {padding: 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.