Isdhaafsasho iyo Xiriir - Sharaxaadda Meeleynta CSS

CSS Meelaynta waa wax ka badan X, Just X, Y Koordinates

Jagooyinka CSS ayaa muddo dheer ahaa qayb muhiim ah oo ka kooban abuurista bogagga. Xitaa iyada oo kor u kaca farsamooyinka cusub ee CSS sida Flexbox iyo CSS Grid, dejinta weli waxay leedahay meel muhiim ah ee boorsada naqshadeenta websaydhka.

Markaad isticmaasho jadwalka CSS, waxa ugu horreeya ee aad u baahan tahay inaad sameysid waxay dejinaysaa hantida CSS si aad u sheegto browser-kaaga haddii aad doonayso in aad isticmaasho jaantuska ama miisaanka ku habboon ee loo yaqaan 'element'. Waxa kale oo aad u baahan tahay inaad si cad u fahamto faraqa u dhexeeya labadan xarumood.

Inkasta oo qibrada iyo qaraabada ay yihiin labada guryaha CSS oo inta badan lagu isticmaalo naqshadda webka, waxaa jira afar xaqiiqo oo ku saabsan hantida mawaadinka ah:

Static waa booska caadiga ah ee wax walba oo ku yaal bog bogga. Haddii aadan qeexin jagada element, waxay noqon doontaa mid caadi ah. Tani waxay ka dhigan tahay in ay muujinayso shaashadda iyada oo ku saleysan halka ay ku jirto dukumiintiga HTML iyo sida ay u muujin lahayd socodka caadiga ah ee dokumentigan.

Haddii aad dalbato xeerarka dejinta sida sare ama bidixda walxaha leh xaalad rasmi ah, shuruucdaas waa la iska indho-tirayaa, walaxduna waxay ku sii jiri doontaa meesha ay ka muuqato dukumiintiga caadiga ah. Xaqiiq ahaan, marmar dhif ah, haddii had iyo jeer, waxay ubaahan tahay in ay sameyso arrin si ay u noqoto mid taagan oo ah CSS taniyo taasi waa qiimaha caadiga ah.

Meelaynta CSS-ka oo qumman

Joogitaanka ku-meel-gaar ah ayaa laga yaabaa inay tahay meesha ugu fudud ee CSS-ka si loo fahmo. Waxaad ka bilawdaa hantida booska CSS:

Goobta: gebi ahaanba;

Qiimahaan wuxuu ku yiraa "browser" in wax kasta oo la rabo in la dhigo waa in laga saaraa socodka caadiga ah ee dukumiintiga iyo halkii laga dhigaa meel saxan ee bogga. Tani waxaa lagu xisaabiyaa iyada oo ku saleysan aagaha awooda ugu dhow ee aan awooda lahayn.

Sababtoo ah walxad jajab ah oo la soo saaray ayaa laga saarayaa socodka caadiga ah ee dukumiintiga, ma saameyn doonto sida qaybaha ka hor ama ka dib in HTML lagu dhigo bogga internetka.

Tusaale ahaan - haddii aad haysatid qayb ka mid ah qiimaha qaraabada (waxaan qiimeyn doonaa qiime yar), qaybtaasna waxaad ka heshay cutub aad rabto inaad ku dhigto 50 pixels oo ka saraysa qaybta sare, waxay ku dari doontaa qiimaha jaangooyada "qeex" ee ku jirta qaybtaas iyada oo ay weheliso qiime ka badan 50px "hantida" sare, sida tan.

Goobta: gebi ahaanba; top: 50px;

Tani waxay si buuxda u taagan tahay hadiyad ahaan had iyo jeer waxay muujineysaa 50 pixels oo ka sareeya qeybta hoose ee qaybtaas - iyada oo aan loo eegin waxa kale oo soo bandhigaya socodka caadiga ah. Qalabkaaga "dhameeyska" oo dhan ayaa loo isticmaalaa mid ku salaysan mawduuciisa iyo qiimaha jinsiga ah ee aad isticmaashid wuxuu ku xiran yahay taas.

Afarta xarumood ee aad u banaan tahay inaad isticmaasho waa:

