Raadi xaqiiqda talooyinkan
Dhamaan daalacashada internetka waxaa ku jira waxa loo yaqaan "qaababka ugu fiican." Kuwani waa noocyo ah oo muujinaya muuqaalka iyo dareemidda waxyaallaha HTML ee maqnaanshaha macluumaad kale oo habboon. Tusaale ahaan, ku dhowaad shabakad kasta oo muuqaal ah oo muuqaal ah oo ah hyperlinks waa midab buluug oo cad oo leh hoosta. Tani waa sida ay xiriirada u eegayaan haddii aadan u sheegin inay si kale u muujiyaan.
Noocyada browser-yada caadiga ah waxay noqon karaan kuwo waxtar leh, laakiin xaalado badan oo ah naqshadeeyayaasha webka waxay doonayaan inay ka saaraan noocyada noocan ah si ay u bilaabi karaan kuwo cusub oo leh noocyo ah in ay yihiin 100% gacanta. Tan waxaa lagu sameeyaa iyada oo la adeegsanayo waxa loo yaqaan "" naqshadda master-ka. "
Noocyada masterka waa in ay ahaadaan calaamadaha ugu horeeya ee aad ku soo wacdo dhammaan dukumintiyadaada. Waxaad isticmaashaa naqshad sir ah si aad u nadiifiso goobaha internet-ka ee caadiga ah ee keeni kara dhibaatooyinka shabakada internetka. Markaad nadiifisid qaababka leh naqshad caan ah, qaabayntaada waxay ka bilaabataa meel isku mid ah dhammaan daalacashada - sida nadiif nadiif ah oo rinji ah.
Global Defeults
Noocyada caan ah ee masterka waa in ay ku billaabaan inay ku dhameeyaan xuduudaha, cirka iyo xuduudaha bogga. Qaar ka mid ah daalacayaasha webka ayaa badinaya qaabka dukumiintiga ah 1 ama 2 pixels oo ka soo jeeda geesaha baraha. Tani waxay hubineysaa in dhammaantood ay isku mid yihiin:
html, jirka {margin: 0px; caarada: 0px; xadka: 0px; }Waxaad sidoo kale rabtaa inaad sameysid xarfaha si joogto ah. U hubso inaad sidoo kale cabbirayso cabbirka font ilaa 100 boqolkiiba ama 1em, si aad boggaaga u hesho, laakiin cabbirka weli waa mid joogto ah. Xaqiiji in aad ku darto xariiqda dhererka.
Body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Warqadda Madaxa-bannaan
Cinwaanka ama xarfaha madaxa (H1, H2, H3, iwm.) Waxay si caadi ah u diidaan qoraalka dhaadheer oo leh calaamado ballaadhan ama hareerahooda. Adoo hubinaya miisaanka, margins iyo caarada, waxaad xaqiijineysaa in qoraalkaasi uu wali ka weyn yahay (ama ka yar yahay) qoraalka ku xeeran iyaga oo aan lahayn qaabab dheeraad ah:
h1, h2, h3, h4, h5, h6 {margin: 0; caarada: 0; font-miisaanka: caadiga; font-family: Arial, Helvetica, sans-serif; }Waxaa laga yaabaa in aad doonaysid inaad tixgelisid dejinta cabbir qaas ah, warqad-kala-gaabis iyo joodareyn ku qoran astaanta cinwaankaaga, laakiin taasi dhab ahaantii waxay ku xiran tahay qaabka goobta aad naqshadaynayso waana in laga tagaa warqadda qaabka master-ka. Waxaad ku dari kartaa noocyo badan oo cinwaanada ah sida loogu baahan yahay naqshad gaar ah.
Qaabinta Qaababka Qaabka
Ka sarreeya cinwaannada, waxaa jira waxyaabo kale oo qoraal ah oo aad u baahan tahay inaad iska hubiso. Mid ka mid ah dadku waxay badanaaba iloobaan waa mawduucyada unugyada miiska (TH iyo TD) iyo foomamka tags (SELECT, TEXTAREA iyo INPUT). Haddii aadan u dhigin tan cabbirka isku mid ah sida jirkaaga iyo cutubka cutubka, waxaa laga yaabaa inaad si xun u yaaban tahay sida daalacayaashu u dhiibaan.
p, th, td, li, dd, dt, ul, o, blockquote, q, acronym, abbr, a, talada, dooro, textarea {margin: 0; caarada: 0; font: caadi caadiga ah 1em / 1.25 Arial, Helvetica, sans-serif; }Waxaa sidoo kale fiican inaad bixiso qadarkaaga (BLOCKQUOTE iyo Q), ereyo kooban, iyo soocista qaab yar oo dheeri ah, si ay uga sii adkeeyaan wax yar:
blockquote {margin: 1.25em; caarada: 1.25em} q {font-style: italic; } xariiqa gaaban, abbr {cursor: caawimaad; xadka xudduudaha: 1px dhoobo; }Xidhiidhada iyo Sawirrada
Xidhiidhku waa sahlan tahay in la maareeyo loona beddelo qoraalkaas oo hoosta ku qoran. Waxaan doorbidayaa in had iyo jeer leeyahay xiriiriyahaygu hoosta ku dhegan yahay, laakiin haddii aad doorbidayso qaab kale oo aad kala dooran karto xulashadan si gooni gooni ah. Sidoo kale kuma jiraan midabyo ku qoran waraaqaha qaabka masterka, sababtoo ah waxay ku xiran tahay naqshadeynta.
a, a: link, a: booqday, a: firfircoon, a: hover {text-decoration: hoosta; }Sawirro, waxaa muhiim ah in la xiro xudduudaha. Inkastoo daalacashada badankood aysan soo bandhigin xuduudda muuqaal cad, marka sawirku uu ku xiran yahay, daalacayaashu waxay soo celiyaan xadka. Si aad u hagaajisid tan:
img {border: none; }Miisaska
Iyadoo miisaannada aan loo isticmaalin ujeedooyinka qaabeynta, waxaad boggaaga u isticmaali kartaa xogta saxda ah ee dhabta ah. Kani waa isticmaalka quruxda badan ee jaantusyada HTML. Waxaan horey u xaqiijinay in cabbirka qoraalka caadiga ah uu isku mid yahay unugyada miiskaaga, laakiin waxaa jira dhowr nooc oo kale oo ay tahay in aad sameyso si miisaskaagu u yahay mid isku mid ah:
miiska: 0; caarada: 0; xuduudda: midna; }Foomamka
Sida walxaha kale, waa inaad ka taxadartaa margooyinka iyo cidhifka ku wareegsan foomamkaaga. Waxyaabo kale oo aan jeclahay in aan sameeyo waa dib u buuxinta foomka qaabka " inline " sidaa daraadeed ma ku darin meel bannaan oo dheeraad ah meesha aad ku qoraysid lambarka. Iyada oo la mid ah qaybaha kale ee qoraalka, waxaan qeexayaa macluumaadka xarfaha ee doorashada, textarea iyo kor ku xusan, si ay u la mid tahay inta kale ee text.
foomka {margin: 0; caarada: 0; Bandhigid; }Sidoo kale waa fikrad wanaagsan inaad bedesho calaamadda calaamadahaaga. Tani waxay ka caawisaa dadka inay arkaan in calaamaduhu wax samayn doonaan marka ay riixayaan.
calaamadda {cursorka: calaamadda; }Fasallada caadiga ah
Qaybtan qaybta caanka ah ee caanka ah, waa inaad qeexdid fasallada adiga ku fahmi kara. Kuwani waa qaar ka mid ah fasalada aan isticmaalo inta badan. Ogsoonow inaysan ku jirin waxyaabo gaar ah, sidaa darteed waxaad ku meelayn kartaa wax kasta oo aad u baahan tahay:
.Tudday {caddayn: labadaba; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .TextJustify {text-align: xaq u yeel; } .blockCenter {bandhig: block; bidix-bidix: baabuur; margin-xaq: baabuur; } / * xusuusoow inaad dejiso xajin * / .bold {font-weight: bold; } .italic {font-style style: italic; } .underline {text-decoration: underline; } .nindendent {margin-left: 0; caarada-bidix: 0; } .nomargin {margin: 0; } .waxaan ku dhejineynaa: 0; } .nobullet {liistada liiska: midna; liiska-qaab-sawir: midna; }Xasuusnow sababtoo ah fasaladaas waa la qoraa ka hor intaanay jirin noocyo kali ah oo ay yihiin fasalo oo kaliya, way fududahay in la dhaafo waxyaabo gaar ah oo qaas ah oo dhacaya ka dib. Haddii aad ogaato inaad dhigto fasal caadi ah oo ku saabsan sheyga oo uusan dhaqangelin, waa inaad hubisaa in aysan jirin qaab kale oo mid ka mid ah midabadaada dambe ee saameeya isla hal.
Dhammaan Macallinimada Master-ka
/ * Global Defaults * / html, jirka {margin: 0px; caarada: 0px; xadka: 0px; } jirka {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Headlines * / h1, h2, h3, h4, h5, h6 {margin: 0; caarada: 0; font-miisaanka: caadiga; font-family: Arial, Helvetica, sans-serif; } / * Noocyada qoraalka * / p, th, td, li, dd, dt, ul, o, blockquote, q, acronym, abbr, a, talada, dooro, textarea {margin: 0; caarada: 0; font: caadi caadiga ah 1em / 1.25 Arial, Helvetica, sans-serif; } Kala soocid {margin: 1.25em; caarada: 1.25em} q {font-style: italic; } xariiqa gaaban, abbr {cursor: caawimaad; xadka xudduudaha: 1px dhoobo; } yar {font-size: .85em; } weyn {font-size: 1.2em; } / * Xirfadaha iyo Sawirrada * / a, a: link, a: booqdey, a: firfircoon, a: hover {text-decoration: hoosta; } img {border: none; } / * Jaantusyada * / miisaanka {margin}: 0; caarada: 0; xuduudda: midna; } / * Forms * / foomka {margin: 0; caarada: 0; Bandhigid; } calaamadda {cursor: pointer; } / * Fasalada caadiga ah * /. } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .TextJustify {text-align: xaq u yeel; } .blockCenter {bandhig: block; bidix-bidix: baabuur; margin-xaq: baabuur; } / * xusuusoow inaad dejiso xajin * / .bold {font-weight: bold; } .italic {font-style style: italic; } .underline {text-decoration: underline; } .nindendent {margin-left: 0; caarada-bidix: 0; } .nomargin {margin: 0; } .waxaan ku dhejineynaa: 0; } .nobullet {liistada liiska: midna; liiska-qaab-sawir: midna; }Maqaalka asalka ah ee Jennifer Krynin. Waxaa Qorey Jeremy Girard 10/6/17