Hozzon létre egy HTML lapot és térközt a weboldalakon CSS használatával

A böngészők által a szóközök kezelése elsőre nem túl intuitív, különösen, ha összehasonlítja, hogy a Hypertext Markup Language hogyan kezeli a fehér helyet a szövegszerkesztő programokhoz képest. A szövegszerkesztő szoftverben rengeteg szóközt vagy fület adhat hozzá a dokumentumhoz, és ez a szóköz megjelenik a dokumentum tartalmának megjelenítésében. Ez a WYSIWYG kialakítás nem a HTML vagy a weboldalak esetében áll fenn.

Távolság a nyomtatásban

A szövegszerkesztő szoftverben a három elsődleges szóköz karakter a tér, fülre, és kocsi vissza. E karakterek mindegyike külön-külön viselkedik, HTML-ben azonban a böngészők lényegében ugyanazokat teszik. Akár egy, akár 100 szóközt helyez el a HTML jelölés vagy keverje össze a szóközöket a fülekkel és a kocsi visszatérésekkel, mindezek egy helyre lesznek sűrítve, amikor az oldalt a böngésző. A webdesign terminológiájában ez az úgynevezett fehér tér összeomlik. Ezekkel a tipikus szóközökkel nem lehet szóközt beilleszteni egy weboldalba, mert a böngésző az ismétlődő szóközöket egyetlen helyre szedi össze, amikor a böngészőben renderelik

instagram viewer

CSS használata HTML lapok és térköz létrehozásához

A weboldalak ma a szerkezet és a stílus elválasztásával készülnek. Az oldal felépítését HTML kezeli, míg a stílust a Kaszkád stíluslapok szabják meg. Térköz létrehozásához vagy egy bizonyos elrendezés eléréséhez forduljon a CSS-hez ahelyett, hogy térköz karaktereket adna a HTML-kódhoz.

Ha megpróbálja használni fülek szövegoszlopok létrehozásához ehelyett használja

elemek, amelyek a CSS-sel vannak elhelyezve az oszlop elrendezésének megszerzéséhez. Ez a pozícionálás CSS float-ok, abszolút és relatív pozicionálás, vagy újabb CSS elrendezési technikák, például Flexbox vagy CSS Grid segítségével történhet.

Ha az Ön által elhelyezett adatok táblázatos adatok, akkor táblázatok segítségével igazítsa ezeket az adatokat a kívánt módon. A táblázatok gyakran rossz rap-et kapnak a webdesignban, mert sok éven át tiszta elrendezési eszközként éltek vissza velük, de a táblázatok akkor is tökéletesen érvényesek, ha a tartalma valóban táblázatos adatokat tartalmaz.

Margók, kitöltés és szöveges behúzás

A térközök CSS-sel történő létrehozásának leggyakoribb módja a következő CSS-stílusok egyikének használata:

  • árrés
  • párnázás
  • szöveg-behúzás

Például behúzza a bekezdés első sorát, például egy lapot a következő CSS-sel (vegye figyelembe, hogy ez feltételezi, hogy a bekezdéséhez az "first" osztály attribútum van csatolva):

p.first {
szöveg-francia: 5em;
}

Ez a bekezdés körülbelül öt karaktert tartalmaz.

Használja a margót vagy a kitöltési tulajdonságokat itt: CSS térköz hozzáadása az elem felső, alsó, bal vagy jobb oldalához (vagy ezek oldalainak kombinációihoz). A CSS felé fordulva érjen el bármilyen szükséges távolságot.

Szöveg mozgatása egynél több szóköz nélkül CSS nélkül

Ha csak annyit szeretne, hogy a szövege egynél több szóközzel legyen áthelyezve az előző tételtől, használja a nem törő helyet.

A nem törő szóköz használatához hozzá kell adnia ahányszor szükség van rá a HTML jelölésében.

A HTML tiszteletben tartja ezeket a nem törő tereket, és nem fogja össze egyetlen területté. Ez a megközelítés azonban nem megfelelő gyakorlatnak tekinthető, mivel csak HTML-jelölést ad a dokumentumhoz az elrendezési igények kielégítése érdekében. Ha megvalósítható, kerülje a nem törő szóközök hozzáadását pusztán a kívánt elrendezési hatás és használat érdekében CSS margók és párnázás helyette.

instagram story viewer