Sawirrada xarumaha, qoraalka, iyo waxyaabaha xayeysiinta ah marka dhismaha shabakadaha
Haddii aad baranayso sida loo dhiso bogagga , mid ka mid ah tabaha ugu caansan ee aad u baahan tahay in aad udignaato waa sida loo habeeyo waxyaabaha ku jira daaqada browserka. Tani waxay macnaheedu noqon kartaa in lagu sawirayo sawir bogga, ama waxay noqon kartaa qoraalka xaqiiqo ahaaneed sida madaxyada oo qayb ka ah nashqadda.
Habka ugu haboon ee loo dhameyn karo muuqaalkan muuqaalka sawirrada dhexe ama qoraalka ama xitaa websaydhkaaga oo dhan waa iyadoo la isticmaalayo Cascading Style Sheets (CSS) . Qeybaha kala duwan ee xarumuhu waxay ku jireen CSS tan iyo version 1.0, waxayna si fiican u shaqeeyaan CSS3 iyo daalacayaasha internetka casriga ah .
Sida qaabab badan oo naqshadeynta webka ah, waxaa jira siyaabo badan oo loo adeegsado CSS si ay u noqoto mid ku dhisan xarfo. Aan eegno siyaabo kala duwan oo loo adeegsado CSS si loo gaaro aragti muuqaal ah.
Dulmarka Guud ee Isticmaalka CSS ee Qormooyinka Xarunta ee HTML
Xarunta CSS waxay noqon kartaa caqabad ku salaysan bilawga naqshadayaasha websaydhka maxaa yeelay waxaa jira siyaabo badan oo kala duwan si loo dhamaystiro qaabkaan muuqaalka ah. Inkasta oo qaababka kala duwan ee laga yaabo in ay noqon karaan kuwo wanaagsan ama marxaladaha horumariya websadaha kuwaas oo og in aan dhammaan farsamooyinka ay ka shaqeeyaan walxaha kasta, tani waxay noqon kartaa mid aad u adag oo ku wajahan xirfadleyda internetka cusub tan iyo qaababka kala duwan ee micnaheedu waxay tahay inay u baahan yihiin inay ogaadaan marka la isticmaalayo habka. Waxa ugu fiican ee la sameeyo waa in la helo faham dhowr ah. Markaad bilowdo inaad isticmaasho, waxaad baran doontaa habkee sida ugu fiican u shaqeynaya.
Heer sare, waxaad isticmaali kartaa CSS:
- Qoraalka Xarunta
- Xarun qaybta heerka block (sida qayb ahaan)
- Xarun sawir
- Dhexdhex geli barta ama sawir
Dad badan (sanado badan) ka hor, naqshadeeyayaasha webka waxay isticmaali karaan qalabka 'center center' si ay u sawiraan sawirada iyo qoraalka, laakiin arimahan HTML hadda waa laga saaray oo aan taageersaneyn daalacayaasha internetka casriga ah. Tani waxay ka dhigan tahay inaad ka fogaato adigoo isticmaalaya erayga HTML haddii aad rabto in boggagaagu si sax ah u muujiyo una waafajiyo heerarka casriga ah! Sababta arrintan loo soocay waa, qayb ahaan, sababtoo ah website-yada casriga ahi waa inay si cad u kala soocaan dhismaha iyo qaabka. HTML waxaa loo isticmaalaa in la abuuro qaab dhismeedka halka CSS ay qeexayso qaabka. Sababtoo ah xarfayntu waa muuqaal muuqaal ah oo ah qaab (sida ay u eg tahay waxa ay tahay), qaabkani waxa lagu qabtaa CSS, ma ahan HTML. Tani waa sababta aad ugu dari laheyd 'xarfaha' xarunta 'qaabka' HTML 'waa khalad ayadoo la raacayo heerarka casriga ee casriga ah. Taa baddalkeeda, waxaan u jeedin doonaa CSS si aan u aqbalno waxyaabaheena si fiican oo aan udoonayno.
Xarunta Dhageysiga CSS
Waxyaabaha ugu fudud ee lagu barto bogga internetka waa qoraal. Waxa jira hal hanti oo kaliya ah oo aad u baahan tahay inaad ogaatid inaad sidaan sameyso: qoraalka-u dhigma. Qaado qaabka CSS ee hoos ku qoran, tusaale ahaan:
P.center {text-align: center; }
Iyadoo loo marayo line-ka CSS, cutub kasta oo ku qoran fasalka dhexe ayaa lagu dhejin doonaa qaybta waalidkiisa. Tusaale ahaan, haddii cutubku ku dhex jiray qayb ahaan, taas oo micnaheedu yahay in ilmuhu yahay kala qaybsanaan, waxaa lagu dhejin doonaa geli gudaha
Waa kuwan tusaalahan fasalkaan ku jira dukumeentiga HTML:
Qoraalkani waa mid dhexe.
Markaad qoraalka ku qorayso hanti-alaab-haleesho, xusuusnow in lagu dhexdhigi doono qaybta ay ka kooban tahay oo aysan ahayn mid ku salaysan bogga oo dhan. Sidoo kale xusuuso in qoraalka dhexe ee xaqiiqada ah uu adkaan karo in uu akhriyo waxyaalo badan oo ka kooban waxyaabo badan, sidaas darteed u isticmaal dariiqadan. Mawduucyada iyo qoraallada yar yar ee qoraalka, sida qoraalka teaser ee maqaal ama waxyaabo kale, inta badan waa sahlan tahay in la akhriyo oo la ganaaxo marka la duuduubay, laakiin qaybaha waaweyn ee qoraalka, sida maqaalkiisa oo dhan laftiisa, waxay ku adkaan doontaa in la isticmaalo haddii mawduuca si buuxda u ahaa caddayn. Xusuusnow, akhristu waa had iyo jeer muhiim ah marka ay timaado qoraalka website-ka!
Xarumaha Maxkamadaynta ee CSS
Xayawaanku waa walxo kasta oo ku yaal boggaaga oo leh qeexid qeexan oo loo asteeyey oo ah astaamaha heerka-hoose. Marar dhif ah, xayawaankan waxaa loo abuuray iyadoo la isticmaalayo HTML
div.center {
margin: 0 baabuur;
width: 80s;
}
CSS-du waxay ku qiyaaseysaa hantida marinka ah waxay u dhigeysaa qiimaha sare iyo hoose ee qiimaha 0, halka bidixda iyo midiguba ay isticmaali doonaan "auto." Tani waxay astaan u tahay meel kasta oo la heli karo lana qaybiyo si siman labada dhinac ee daaqada muuqaalka, si wax ku ool ah udheerta cutubka bogga.
Halkan waxaa lagu dabaqay HTML:
laakiin qoraalka gudahiisa wuxuu ku yaalaa isku dhafan.
Ilaa inta baaxadaadu leedahay ballan loo qoondeeyey, waxay isku dhex gali doontaa gudaha qaybta ku jirta. Qoraalka ku jira bartaas laguma dhex-dhex-dhex-dhexaadin doono, laakiin waa laga tegayaa-caddayn. Tani waa qoraalka qoraalka ah ee udub-dhexaadka ah ee ku habboonaanta ku jira daalacashada websaydhka. Haddii aad rabto in qoraalka la dhigo sidoo kale, waxaad isticmaali kartaa hantida qalabka qoraalka ah ee aan horey uga soo bixinnay habkan si aan udhigno qaybta.
Muuqaalka Xarunta CSS
Inkastoo daalacashada intooda badani ay muujinayaan sawirrada la adeegsanayo isla dhismaha qoraalka isku midka ah ee aan horey u eegnay cutubka, ma aha fikrad wanaagsan in lagu tiirsanaado farsamada taas oo aan lagu talineynin W3C . Maadaama aan lagula talin, marwalba waa fursad in qaababka mustaqbalka ee daalacayaashu ay dooran karaan inay iska indha tiraan habkan.
Intii aad isticmaali lahayd qoraalka si aad u sawirtid sawir, waa inaad si cad u sheegtaa browser-yada in sawirku yahay unug heerka-hoose ah. Habkan, waxaad udhigin kartaa sidaad yeelatid xayiraad kale. Halkan waxaa ah CSS si ay tani u dhacdo:
img.center {
bandhigid: xannibaad;
bidix-bidix: baabuur;
margin-xaq: baabuur;
}
Oo halkan waa HTML taas oo loogu talagalay sawirka aan jecelnahay inaan kudoonayno:
Waxaad sidoo kale kudari kartaa qalabka Isticmaalka CSS ee gudaha (eeg hoos), laakiin habkan laguma talin maaddaama ay ku dareyso qaababka muuqaalka ee ku qoran astaanta HTML. Xasuuso, waxaan dooneynaa in aan kala soocno qaabka iyo dhismaha, markaa ku dar dariiqa CSS-gaaga ah ee HTML-gaaga kala go'a oo kala go'a iyo, sida, waa in laga fogaadaa mar kasta oo ay suurtogal tahay.
Elements Xarumaha Dhexdeeda CSS
Waxyaabaha xarumuhu waxay si isdaba-joog ah ay marwalba ujiraan naqshadeynta webka, laakiin marka la sii daayo CSS-ka Caamka Qodobka Caamka ah ee CSS3, hadda waxaa jira hab loo sameeyo.
Isku dheelitir la'aanta ayaa u dhiganta si la mid ah isku dhejinta toosan ee kor ku xusan. Hantida CSS waa mid toosan oo u dhigma qiimaha dhexe.
.vcenter {
toosan oo isku dhafan: dhexe;
}
Hoos udhaca habkan ayaa ah in dhammaan daalacayaashu aysan taageerin CSS FlexBox, in kasta oo intaa in ka badani ay soo socdaan habkan habka cusub ee CSS! Dhab ahaantii, dhammaan shabakadaha casriga ah ee maanta ayaa hadda taageeraya qaabkan CSS. Tani waxay ka dhigan tahay in cabashooyinkaaga kaliya ee Flexbox ay noqon doonto mid aad u weyn oo browser ah.
Haddii aad la kulantid daalacayaasha da'da weyn, W3C waxay ku talineysaa inaad qoraalka u dhexgaliso weel si aad u isticmaasho habkan soo socda:
- Dheji walxaha lagu dhexdhigay gudaha qaybta ay ka kooban tahay, sida div.
- Ku dhaji dhererka ugu hooseeya ee ku jira qaybta ku jirta.
- U sheeg in ay ku jiraan xubin ahaan unug miiska.
- U dhig qaabka toosan ee "dhexda".
Tusaale ahaan, halkan waa CSS:
.vcenter {
min-height: 12em;
bandhig: miis-maskaxeed;
toosan oo isku dhafan: dhexe;
}
Oo halkan waa HTML:
Qoraalkan waxaa si gaabis ah ugu qornaa sanduuqa.
Dhexgelinta Dhexdhexaadinta iyo Kala Duwanaanshaha Internet Explorer
Waxaa jira dhowr siyaabood oo lagu qasbo Internet Explorer (IE) inuu barto kadibna isticmaalo faallooyinka shuruudaha leh si ay IE u aragto qaababka, laakiin waxay yihiin hadal kooban oo fool xun. Warka wanaagsani waa in la raaco go'aankii dhawaan la gaaray Microsoft ee ah in la joojiyo taageerada versions of older versions of IE, kuwa dijitaalka ah ee aan taageerada lahayn waa inay si deg deg ah uga baxaan, taasoo u sahlaysa inay naqshadeeyayaasha webka isticmaalaan habab casri ah sida CSS FlexBox kaasoo samayn doona dhamaan qorshaha CSS, ma aha oo kaliya xarun, ka sahlanaataa dhamaan naqshadeeyayaasha websaydhka.