CSS užpildymas leidžia HTML koduotojui nustatyti numatytąjį užpildymą arba tuščią vietą už HTML elemento ribų. To darymo pranašumas yra tas, kad koduotojas nekartos to užpildymo kodo kiekvienam to elemento egzemplioriui ir lengviau sukuria nuoseklumą puslapyje. HTML elementas, kurį reikia užpildyti, gali būti daugybė dalykų, pvz., pastraipa, lentelė arba antraštė.
Norėdami sukurti užpildymą CSS, pirmiausia turėsite nustatyti HTML elementą, kurį norite užpildyti. Šis elementas, kurį norite užpildyti, yra žinomas kaip parinkiklis. Tada norėsite nurodyti atitinkamas užpildymo reikšmes. CSS yra penki skirtingi užpildymo ypatybių tipai – viena visoms keturioms elemento pusėms vienu metu ir keturios kitos kiekvienai atskirai elemento pusei (pvz., kairėje, dešinėje, viršutinėje arba apatinėje pusėje). ). Ypatybė, leidžianti programuotojui vienu metu nurodyti visų keturių HTML elemento pusių reikšmes, vadinama stenografine ypatybe.
Vienai CSS užpildymo deklaracijai nurodyti naudojama kodavimo kalba yra tiesiog žodis „padding“. Po ta etikete yra atitinkamos užpildo „vertės“ arba informacija apie pageidaujamą vietos kiekį, paprastai pavaizduota pikseliais arba procentais. Užpildymas ir reikšmės rašomos riestiniuose skliaustuose (ty „{“ ir „}“). Prieš visa tai yra HTML elementas, kurį reikia užpildyti (pvz., „p“ pastraipai arba „H2“ 2 lygio antraštėms).
Vertės vaizdavimo būdu vertės gali būti pateikiamos pikseliais (pvz., 1 tšk. arba 5 piks.), taškais (pvz., 1 pt arba 5 pt) arba coliais (pvz., 1 colio arba 5 colio) arba centimetrais (pvz., 1 cm arba 5 cm). . Vertės taip pat gali būti deklaruojamos kaip kuriamo HTML elemento procentas. Pavyzdžiui, jei reikšmė yra 50%, užpildas bus lygus pusei elemento dydžio.
Šie pavyzdžiai yra HTML kodas, skirtas HTML elementui užpildyti pagal reikšmes, atitinkamai išreikštas procentais ir ilgiu. Jei priskiriama tik viena reikšmė, žiniatinklio naršyklės priskirs šį užpildą visoms keturioms HTML elemento pusėms.
paminkštinimas: 10%;
padding: 100px;
Pridėjus daugiau reikšmių prie anksčiau pateikto užpildymo deklaracijos tipo, žiniatinklio naršyklės jas interpretuos tam tikru būdu. Jei priskiriamos dvi reikšmės, pirmoji atitiks viršuje ir apačioje, o antroji – kairę ir dešinę. Dėl trijų reikšmių pirmoji nukreips į HTML elemento viršų, antroji – į kairę ir dešinę, o trečioji – į apačią. Priskyrus daugiausia keturias vertes, pirmoji, antroji, trečioji ir ketvirtoji reikšmės atitinka HTML elemento viršuje, dešinėje, apačioje ir kairėje ta tvarka. Kai pateikiama daugiau nei viena reikšmė, jas reikia atskirti tarpais ir baigti kabliataškiu, pvz.:
padding: 10px 20px 10px 20px;
CSS užpildymas taip pat gali būti atliekamas iš vienos pusės vienu metu. Šiuo atžvilgiu yra dar keturios paminkštinimo savybės. Tai yra paminkštinimas viršuje, pamušalas dešinėje, paminkštinimas apačioje ir paminkštinimas kairėje. Norėdami tiksliau sukurti užpildymą CSS, turėsite pažymėti ypatybes ta pačia sintaksė kaip ir sutrumpintos deklaracijos, kaip nurodyta aukščiau. Kiekviena iš šių užpildymo savybių turi tik vieną ilgį arba procentinę reikšmę. Pavyzdžiui:
padding-top: 10px;
padding-dešinė: 20px;
padding-bottom: 10px;
padding-left: 20px;
Šis kodas sukuria tinklalapį, deklaruoja užpildymo ypatybes tarp stiliaus žymų ir naudoja jas pastraipos elemente, nurodytame p žymos. Tekstas tarp /* ir */ yra pastabos, paaiškinančios naudojamo užpildymo tipą ir nebus įtrauktos į CSS užpildymo kodą.
Šio teksto kiekvienoje pusėje yra tas pats kamšalas. Paminkštinimas kiekvienoje pusėje yra 10 pikselių.
Šio teksto viršuje ir apačioje yra 50 taškų, o kairėje ir dešinėje – 30 pikselių.
Šio teksto viršuje yra 10 piks., dešiniajame 20 piks., apačioje 10 piks. ir kairiajame 20 piks.
Aukščiau pateiktame pavyzdyje „example1“ ir tt yra klasei priskirti pavadinimai, kurie vėliau pateikiami pastraipose. Taškas tarp p žymės ir klasių pavadinimų kodo pradžioje reiškia pastraipai priskirtos klasės deklaraciją. Atkreipkite dėmesį į skliaustus po klasės deklaracijos, kurioje yra užpildymo ypatybių vertės priskyrimai.
Nors tai gali atrodyti kaip daug darbo, tai yra daug mažiau darbo jėgos nei nurodyti kiekvienos pastraipos užpildymą. Galite deklaruoti vieną norimo elemento užpildymo ypatybę, kuri aukščiau pateiktame pavyzdyje yra p žyma, ir tada nurodyti klasę, kai naudojate elementą tarp puslapio turinio žymų. Jei visoms pastraipoms reikia tik vieno tipo užpildymo, klasių naudoti visai nereikia. Tiesiog naudokite šį kodą tarp stiliaus žymų ir užkoduokite pastraipas nenurodydami jokios klasės. Šis kodas būtų tarp kūno žymų, o ne kodo anksčiau pateiktame pavyzdyje.
p {padding:10px 20px 10px 20px;}
Šis sukurtas CSS užpildymas paveiktų visas pastraipas, net jei klasė nenurodyta.