A szöveget bekezdésekre szoktuk osztani. Egy bekezdésben a gondolatilag szorosan összetartozó mondanivalót közlő mondatok kapnak helyet.
Formailag egy bekezdés sorokból áll, amelyek felülről lefelé haladva követik egymást. A HTML nyelvben éppen ezért egy bekezdés egy dobozba kerül, amelyen belül a bekezdés tartalma egyenlő szélességű sordobozokba tördelődik. A sordobozok szélessége legfeljebb a bekezdés dobozának szélességével egyezhet meg. (Bizonyos esetekben egyes, a dobozba benyúló egyéb dobozok korlátozhatják a sordobozok szélességét.)
A bekezdés dobozát a P elemmel hozhatjuk létre. Ennek az elemnek a tartalma kerül a bekezdés dobozába, a benne létrejövő sordobozokba elosztva. Tartalma csak olyan objektum lehet, amely sordobozba beilleszthető: blokk-szintű elem esetén automatikusan új P elem kezdődik, amely úgynevezett anonymous bekezdés-doboz lesz.
Mivel a P elemnek a nyitó- és a zárótagja is elhagyható, így nehéz megállapítani, hogy hol kezdődik és hol végződik egy bekezdés. Az ebből adódó bonyodalmak elkerülése végett mindig tartsuk be a következő szabályokat:
Amennyiben a bekezdés szövege egy sordobozon belül eléri a doboz szélét, a legközelebbi szóköznél véget ér a szöveg, és a szóköz utáni szöveg már a következő sordoboz elejére kerül. Azt, hogy a böngésző melyik szóköznél kezd új sort, tördelésnek nevezzük.
Bekezdésen belül is előfordulhat, hogy szeretnénk valahol egy új sorba vinni a szöveget függetlenül attól, hogy a sordobozon belül egyébként az hová kerülne. Erre alkalmas a BR elem, amely új sort kezd a bekezdés dobozán belül, és az utána következő szöveg az új sordobozba fog kerülni.
Ezzel ellenkezőleg, előfordulhat, hogy meg akarjuk akadályozni, hogy két szó
között új sor kezdődjön. Erre is van lehetőség: a
karakterreferenciát használva szóköz helyett, elérhetjük, hogy az előtte és
utána álló szó egy sorba kerüljön, ugyanakkor közöttük a szokásos szóköz
jelenjen meg. Ezt nevezzük nemtörhető szóköznek
(nonbreaking space).
Weboldalon ritkán látunk a sorok végén szóelválasztást. Ennek ellenére ez is
lehetséges. Van lehetőség arra, hogy megadjunk szavakon belül sortörést lehetővé
tevő pontokat, ahol a sor eltörése esetén a kötőjelnek meg kell jelennie. Annak,
hogy ezt ritkán használják, az az oka, hogy rendkívül hosszadalmas minden szóba,
amely valamilyen böngészőablak méret esetén a sor végére kerülhet, ezeket az
elválasztási pontokat minden szótag közé beírni. A lágy elválasztást, vagyis a
csak sorvégén előkerülő elválasztási lehetőséget a ­
karakterreferenciával adhatjuk meg.
A bekezdés formázására a stíluslapon számos tulajdonság áll a rendelkezésünkre. Ilyenek a doboz-modell ismertetésénél már említett tulajdonságok, amelyek a dobozok – így a bekezdés doboza – margóját, keretét illetve belső margóját állítják be. Ezeknek használatával a szokásos bekezdésformázási lehetőségek majdnem mind beállíthatók.
Ezen kívül is van még néhány tulajdonság azonban, amely lehetővé teszi további bekezdésformázás beállítását. A következőkben ezeket vesszük sorra, és megnézzük, hogy mit hogyan lehet beállítani.
Margót kétféleképpen lehet beállítani a bekezdéshez: a
margin tulajdonságokkal, vagy a
padding tulajdonságokkal.
Tulajdonképpen a szomszéd doboztól való távolsága a bekezdés szövegének e kettő
összege lesz. Általában erre a célra inkább a margót állítsuk.
A belső margó inkább akkor használatos, ha a bekezdésünknek más a háttérszíne, mint a környezetének, és szeretnénk, ha a bekezdés margója is ez a háttérszín lenne (mint tudjuk, a margó átlátszó).
A bekezdést bekeretezhetjük a keret tulajdonságok beállításával. A keret
színét a border-color
tulajdonsággal állíthatjuk be, a vastagságát a
border-width
tulajdonsággal, míg a formáját, azaz stílusát a
border-style
tulajdonsággal.
Ebben az esetben a bekezdés margóját egyértelműen a margin
tulajdonságokkal lehet beállítani, míg a keret távolságát a bekezdés szövegétől
a padding tulajdonságok
határozzák meg.
A következő példával egy olyan bekezdést hozunk létre, amely 2em vastag margóval rendelkezik két oldalt, fél em vastag kerettel, amely 1em távolságra van a bekezdés szövegétől minden irányban, és olyan stílusú, hogy a bekezdés a vászonba besüllyedőnek látszik:
Szövegszerkesztésben a térköz két egymás alatti bekezdés közötti távolságot jelent. Kis gondolkodás után nyilvánvaló, hogy ezt a felső bekezdés alsó margójával és az alsó bekezdés felső margójával lehet beállítani. Egy dologra azonban érdemes odafigyelni: a WYSIWYG szövegszerkesztők általában a két szomszédos bekezdésre beállított térköz méretét összeadva kapott térközt állítják be. Ezzel ellentétben a weboldalon az egymás alatti dobozok találkozó margói összevonásra kerülnek egyetlen margóvá, amelynek szélessége – vagyis a tényleges térköz – az egyes margók szélességének maximuma lesz.
Amennyiben nincs keret, a háttérszín azonos, a fenti probléma kiküszöbölhető azzal, ha a belső margókkal állítjuk be a térközt, mert ezek nem kerülnek összevonásra.
A szövegszerkesztőkből ismert behúzások közül a jobb- és baloldali nyilván a margóval illetve a belső margóval állítható be. Célszerű a bekezdés margójához a bekezdésdoboz margóját, míg behúzásához a belső margót társítani, így a keretek elhelyezése sem okoz majd gondot.
A szövegszerkesztőkből ismert másik két behúzás, az első sor behúzása és a függő behúzás valójában nem két különböző behúzás. Gondoljuk végig, hogy az első sor behúzása lehet negatív is, amikor a baloldali behúzás értékéhez kerülő sorokhoz képest az első sor balra esik. Ennek megfelelően elegendő egyetlen tulajdonság ennek beállításához.
Ez a tulajdonság a
text-indent, amellyen az
első sor behúzását lehet állítani.
Amennyiben a függő behúzást szeretnénk állítani, akkor a fentebb elmondottak
alapján állítsuk a függő behúzás értékére a baloldali behúzást, ennek ellenkező
előjelű értékére pedig a text-indent tulajdonságot:
Alapvető tipográfiai szabály: a bekezdések akkor szépek, ha az első sor behúzása 1 vagy 2 em méretű. A szakasz első bekezése általában nem szokott első sor behúzással rendelkezni, és a bekezdések között nincs extra térköz. A weboldalakon ezt külön be kell állítani, mivel nem ez az alapértelmezett. A következő példa azt mutatja, hogy a fenti szabálynak milyen módon lehet eleget tenni: címsorok után nincs behúzás, egyébként 1em méretű behúzás van, és nincs térköz.
A bekezdések igazítása azt jelenti, hogy a bekezdés teljes szélességét ki nem töltő sordobozok tartalma a bekezdés melyik részéhez igazodjon. Négyféle igazítás állítható be:
A fenti négy igazítási forma beállítása a
text-align tulajdonsággal
lehetséges, rendre a left, right, center
és justify értékek segítségével.
Megjegyzés: keskeny bekezdésben a sorkizárt szöveg a túl nagy méretűre megnövő szóközök miatt ronda, ezért csak széles bekezdésekben alkalmazzuk. A széles bekezdésekben azonban éppen a sorkizárt szöveg a legesztétikusabb megjelenésű. Ennek a tankönyvnak a bekezdései is sorkizártak.
A bekezdés sorközét úgy tudjuk beállítani, a sordoboz magasságát állítjuk be
a betűmérethez képest valamekkorára. A
line-height tulajdonság van
ebben a segítségünkre. Érdemes értékét a betűméretnél valamivel nagyobbra venni,
például 120%-ra. Ennél kisebb sormagasság esetén a szomszédos sorok betűi
összeérhetnek.
Általában a bekezdéseknek maguknak nem szoktunk külön háttért megadni, hanem az egész dokumentumnak egyetlen közös háttért adunk meg a BODY vagy a HTML elemnél. Azonban azok ismertetésénél nem volt róla szó, így most említsük meg azt is, hogyan lehet hátteret beállítani.
Háttérként beállíthatunk egy képet, vagy csupán egy egyszínű hátteret is. Ez utóbbi az egyszerűbb, így kezdjük ezzel.
Háttérszínt a
background-color
tulajdonsággal lehet beállítani. Mint már szó volt róla, egy doboz margója
átlátszó, így ott a dobozt tartalmazó doboz háttere fog látszani. A tankönyv e
témakörének háttérszíne például a következőképpen állítható be:
Amennyiben háttérszínt is beállítunk és háttérképet is, és a háttérkép tartalmaz átlátszó részeket, akkor ott a háttérszín fog megjelenni. Ha nem találja a böngésző a megadott háttérképet, akkor szintén a háttérszín fog megjelenni, ezért akkor is célszerű háttérszínt beállítani, ha háttérképet is beállítunk.
Háttérkép beállítására szolgálnak a következő tulajdonságok:
background-image:
a háttérkép címének megadása
background-repeat: a
háttérkép mennyire legyen mozaikosan megismételve az egész területen
background-attachment: a weboldal scrollozásakor elmozduljon
az oldal tartalmával, vagy helyben maradjon
background-position: hol kezdődjön a háttérkép megjelenítése
Az egyes tulajdonságok pontos használatát a fenti hivatkozásokon keresztül elérhető oldalakon lehet megtalálni, illetve a CSS nyelv szabványában.
A fentieket egyszerre is megadhatjuk a
background tulajdonság
használatával.
Amennyiben háttérképet akarunk használni, akkor ügyeljünk arra, hogy a háttér előtt a szöveg olvasható maradjon. Ehhez nyilván olyan háttérkép kell, amely nem tartalmaz egymástól nagyon elütő színeket, amelyek egy része előtt a világos, másik része előtt a sötét betűk elég kontrasztosak az olvasáshoz.