CSS yare waa mid ka mid ah tusaalooyinka qaabka CSS sanduuqa . Hanti-galkaan wuxuu qeexayaa dhererka ku wareegsan dhammaan afarta dhinac ee halbeegga HTML. CSS yareenta waxaa loo adeegsan karaa ku dhowaad kasta astaanta HTML (marka laga reebo qaar ka mid ah jumladaha miiska). Intaa waxaa dheer, dhammaan afarta dhinac ee halbeegga waxay yeelan karaan qiime ka duwan.
Hantida CSS-ka Hantida
Si aad u isticmaashid dhismaha css iyo CSS, waxaad isticmaali kartaa mnemonic "TROUBLe" (ama "TRiBbLe" ee taageerayaasha Star Trek). Tani waxay u taagan tahay dhinaca sare , midig , hoose , iyo bidix , waxana ay loola jeedaa amarka xargaha ballaadhan ee aad ku qortey hantida khaaska ah. Tusaale ahaan:
caarada: bidixda hoose ee bidix; dhererka: 1px 2px 3px 6px;Haddii aad isticmaashay qiimaha kor lagu soo xusay, waxay u adeegsan lahayd qiimo kala duwan oo qiimo leh oo dhinac kasta ah wax kasta oo HTML ah ee aad u codsaneyso. Haddii aad rabto inaad codsato isku midka afarta dhinac ah, waxaad fududeyn kartaa CSS-gaaga oo kaliya qor hal qiimah:
caarada: 12px;Iyadoo loo marayo line-ka CSS, 12 pixels of padding waxay ku dabaqi karaan dhammaan dhinacyada 4-ka ee elementka.
Haddii aad rabto in bacda ay isku mid noqoto sare iyo hoose iyo bidix iyo midig, waxaad qori kartaa laba qiyam:
yare: 24px 48px;Qiimaha ugu horreeya (24px) wuxuu ku dabaqi doonaa sare iyo hoose, halka kan labaadna uu ku dabaqi doono bidixda iyo midigta.
Haddii aad ku qorto saddex qiyam, taasi waxay sameyn doontaa midabka cagaaran (bidix iyo midigba), isla markaana bedelaya sare iyo hoose:
caarada: dusha sare iyo bidix ee sare; caarada: 0px 1px 3px;Marka la eego qaabka CSS sanduuq, cirridku wuxuu ugu dhow yahay qaybta / maaddada lafteeda. Tani waxay ka dhigan tahay in bacda lagu daro walxaha u dhexeeya mugga width ama height iyo qiimaha xuduudaha aad isticmaashid. Haddii bacda loo dhigo eber, ka dibna waxay leedahay gees isku mid ah maadada.
Qiimaha CSS-ka
CSS bacda ayaa qaadan karta wax kasta oo aan dherer lahayn. U hubso inaad sheegto qiyaasta, sida px ama em. Waxa kale oo aad sheegi kartaa boqolkiiba inta aad ka shaqeyneysid, taas oo noqon doonta boqolkiiba inta ballaaran ee unugta ku jirta. Tan waxaa ka mid ah cirifka sare iyo hoose. Tusaale ahaan:
# dhexdhexaadiyaha {width: 800px; dhererka: 200px; } # tixraac leh {width: 400px; dhererka: 75%; dhererka: 25% 0; }Dhererka cutubka ee ku yaala qaybta # dhexdhexaadiyaha wuxuu noqon doonaa 75% dhererka # dhexdhexaadiyaha oo lagu daray 25% oo ballaadhanka sare ah ee saafiga sare iyo 25% ee ballaadhka hoose ee salka hoose. Tani waxay isugu jiraan 300 + 200 + 200 = 700px.
Saamaynta ku darsashada CSS Padding
Xayawaanka heerka-hoose , caarada ayaa lagu dabaqayaa afarta dhinac. Sababtoo ah unuggu waa block ama sanduuq horeyba leh, caarada ayaa laga dalbadaa dhinacyada sanduuqa.
Marka css caddeynta lagu daro walxaha culeeyska , waxaa laga yaabaa inay jiraan qaar ka mid ah waxyaabo ka sarreeya oo ka hooseeya qaybta calaamadda haddii dhererka tooska ahi uu ka sareeyo xariijinta xariijinta, hase yeeshee ma dhejin doono dhererka laynka. CSS-ka CSS-ka oo lagu daboolay xubno asal ah ayaa lagu dari doonaa bilowga qaybta iyo dhammaadka qaybta. Oo caaradu waxay ku duubi kartaa xariiqyo. Laakiin ma khusayso dhammaan qaybaha mawduucyada kala duwan, sidaa darteed ma isticmaali kartid cirridka si aad uhesho qayb ka mid ah qaybo badan oo khadka ah.
Sidoo kale, CSS2.1, ma abuuri kartid xayndaabyo leh meesha ugu ballaaran ee ku xiran tahay cinwaanka leh boqolleyda xajmiga (ama xajmiga ballaca). Haddii aad sameyso natiijada lama garanayo. Browsers ayaa weli muujinaya waxyaabaha, laakiin ma heli kartid natiijooyinka aad filayso. Haddii aad ka fekereyso, waxay macno samayneysaa, sida haddii weelkaaga weelku ubaahan yahay inuu ogaado dhererka cunnugiisa si uu u qeexo ballaadhkiisa - sida marka uusan lahayn ballan horay loo qoondeeyey, iyo hal ama in ka badan width width sida boqolkiiba of element weelka, tani waxay u dhigtaa silsilad wareeg ah oo aan lahayn jawaab. Haddii aad u isticmaasho boqolkiiba qaybaha wax ku yaal dukumeentigaaga, waa inaad hubisaa in xayndaabyada waalidku sidoo kale la qeexay.