5 passi biex Write Aħjar css
Hemm ħafna tutorials CSS huma disponibbli fuq l-internet iżda l-tutorials ftit huma utli. F'dan il-tutorja għandek issib 5 passi biex jikteb il-kodiċi css aħjar għall-proġett website tiegħek li jmiss. Nispera li jgawdu din tutorja.
1. ResetCss
Għandek dejjem tuża reset Kemm jista 'jkun Eric Meyer Irrisettja, il-Reset YUI, jew reset tiegħek konswetudini stess, l-użu biss xi ħaġa.
L-għan ta 'stylesheet ssettjat mill-ġdid huwa li jitnaqqsu l-inkonsistenzi fil-browser affarijiet bħall-għoli tal-linja tal-kontumaċja, il-marġni u daqsijiet font ta' l-intestaturi, u l-bqija - Eric Meyer
html korp,, div, span, applet, oġġett, H1, H2, H3, h4, H5, H6, iframe, blockquote, pre, abbr, akronimu, indirizz, big, isemmi, il-kodiċi, del, dfn, em, font, img, ins, kbd, q, s, Samp, żgħar, strajk, qawwija, sub, appoġġ, tt, var, fieldset dd, dl, dt,, il-forma, it-tikketta, leġġenda, tabella, caption,, tfoot tbody, thead, tr,, etd th, input, tagħżel, textarea ; padding : 0 ; } (Margin: 0; padding: 0;); padding : 0 ; } * (Margin: 0; padding: 0;)
2. CSS Shorthand
Wieħed mill-aħjar u l-karatteristika importanti tal-CSS huwa l-abbiltà li jikteb il-kodiċi b'mod mminimizzat.
Żbaljata Kodiċi
( margin-top: 10px; marġini-dritt: 7px; margin-bottom: 10px; margin-left: 7px; padding-top: 10px; padding-dritt: 7px; padding-bottom: 10px; padding-left: 7px; font-size: 12px; font-weight: bold; ; font-familja: Arial, Verdana, Tahoma, sans-Serif; )
Correct Kodiċi
: 10px 7px 10px 7px ; padding : 10px 7px 10px 7px ; font :bold 12px Arial, Verdana, Tahoma, sans-serif ; } (Margin: 10px 7px 10px 7px; padding: 10px 7px 10px 7px; font: bold 12px Arial, Verdana, Tahoma, sans-Serif;)
3. M'għandekx tuża klassijiet tant u Id's
Għandi ndunat li l-biċċa l-kbira ta 'l-jibdew żid klassijiet u l-identità li kważi kull element fuq il-paġna, li mhuwiex required.There huma xi eżempji ta' hawn taħt dak li nirreferi għall.
Żbaljata Kodiċi
class = "wrapper" > <p class = "heading" > <strong class = "subheading" > Welcome </strong> </p> <p class = "linka" > <a href = "#" class = "link" > Home </a> </p> <p class = "linkb" > <a href = "#" class = "link" > About </a> </p> <p class = "linkc" > <a href = "#" class = "link" > Services </a> </p> <p class = "linkd" > <a href = "#" class = "link" > Contact </a> </p> </div> <div id = "wrapper" klassi = "wrapper"> <p klassi = "heading"> klassi <strong = "subheading"> Merħba </ strong> </ p klassi <p> = "linka"> <a href = "#" klassi = "rabta"> Home </ a> </ p klassi <p> = "linkb" href <a> = "#" klassi = "link"> Dwar </ a> </ p <p = "linkc"> klassi <a href = "#" klassi = "link"> Servizzi </ a> </ p klassi <p> = "linkd" href <a> = "#" klassi = "link"> Kuntatt </ a> </ p> </ div>
Hawn hu l-kodiċi korretta
Correct Kodiċi
> <h1> Welcome </h1> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Contact </a> </li> </ul> </div> <div id = "wrapper"> <h1> Merħba </ h1> <ul> href <a <li> = "#"> Home </ a> </ li> href <a <li> = "#"> About </ a> </ li> href <a <li> = "#"> Servizzi </ a> </ li> href <a <li> = "#"> Kuntatt </ a> </ li> < / ul> </ div>
4. Organizzazzjoni inti stylesheet
Għandek jorganizzaw stylesheet tiegħek hekk li jkun faċli li ssib affarijiet u oġġetti relatati mill-qrib flimkien. Uża kummenti effettiv. Per eżempju, hemm il-Eżempju se jgħidulek kif għandek torganizza stylesheet tiegħek
/ * Reset * / elements Marġini Neħħi u elementi ikkuttunar / * Elementi bażiċi * / Stil Iddefinixxi għall-elementi bażiċi: korp, H1, H2, H3, h4, H6,, ul ol, dl, p eċċ / * Klassijiet Ġeneriċi * / Stil Iddefinixxi għal klassijiet ġeneriku: affarijiet sempliċi bħal tneħħi l-qiegħ, f'wiċċ l-ilma lejn il-ġnub eċċ / * Layout bażiċi * / / * Layout bażiċi * / Iddefinixxi l-istil ta 'tqassim bażiku: header. footer, eċċ sidebar / * Header * / Iddefinixxi l-istil għall-header / * Kontenut * / Iddefinixxi l-istil ta 'żona ta' kontenut / * Footer * / Iddefinixxi l-istil ta 'footer / * Eċċ * / Kompli
5. Użu Stylesheets Kundizzjonali
Internet Explorer Buggy hija l-aktar ta 'l-browsers. Fortunatament tista 'tuża l-kummenti bil-kondizzjoni li jmexxi l-CSS li jiġi notifikat lill-IE. Jekk I ħtieġa I jkollhom stylesheet imsejjaħ ie6.css li l-miri ta 'verżjonijiet anzjani IE. Hija tippermetti lili biex jimmaniġġjaw CSS għall-browsers anzjani malajr u faċilment.
Hawn hu l-Eżempju
<!--[ jekk IE LTE 6]> href = "ie6.css" type = "text/css" media = "screen" / > rel <link = "stylesheet" href = "ie6.css" type = "text/css" media = "screen" /> -- > <! [Endif] ->
Konklużjoni
Dawn huma biss ftit mill-tips li jgħini biex jikteb il-kodiċi aħjar. Nittama li tutorja se jgħinek biex jiktbu aħjar u nodfa tal-kodiċi. Għajnuniet biex japplikaw dawn il-proġetti attwali u li jmiss tiegħek, u inti żgur li se japprezzaw l-isforzi.
Jekk taħseb li tista 'tkun aktar tutorja aħjar, Jekk jogħġbok sehem magħna. Kumment us
jekk inti tixtieq tirċievi ispirazzjoni aktar minna, jekk jogħġbok jikkunsidraw li jabbonnaw għal għalf tagħna billi RSS jew email.
Related Articles:
jekk inti jgawdu qari dan l-artikolu, jekk jogħġbok check out oġġetti relatati oħra hawn taħt:























































