Szóközök létrehozása és az elemek fizikai szétválasztása a HTML-ben nehezen érthető a kezdő webtervező számára. Ez azért van, mert HTML rendelkezik egy "whitespace collapse" néven ismert tulajdonsággal. függetlenül attól, hogy 1 vagy 100 helyet ír be a HTML-kódba, a webböngésző ezeket a szóközöket automatikusan egyetlen egyetlen szóközre bontja. Ez különbözik a hasonló programtól Microsoft Word, amely lehetővé teszi, hogy a dokumentum készítői több szóközt is hozzáadhassanak a szavak és a dokumentum egyéb elemeinek elkülönítéséhez. A weboldaltervezés távolsága nem így működik.
Szóval, hogyan adhat hozzá a szóközöket a HTML-ben, amelyek a az általad készített weblap? Ez a cikk megvizsgál néhány különböző módszert.
Szóközek HTML-ben CSS-sel
A szóközök hozzáadása a HTML-ben előnyösen a Lépcsőzetes stíluslapok (CSS). A CSS-t kell használni a weboldal bármilyen vizuális aspektusának hozzáadásához, és mivel a térköz az oldal látványtervezési jellemzőinek része, a CSS ezt szeretné.
A CSS-ben a margó vagy a kitöltési tulajdonságok segítségével helyet adhat az elemek körül. Ezenkívül a text-behúzási tulajdonság teret ad a szöveg elejének, például bekezdések behúzásához.
Itt van egy példa arra, hogyan lehet CSS-t használni szóköz hozzáadásához az összes bekezdés előtt. Adja hozzá a következő CSS-t a külső vagy belső stíluslap:
p {
szöveg-francia: 3em;
}
Szövegek a HTML-ben a szöveg belsejében
Ha csak egy vagy két további szóközt szeretne hozzáadni a szövegéhez, használhatja a nem törő helyet. Ez a karakter ugyanúgy működik, mint egy szokásos szóköz, csak nem bukik össze a böngészőben.
Íme egy példa arra, hogyan lehet öt szóközt felvenni a szövegsorba:
Ez a szöveg öt extra szóközzel rendelkezik
A HTML-t használja:
Ez a szöveg öt extra szóközzel rendelkezik
Használhatja a
címke az extra sortörések hozzáadásához.
Ennek a mondatnak öt sortörése van a végén
Miért rossz ötlet a HTML térköz?
Noha ezek az opciók egyaránt működnek - a nem törő szóköz elemek valóban hozzáadják a szóközt a szöveghez és a sorhoz törések hozzáadják a szóközt a fenti bekezdés alatt - ez nem a legjobb módja a térköz létrehozásának a honlap. Ezeknek az elemeknek a hozzáadása a HTML-hez vizuális információkat ad hozzá a kódhoz ahelyett, hogy elválasztaná az oldal (HTML) és a vizuális stílusok (CSS) szerkezetét. A bevált gyakorlatok előírják, hogy ezeknek különféle okokból, különös tekintettel a jövőbeni frissítés egyszerűségére és az általános fájlméretre, oldal teljesítményét.
Ha az összes stílus és térköz diktálásához külső stíluslapot használ, akkor ezeket a stílusokat az egész webhelyen könnyen megváltoztathatja, mivel egyszerűen frissítenie kell azt az egy stíluslapot.
Tekintsük a mondat fenti öt példáját
címkék a végén. Ha minden bekezdés alján ekkora távolságot szeretne, akkor hozzá kell adnia ezt a HTML-kódot az egész webhely minden bekezdéséhez. Ez meglehetősen sok extra jelölést jelent, amely felduzzasztja az oldalakat. Ezenkívül, ha úgy dönt, hogy ez a távolság túl sok vagy túl kevés, és egy kicsit meg akarja változtatni, akkor a teljes webhely minden egyes bekezdését szerkesztenie kell. Nem, köszönöm!
Ahelyett, hogy ezeket a térköz elemeket hozzáadná a kódjához, használja a CSS-t.
p {
aljzat: 20px;
}
A CSS egy sora szóközt adna az oldal paragrafusai alá. Ha a jövőben módosítani akarta ezt a szóközt, szerkessze ezt az egy sort (a teljes webhely kódja helyett), és máris mehet!
Most, ha egyetlen helyet kell hozzáadnia a webhely egyik részéhez, használja a
címke vagy egyetlen nem törő szóköz nem a világ vége, de vigyáznod kell. Ezeknek a belső HTML térköz opcióknak az használata csúszós lehet. Noha egy vagy kettő nem árthat webhelyének, ha ezen az úton halad, problémákat fog bevezetni az oldalaiba. Végül jobb, ha a CSS-hez fordul a HTML-térköz és az összes többi weboldal vizuális igénye miatt.