Oħloq spazji u separazzjoni fiżika ta 'elementi f'HTML ma' CSS
Il-ħolqien ta 'spazji u separazzjoni fiżika ta' elementi f'HTML jista 'jkun diffiċli biex jinftiehem għall-bidu tal-web designer. Dan għaliex l- HTML għandha proprjetà magħrufa bħala "kollass ta 'spazju vojt." kemm jekk inti spazju tat-tip 1 jew 100 fil-kodiċi HTML tiegħek, il-web browser awtomatikament teqred dawk l-ispazji 'l isfel għal spazju wieħed biss. Dan huwa differenti minn programm bħal Microsoft Word , li jippermetti lill-awturi tad-dokumenti jżidu spazji multipli għal kliem separat u elementi oħra ta 'dak id-dokument.
Dan mhuwiex kif jaħdem l-ispazju tad-disinn tal-websajt.
Allura, kif tista 'żżid whitespaces f'HTML li jidhru fuq il -paġna web ? Dan l-artikolu jeżamina xi wħud mill-modi differenti.
Spazji f'HTML ma 'CSS
Il-mod preferut biex iżżid l-ispazji fl-HTML tiegħek huwa ma ' Cascading Style Sheets (CSS) . Is-CSS għandu jintuża biex iżid kwalunkwe aspett viżiv ta 'paġna web, u billi l-ispazjar huwa parti mill-karatteristiċi tad-disinn viżwali ta' paġna, CSS huwa fejn trid li jsir dan.
F'CSS, tista 'tuża jew il-marġni jew il-proprjetajiet tal-padding biex iżżid l-ispazju madwar l-elementi. Barra minn hekk, il-proprjetà tal-indent tat-test iżżid l-ispazju fuq quddiem tat-test, bħal biex tindika l-paragrafi.
Hawn hu eżempju ta 'kif tuża CSS biex iżżid l-ispazju quddiem il-paragrafi kollha tiegħek. Żid is-CSS li ġejja mal-folja tal-istil esterna jew interna :
p {
inċiż tat-test: 3em;
}
Spazji fl-HTML: Inside Your Text
Jekk inti biss trid iżżid spazju addizzjonali jew tnejn għat-test tiegħek, tista 'tuża l-ispazju li ma jitkissrux.
Dan il-karattru jaġixxi bħal karattru spazjali standard, biss ma jikkollaborax ġewwa l-browser.
Hawn hu eżempju ta 'kif żid ħames spazji ġewwa linja ta' test:
Dan it-test għandu ħames spazji żejda ġewwa fih
Uża l-HTML:
Dan it-test kien & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ħames spazji żejda ġewwa fih
Tista 'wkoll tuża t-tikketta biex iżżid il-pawżi tal-linja żejda.
Din is-sentenza għandha ħames pawżi linja fit-tmiem tagħha
Għaliex Spazjar fl-HTML huwa Bad Idea
Filwaqt li dawn l-għażliet jaħdmu - l-element tal-ispazji li ma jitkissrux fil-fatt se jżid l-ispazjar mat-test tiegħek u l-waqfiet tal-linja jżidu spazjar taħt il-paragrafu muri hawn fuq - dan mhuwiex l-aħjar mod biex toħloq spazju fil-paġna web tiegħek. Iż-żieda ta 'dawn l-elementi mal-HTML tiegħek iżżid l-informazzjoni viżiva mal-kodiċi minflok ma tissepara l-istruttura ta' paġna (HTML) mill-istili viżwali (CSS). L-aħjar prattiki jiddettaw li dawn għandhom ikunu separati għal numru ta 'raġunijiet, inkluża l-faċilità ta' aġġornament fil-futur u d-daqs tal-fajl ġenerali u l-prestazzjoni tal-paġna.
Jekk tuża folja ta 'stil estern biex tiddetta l-istili u l-ispazji kollha tiegħek, allura tbiddel dawk l-istili għas-sit kollu huwa faċli li tagħmel, peress li inti sempliċiment għandek taġġorna dik il-folja stil waħda.
Ikkunsidra l-eżempju ta 'hawn fuq tas-sentenza b'ħames tikketti ta' fuq fi tmiemha. Jekk riedu dak l-ammont ta 'spazju fil-qiegħ ta' kull paragrafu, ikollok bżonn iżżid dak il-kodiċi HTML ma 'kull paragrafu fis-sit kollu tiegħek. Dan huwa ammont ġust ta 'marki żejda li se jinfirxu l-paġni tiegħek.
Barra minn hekk, jekk tiddeċiedi fit-triq li dan l-ispazju huwa wisq jew ftit wisq, u tixtieq li tinbidel ftit, ikollok bżonn teditja kull paragrafu fil-websajt kollha tiegħek. Le grazzi!
Minflok ma żżid dawn l-elementi ta 'spazju mal-kodiċi tiegħek, uża CSS.
p {
qiegħ tal-padding: 20px;
}
Li linja waħda ta 'CSS iżżid spazju taħt il-paragrafi tal-paġna tiegħek. Jekk riedet tibdel dik l-ispazjar fil-futur, editja din il-linja (minflok il-kodiċi tas-sit kollu tiegħek) u int tajba biex tmur!
Issa, jekk ikollok bżonn iżżid spazju wieħed f'parti waħda tal-website tiegħek, tuża tikketta
jew spazju wieħed li ma jitkissrux mhux it-tmiem tad-dinja, iżda trid tkun attent.
L-użu ta 'dawn l-għażliet ta' spazjar HTML inline jista 'jkun inklinazzjoni tiżloq. Filwaqt li waħda jew tnejn ma jistgħux iweġġgħu lis-sit tiegħek, jekk tkompli f'din it-triq, int se tintroduċi problemi fil-paġni tiegħek. Fl-aħħar, int aħjar iddgħajjef għal CSS għall-ispazjar HTML, u l-bżonnijiet viżwali tal-webpage l-oħra kollha.