Krei spacojn kaj fizikan apartigon de elementoj en HTML kun CSS
Krei spacojn kaj fizikan apartigon de elementoj en HTML povas malfacile kompreni por la komenco retejo-desegnisto. Ĉi tio estas ĉar HTML havas proprieton konatan kiel "spaco-kolapso". ĉu vi tajpas 1 spacon aŭ 100 en via HTML-kodo, la retumilo aŭtomate kolapsas tiujn spacojn ĝis nur unu spaco. Ĉi tio diferencas al programo kiel Microsoft-Word , kiu permesas al la kreintoj de dokumentoj aldoni plurajn spacojn por disigi vortojn kaj aliajn elementojn de tiu dokumento.
Ĉi tio ne estas kiel retejo kreas interspacigon.
Do, kiel vi aldonas blankajn spacojn en HTML, kiuj aperas sur la retpaĝo ? Ĉi tiu artikolo ekzamenas iujn malsamajn manierojn.
Spacoj en HTML kun CSS
La preferata maniero por aldoni spacojn en via HTML estas kun Cascading Style Sheets (CSS) . CSS devus esti uzata por aldoni ajnajn vidajn aspektojn de retpaĝaro, kaj ĉar la interspaco estas parto de la vidaj karakterizaĵoj de paĝo, CSS estas kie vi volas fari tion.
En CSS, vi povas uzi aŭ la rando aŭ kompletigo de propraĵoj por aldoni spacon ĉirkaŭ elementoj. Aldone, la tekst-indenta propraĵo aldonas spacon ĉe la fronto de la teksto, kiel por indenti alineojn.
Jen ekzemplo pri kiel uzi CSS por aldoni spacon antaŭ ĉiuj viaj alineoj. Aldonu la sekvan CSS al via ekstera aŭ interna stilo folio:
p {
teksto-indento: 3em;
}
Spacoj en HTML: Interne Via Teksto
Se vi nur volas aldoni aldonan spacon aŭ du al via teksto, vi povas uzi la ne-rompan spacon.
Ĉi tiu karaktero agas nur kiel norma spaco, nur ĝi ne kolapsas ene de la retumilo.
Jen ekzemplo de kiel aldoni kvin spacojn ene de linio de teksto:
Ĉi tiu teksto havas kvin ekstrajn spacojn en ĝi
Uzas la HTML:
Ĉi tiu teksto havas & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; kvin ekstraj spacoj en ĝi
Vi ankaŭ povas uzi la etikedon por aldoni ekstrajn liniojn.
Ĉi tiu frazo havas kvin liniojn en la fino de ĝi
Kial Spacado en HTML estas Malbona Ideo
Dum ĉi tiuj opcioj ambaŭ laboras - la ne-rompanta spaco-elemento ja aldonos interspacon al via teksto kaj la linio-rompoj aldonos interspacon sub la alineo montrita supre - ĉi tiu ne estas la plej bona maniero por krei interspacon en via retpaĝo. Aldonante ĉi tiujn elementojn al via HTML aldonas vidan informon al la kodo anstataŭ apartigi la strukturon de paĝo (HTML) el la vidaj stiloj (CSS). Plej bonaj praktikoj diktas, ke ĉi tiuj devas esti apartaj pro kelkaj kialoj, inkluzive de facileco ĝisdatigi en la estonteco kaj entuta grandeco de dosieroj kaj paĝoj.
Se vi uzas eksterajn foliojn por dikti ĉiujn viajn stilojn kaj interspacon, tiam ŝanĝi tiujn stilojn por la tuta retejo estas facila, ĉar vi simple devas ĝisdatigi tiun stilon.
Konsideru la ekzemplon supre de la frazo kun kvin etikedoj ĉe la fino de ĝi. Se vi volus tiun kvanton de interspaco ĉe la malsupro de ĉiu alineo, vi bezonus aldoni tiun HTML-kodon al ĉiu paragrafo en via tuta retejo. Tio estas bela kvanto de ekstra marko, kiu flosos viajn paĝojn.
Aldone, se vi decidas laŭ la vojo, ke ĉi tiu interspaco estas tro multe aŭ tro malmulte, kaj vi deziras ŝanĝi ĝin iom, vi bezonus redakti ĉiun paragrafon en via tuta retejo. Ne dankon!
Anstataŭ aldoni ĉi tiujn interspacajn elementojn al via kodo, uzu CSS.
p {
malpleniga fundo: 20px;
}
Tiu linio de CSS aldonus interspacon sub la alineoj de via paĝo. Se vi volis ŝanĝi tiun interspacon en la estonteco, redaktu ĉi tiun linion (anstataŭ la kodon de via tuta retejo) kaj vi bone iros!
Nun, se vi bezonas aldoni solan spacon en unu parto de via retejo, uzanta
-etikedon aŭ unu ne-rompan spacon ne estas la fino de la mondo, sed vi devas zorgi.
Uzanta ĉi tiujn inline HTML-interspacajn opciojn povas esti glitiga pritraktata. Dum unu aŭ du eble ne dolorigas vian retejon, se vi daŭrigos laŭ tiu vojo, vi enmetos problemojn en viajn paĝojn. Al la fino, vi pli bone turniĝas al CSS por HTML-interspaco, kaj ĉiuj aliaj retpaĝoj vidaj bezonoj.