Истифодаи CSS-ро ба моликият ба тарҳрезии тарҳрезии веб саҳифаҳо
Амволи CSS моликияти хеле муҳим барои тарҳ аст. Ин ба шумо имкон медиҳад, ки тарҳҳои веб саҳифаҳоеро, ки шумо мехоҳед нишон диҳед, ҷойгир кунед, аммо барои он, ки шумо бояд онро фаҳмед, ки чӣ тавр кор мекунад.
Дар варақи сабки, CSS ба амволи амвол чунин монанд аст:
.right {float: рост; }}
Ин браузери блогҳоро дар бар мегирад, ки ҳама чиз бо синфи "дуруст" бояд ба рост ояд.
Шумо онро чунин тасаввур карда метавонед:
class = "right" />
Шумо метавонед бо CSS-ро моликият кунед.
Шумо наметавонед ҳар унсаро дар саҳифаи веб пайравӣ кунед. Шумо танҳо метавонед унсурҳои сатҳии блокро пароканда карда метавонед. Инҳо элементҳоеро, ки блокро дар саҳифа мегиранд, монанди тасвирҳо (), параграфҳо (), divisions (), ва рӯйхат ().
Дигар унсурҳое, ки ба матн таъсир мерасонанд, аммо дар қуттиҳои саҳифа сохта нашудаанд, элементҳои элементҳои номӣ номида мешаванд ва наметавонанд пажмурда шаванд. Инҳо элементҳои монанди span (), танаффусҳои рангҳо (), пурқувват ((), ё такрори () мебошанд.
Онҳо куҷоянд?
Шумо метавонед унсурҳоро ба рост ё чап гузоред. Ҳеҷ гуна унсурие, ки пас аз унсурҳои шинохташаванда дар атрофи элементӣ дар тарафи дигар мегузарад.
Масалан, агар ман тасвирро ба чап гузорем, ягон матн ё дигар унсурҳои зерин пас аз он ба тарафи рост ҳаракат мекунанд. Ва агар ман тасвири ростро тасаввур кунам, ҳар матн ё унсурҳои дигар пас аз он ба тарафи чап мегарданд. Тасвиреро, ки дар блоки матн ҷойгир карда шудааст, бе сабки услуби истифодашаванда ба он нишон медиҳад, вале браузер барои нишон додани тасвирҳо таъин карда мешавад.
Ин одатан дар сатри якум матни зерин дар поёни тасвир нишон дода шудааст.
То чӣ андоза дуртар хоҳанд шуд?
Элементе, ки шино карда шудааст, метавонад ба тарафи чап ё рости ҷузъи контейнер ҳаракат кунад. Ин ҳолат дар якчанд ҳолатҳои гуногун вобаста аст, вобаста ба он, ки чӣ тавр рамзи шумо навишта шудааст.
Барои мисолҳои мазкур, ман як унсури хурди DIVро ба чап менависам:
- Агар элементҳои пластикӣ васеътар пешпардохт дошта бошанд, он фазои ҳаҷмаш то ҳадди зарурӣ ва дастрас аст, новобаста аз фонограмма. Эзоҳ: Баъзе браузерҳо кӯшиш мекунанд, ки унсурҳои берун аз ҷузъҳои пластикӣ ҳангоми паҳншавии васеъ ҷойгир шаванд, одатан, ҷузъҳои ками фосила одатан ҷузъҳои ғайримаъмулӣ дода мешаванд. Пас шумо бояд ҳар як паҳлӯ дар унсурҳои шиноварро муайян созед.
- Агар элементҳои контейнер HTML элемент бошанд, DIV-пажӯҳишӣ дар марҷаи чапи саҳифа ҷой мегирад.
- Агар элементҳои контейнер худашро дар бар гиранд, ДВР-ро дар чапи чапи контейнер шино мекунанд.
- Шумо метавонед унсурҳои пластикиро пӯшонед, ва он метавонад ба флюпинг дар макони тааҷубовар оварда шавад. Масалан, ин флешкаи ДВД дар дохили рости DIV-и шинокунанда мебошад.
- Агар унсурҳои объективӣ ба ҳамдигар монанд бошанд, агар дар контейнер ҷойгир бошанд. Масалан, ин контейнер дорои се 100px васеи DIV унсурҳои дар 400px васеъ паҳншударо дорад.
Шумо ҳатто метавонед шиноваронро барои сохтани суратгирии галерея истифода баред. Шумо ҳар як thumbnail (он вақте, ки онҳо ҳама андозаи ҳамон корро мекунанд) дар DIV бо сарлавҳа ва пошидани элементҳои DIV дар контейнер гузоштаанд.
Новобаста аз он ки тирезаи браузер васеъ аст, нусхаҳои якхела якҷоя мешаванд.
Заминро пӯшонед
Пас аз он ки шумо фаҳмед, ки чӣ тавр ба даст овардани элементи шиноварӣ, он муҳим аст, Шумо моликияти занг бо CSSро барҳам медиҳед. Шумо метавонед чапҳо, чуқурҳои рост ё ҳар дуи онҳоро тоза кунед:
равшан: left;
равшан: рост;
равшан: ҳам ҳар ду;
Ҳама элементе, ки шумо молу чизи равшанро барои шумо муқаррар кардаед, дар зере, ки ин самт рӯй медиҳад, пайдо мешавад. Масалан, дар ин намунаи параграфи аввали матн тоза карда намешавад, аммо сеюм аст.
Бо нишон додани арзиши аслии унсурҳои гуногун дар ҳуҷҷатҳои худ барои эффектҳои гуногуни таҳрирӣ бозӣ кунед.
Яке аз тарҳҳои ҷолиби ҷолибе як силсила тасвирҳо ба сутуни рост ё чапи рӯи параграфҳои матн аст. Ҳатто агар матне, ки барои гузаштан аз тасвири тӯлонӣ кофӣ нест, шумо метавонед ба ҳамаи тасвирҳо равшан шавед, то боварӣ ҳосил кунед, ки онҳо дар сутун, ба назар намерасанд, на дар ояндаи қаблӣ.
HTML (такрори ин параграф):
Дӯхтар аст, ки дар як муддати кӯтоҳ дар якҷоягӣ бо тазоҳурот қарор гирад. Кубишҳо беэътиноӣ мекунанд, ки чӣ гуна баҳо диҳанд.
CSS (барои тасвири тасвирҳо ба чап):
img.float {float: left;
равшан: left;
margin: 5px;
}}
Ва ба рост:
img.float {float: рост;
равшан: рост;
margin: 5px;
}}
Истифодаи Floats for Layout
Пас аз фаҳмидани он, ки чӣ гуна моликияти флешдор кор мекунад, шумо метавонед онро истифода баред, то веб-саҳифаҳои худро гузоред. Инҳо қадамҳои ман барои эҷоди як веб саҳифа мебошанд:
- Тарҳбандии тарҳбандӣ (дар коғаз ё дар асбоби графикӣ ё дар сари ман).
- Муайян кунед, ки кадом қисматҳои саҳифа вуҷуд доранд.
- Таҳкими васеъ кардани контейнерҳои гуногун ва унсурҳои онҳо дар дохили онҳо.
- Ҳама чизро рӯпӯш кунед. Ҳатто элементи контейнерҳои берунӣ ба чап рӯбарӯ мешаванд, то ман фаҳмам, ки дар он нуқтаи назар дар робита бо браузери вебсайт дида мешавад.
То он даме ки шумо паҳнои паҳншавӣ (фоизҳо хуб аст) аз қисмҳои тарҳрезии шумо медонанд, шумо метавонед моликияти float -ро истифода баред, то ки онҳо дар саҳифаи худ бошанд. Ва чизи хуб аст, шумо набояд дар бораи модели қуттие, ки барои Internet Explorer ё Firefox фарқ мекунад, фикр кунед.