Isticmaalidda CSS si ay ula socdaan muuqaal dhinaca bidixda ah ee bogga Diiwaanka
Fiiri bogga intarneetka ee maanta oo dhan, waxaad arki doontaa isku-dhafka qoraalka iyo sawirrada samaynta bogagga ugu badan. Way fududahay in aad ku darto qoraalka iyo sawirada bog . Qoraalka waxaa lagu qeexay iyadoo la isticmaalayo HTML-yada caadiga ah sida cutubyada, liisaska, iyo cinwaanada, halka sawirrada lagu daro isticmaalka 'img> element .
Awoodda ah in qoraalkan iyo sawiradaas ay si fiican u wada shaqeeyaan waa waxa ka go'an kuwa naqshadayaasha shabakada oo dhan! Ma aha oo kaliya inaad rabto qoraalkaaga iyo sawiradaada inay soo muuqdaan midba midka kale, taas oo ah sida aytahay heerka qalabka xayaysiisku ku dhejin doono marka hore. Maya, waxaad rabtaa xoogaa xakameyn ah sida qoraalka iyo sawiradu u wada socdaan waxa ugu dambeyntii noqon doona naqshadda muuqaalka website-kaaga.
In aad haysato muuqaal ku habboon dhinaca bidix ee bogga halka qoraalka boggani uu ku wareegsan yahay daaweyn naqshad caadi ah oo loogu talagalay naqshad daabacan iyo sidoo kale bogagga shabakadda. Marka la eego ereyada webka, saameyntaas waxaa loo yaqaanaa sida muuqata sawirka . Habkani waxaa lagu gaarayaa hantida CSS ee "float". Qalabkani wuxuu u oggol yahay qoraalka inuu ku wareegsan yahay sawirka bidixda ee dhinaca midigta. (Ama hareeraha muuqaalka saxda ah ee dhinaca bidix). Aynu eegno sida loo gaaro saameynta muuqaalkan.
Ku bilow HTML
Waxa ugu horreeya ee aad u baahan tahay inaad sameysid waa mid HTML ah oo la shaqeeya. Tusaale ahaan, waxaan ku qori doonaa cutubka qoraalka oo ku dar sawir bilowga cutubka (ka hor qoraalka, laakiin ka dib marka la furo tag). Waa kuwan sida calaamadaha HTML u eg yihiin:
Haddii ay noqotaba, websaytkayagu wuxuu sawiri doonaa sawirka kor ku xusan qoraalka. Tani waa sababta oo ah sawiradu waa unugyada heerka block ee HTML. Tani waxay ka dhigan tahay in browserka uu soo bandhigo jebinta xariiqyada ka hor iyo ka dib koontada sawirka by default. Waxaanu bedeli doonaa aragtidan caadiga ah adigoo u jeestay CSS. Ugu horeyn, si kastaba ha ahaatee, waxaan ku dareynaa qiime fasalka qaabka sawirka . Fasalkaas wuxuu u dhaqmayaa sidii "jiir" oo aan u isticmaali doono CSS-ka dambe.
Ogow in fasalkan "bidix" uusan waxba sameynin wax walba! Anaga si aan u gaarno qaabkeena la rabay, waxaan u baahanahay inaan isticmaalno CSS xiga.
Hababka CSS
Iyada oo HTML-ga aan ku dhajino, oo ay ku jirto sifooyinka fasalka ee "bidix", waxaan hadda u jeedin karnaa CSS. Waxaan ku dari doonaa xeerka qaabkayaga noociisa ah ee ku dul muuqanaya sawirka iyo sidoo kale ku dari xoogaa yar oo ku xigta si uu u dhameeyo qoraalkii ugu dambeyntii ku duubi lahaa sawirka ma uusan si weyn uga soo horjeedin. Halkan waxaa ku qoran CSS:
.left {float: left; caarada: 0 20px 20px 0; }Isticmaalkani wuxuu u eg yahay sawirka bidixda wuxuuna ku darayaa wax yar yar (iyadoo la adeegsanayo qaar ka mid ah CSS shorthand) dhinaca midig iyo hoose ee sawirka.
Haddii aad dib u eegto bogga ku jira buuggan shabakad, sawirku hadda waa inuu u dhigmayaa dhinaca bidixda iyo qoraalka cutubka ayaa u muuqan doona midigteeda oo leh xaddiga ku habboon ee xiga labada u dhaxeysa. Ogsoonow qiimaha fasalka "bidix" ee aan isticmaalnay waa mid aan ikhtiyaar aheyn. Waxaan ku soo wici karnaa wax kasta sababtoo ah ereyga "bidix" waxba iskama qaban. Tani waxay ubaahan tahay in ay leedahay astaanta fasalka ee HTML oo la shaqeeya qaabka CSS dhabta ah kaas oo qeexaya isbedelada muuqaalka ah ee aad raadineyso inaad sameyso.
Siyaabo Siyaabo Loogu Yeelo Ujeeddooyinkan
Habkani waxa uu ku siinayaa sawirka muuqaalkiisa fasalka oo markaa isticmaalaya qaabka guud ee CSS ee ku fiiqaya walxaha waa hal hab oo aad karti u samayn karto "muuqaalka sawirka bidix". Waxa kale oo aad ka qaadan kartaa qiimaha fasalka oo ka muuqda sawirka oo ku calaamadee CSS adoo qoraya saadiye gaar ah. Tusaale ahaan, aan eegno tusaale ahaan sawirkaas oo ku dhex jira qayb ahaan oo leh qiime heer "muhiim ah".
Sawirrada qaybta hoose / sawirka "image-content">Si aad u sharaxdo muuqaalkan, waxaad qori kartaa CSS:
.main-content img {float: left; caarada: 0 20px 20px 0; }Sceario-ka, muuqaalkayagu wuxuu udhigmayaa dhinaca bidix, iyada oo qoraalkuna uu u socdo sidii hore, hase ahaatee uma baahnin inaan ku darno qiimo dheeraad ah nooca calaamadda. Ku sameeynta tan miisaanka ayaa kaa caawin karta abuurida faylka yar yar ee HTML, kaas oo noqon doona mid sahlan oo la maareyn karo oo sidoo kale kaa caawin kara hagaajinta waxqabadka.
Ugu dambeyntiina, xitaa waxaad ku dari kartaa noocyada si toos ah oo kuugu muuqda HTML-kaaga, sida tan:
Habkani waxa loo yaqaan " qaababka caanka ah ". Laguma talin karo, maxaa yeelay waxay si cad u wadaagtaa qaabka wax la mid ah calaamadaha qaabdhismeedka. Hababka ugu fiican ee webka ayaa xoojinaya in qaabka iyo dhismaha bogga ay ahaanayaan mid gooni ah. Tani waxay si gaar ah waxtar u leedahay marka bogagaagu ubaahanyahay inuu bedelo qaab-dhismeedkiisa oo uu eego qiyaasaha sawirada kala duwan iyo qalabka leh website-ka wax ku ool ah. Haysashada qaabka bogga ee ku dhexjirta HTML wuxuu ka dhigayaa mid aad u adag in la qoro weydiimaha warbaahinta oo hagaajin doona boggaaga raadinta sida loogu baahan yahay shaashadaha kala duwan.
Maqaalka asalka ah ee Jennifer Krynin. Waxaa sameeyay Edited by Jeremy Girard on 4/3/17.