Sukurkite tarpus ir fizinį elementų atskyrimą HTML su CSS
Pradedant interneto dizainerį gali būti sunku suprasti tarpų kūrimą ir fizinį elementų atskyrimą HTML. Taip yra todėl, kad HTML turi nuosavybę, vadinamą "trumposios erdvės žlugimu". ar įvedate "1" ar "100" savo HTML kodą, žiniatinklio naršyklė automatiškai sugadina tuos erdves iki vienos vietos. Tai skiriasi nuo programos, pvz., " Microsoft Word" , kuri leidžia dokumentų kūrėjams pridėti keletą tarpų atskirti žodžius ir kitus šio dokumento elementus.
Tai ne taip, kaip veikia svetainių dizaino tarpai.
Taigi, kaip jūs pridedate naršymo juostas HTML, rodomi tinklalapyje ? Šiame straipsnyje nagrinėjami keli skirtingi būdai.
Erdvės HTML su CSS
Geresnis būdas pridėti tarpų HTML yra su kaskadinių stilių lakštais (CSS) . CSS turėtų būti naudojamas, norint pridėti bet kokius vizualinius tinklalapio aspektus, o atstumas yra dalis puslapio vizualiųjų dizaino savybių, CSS yra kur norite, kad tai padaryta.
CSS sistemoje galite naudoti arba paraščių, ir papildymo savybes, kad pridėtumėte erdvę aplink elementus. Be to, teksto įtraukos savybė prideda tarpą teksto priekyje, pvz., Pastraipų įtraukimui.
Čia yra pavyzdys, kaip naudoti CSS, norint pridėti vietos priešais visas jūsų pastraipas. Į savo išorinį arba vidinį stilių lapą pridėkite šį CSS:
p {
teksto įtrauka: 3em;
}
Erdvės HTML: jūsų teksto viduje
Jei norite tiesiog pridėti papildomą ar dvi vietas į savo tekstą, galite naudoti nepažeistą erdvę.
Šis simbolis veikia lygiai taip pat kaip ir standartinis erdvinio pobūdžio simbolis, tačiau jis neapsaugo naršyklės viduje.
Čia pateikiamas pavyzdys, kaip teksto eilutėje pridėti penkių eilučių:
Šiame tekste yra penki papildomi tarpai
Naudoja HTML:
Šiame tekste yra & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; penki papildomi tarpai viduje
Taip pat galite naudoti žymą "+", kad pridėtumėte papildomų eilučių.
Šio sakinio pabaigoje yra penkios eilutės pertraukos
Kodėl tarpas HTML yra bloga idėja
Nors šios parinktys veikia taip pat - neatitinkančių erdvių elementas iš tiesų prideda tarpą prie jūsų teksto, o eilutės pertraukos pridedamos tarpai po pastraipa, parodyta aukščiau, tai nėra geriausias būdas sukurti tarpą jūsų tinklalapyje. Pridėjus šiuos elementus į HTML, į vizualinę informaciją įtraukiamas kodas, o ne atskiriama nuo puslapių struktūros (HTML) iš vaizdinių stilių (CSS). Geriausia praktika leidžia daryti išvadą, kad tai turėtų būti atskira dėl daugelio priežasčių, įskaitant paprastumą atnaujinti ateityje, bendrą failų dydį ir puslapio našumą.
Jei naudojate išorinį stiliaus lapą, kad diktuosite visus savo stilius ir tarpus, tada lengva pakeisti šių stilių visai svetainei, nes jūs tiesiog turite atnaujinti tą vieną stiliaus lapą.
Apsvarstykite aukščiau bausmės pavyzdį, kuriame yra penki ženklais. Jei norėtumėte, kad kiekvienos pastraipos apačioje būtų rodomas tarpas, turėsite pridėti šį HTML kodą į visas jūsų svetainės pastraipas. Tai yra tikroji papildomo žymėjimo suma, kuri sukels jūsų puslapius.
Be to, jei nuspręsite kelio, kuriame šis tarpas yra per daug ar per mažas, ir norite šiek tiek pakeisti, turėsite redaguoti kiekvieną visą jūsų svetainės dalį. Ne ačiū!
Užuot pridėti šiuos tarpus elementus prie savo kodo, naudokite CSS.
p {
padding-bottom: 20px;
}
Kad viena CSS eilutė pridėtų tarpą pagal jūsų puslapio pastraipas. Jei norėjote ateityje pakeisti šį tarpą, redaguokite šią vieną eilutę (vietoj viso svetainės kodo) ir jums gerai eiti!
Dabar, jei jums reikia pridėti vieną erdvę vienoje savo svetainės dalyje, naudokite
žymą arba vieną neatitinkančią erdvę nėra pasaulio pabaiga, bet jūs turite būti atsargūs.
Naudojant šiuos įprastus HTML tarpus variantus, gali būti slidžias nuolydis. Nors vienas ar du negali pakenkti jūsų svetainei, jei jūs tęskite šį kelią, į savo puslapius pateiksite problemų. Galų gale jums geriau pasukti į CSS tarpą tarp HTML ir visus kitus vizualinius poreikius tinklalapyje.