Ustvarite zavihek in razmik HTML na spletnih straneh s pomočjo CSS

click fraud protection

Način, kako brskalniki obdelujejo presledek, sprva ni preveč intuitiven, še posebej, če primerjate, kako Hypertext Markup Language ravna s praznim prostorom glede na programe za obdelavo besedil. V programsko opremo za obdelavo besedila lahko v dokument dodate veliko razmikov ali zavihkov, ta razmik pa se bo odražal na prikazu vsebine dokumenta. Ta zasnova WYSIWYG ne velja za HTML ali spletne strani.

Razmik v tisku

V programski opremi za obdelavo besedil so trije glavni presledki znaki vesolje, zavihek, in vrnitev kočije. Vsak od teh znakov deluje na drugačen način, toda v HTML jih brskalniki v bistvu upodobijo. Ne glede na to, ali v svojo Oznaka HTML ali razmik zmešajte z zavihki in vrnitvijo nosilca, vsi pa bodo strnjeni v en prostor, ko bo stran upodobila brskalnik. V terminologiji spletnega oblikovanja je to znano kot propad praznine. Tipičnih tipk za presledke ne morete uporabiti za dodajanje presledkov na spletni strani, ker brskalnik strni ponavljajoče se presledke v samo en prostor, ko so upodobljeni v brskalniku,

instagram viewer

Uporaba CSS za ustvarjanje zavihkov in presledkov HTML

Spletna mesta so danes zgrajena z ločitvijo strukture in sloga. Strukturo strani obdeluje HTML, slog pa narekujejo kaskadni slogi. Če želite ustvariti razmik ali doseči določeno postavitev, se obrnite na CSS, namesto da v kodo HTML dodajate razmike.

Če poskušate uporabiti zavihki če želite ustvariti stolpce besedila, namesto tega uporabite

elementi, ki so postavljeni s CSS, da dobijo to postavitev stolpca. To pozicioniranje je mogoče izvesti s pomočjo plavajočih CSS, absolutnega in relativnega pozicioniranja ali novejših tehnik postavitve CSS, kot sta Flexbox ali CSS Grid.

Če so podatki, ki jih predstavljate, tabelarični, uporabite tabele, da jih poravnate, kot želite. Tabele se pogosto slabo kažejo pri spletnem oblikovanju, ker so jih že vrsto let zlorabljali kot orodja za čisto postavitev, vendar so tabele še vedno popolnoma veljavne, če vaša vsebina vsebuje resnično tabelarne podatke.

Robovi, oblazinjenje in zamik besedila

Najpogostejši načini za ustvarjanje razmikov s CSS je uporaba enega od naslednjih stilov CSS:

  • marža
  • oblazinjenje
  • zamik besedila

Na primer, prvo vrstico odstavka na primer zavihajte z naslednjim CSS-jem (upoštevajte, da to predvideva, da ima vaš odstavek atribut razreda »first«):

p.first {
zamik besedila: 5em;
}

Ta odstavek zamika približno pet znakov.

Uporabite lastnosti robov ali oblazinjenja v CSS da dodate razmik na vrh, spodaj, levo ali desno (ali kombinacije teh strani) elementa. Dosezite kakršen koli razmik, ki ga potrebujete, tako da se obrnete na CSS.

Premikanje besedila več kot en prostor brez CSS

Če želite le, da se besedilo premakne za več kot en prostor od prejšnjega elementa, uporabite presledek.

Če želite uporabiti prostor, ki se ne lomi, dodate tolikokrat, kolikor ga potrebujete pri označevanju HTML.

HTML spoštuje te neprelomne presledke in jih ne bo strnil v en sam prostor. Vendar se ta pristop šteje za slabo prakso, saj dokumentu dodaja dodatne oznake HTML samo za dosego potreb po postavitvi. Ko je izvedljivo, se izogibajte dodajanju presledkov, da dosežete želeni učinek postavitve in uporabo Robovi CSS in oblazinjenje namesto tega.

instagram story viewer