Búðu til rými og líkamlega aðskilnað þætti í HTML með CSS
Búa til rými og líkamlega aðskilnað þætti í HTML getur verið erfitt að skilja fyrir upphaf vefhönnuður. Þetta er vegna þess að HTML hefur eign sem kallast "hvíslasveifla". hvort sem þú skrifar 1 bil eða 100 í HTML kóðanum þínum, vafrar vafrinn sjálfkrafa þessi rými niður í aðeins eitt rými. Þetta er frábrugðið forriti eins og Microsoft Word , sem gerir skjalhönnuðum kleift að bæta við mörgum bilum til að aðgreina orð og aðra þætti þess skjals.
Þetta er ekki hvernig vefhönnun bilar virkar.
Svo, hvernig bætirðu við hvetja í HTML sem birtist á vefsíðunni ? Þessi grein skoðar nokkrar af mismunandi vegu.
Rúm í HTML með CSS
Valinn leið til að bæta rýmum í HTML er með Cascading Style Sheets (CSS) . CSS ætti að nota til að bæta við öllum sjónrænum þáttum vefsíðunnar og þar sem bilið er hluti af sjónrænni eiginleikum síðunnar er CSS þar sem þú vilt að þetta sé gert.
Í CSS er hægt að nota annaðhvort margfalda eða púða eiginleika til að bæta við plássi í kringum þætti. Að auki bætir eignirnar sem innihalda textinn inn pláss til að framan texta, svo sem um innspýtingarsafna.
Hér er dæmi um hvernig á að nota CSS til að bæta við plássi fyrir framan alla málsgreinar þínar. Bættu eftirfarandi CSS við ytri eða innri stílþilinn:
p {
textaritun: 3em;
}
Rúm í HTML: Inni textinn þinn
Ef þú vilt bara bæta við viðbótarplássi eða tveimur í textann þinn getur þú notað plássið sem ekki er brotið.
Þessi eðli virkar eins og venjulegt rúmpersóna, aðeins það hrynur ekki inni í vafranum.
Hér er dæmi um hvernig á að bæta við fimm rýmum innan textalínu:
Þessi texti hefur fimm auka rými inni í henni
Notar HTML:
Þessi texti hefur & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Fimm auka rými inni í henni
Þú getur líka notað takkann til að bæta við viðbótarlínunni.
Þessi setning hefur fimm línuskil í lok þess
Afhverju að dreifa í HTML er slæm hugmynd
Þó að þessi valkostir virki bæði, þá mun hlutinn sem ekki bregst við rennsli örugglega bæta við bili á textann og línuskilin munu bæta við bili undir málsgreininni hér að ofan - þetta er ekki besta leiðin til að búa til bil á vefsíðunni þinni. Ef þú bætir þessum þætti við HTML þitt bætirðu sjónrænum upplýsingum við kóðann í stað þess að skilja uppbyggingu síðu (HTML) frá sjónrænum stílum (CSS). Bestu venjur ráðast af því að þetta ætti að vera aðskilið af ýmsum ástæðum, þ.mt auðvelda uppfærslu í framtíðinni og heildar skráarstærð og árangur á síðunni.
Ef þú notar ytri stíll lak til að fyrirmæli allar stíll og bil, þá er auðvelt að gera þær breytingar á þessum stíll fyrir alla staðina, þar sem þú þarft einfaldlega að uppfæra þessi stíll lak.
Hugsaðu um dæmið hér að framan af setningunni með fimm
merkjum í lok þess. Ef þú vilt það magn af bili neðst í hverjum málsgrein, þá ættir þú að bæta við HTML kóða við hvert málsgrein á öllu síðunni þinni. Það er heilmikið af auka markup sem mun blása upp síðurnar þínar.
Að auki, ef þú ákveður niður á veginum að þessi bil er of mikið eða of lítið og þú vilt breyta því aðeins, þá ættir þú að breyta hverjum einasta málsgrein á öllu vefsíðunni þinni. Nei takk!
Í stað þess að bæta þessum bilhlutum við númerið þitt skaltu nota CSS.
p {
púði-botn: 20px;
}
Þessi eina lína af CSS myndi bæta við bili undir málsgreinum síðunnar. Ef þú vildir breyta því bili í framtíðinni skaltu breyta þessari línu (í stað kóðans á öllum vefsvæðum þínum) og þú ert góður að fara!
Nú, ef þú þarft að bæta við einu plássi í einum hluta vefsvæðisins, er að nota
merki eða eitt pláss sem ekki er brotið, ekki endir heimsins, en þú þarft að vera varkár.
Notkun þessara inline HTML bilvalkostir getur verið halla breidd. Þó að einn eða tveir megi ekki meiða síðuna þína, ef þú heldur áfram á slóðinni, mun þú kynna vandamál á síðum þínum. Að lokum ertu betra að snúa sér að CSS fyrir HTML bili og öllum öðrum sjónrænum vefsíðum.