Hoe om HTML en CSS te gebruik om Tabs en Spacing te skep

'N Kykie hoe wit spasie in HTML deur blaaiers behandel word

As jy 'n begin webontwerper is, is een van die vele dinge wat jy vroeg moet verstaan, die manier waarop wit spasie in die kode van 'n webwerf deur webblaaier gehanteer word.

Ongelukkig is die manier waarop blaaier wit spasie gehanteer het, nie baie intuïtief nie, veral as jy in HTML kom en dit vergelyk met hoe wit spasie gehanteer word in woordverwerkingsprogramme, waarvan jy meer bekend is.

In woordverwerkingsprogrammatuur kan u baie spasies of tabbladsye in die dokument byvoeg en die spasiëring sal weerspieël word in die vertoning van die dokument se inhoud. Dit is nie die geval met HTML of webbladsye nie. As sodanig is dit belangrik om te leer hoe wit spasie wel deur webblaaiers gehanteer word.

Spasie in Print

In woordverwerkingsprogrammatuur is die drie primêre witruimte karakters die spasie, oortjie en karretjie terugkeer. Elk van hierdie tree op 'n duidelike manier op, maar in HTML gee blaaiers hulle almal in wese dieselfde. Of jy nou een spasie of 100 spasies in jou HTML-opmaak plaas, of jou spasie saam met tabs en karretjies opstel, sal almal van hierdie een verdeel word wanneer die bladsy deur die blaaier gelewer word. In webontwerpterminologie, staan ​​dit bekend as witruimte ineenstorting. Jy kan nie hierdie tipiese spasiëringsleutels gebruik om witspasie in 'n webblad te voeg nie omdat die leser verskeie spasies ineenstort in slegs een spasie wanneer dit in die blaaier gelewer word,

Hoekom gebruik iemand Tabs?

Tipies, wanneer mense tabbladsye in 'n teksdokument gebruik, gebruik hulle dit om uitleg redes of om die teks na 'n sekere plek te verskuif of om 'n sekere afstand van 'n ander element te wees. In webontwerp kan u nie die genoemde spasie karakters gebruik om daardie visuele style of uitleg behoeftes te bereik nie.

In webontwerp sou die gebruik van ekstra spasiëringkarakters in die kode suiwer wees om die kode te lees. Webontwerpers en ontwikkelaars gebruik dikwels tabs na indent kode sodat hulle kan sien watter elemente kinders van ander elemente is - maar die inspringings beïnvloed nie die visuele uitleg van die bladsy self nie. Vir diegene wat benodig visuele uitleg veranderinge, moet jy na CSS (cascading style sheets) draai.

Gebruik CSS om HTML Tabs en Spacing te skep

Webwerwe vandag is gebou met 'n skeiding van struktuur en styl. Die struktuur van 'n bladsy word hanteer deur die HTML terwyl die styl deur die CSS gedikteer word. Dit beteken dat jy 'n spasiëring moet skep of 'n sekere uitleg moet behaal, en jy moet na CSS draai en nie net ruimte karakters by die HTML-kode voeg nie.

As jy tabelle gebruik om kolomme teks te skep, kan jy eerder

elemente gebruik wat met CSS geplaas word om daardie kolom uitleg te kry. Hierdie posisionering kan gedoen word deur CSS floats, absolute en relatiewe posisionering, of nuwer CSS uitleg tegnieke soos Flexbox of CSS Grid.

As die data wat u lê, tabel data is, kan u tabelle gebruik om die data in ooreenstemming te bring. Tafels kry dikwels 'n slegte rap in webontwerp omdat hulle so baie jare as suiwer uitleggereedskap misbruik is, maar tabelle is steeds heeltemal geldig as jou inhoud die genoemde tabel data bevat.

Marges, Padding, en teks-indent

Die mees algemene maniere om spasiëring met CSS te skep, is deur een van die volgende CSS-style te gebruik:

Byvoorbeeld, jy kan die eerste reël van 'n paragraaf soos 'n oortjie met die volgende CSS inskakel (let daarop dat dit aanvaar dat jou paragraaf 'n klasattribuut van "eerste" daaraan het):

p.first {
teks-streepje: 5em;
}

Hierdie paragraaf sal nou oor 5 karakters ingedruk wees.

U kan ook die marge of padding-eienskappe in CSS gebruik om spasiëring aan die bokant, onder, links of regs (of kombinasies van die kante) van 'n element te voeg. Uiteindelik kan u enige spasie wat benodig word bereik deur CSS te verander.

Tekst beweeg meer as een ruimte sonder CSS

As jy net wil hê dat jou teks meer as een spasie van die voorafgaande item verplaas word, kan jy die nie-brekende spasie gebruik.

Om die nie-brekende spasie te gebruik, voeg jy eenvoudig by & nbsp; soveel keer as wat jy dit nodig het in jou HTML-opmaak.

As jy byvoorbeeld jou woord vyf ruimtes wil skuif, kan jy die volgende voor die woord voeg.

& Nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

HTML respekteer hierdie en sal hulle nie in 'n enkele ruimte ineenstort nie. Dit word egter beskou as 'n baie swak praktyk aangesien dit ekstra HTML-opmerkings by 'n dokument pas om uitlegbehoeftes te bereik. Verwysing na die skeiding van struktuur en styl, moet jy vermy om nie-brekende spasies toe te voeg, net om 'n verlangde uitleg effek te verkry en moet CSS-marges en vulling eerder gebruik.