Területek létrehozása és elemek fizikai elválasztása a HTML-ben a CSS-sel
Területek létrehozása és az elemek fizikai szétválasztása a HTML-ben nehéz lehet megérteni az internetes tervező kezdetéhez. Ennek az az oka, hogy a HTML- nek van egy olyan tulajdonsága, amelyet "üres tér összeomlásnak" neveznek. függetlenül attól, hogy 1-et vagy 100-at írsz-e a HTML-kódodba, a webböngésző automatikusan lebontja ezeket a szóközöket egyetlen helyre. Ez különbözik egy olyan programtól, mint a Microsoft Word , amely lehetővé teszi a dokumentumkészítők számára, hogy több szóközt adjanak hozzá a szó és a dokumentum más elemeihez.
Ez nem így működik a weboldal tervezésének távolsága.
Szóval, hogyan adja hozzá a fehérek helyét HTML-ben, amely megjelenik a weboldalon ? Ez a cikk néhány különböző módszert vizsgál meg.
A CSS-ben lévő HTML-területek
A HTML-ben lévő területek hozzáadásának előnyös módja a Cascading Style Sheets (CSS) . A CSS-t fel kell használni a weboldal bármely vizuális vonatkozásainak hozzáadására, és mivel a térköz az oldal vizuális tervezési jellemzőinek része, akkor a CSS az, ahol ezt szeretné tenni.
A CSS-ben használhatja a margót vagy a kitöltési tulajdonságokat, hogy elemeket adjon hozzá az elemek körül. Ezenkívül a szövegdosszió tulajdonság helyet ad a szöveg elejének, például a bekezdések behúzásához.
Íme egy példa arra, hogy hogyan használhatod a CSS-t, ha helyet adsz a bekezdések elé. Adja hozzá a következő CSS-t a külső vagy belső stíluslaphoz:
p {
szöveg-indent: 3em;
}
A HTML-ben található területek: a szöveg belsejében
Ha csak két vagy több szöveget szeretne hozzáadni a szövegéhez, használhatja a nem törődő területet.
Ez a karakter ugyanúgy működik, mint egy szabványos karakter, csak a böngészőben nem bukik össze.
Íme egy példa arra, hogyan adjunk hozzá öt szóközt a szövegsorban:
Ennek a szövegnek öt további szóköze van benne
Használja a HTML-t:
Ez a szöveg & nbsp; & nbsp; & nbsp; & nbsp; öt további teret bent
A
címkével további sortöréseket is felvehet.
Ez a mondat öt sortörés végén áll
Miért helytelen a HTML-távolság?
Bár ezek a lehetőségek is működnek - a megszakítás nélküli szóközök ténylegesen hozzáadják a szöveget a szöveghez, és a sortörések a fenti bekezdés alatti térközöket adnak hozzá - ez nem a legjobb módja annak, hogy a weboldalon megteremtse a távolságot. Ezeknek az elemeknek a HTML-hez való hozzáadásával vizuális információkat ad a kódhoz, nem pedig az oldal (HTML) szerkezetét a vizuális stílusoktól (CSS). A legjobb gyakorlatok szerint ezeknek több okból is el kell különülnie, beleértve a frissítés egyszerűségét a jövőben és a teljes fájlméretet és az oldal teljesítményét.
Ha külső stílust használsz, hogy diktálja az összes stílusodat és távolságodat, akkor egyszerűen elvégezheti a stílusok módosítását az egész webhelyen, mivel egyszerűen frissítenie kell az adott stíluslapot.
Tekintsük a mondat fenti példáját, öt végén a címkéket. Ha azt szeretné, hogy ez a távolság minden bekezdés alján található, akkor hozzá kell adnia a HTML-kódot a teljes webhely minden bekezdéséhez. Ez szép mennyiségű extra jelölés, amely felborul az oldaladon.
Továbbá, ha úgy döntesz lefelé, hogy ez a távolság túlságosan vagy túl kicsi, és kicsit változtatni szeretnél, akkor minden egyes bekezdésedet fel kell szerkesztened az egész webhelyeden. Nem, köszönöm!
Ahelyett, hogy hozzáadná ezeket a távtartó elemeket a kódjához, használja a CSS-t.
p {
padding-bottom: 20px;
}
Ez a CSS egy sora az oldala bekezdések szerinti térközöket ad hozzá. Ha a jövőben meg kívánja változtatni ezt a távolságot, akkor módosítsa ezt az egy sort (a teljes webhely kód helyett), és jó vagy.
Most, ha egyetlen helyet fel kell vennie a webhely egy részébe, egy
címke használatával vagy egyetlen nem töréses térrel nem a világ vége, de óvatosnak kell lennie.
Az inline HTML térköztes beállítások használata csúszós lejtés lehet. Míg egy vagy kettő nem sérti a webhelyét, ha folytatja az utat, akkor problémákat fog bevezetni oldalain. A végén jobb, ha a CSS-hez fordulsz a HTML-távolsághoz és az összes többi weboldal vizuális igényéhez.