Izveidojiet atstarpes un fizisku elementu atdalīšanu HTML ar CSS
Vietu izveide un elementu fiziska nošķiršana HTML var būt grūti saprotama, sākot ar tīmekļa dizaineru. Tas ir tāpēc, ka HTML ir īpašums, kas pazīstams kā "atstarpes sabrukums". vai savā HTML kodā ievadāt 1 atstarpi vai 100, tīmekļa pārlūkprogramma automātiski sabruka šos laukumus tikai vienā telpā. Tas atšķiras no tādas programmas kā Microsoft Word , kas ļauj dokumentu veidotājiem pievienot vairākas atstarpes, lai atdalītu šī dokumenta vārdus un citus elementus.
Tas nav veids, kā darbojas tīmekļa vietņu dizains.
Tātad, kā jūs pievienojat HTML lapas atstarpes, kuras parādās tīmekļa lapā ? Šajā rakstā analizēti daži no dažādajiem veidiem.
Spaces HTML ar CSS
Vēlamais veids, kā pievienot atstarpes jūsu HTML ir ar Cascading Style Sheets (CSS) . CSS ir jāizmanto, lai pievienotu jebkādus tīmekļa lapas vizuālos aspektus, un tā kā atstarpes ir daļa no lapas vizuālās dizaina īpašībām, CSS ir vieta, kur to vēlaties izdarīt.
Izmantojot CSS, jūs varat izmantot atstarpes vai polsterējuma īpašības, lai pievienotu atstarpes elementus. Turklāt teksta ievilkuma īpašums pieļauj teksta priekšpuses atstarpi, piemēram, punktu ievilkšanai.
Šeit ir piemērs, kā izmantot CSS, lai pievienotu atstarpi visu jūsu punktu priekšā. Pievienojiet šādu CSS savai ārējai vai iekšējai stila lapai:
p {
teksta ievilkums: 3em;
}
Spaces HTML: Inside Your Text
Ja vienkārši vēlaties pievienot tekstu vēl divas vai divas vietas, varat izmantot nesalaužamo vietu.
Šis raksturs darbojas tāpat kā standarta kosmosa raksturs, tikai tas pārlūka iekšpusē nesaburs.
Šeit ir piemērs, kā pievienot teksta rindiņā piecas vietas:
Šajā tekstā tajā ir piecas papildu vietas
Izmanto HTML:
Šajā tekstā ir & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; piecas papildu vietas tajā
Varat arī izmantot atzīmi
, lai pievienotu papildu rindu pārtraukumus.
Šajā teikumā ir piecas rindas pārtraukumi tās beigās
Kāpēc atstarpe HTML ir slikta ideja
Lai gan šīs opcijas darbojas gan - neatgriezeniski atstarpes elementi patiešām papildina jūsu tekstu ar atstarpēm, un līnijas pārtraukumi papildinās atstarpes zem rindkopas, kas redzams iepriekš, tas nav labākais veids, kā izveidot atstarpi jūsu tīmekļa lapā. Šo elementu pievienošana HTML papildina koda vizuālo informāciju, nevis lapas (HTML) struktūru no vizuālajiem stiliem (CSS). Labā prakse nosaka, ka tiem jābūt atsevišķiem vairāku iemeslu dēļ, tostarp vienkāršs atjauninājums nākotnē, kā arī kopējais faila lielums un lapas veiktspēja.
Ja jūs izmantojat ārējo stilu lapu, lai diktētu visus savus stilus un atstarpes, tad mainīt šos stilus visai vietnei ir viegli izdarīt, jo jums vienkārši ir jāatjaunina šī viena stila lapa.
Apsveriet iepriekš teikto piemēru ar piecu tagu tagiem tā beigās. Ja jūs vēlaties, lai šis atstarpes daudzums katra punkta apakšdaļā, jums vajadzētu pievienot šo HTML kodu katram punktam visā jūsu vietnē. Tas ir taisnīgs papildu marķējuma apjoms, kas uzpūš jūsu lapas.
Turklāt, ja izvēlaties ceļu, kurā šis atstarpes ir pārāk daudz vai pārāk maz, un vēlaties nedaudz mainīt to, jums vajadzētu rediģēt katru punktu visā jūsu vietnē. Nē paldies!
Tā vietā, lai pievienotu šos atstarpes elementus savam kodam, izmantojiet CSS.
p {
polsterējums apakšā: 20 pikseļi;
}
Šī viena CSS rindiņa papildina atstarpes zem lappuses rindkopas. Ja vēlaties mainīt šo atstarpi nākotnē, rediģējiet šo vienu rindiņu (nevis visu vietnes kodu), un jums ir labi iet!
Tagad, ja jums ir jāpievieno viena vieta vienā vietnes daļā, izmantojot
tagu vai vienotu nesalaužamu vietu, nav pasaules gala, bet jums jābūt uzmanīgiem.
Izmantojot šīs inline HTML atstarpes opcijas var būt slidenas slīpums. Kaut arī viens vai divi, iespējams, nekaitē jūsu vietnei, ja jūs turpināsiet šo ceļu, jūs savās lapās parādīsit problēmas. Galu galā, jums labāk vērsties pie CSS, lai nodrošinātu HTML atstarpi, un visām citām vietņu vizuālajām vajadzībām.