Waxaad isticmaali kartaa midka sare ama hoosta (tan maadada aan la dhigin mid waafaqsan qiimaha labadaba) iyo midig ama bidix.

Haddi qalab loo dhigo booska buuxa, hase yeeshee waxaa jira aabayaal aan waligood aheyn, markaa waxaa la dejin doonaa marka loo eego walxaha jirka, taas oo ah heerka ugu sareeya ee bogga.

Meelaynta Raadinta

Waxaan horay u soo sheegnay xuduudaha, markaa aan eegno gurigaas hadda.

Jagada xijaabtu waxay isticmaashaa afar dhismo oo isku mid ah sidii loo jaanqaadi lahaa, laakiin halkii ay ku xidhnaan lahayd booska cutubka marka loo eego awoowaha ugu dhow ee awoowaha ah, waxay ka bilaabantaa meesha meesha uu noqon lahaa haddii ay wali socoto socodka caadiga ah.

Tusaale ahaan, haddii aad leedahay sadex cutub oo boggaaga internetka ah, iyo saddexaadna waxa ku yaala "habdhaqanka: qaraabada" qaabka loo dhigo, booska ayaa laga jari doonaa iyada oo ku saleysan goobta uu hadda joogo.

farqada 3aad.

Tusaalaha kor ku xusan, cutubka sadexaad waxaa la dejin doonaa 2em ka soo bidixda qaybta weelka hoostiisa, laakiin wuxuu weli ka hooseeyaa laba qaybood oo hore. Waxay ku sii jiri doontaa socodka caadiga ah ee dukumeentiga, oo kaliya wax yar ka baxsan. Haddii aad u bedeshay meel; wax kasta oo ka dambeeya waxay muujinaysaa dusha sare, sababtoo ah ma sii jiri doonto socodka caadiga ah ee dokumentiga.

Waxyaabaha ku yaal bog bog ayaa inta badan loo isticmaalaa si loo sameeyo qiimaha mawaadiicda: marka la eego qiimaha qiimaha furan, taas oo macnaheedu yahay in elementku yahay meesha dhabta ah ee muuqata socodka caadiga ah. Tani waxaa loo sameeyaa oo keliya in la dhiso middaas iyada oo loo eegayo waxyaabo kale oo la taaban karo. Tusaale ahaan, haddii aad leedahay qayb ku wareegsan boggaga internetka oo dhan oo leh qiimaha fasalka "konteyner" (taas oo ah xaalad aad u caadi ah ee naqshadeynta webka), qaybtaas waxaa loo dejin karaa boos qaraabo ah si ay wax kasta oo gudaha ah u isticmaali karto waxaa loo arkaa macne ahaan.

Maxay Ku Saabsan Yihiin Meel Gaar Ah?

Joogitaanka meel adag waa meel aad u fiican. Jagada cutubka waxaa lagu xisaabiyaa si la mid ah moodeelka oo dhammaystiran, hase yeeshee walxo go'an ayaa lagu hagaajinayaa meeshaas-ku dhowaadba sida fiyuuska . Wax kasta oo kale oo bogga ka dambeeya ayaa markaa ka sii gudbi doona cutubkaas.

Si aad u isticmaasho qiimaha hantida, waxaad samayn lahayd:

Goobta: go'an;

Maskaxda ku hay, markaad hagaajinayso cutubka ku yaal goobtaada, waxay ku daabici doontaa goobtaas markaad boggaaga daabacdo. Tusaale ahaan, haddii alaabtaada ay ku xiran tahay dhinaca sare ee boggaaga, waxay u muuqan doontaa sare ee bog kasta oo daabacan - maxaa yeelay waxay ku xiran tahay dusha sare ee bogga. Waxaad isticmaali kartaa noocyada warbaahinta si aad u bedesho sida bogagga daabacan uu u muujiyo waxyaabaha asaasiga ah:

@media screen {h1 # booska ugu horeeya: xaalada; }} @media print {h1 # booska ugu horeeya: booska; }}

Maqaalka asalka ah ee Jennifer Krynin. Waxaa sameeyay Edited by Jeremy Girard on 1/7/16.