Истифодаи CSS барои тасвири тасвир ба канали чапи таркиби Интернет
Қариб ҳар як саҳифаи интернетӣ ба назар мерасад ва шумо якҷояшавии матн ва тасвирҳоро мебинед, ки қисми зиёди ин саҳифаҳоро ташкил медиҳад. Ин саҳифаҳоро илова кардани матн ва тасвирҳо хеле осон аст. Матн бо истифодаи HTML стандартиҳо ба монанди параграфҳо, рӯйхатҳо ва сарлавҳаҳо, дар ҳоле, ки тасвирҳо бо истифодаи унвон карда шудаанд .
Қобилияти бастани ин матн ва ин тасвирҳо якҷоя кор кардан аст - чӣ гуна тарроҳони хуби вебро ба ҳам меоранд! Шумо намехоҳед матн ва тасвирҳои худро якҷоя нав кунед, ки ин элементҳои сатҳҳои блок ба таври муқаррарӣ тартиб дода мешаванд. Не, шумо мехоҳед баъзе контролҳоро дар бораи тарзи матн ва тасвирҳо якҷоя кунед, ки дар ниҳоят ба тарҳрезии вебсайтии шумо вогузор мешавад.
Бо тасвири, ки ба канали чапи саҳифа мувофиқ аст, дар ҳоле ки матни ин саҳифа дар атрофи он табобати тарҳрезии тарроҳӣ барои тарҳрезии чопӣ ва инчунин вебҳои веб мебошад. Дар вебсайти web, ин таъсир ҳамчун шинохтани тасвир маълум аст . Ин сабк бо моликияти CSS барои "float" ба даст омадааст. Ин амвол имкон медиҳад, ки матн дар гирди симои чапи рости рост ба тарафи рости он гардед. (Ё дар атрофи он тасвири дурустро ба тарафи чапи он нигоҳ медорад.) Биёед, ба чӣ гуна ноил шудан ба ин таъсири аёнӣ назар кунем.
Бо HTML оғоз кунед
Аввалин чизе, ки ба шумо лозим аст, бояд якчанд HTML дошта бошад. Барои намуна, мо порчаи матнро нависед ва дар ибтидои параграф (пеш аз матн, аммо пас аз кушодани
Бо нобаёнӣ, вебсайти мо бо тасвир дар болои матн нишон медиҳад. Ин сабаби он аст, ки тасвирҳо элементҳои блок-элементҳои HTML мебошанд. Ин маънои онро дорад, ки браузер пеш аз ва баъд аз унсури тасвирӣ аз рӯи фармоиш бозсозӣ мекунад. Мо ин нуқтаи назари худро бо роҳи CSS табдил медиҳем. Аммо, аввал, мо ба унсури тасвирии мо арзиши классикиро илова мекунем . Ин класс ҳамчун "шиша", ки баъдтар дар CSS-и мо истифода хоҳад бурд.
Аҳамият диҳед, ки ин синфи "чап" ягон чизи худашро намекунад! Барои мо ноил шудан ба сабки дилхоҳ, мо бояд дар оянда CSS-ро истифода барем.
CSS сабки
Бо HTML мо дар онҷо, аз он ҷумла элементҳои классикии "чап", мо ҳоло метавонем ба CSS табдил ёбад. Мо ба услуби клавиатура илова мекунем, ки ин тасвирро тасаввур карда, ҳамзамон каме пурқувват кардани он илова карда мешавад, то матни, ки дар натиҷа ба гиреҳи тасвир кашида мешавад, ба он муқобилат намекунад. Дар ин ҷо CSS шумо метавонед нависед:
.tj {float: left; padding: 0 20px 20px 0; }}Ин сабк ин тасвирро ба чап мегузорад ва каме пурқувват мекунад (бо истифодаи баъзе CSS shorthand) ба рост ва поёни тасвир.
Агар шумо ин саҳифаеро, ки ин HTML дар дохили браузери инъикос ёфтааст, тасвири минбаъдаро ба чап гузоред ва матни параграф бо миқдори дахлдори фосилаи байни дучор меояд. Ба арзиши синфии "чап", ки мо истифода кардем, худсарона аст. Мо онро ягон чиз номида метавонистем, зеро калимаи "left" ҳеҷ чизи худашро намекунад. Ин бояд дорои хосиятҳои синф дар HTML , ки бо сабки воқеии CSS кор мекунад, ки тағйироти визуалӣеро, ки шумо мехоҳед мекушед.
Роҳҳои алтернативӣ барои расидан ба ин тарҳҳо
Ин усули додани тасвири элементи як элементҳои синф ва пас аз истифодаи услуби умумии CSS, ки объекти элемент аст, танҳо як роҳе, ки шумо метавонед ба ин «тасвири боқимонда» нигоҳ кунед. Шумо инчунин метавонед арзиши синфро аз тасвир гирифта, онро бо CSS бо навиштани як аломатгари мушаххас муайян кунед. Масалан, биёед мисолеро ба назар гирем, ки ин тасвир дар дохили тақсимот бо арзиши синфии «муҳтаво» мебошад.
Барои тасвир кардани ин тасвир шумо метавонед ин CSS нависед:
.main-content img {float: left; padding: 0 20px 20px 0; }}Дар ин сексиал, симои мо ба тарафи чап, бо матн, ки дар атрофи он пешакӣ шинохта шудааст, мувофиқат мекунад, аммо ба мо лозим набуд, ки ба тамғаи мо илова кардани арзиши иловагии синф илова карда шавад. Инро дар миқёси коркард метавонад файли хурди HTML-ро эҷод кунад, ки барои идора кардан осонтар ва инчунин беҳтар намудани сифати кор имкон медиҳад.
Ниҳоят, шумо ҳатто метавонед намудҳои бевосита ба бренди HTML кунед, монанди:
Ин усули " шаклҳои ноутбук " номида мешавад. Ин тавсия намешавад, зеро он равшании структураи аломат бо сохтани сохтори он мебошад. Беҳтарин таҷрибаҳои виртуалӣ диккат медиҳанд, ки сабки ва сохтори саҳифа бояд ҷудо бошад. Ин саҳифа хеле муфид аст, вақте ки саҳифаи шумо бояд таркиби худро тағйир диҳад ва андозаи экран ва дастгоҳҳои гуногунро бо вебсаи ҷавобӣ ҷустуҷӯ намояд. Бо сабки саҳифаи интернети HTML, ки ба HTML алоқаманд аст, ин ба саволҳои муаллифони матн хеле душвор аст, ки ба сайти шумо нусхабардорӣ карда мешавад, ки барои ин параметрҳои гуногун лозим аст.
Мақолаи аслӣ аз тарафи Ҷенифер Кренин. Аз ҷониби Jeremy Girard таҳрир карда шуд 4/3/17.