Luues ruume ja elementide füüsilist eraldamist HTML-is koos CSS-iga
Luues ruume ja elementide füüsilist eraldamist HTML-i võib veebiprojekti alguses olla raske mõista. Seda seetõttu, et HTML- il on omadus, mida nimetatakse "tühikute tühikuklahviks". kas sisestate 1 tühikut või 100 oma HTML-koodi, tühistab veebibrauser need ruumid automaatselt ühe tühiku võrra. See erineb sellisest programmist nagu Microsoft Word , mis võimaldab dokumentide loojal lisada mitu tühikut sõnade ja muude selle dokumendi elementide eraldamiseks.
See pole nii, kuidas veebisaidi disaini vahekaugused toimivad.
Niisiis, kuidas lisada veebisaidil kuvatavaid HTML-i tühikuid? See artikkel vaatleb mõnda erinevat viisi.
CSS-is olevad HTML-ruumid
Eelistatav viis tühikute lisamiseks teie HTML-is on kaskaaditavate stiilide lehtedega (CSS) . Veebilehe visuaalsete külgede lisamiseks tuleks kasutada CSS-i ja kuna vahekaart on osa lehe visuaalse disaini omadustest, on CSS see, kus seda soovid.
CSS-ist saate elementide ruumi lisamiseks kas marginaali või polsteri omadusi kasutada. Lisaks lisab tekst-taandreklaami tekst esiplaanile, näiteks punktide taandaribad.
Siin on näide selle kohta, kuidas kasutada CSS-i, et lisada kõikidest lõigetest ruumi. Lisage oma välisele või sisemisele stiilile järgmine CSS:
p {
teksti taane: 3em;
}
Spaces HTML: Inside Your Text
Kui soovite oma teksti lihtsalt lisada täiendava ruumi või kaks, võite kasutada mittevastavat ruumi.
See märk toimib täpselt nagu tavaline ruumärk, ainult see ei lange brauserisse.
Siin on näide sellest, kuidas teksti rida lisada viis tühikut:
Selles tekstis on selle sees viis täiendavat tühikut
Kasutab HTML-i:
Selles tekstis on & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; seal on viis lisaruumi
Võite kasutada ka paremat märgendit, et lisada täiendavaid reavahetusi.
Sellel lausel on selle lõpus viis joont katkendit
Miks vahemaa HTML-is on halb idee
Kuigi mõlemad tööriistad mõlemad töötavad - mittejätkuvate kohtade element tõesti lisab teie teksti vahele ja rea vaheajad lisavad vahele allpool toodud lõigu - see ei ole parim viis oma veebilehele vahekauguse loomiseks. Nende elementide lisamine HTML-ile lisab koodi visuaalse teabe, selle asemel, et eraldada lehe struktuur (HTML) visuaalsetest stiilidest (CSS). Parimad tavad osutavad, et need peaksid olema mitmel põhjusel eraldatud, sealhulgas tulevaste värskendamiste lihtsus ja üldine faili suurus ja lehe toimivus.
Kui kasutate väliseid stiililehti, et dikteerida kõiki oma stiile ja vahemaid, siis on kogu saidi jaoks nende stiilide muutmine lihtne, kuna teil on lihtsalt vaja seda ühte stiililehte värskendada.
Mõelge lause kohal olevale näitele viie sildi abil selle lõpus. Kui soovite, et iga lõigu allservas oleks vahekaugus, peate selle kogu koodi lisama igale lõigule. See on õige lisatäpsus, mis ahvatleb teie lehti.
Lisaks, kui te otsustate teelt maha, et see vahe on liiga palju või liiga vähe, ja soovite seda natuke muuta, peate iga veebisaiti igal lõigul muutma. Ei aitäh!
Selle koodi vaheliste elementide lisamise asemel kasutage CSS-i.
p {
padding-bottom: 20px;
}
See üks CSS-i rida lisab vahele teie lehe lõikude all. Kui soovite seda vahemaad tulevikus muuta, muutke seda rida (kogu saidi koodi asemel) ja teil on hea minna!
Nüüd, kui peate oma veebisaidi ühes osas lisama ühe tühiku, on
sildi kasutamine või üks katkematu ruum ei ole maailma lõpp, kuid peate olema ettevaatlik.
Nende sisestatud HTML-vahekauguse võimaluste kasutamine võib olla libe nõlv. Kuigi üks või kaks ei pruugi teie saiti kahjustada, kui te seda teed jätkate, lisate oma lehtedele probleeme. Lõppkokkuvõttes on sul parem pöörduda HTML-vahele CSS-i ja kõigi teiste veebisaitide visuaalsete vajaduste poole.