CSS betegarria CSS kutxa ereduaren propietateetako bat da. Etxe-taulen propietate honek HTML elementu baten lau aldeen inguruan betetzea ezartzen du. CSS estalkiak HTML etiketa ia guztietan aplikatu daitezke (taularen etiketa batzuen kasuan izan ezik). Gainera, elementuaren lau aldeek balio ezberdina izan dezakete.
CSS betegarria Jabetza
CSS estalkien propietateak erabiltzeko, "TRouBLe" (edo "TRiBbLe" mnemoteknikoa erabil dezakezu Star Trek zaleentzat). Hau goiko , eskuineko , beheko eta ezkerreko zutabean dago, eta aipaturiko propietatearen arabera konfiguratutako betegintzako zabaleraren ordena aipatzen da. Adibidez:
betegarria: goiko eskuineko behealdea ezkerrean; betegarria: 1px 2px 3px 6px;Goian zerrendatutako balioak erabiltzen badituzu, betegarriko balio ezberdina aplikatuko litzaioke aplikatuko zaizun edozein HTML elementu guztietatik. Aplikazio berdina lau alde guztietara aplikatu nahi baduzu, zure CSS sinplifikatu eta balio bat idatzi dezakezu:
betegarria: 12 px;CSS lerro honekin, 12 betegarriko pixelak elementuaren 4 alboetan aplikatuko lirateke.
Betegarria goialdean eta behean eta ezkerrera eta eskuinera berdina izatea nahi baduzu, bi balio idatzi ditzakezu:
betegarria: 24 px 48 px;Lehenengo balioa (24 px) goiko eta beheko aldean aplikatuko litzateke, bigarrena ezkerrera eta eskuinera aplikatuko da.
Hiru balioak idazten badituzu, betegarri horizontala (ezkerrera eta eskuinera) berdinak izango dira, goian eta behean aldatuz:
betegarria: goiko eskuineko eta ezkerreko beheko aldean; betegarria: 0px 1px 3px;CSS kutxa ereduaren arabera, betegarria elementu / eduki beraren hurbilena da. Horrek esan nahi du betegarria elementu bati gehitzen zaion edukien zabalera edo altuera eta erabiltzen dituzun edozein mugako balioen artean. Betegarria zero bada, edukia bezalako ertz berdina dauka.
CSS betegarriko balioak
CSS betegarriek balio negatiboak izan ditzakete. Ziurtatu neurtzea, adibidez px edo em. Zure betegarria den ehuneko bat ere zehaztu dezakezu, elementuaren blokeoaren zabaleraren ehuneko bat izango baita. Hau goiko eta beheko betegarria da. Adibidez:
#contenedor {zabalera: 800px; altuera: 200 px; } #container p {zabalera: 400px; altuera:% 75; betegarria:% 25 0; }#contenedor elementuaren barruan paragrafoaren altuera # container- en altuera% 75 eta% 25eko zabalera goiko betegarria izango da eta beheko betegarriaren zabalera% 25era. Guztira 300 + 200 + 200 = 700 px.
CSS estalkia gehitzea eraginak
Blokeko elementuen gainean , betegarria lau aldeetan aplikatzen da. Elementua dagoeneko bloke bat edo laukia delako, betegarria kutxaren alboetan aplikatuko da.
CSS betegarria elementu inlinersetan gehitzen denean, lerroaren altuera gainditzen duen lerro bertikala gainditzen duen lerroaren altuera gainditzen duen lerroaren altuera gainditzen duen elementu bateko gainjarrita egon daiteke, baina lerroaren altuera behera doa. Lerro elementuetan aplikatutako CSS horizontala elementuaren hasieran eta elementuaren amaieran gehituko da. Eta betegarria lerro itzulbiratu daiteke. Baina lerro anitzeko lerro guztien lerro guztiei ez zaie aplikatuko, beraz ezin duzu erabili betegarria lerro anitzeko eduki lineako segmentu baten indentzea.
Gainera, CSS2.1-n ezin duzu edukiontzi blokeak sortu, zabalerak zabalera (edo betegarriaren zabalera) ehunekotan duen ehunaren araberakoa. Emaitza zehaztu gabe badago. Arakatzaileak edukiak oraindik bistaratuko ditu, baina espero ez dituzun emaitzak lortuko dituzu. Pentsatzen baduzu, zentzuzkoa da, zure edukiontzi elementuek haurren elementuen zabaleraren zabalera zehaztu behar balitz bezala, zabalera zehazteko, esate baterako, zehaztutako zabalera ez duelako, eta bat edo batzuk gehiago ditu Edukiontziaren ehuneko gisa ezarritako zabalera honek kate zirkular bat ezartzen du. Zure dokumentuko edozein zabalerentzako ehunekoak erabiltzen badituzu, ziurtatu gurasoaren osagaiak definitu direla.