Lastnost oblazinjenja CSS: kako narediti polja
CSS ponuja spletnemu razvijalcu ogromne priložnosti za oblikovanje strani HTML. Začetnikom se zdi težko, a če jih temeljito in metodično razumete, se bo tehnologija slogovnih listov umirila, postavitev mest pa ne bo več težka. Ena od nepogrešljivih lastnosti CSS je oblazinjenje . Uporablja se za nastavljanje polj blokov strani HTML.
Kaj so bloki?
Mesto je zgrajeno iz opeke - blokov. Poleg tega mora imeti vsak element, ne glede na njegovo vsebino, pravokotno obliko. To pomeni, da razvijalec v "škatlah" mentalno sklene vse slike in napise, s katerimi ustvari spletno stran.
Najpogosteje so bloki določeni z oznakami.
,
- , . Lastnosti CSS se uporabljajo za vsak tak element: oblazinjenje , rob , meja , širina in drugi. Širina pravokotnika bloka je podana z lastnostjo width , nato pa je vsak element sestavljen iz polj, ki so označene z atributom border. Nazadnje lahko komponenta strani vsebuje zunanje robove ali alineje, rob , ki ga loči od drugega bloka. Sintaksa lastnosti CSS oblazinjenja
Ustvarjalci kaskadnih listov s slogi so nudili več možnosti za pisanje atributa za nastavitev polj. Prazno območje znotraj bloka lahko naredite na 8 različnih načinov! Spodnja tabela prikazuje primere za vsako od možnosti in jim daje kratko pojasnilo.
Primer uporabe
Razlaga
oblazinjenje: 15 px;
Če atributu sledi ena sama številka, to pomeni, da bo element imel ista polja z vseh strani. Vnos px predvideva, da je vrednost v pikslih. To pomeni, da bo blok imel robove 15 pik.
oblazinjenje: 18 px 36 px;
Prva od dveh številk pomeni, da bodo navpična polja vsaka 18 slikovnih pik, stranska polja pa dvakrat večja - 36 slikovnih pik.
oblazinjenje: 6 px 12 px 18 px;
Povprečje je vrednost polj na straneh (levo in desno), druga dva sta navpična polja. Prva številka (6 px) se nanaša na zgornje polje, zadnja (18 px) pa na spodnjo.
oblazinjenje: 6 px 12 px 18 px 36 px;
Oblika lastnosti CSS padding , v kateri so štiri številke, vam omogoča, da določite polja na vseh straneh bloka. Številčne vrednosti se dosledno uporabljajo za zgornje polje in še naprej v desno, spodaj in levo.
padding-left: 14 px;
Levi dodatek govori sam zase - polje bo nastavljeno le na levi strani elementa.
padding desno: 14 px;
Podobno kot pri prejšnji možnosti zapisa - bo polje ustvarjeno le na desni strani bloka.
oblazinjenje: 14 px;
Vnos identificira polje na vrhu.
oblazinjenje-dno: 14 px;
Vnos označuje spodnje polje.
Opozoriti je treba, da je privzeta nastavitev CSS nič. Ta atribut ni podedljiv, to pomeni, da mora biti nastavljen za vsak blok. Poleg običajnih in razumljivih slikovnih pik je širina praznega prostora okrog blokov podana v relativnih enotah. Na primer, v zgornjih primerih lahko posnamete 5% - zato brskalnik samodejno izračuna širino polja.
Kako uporabljati nepremičnine?
Torej se pregledujejo obrazci zapisov atributov, toda kako jih uporabiti na strani HTML? Prva možnost je bolj »lepa«, ko vse, kar je povezano s tehnologijo CSS, ni napisano v HTML-ju, temveč je upodobljeno v ločeni datoteki z ustrezno razširitvijo.
Druga možnost je, da pišete neposredno v oznako < style >. Obnašanje CSS v tem primeru je definirano na naslednji način:
< div style = " padding: 22 px">
Kako napisati atribut - izberite izdelovalca. V vsakem primeru je potrebno imeti vse načine za uporabo nepremičnine za določitev polj, da bi jo lahko uporabili včasih.
Sintaksa lastnosti CSS oblazinjenja
Ustvarjalci kaskadnih listov s slogi so nudili več možnosti za pisanje atributa za nastavitev polj. Prazno območje znotraj bloka lahko naredite na 8 različnih načinov! Spodnja tabela prikazuje primere za vsako od možnosti in jim daje kratko pojasnilo.
Primer uporabe | Razlaga |
oblazinjenje: 15 px; | Če atributu sledi ena sama številka, to pomeni, da bo element imel ista polja z vseh strani. Vnos px predvideva, da je vrednost v pikslih. To pomeni, da bo blok imel robove 15 pik. |
oblazinjenje: 18 px 36 px; | Prva od dveh številk pomeni, da bodo navpična polja vsaka 18 slikovnih pik, stranska polja pa dvakrat večja - 36 slikovnih pik. |
oblazinjenje: 6 px 12 px 18 px; | Povprečje je vrednost polj na straneh (levo in desno), druga dva sta navpična polja. Prva številka (6 px) se nanaša na zgornje polje, zadnja (18 px) pa na spodnjo. |
oblazinjenje: 6 px 12 px 18 px 36 px; | Oblika lastnosti CSS padding , v kateri so štiri številke, vam omogoča, da določite polja na vseh straneh bloka. Številčne vrednosti se dosledno uporabljajo za zgornje polje in še naprej v desno, spodaj in levo. |
padding-left: 14 px; | Levi dodatek govori sam zase - polje bo nastavljeno le na levi strani elementa. |
padding desno: 14 px; | Podobno kot pri prejšnji možnosti zapisa - bo polje ustvarjeno le na desni strani bloka. |
oblazinjenje: 14 px; | Vnos identificira polje na vrhu. |
oblazinjenje-dno: 14 px; | Vnos označuje spodnje polje. |
Opozoriti je treba, da je privzeta nastavitev CSS nič. Ta atribut ni podedljiv, to pomeni, da mora biti nastavljen za vsak blok. Poleg običajnih in razumljivih slikovnih pik je širina praznega prostora okrog blokov podana v relativnih enotah. Na primer, v zgornjih primerih lahko posnamete 5% - zato brskalnik samodejno izračuna širino polja.
Kako uporabljati nepremičnine?
Torej se pregledujejo obrazci zapisov atributov, toda kako jih uporabiti na strani HTML? Prva možnost je bolj »lepa«, ko vse, kar je povezano s tehnologijo CSS, ni napisano v HTML-ju, temveč je upodobljeno v ločeni datoteki z ustrezno razširitvijo.
Druga možnost je, da pišete neposredno v oznako < style >. Obnašanje CSS v tem primeru je definirano na naslednji način:
< div style = " padding: 22 px">
Kako napisati atribut - izberite izdelovalca. V vsakem primeru je potrebno imeti vse načine za uporabo nepremičnine za določitev polj, da bi jo lahko uporabili včasih.