Jak vytvořím polstrování v CSS?
Padding CSS umožňuje HTML Coder nastavit výchozí polstrování nebo mrtvý prostor mimo prvek HTML.Výhodou toho je, že uloží kodér v opakování tohoto kódu polstrování pro každý instanci tohoto prvku a snadněji vytváří konzistenci na stránce.Prvek HTML, který má být vycpán, může být libovolný počet věcí, jako je odstavec, tabulka nebo nadpis.
Abyste vytvořili polstrování v CSS, musíte nejprve identifikovat prvek HTML, který chcete podávat.Tento prvek, který chcete podávat, je známý jako selektor.Poté budete chtít zadat příslušné hodnoty polstrování.V CSS MDASH je pět různých typů polstrovacích vlastností;Jeden pro všechny čtyři strany prvku najednou a čtyři další pro každou jednotlivou stranu prvku (např. Levá strana, pravá strana, horní strana nebo spodní strana).Vlastnost, která umožňuje programátorovi zadat hodnoty pro všechny čtyři strany prvku HTML najednou, se nazývá vlastnost zkratky .
kódovací jazyk používaný k určení jednoho deklarace polstrování CSS je jednoduše slovo „polstrování“.Po tomto štítku jsou relevantní hodnoty polstrování nebo informace o množství požadovaného prostoru, obvykle představované buď pixely nebo procentem.Vycpávání a hodnoty jsou psány uvnitř kudrnatých rovnátka nebo kudrnatých konzolů (tj. {A}).Předcházející to vše je prvek HTML, který má být polstrován (např. P pro odstavec nebo H2 pro záhlaví úrovně 2).body (např. 1pt nebo 5pt) nebo palce (např. 1in nebo 5in) nebo centimetry (např. 1 cm nebo 5 cm).Hodnoty lze také deklarovat jako procento stylu prvku HTML.Pokud je například hodnota 50%, polstrování se rovná polovině velikosti prvku.Pokud je přiřazena pouze jedna hodnota, pak webové prohlížeče přiřadí toto polstrování na všechny čtyři strany prvku HTML.
Vycpávání: 10%;
Vycpávání: 100px; Přidání více hodnot k typu vycpávání výše způsobí, že je webové prohlížeče interpretují určitým způsobem.Pokud jsou přiřazeny dvě hodnoty, první bude odpovídat horní a dolní části, zatímco druhý odpovídá doleva a doprava.Tři hodnoty způsobí, že se první odkazuje na vrchol, druhý na levé a pravé straně a třetí na dno prvku HTML.Přiřazení maximálních čtyř hodnot způsobí, že první, druhé, třetí a čtvrté hodnoty odpovídají hornímu, pravému, dolnímu a levému prvku HTML v tomto pořadí.Pokud je poskytnuta více než jedna hodnota, měla by být oddělena mezerami a skončila například semi-colon, například:
polstrování: 10px 20px 10px 20px;
polstrování v CSS lze provést také najednou.V tomto ohledu jsou k dispozici další čtyři polstrovací vlastnosti.Jedná se o polstrování-top, polstrování-pravý, polstrovací dno a levý polstrování.Chcete -li vytvořit polstrování v CSS tím, že je třeba označit vlastnosti stejnou syntaxí jako deklarace zkratky, jak je uvedeno výše.Každá z těchto polstrovacích vlastností má pouze jednu hodnotu v délce nebo procentech.Například:
Padding-top: 10px;
Padding-Right: 20px;Padding-dno: 10px;
Padding-Left: 20px;
Následující kód vytváří webovou stránku, prohlašuje vlastnosti polstrování mezi značkami stylů aPoté je použije v prvku odstavce určeného pomocí značky P.Text mezi/ * a */jsou poznámky k vysvětlení typu použitého polstrování a nebyl by zahrnut do polstrovacího kódu CSS.
P.Example1 {Padding: 10px;} /* Zkratka pro všechny čtyři strany* /
P.Example2 {Padding: 50px 30px;} /* krátké polstrování na horní a dolní část levéhoa vpravo * /
P.Example3 {
Padding-top: 10px;
Padding-Bottom: 20px;
Padding-Bottom: 10px;
Padding-Left: 20px;
} / * individuální polstrování.*/
Lt;/Style gt;Vycpávání na každé straně je 10px.' ”Příklad3” gt; tento text má nejvyšší polstrování 10px, pravé polstrování 20px, spodní polstrování 10px a levé polstrování 20px.;
Ve výše uvedeném příkladu „Příklad1“ atd. Jsou jména přiřazená ke třídě, na které se pak odkazuje v odstavcích.Období mezi značkou P a názvy třídy na začátku kódu označuje prohlášení třídy přiřazené odstavcem.Všimněte si rovnátka po deklaraci třídy uzavřené přiřazení hodnoty polstrování.
Ačkoli by se to mohlo zdát jako hodně práce, je to mnohem méně náročné na práci než stanovení polstrování pro každý jednotlivý odstavec.Pro požadovaný prvek můžete deklarovat jednu vlastnost polstrování, který je ve výše uvedeném příkladu značka P, a poté odkazujte na třídu, když používáte prvek mezi značkami těla na stránce.Pokud je pro všechny odstavce potřebný pouze jeden typ polstrování, nemusíte používat kurzy vůbec.Jednoduše použijte následující kód mezi značkami stylu a poté odstavce kódujte bez zadání jakékoli třídy.Tento kód by šel mezi značkami těla místo kódu ve výše uvedeném příkladu.
P {Padding: 10px 20px 10px 20px;}
Toto polstrování CSS, které by to vytvořilo, by ovlivnilo všechny odstavce, i když nebyla specifikována žádná třída.