Tim Wright says on: 16 Settembru, 2009 fi 3:13 Said:
Kollox ma 'kollox, tips verament tajba. Ġeneralment, ma nużawx is-selettur universali (*) għal reset marġni u padding minħabba li l-elementi jiffurmaw tant huma instabbli cross-browser ma aktar ħsara milli ġid.
Imma jekk int miktub sit mingħajr il-forom, ngħidilhom, assolutament jużah.
Grazzi Good post,
Karl says on: 17 Settembru, 2009 fil-10:22 Said:
Well eżempju numru ta 'tliet snin huwa bażikament id-dritt. Għalkemm I cannot recall jużaw l-istess isem għall-id u l-klassi tkun żbaljata (qatt ma pprovaw li, qatt ma f'saqajhom meta eżempju) jidher ħafna stupid u messy.
Iżda jagħtu identifikaturi individwali għal elementi tan-navigazzjoni huwa neċessarju jekk inti tixtieq li jenfasizzaw il-punt kurrenti permezz css. Dan l-eżempju huwa forsi mhux l-aħjar li jintwerew u jistgħu jħawdu jibdew bħala drawwa ħażina jew ħażina / kodiċi.
Neel says on: 17 Settembru, 2009 fi 3:19 Said:
Artikolu Nizza għal kodifikazzjoni CSS. Iva a stylesheet ukoll organizzata hija dejjem tajba għall-kompatibbiltà browser kif inti dont għandhom jiċċekkjaw mill-ġdid.
Nru seletturi universali fuq says: 17 Settembru, 2009 fi 8:16 Said:
seletturi universali huma ħżiena ħafna!
tim says on: 30 Settembru, 2009 fi 2:14 pm Said:
Eżempju 3 jista 'jkun diffiċli jekk inti tixtieq li juru visiotrs tiegħek fuq is-sit li huma dritt issa. Hemm ebda mod madwar IDs imbagħad.