5 passi biex Write Aħjar CSS Parti II
Din hija it-tieni parti ta '5 passi għal 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. Żomm dikjarazzjonijiet CSS f'linja waħda
għandek dejjem iżommu id-dikjarazzjonijiet CSS f'linja waħda, dan jgħin fiż-żamma tiegħek CSS fajl nodfa u iżgħar. Hija tgħin ukoll biex jitneħħew l-ispazji mhux mixtieqa u l-karattri.
Good Kodiċi
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333,333; background: # cccccc;)
Bad Kodiċi
h2 ( font-size: 18px; ; color: # 333,333; ; background: # cccccc; )
2. Għaqqad Elements
Wieħed mill-aħjar mod biex jiffranka linji tal-kodiċi hija skond il-grupp seletturi. Hemm xi eżempji msemmija hawn taħt ta 'dak I am jirreferu għall.
Good Kodiċi
H1, H2, H3 ( ; color : # 333 ; font-familja: Arial, Helvetica, sans-Serif; color: # 333; )
Bad Kodiċi
h1 ( ; color : # 333 ; font-familja: Arial, Helvetica, sans-Serif; color: # 333; ) h2 ( ; color : # 333 ; font-familja: Arial, Helvetica, sans-Serif; color: # 333; ) H3 ( ; color : # 333 ; font-familja: Arial, Helvetica, sans-Serif; color: # 333; )
3. Użu "Marġini" biex Center Layout
Jibdew Ħafna CSS figura ma tistax tispjega għaliex inti ma tistax sempliċement jużaw float: center jintlaħaq dak l-effett ċċentrata fuq blokka-elementi livell. Jekk biss kienu li huwa faċli! Sfortunatament, ikollok bzonn li l-użu.
Kodiċi
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * top, qiegħ - u x-xellug, lemin * / wisa ': xxxpx; )
4. Kumment CSS tiegħek
It's idea kbira biex jikkummentaw kodiċi tiegħek fit-taqsimiet. Biex iżżid kumment, sempliċiment żid / * wara l-kummenti, u * / li jagħlaq li, bħal so:
Kodiċi
/******** KODIĊI START HERE ********/
5. Użu CSS Jikkompressa Tools
jekk inti ma tridx li l-iskart fil-ħin tiegħek timmodifika folji stil qadim tiegħek inti tista 'sempliċement jużaw css online kkompressat għodda, li jagħmlu x-xogħol tiegħek f'sekondi.
tivverifika din css online kkompressat għodod ...
Css imbarazz
Clean css
Css Optimiser
Flumpcakes Optimizer css
cssdrive css Comperasor
W3C css validator
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 tutorials aktar minna, jekk jogħġbok jikkunsidraw li jabbonnaw għal għalf tagħna billi RSS jew email.
Tippromwovi Us
Artikli relatati:
jekk inti jgawdu qari dan l-artikolu, jekk jogħġbok check out oġġetti relatati oħra hawn taħt:
Revell says on: 27 Novembru, 2009 fi 9:05 Said:
Ej,
L-ewwelnett, sbieħ article! M'hemmx ħafna artikoli li jindirizzaw l-istil ta 'kitba CSS. I do jkollhom xi ħsibijiet fuq l-ewwel punt għalkemm. Fl-opinjoni tiegħi huwa aħjar li jużaw l-istil bil-miktub fit-tul waqt li jiżviluppaw u għandhom b'kitba "minify" CSS tiegħek meta tuża dan fuq l-ambjent ħaj.
Dave says on: 27 Novembru, 2009 fil-10:06 Said:
I kompletament ma jaqblux ma 'punt 1. Meta inti ħadthom ltqajna 3 dikjarazzjonijiet, linja 1 tal-kodiċi hija kbira, imma meta jkun hemm 6 jew 7, jiġrilha verament diffiċli biex jinqara.
Kollha li biex jiffrankaw forsi 1KB? I do not ġġibu.
Minbarra li wieħed, uħud mill-ideat deċenti hawn.
Aħħar blog Dave's .. 2 b'mod aktar għandu jkollu-CMS tippermetti plugins għall WordPress
Fasce Nicolo "says on: 27 Novembru, 2009 fil-10:34 Said:
Jiena naqbel mal Dave, il-punt 1 huwa żbaljat, sempliċement għaliex jekk inti taħdem fuq tim huwa ferm diffiċli biex jinqara kodiċi linja waħda.
Għandek ukoll jikteb il-kodiċi f'ordni alfabetika għall-istess għan.
EJ Semeijn says dwar: 27 Novembru, 2009 fil-10:57 Said:
Why do we stop istazzjonar dawn tips? Internet huwa diġà sħiħa ta 'dawn tips bażiċi. U jiena wkoll ma jaqblux ma '# 1. Huwa ma jagħmilx kodiċi tiegħek aktar faċli biex jinftiehem, hija biss jagħmilha aktar diffiċli.
Tips tiegħi ser tkun li jiddaħħlu fis-istruttura tal-paġna fl CSS tiegħek, jagħmel is-sezzjonijiet għall-RESET, INTESTATURI, GĦAMLIET ELEMENTI HTML, fonts eċċ B'dan il-mod tiegħek CSS se jkun aktar faċli li jifhmu.
safetycopy says on: 27 Novembru, 2009 fi 9:38 Said:
Jiena naqbel mal-kummenti ta 'diversi nies oħra - punt eżempju 1 tal-kodiċi ħażin hija code mhux ħażin - huwa biss stil alternattiv. Dan il-post ikun biss utli biex jitlesta newbies u ma rridux li jibdew jgħallmu lilhom suppożizzjonijiet ħżiena diġà!
aħħar blog safetycopy's .. Photo
Josh says on: 29 Novembru, 2009 fi 4:38 Said:
I do kollha ta 'dawn ħlief l-aħħar wieħed. Jiena ma jsibuha utli li jikkompressa css tiegħi, iżda għall-kuntrarju tal-qarrejja kollha preċedenti I ħafna jaqblu fuq il-punt # 1. I biss bdiet bil-miktub CSS tiegħi f'linja waħda u huwa kien tremend. Il-scrolling ġie mnaqqas ħafna. I raden dan hija preferenza personali. Xi ħaġa li tgħin hija li l-editur I użu garżi-kodiċi jistabbilixxi li l-linja li jmiss sabiex ikun hemm l-ebda scrolling orizzontali.
Aħħar blog Josh's .. Dipendenti fuq Flickr
FAQPAL says on: 29 Novembru, 2009 fi 4:06 Said:
Tips Bidu tajjeb, jien ma minify CSS tiegħi jew, forsi proġett ferm akbar jibbenefikaw minn minifying, iżda s-sit il-medja ma verament bżonn.
Safejn # 1 tmur, jiena naħseb li l-kliem użat huwa dak li jitfa 'in-nies off, minflok qal, "Bad Kodiċi", forsi hija għandha tgħid simili safetycopy ssuġġeriet, "Supplent-Kodiċi".
Aħħar blog FAQPAL's .. Effett bubble mal-CSS
favSHARE says on: 30 Novembru, 2009 fil-12:49 Said:
Dan l-artikolu ġie maqsuma fuq favSHARE.net. Mur u votazzjoni it!
aħħar blog favSHARE's .. 25 tutorials Layout Web
Jean-Patrick Smith fuq says: Diċembru 11, 2009 fil-11:15 Said:
I normalment toħloq fajl PHP li jinkludi l-fajls kollha css tiegħi, minifies, u żżid kompressjoni + jiskadi headers.
B'dak il-mod I m'għandhomx jaqblu mal-punt # 1 ...
X'hemm aktar importanti minn wara kollha CSS tiegħek fuq linja waħda hija jitnaqqas in-numru ta 'sejħiet bl-HTTP sprites CSS u tgħaqqad kollha tiegħek CSS / JS f'waħda fajl.
SmashDesign says fuq: 8 Jannar, 2010 fi 4:26 pm Said:
Great toturial
Grazzi ħafna
Aħħar blog SmashDesign's .. Kif display HTML, CSS, kodiċi Scripts fil-postijiet Blogger tiegħek?