Isticmaalka CSS Sawirrada

Muuqaalkaaga Sawirrada iyo Isticmaal Sawirada qaababka

Dad badan ayaa isticmaala CSS si ay u hagaajiyaan qoraalka, beddelaan font, midabka, baaxadda iyo wax ka badan. Laakiin hal shay oo dad badani badanaaba iloobaan waa inaad isticmaali kartaa CSS-da sawirrada sidoo kale.

Beddelida sawirka muuqaalka

CSS wuxuu kuu ogolaanayaa inaad ku hagaajiso sida sawirku u muuqdo bogga. Tani waxay noqon kartaa mid waxtar leh si aad u ilaaliso bogaggaaga. Adiga oo dejiya sawirada dhammaan sawirrada, waxaad abuureysaa muuqaal caadi ah sawirradaada. Qaar ka mid ah waxyaabaha aad sameyn kartid:

Siinta xuduuddaada xuduud waa meel fiican oo lagu bilaabi karo. Laakiin waa inaad tixgelisaa in ka badan xuduudda - ka feker dhamaan geeska sawirkaaga iyo inaad hagaajisid margooyinka iyo cidhibta . Sawir leh xudduud khafiif ah oo madow waxay u egtahay mid fiican, laakin ku darista qaar ka mid ah boodhka u dhexeeya xuduudda iyo muuqaalkuba waxay u eegi karaan xitaa ka sii fiican

img {
xadka: 1px adag madow;
dhererka: 5px;
}

Waa fikrad wanaagsan inaad marwalba ku xirto sawirada aan qurxinta lahayn , marka ay suurtogal tahay. Laakiin markaad sameyso, xusuusnow in badmaaxeyaashu ay ku daraan xuduudaha midabada ku wareegsan sawirka. Xitaa haddii aad isticmaasho koodhka kor ku xusan si aad u bedesho xadka, iskuxirku wuxuu kaa saari doonaa haddii aanad ka saarin ama aad bedesho xuduudda xuddunta. Si tan loo sameeyo waa inaad isticmaashaa xeerka CSS ee caruurta si aad uga saarto ama u bedesho xuduudaha ku yaala sawirrada la xariira:

img> a {
xuduudda: midna;
}

Waxaad sidoo kale isticmaali kartaa CSS si aad u bedesho ama aad dhigto dhererka iyo ballaca sawiradaada. Inkastoo aysan ahayn fikrad aad u fiican in la isticmaalo gawsarka si loo dejiyo mugga sawirada sababtoo ah xawaaraha soo-qaadashada, waxay ku sii fiicnaanayaan sawirada sawirrada si ay wali u eegaan wanaag. CSS-da waxaad ku dhejin kartaa sawiradaada dhammaantoodna waxay noqon karaan xajmiga cabirka ama dhererka ama xitaa cabbiraha cabbirada si ay u noqdaan qashinka.

Xasuuso, marka aad dib u qaabeynayso sawirada, natiijooyinka ugu fiican, waa inaad dib u soo ceshataa hal cabbir - dhererka ama ballaca. Tani waxay dhalin doontaa in sawirku uu sii hayo saamigeeda, sidaas daraadeed ma muuqato wax la yaab leh. Qiimee qiimaha kale ee baabuurta ama ka baxo si aad ugu sheegto barta shabakadda si loo ilaaliyo saamiga xajmiga ah.

img {
width: 50%;
dhererka: baabuurta;
}

CSS3 ayaa xal u helaya dhibaatadan iyada oo la adeegsanayo sheyga cusub ee hab-raaca iyo qaab-ujeedka. Iyada oo dhismooyinkani waxaad awood u yeelan doontaa in aad qeexdo dhererka iyo muuqaalka sawirka dhabta ah iyo sida loola macaamilayo saamiga. Tani waxay abuuri kartaa saameynta warqadaha saamaynta ku leh hareerahaaga ama aad udageyso si aad u hesho muuqaalka si aad ugu haboonaatid cabbirka loo baahan yahay.

Inkasta oo guryaha CSS3-ku-haboon iyo qul-qul-qulqulka aan si weyn loo taageerin, haddana waxaa jira waxyaabo kale oo CSS3 ah oo si fiican u taageersan bareerayaasha casriga ah ee aad isticmaali karto si aad wax uga beddesho sawirradaada. Waxyaabaha ay ka midka yihiin hooska hoos u dhaca, wareegyada wareegsan, iyo isbeddelada si ay u rogaan, iskutalaan, ama u guuraan sawiradaada oo dhan wax walba oo ka shaqeeya barta casriga casriga ah. Waxaad markaa isticmaali kartaa marxaladaha CSS si aad sawirada u beddesho marka la soo gaabiyo, ama gujiso, ama waqti yar kadib.

Isticmaalidda Sawirada sida Maqalka

CSS wuxuu fududeeyaa in la abuuro asalka muuqaalka sawirradaada.

Waxaad ku dari kartaa asalka guud ee bogga oo idil ama halbeeg gaar ah. Waa sahlan tahay in la abuuro sawir asal ah oo ku yaal bogga leh hanti sawir leh-muuqaal ah:

jirka {
image-image: url (background.jpg);
}

Kala beddel doorashada kambiyuutarka qayb gaar ah oo bogga ku yaal si aad uhesho taariikhda hal element.

Wax kale oo xiiso leh oo aad ku sameyn kartid sawirada ayaa abuuraya sawir asal ah oo aan ku dhajin bogga intiisa kale - sida fiyuusta. Waxaad isticmaashaa asalka muuqaalka-qaabsamida: go'an; iyo sawirkaaga asalka ah. Kala doorashooyinka kale ee asalkaaga ah waxaa ka mid ah inay iyaga ku dhejiyaan xoqo qadar ama toosan iyadoo la adeegsanayo hantida soo noqnoqota.

Qor taariikh-celin: ku cel-x; si aad u sawirtid muuqaalka hor iyo dib-u-celin: ku cel-y; si aad u dhejisid fiilooyinka. Waxa kale oo aad ku dhejin kartaa sawirkaaga asalka ah ee hantida asalka ah.

CSS3 waxay ku dareysaa noocyo badan oo asalkaaga ah. Waad sawirin kartaa sawiradaada si aad ugu habboonaato asalka dhabta ah ama aad sameysid sawir asalka ah si aad u barbar dhigtid cabbirka daaqadda . Waxaad bedeli kartaa jagada kadibna ku duubi kartaa sawirka asalka ah. Laakiin mid ka mid ah waxyaabaha ugu fiican ee ku saabsan CSS3 waa inaad hadda awoodi kartid muuqaallo asal ah oo dhowr ah si loo abuuro saameyn aad u adag.

HTML5 wuxuu ka caawiyaa sawirrada "Style"

Xeerka shaxda ee HTML5 waa in lagu dhejiyaa wixii sawir ah ee kaligaa istaagi kara dokumentiga. Hal hab oo aad uga fekereyso waa haddii sawirku ka muuqan karo lifaaq, ka dibna waa inuu ku jiraa gudaha shaxanka. Waxaad markaa isticmaali kartaa wejiga iyo qaybta FIGCAPTION si aad ugu darto qaababkaaga sawirradaada.