Hogyan hozhatok létre párnázást a CSS -ben?
A CSS Padding lehetővé teszi a HTML kódoló számára, hogy az alapértelmezett párnázást vagy a holt helyet egy HTML elemen kívül állítsa be.Ennek az az előnye, hogy ez megmenti a kódert attól, hogy megismételje ezt a párnázási kódot az elem minden egyes példányához, és könnyebben létrehozza az oldalon a következetességet.A párnázandó HTML elem tetszőleges számú dolog lehet, például egy bekezdés, egy asztal vagy egy címsor.Ezt az elemet, amelyet párnázni szeretne, választóként ismert.Ezután meg szeretné határozni a megfelelő párnázási értékeket.A CSS MDASH -ban öt különféle típusú párnázási tulajdonság létezik;Egy elem mind a négy oldalára egyszerre, és négy másik az elem minden egyes oldalán (például a bal oldal, a jobb oldal, a felső vagy az alsó oldal).Az a tulajdonság, amely lehetővé teszi a programozó számára, hogy a HTML elem mind a négy oldalára egyszerre meghatározza az értékeket,
rövidítésű tulajdonságnak nevezzük.
A CSS párnázási deklarációjának meghatározásához használt kódolási nyelv egyszerűen a „párnás” szó.Ezt a címkét követve a párnás releváns értékei, vagy a kívánt hely mennyiségére vonatkozó információk, amelyeket általában pixelek vagy százalékban képviselnek.A párnát és az értékeket göndör nadrágtartókban vagy göndör tartókon belül írják (azaz {és}).Mindezt megelőzően a párnázandó HTML elem (például P a bekezdéshez vagy a H2 -hez a 2. szintű fejlécekhez)., pontok (például 1pt vagy 5pt) vagy hüvelyk (például 1in vagy 5in), vagy centiméter (például 1 cm vagy 5 cm).Az értékeket a HTML elem stílusának százalékában is deklarálhatjuk.Ha például az érték 50%, akkor a párnázás megegyezik az elem méretének felére.Ha csak egy értéket hozzárendelnek, akkor a böngészők ezt a párnát a HTML elem mind a négy oldalához rendelik. Padding: 10%;Padding: 100px;Ha két értéket hozzárendelnek, akkor az első megfelel a felső és az alsónak, míg a második bal és jobbnak felel meg.Három érték miatt az első a tetejére, a második balra és a jobb oldalra, a harmadik pedig a HTML elem aljára utal.A legfeljebb négy érték hozzárendelése az első, a második, a harmadik és a negyedik értékek megfelelnek a HTML elem felső, jobb, alsó és bal oldalának, abban a sorrendben.Ha egynél több értéket biztosítanak, akkor azokat szóközökkel kell elválasztani, és például egy pontossal kell végezni:
Padding: 10px 20px 10px 20px;Ebben a tekintetben további négy párnázási tulajdonság áll rendelkezésre.Ezek párnás teteje, jobb oldali, padding-alsó és padding-bal.A Padding létrehozásához a CSS -ben ilyen pontosabb módon meg kell jelölnie a tulajdonságokat ugyanolyan szintaxissal, mint a fentiek rövidítésű nyilatkozatait.Ezen párnázási tulajdonságok mindegyike csak egy értéket vesz igénybe hosszában vagy százalékban.Például:
Padding-Top: 10px;
Padding-Jobb: 20 képpont;
Padding-Bottom: 10px;Ezután a P címke által megadott bekezdés elemben használja őket.A/ * és a */közötti szöveg megjegyzések, amelyek megmagyarázzák az alkalmazott párnás típusát, és nem szerepelne a CSS Padding kódban.
P.Example2 {Padding: 50px 30px;és jobbra * /
p. example3 {
padding-top: 10px;*/
lt;/stílus
lt;/head
lt; test
lt; p osztály ' 1. példa gt; Ez a szöveg mindkét oldalán ugyanazt a párnát tartalmazza.A párnázás mindkét oldalon 10px.' ”3. példa” gt; Ennek a szövegnek a felső párnája 10 képpont, a jobb oldali 20 képpont, a 10 képpont alsó párnája és a bal oldali padló 20 képpont.;
A fenti példában a „1. példa” stb. Az osztályhoz rendelt nevek, amelyeket azután a bekezdések hivatkoznak.A P címke és az osztálynevek közötti időszak a kód elején egy bekezdéshez rendelt osztály nyilatkozatát jelöli.Vegye figyelembe a zárójeleket az osztálynyilatkozat után, amely magában foglalja a párnázási tulajdonság érték -hozzárendeléseit.
Noha ez sok munkának tűnhet, sokkal kevésbé munkaigényes, mint az egyes bekezdések megadása.A kívánt elemhez egy párnázási tulajdonságot deklarálhat, amely a fenti példában a P címke, majd hivatkozhat az osztályra, amikor az oldalt az oldal testcímkéi között használja.Ha minden bekezdéshez csak egy típusú párnázásra van szükség, akkor egyáltalán nem kell osztályokat használnia.Egyszerűen használja a következő kódot a stíluscímkék között, majd kódolja a bekezdéseket anélkül, hogy bármilyen osztályt megadna.Ez a kód a fenti példában szereplő kód helyett a testcímkék között megy.