Jak vytvořím výplň v CSS?
Výplň CSS umožňuje HTML kodéru nastavit výchozí výplň nebo mrtvý prostor mimo prvek HTML. Výhodou tohoto postupu je, že šetří kodér před opakováním tohoto výplňového kódu pro každou instanci tohoto prvku a snadněji vytváří konzistenci na stránce. Prvek HTML, který má být vyplněn, může být libovolný počet věcí, například odstavec, tabulka nebo nadpis.
Chcete-li vytvořit výplň v CSS, musíte nejprve identifikovat prvek HTML, který chcete vložit. Tento prvek, který chcete padnout, se nazývá selektor. Pak budete chtít určit příslušné hodnoty výplně. V CSS existuje pět různých typů vycpávek - 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á zkratková vlastnost .
Kódovací jazyk používaný pro specifikaci jednoho prohlášení o vyplňování CSS je jednoduše slovo „padding“. Za tímto štítkem jsou relevantní „hodnoty“ vycpávky nebo informace o množství požadovaného prostoru, obvykle reprezentované buď pixely nebo procento. Výplň a hodnoty jsou zapsány do složených závorek nebo složených závorek (tj. „{“ A „}“). Před tím veškerým je prvek HTML, který má být vyplněn (např. „P“ pro odstavec nebo „H2“ pro záhlaví úrovně 2).
Pokud jde o to, jak je hodnota reprezentována, mohou být hodnoty reprezentovány v pixelech (např. 1px nebo 5px), bodech (např. 1pt nebo 5pt) nebo palcích (např. 1in nebo 5in) nebo centimetrech (např. 1 cm nebo 5 cm) . Hodnoty lze také deklarovat jako procento stylizovaného prvku HTML. Pokud je například hodnota 50%, bude výplň rovna polovině velikosti prvku.
Následující příklady jsou kódem HTML pro vyplnění prvku HTML pomocí hodnot vyjádřených v procentech a délce. Pokud je přiřazena pouze jedna hodnota, webové prohlížeče přiřadí toto odsazení všem čtyřem stranám prvku HTML.
čalounění: 10%;
čalounění: 100px;
Přidání více hodnot k výše uvedenému typu výplňového prohlášení způsobí, že je webový prohlížeč interpretuje určitým způsobem. Pokud jsou přiřazeny dvě hodnoty, první bude odpovídat horní a dolní, zatímco druhá bude odpovídat vlevo a vpravo. Tři hodnoty způsobí, že první bude odkazovat na horní, druhou na levou a pravou stranu a třetí na spodní část prvku HTML. Přiřazení maximálně čtyř hodnot způsobí, že první, druhá, třetí a čtvrtá hodnota odpovídají hornímu, pravému, dolnímu a levému prvku HTML v tomto pořadí. Pokud je zadána více než jedna hodnota, měly by být odděleny mezerami a zakončeny středníkem, například:
čalounění: 10px 20px 10px 20px;
Výplň v CSS lze provádět také po jedné straně. V tomto ohledu jsou k dispozici další čtyři výplňové vlastnosti. Jedná se o výplňový, výplňový, výplňový a výplňový. Chcete-li vytvořit přesnější výplň v CSS přesněji, musíte označit vlastnosti stejnou syntaxí jako zkratková prohlášení jako výše. Každá z těchto vlastností výplně bere pouze jednu hodnotu v délce nebo procentuálním vyjádření. Například:
výplň: 10px;
padding right: 20px;
výplň: 10px;
padding-left: 20px;
Následující kód vytvoří webovou stránku, deklaruje vlastnosti výplně mezi značkami stylu a poté je použije v elementu odstavce určeném značkou p. Text mezi / * a * / jsou poznámky vysvětlující typ použitého vycpávky a nebyl by zahrnut do vycpávkového kódu CSS.
<html>
<head>
<style type = "text / css">
p.example1 {padding: 10px;} / * Krátké odsazení pro všechny čtyři strany * /
p.example2 {padding: 50px 30px;} / * Krátké čalounění pro horní a dolní část následované levou a pravou * /
p.example3 {
výplň: 10px;
výplň: 20px;
výplň: 10px;
padding-left: 20px;
} / * individuální polstrování. * /
</style>
</head>
<body>
<p class = "example1"> Tento text má na každé straně stejné výplně. Výplň na každé straně je 10px. </p>
<p class = "example2"> Tento text má horní a dolní výplň 50px a levé a pravé výplň 30px. </p>
<p class = ”example3”> Tento text má horní výplň 10px, pravé výplň 20px, spodní výplň 10px a levé výplň 20px. </p>
</body>
</html>
Ve výše uvedeném příkladu jsou „example1“ atd. Jména přiřazená třídě, na která se potom odkazuje v odstavcích. Období mezi značkou p a názvy tříd na začátku kódu označuje deklaraci třídy přiřazené k odstavci. Všimněte si složených závorek po deklaraci třídy, která uzavírá přiřazení hodnoty vlastnosti padding.
Ačkoli se to může jevit jako spousta práce, je to mnohem méně náročné na práci, než specifikovat výplň pro každý jednotlivý odstavec. Můžete deklarovat jednu vlastnost výplně pro požadovaný prvek, kterým je ve výše uvedeném příkladu značka p, a poté odkazovat na třídu, když používáte prvek mezi tělními značkami na stránce. Pokud je pro všechny odstavce potřeba pouze jeden typ výplně, nemusíte třídy vůbec používat. Jednoduše použijte následující kód mezi značkami stylu a potom kódujte odstavce, aniž byste určili jakoukoli třídu. Tento kód by přecházel mezi tělními značkami místo kódu ve výše uvedeném příkladu.
p {padding: 10px 20px 10px 20px;}
Toto vycpávky CSS, které by to vytvořilo, by ovlivnily všechny odstavce, i když nebyla zadána žádná třída.