Bekezdéseket vagy táblázatcellák tartalmát a következő tulajdonságok segítségével állíthatjátok be az igényeitek szerint. Ezeket a tulajdonságokat alkalmazni lehet azokra az összes többi elemre is, amelyekhez előre meghatározott vagy kiszámított magasság vagy szélesség van hozzárendelve.
A bekezdés első sorának behúzása
Kezdjük a text-indent tulajdonsággal. Ezzel határozd meg, hogyan kell behúzni a bekezdés első sorát. Balra "kiajzás" is lehetséges. Ehhez használni kell egy negatív text-indent értéket. (Részletes információk arról, mikor lehet ésszerű az extrém kiajzás alkalmazása a következőkben lesznek). Egy számértéket kell megadni.
Példa:
.bekezdes { text-indent: 2em; }
Így néz ki a böngészőben:
Ha negatív értéket használtok, akkor az első folyamatos szöveg sors ki lesz ajzva.
.bekezdes {
text-indent: -2em;
}
És természetesen itt is nézzük meg az eredményt a böngészőben:
Ez is lehetséges. Az ajzás definíciója során azonban ügyeljetek arra, hogy az tartalmak még mindig olvashatóak legyenek, amennyiben ez a cél. Valójában a text-indent kapcsán az is előfordulhat, hogy érdekes lesz a keresőoptimalizálás szempontjából. Néha például inkább grafikákat szeretnénk mutatni szöveg helyett.
De ha a szöveg azonban elérhető kell maradjon a keresőmotoroknak, előállhat egy dilemma. Ezt a dilemmát a text-indent alkalmazásával lehet orvosolni. Mivel ez a tulajdonság lehetővé teszi a szövegek elmozdítását. Tehát a szövegeket eltüntethetitek a látogatók szeme elől.
A text-indent változat előnye: A szöveg, amelyet egy grafikával helyettesíteni szeretnétek, változatlanul megtalálható a forrásszövegben.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Ezzel a szintaxissal a h1-elemhez egy háttérgrafika van hozzárendelve. (A background tulajdonság már bemutatásra került ebben a sorozatban). A text-indent: -99999px segítségével az címsor szövege 99999 képponttal balra lesz eltolva. Tehát a szöveg így nem lesz látható. Csak a kép fog megjelenni.
Ha letiltjátok a stíluslapot, akkor a szöveg újra teljesen látható lesz.
A sor magasságának beállítása
A sor magasságáról már egyszer említettem az általános font tulajdonsággal kapcsolatban. Ebben a részben most kissé részletesebben lesz szó erről a témáról. Érdekes a sor magasságának meghatározása a betűmérettel (font-size).
A sor magasságát a line-height tulajdonsággal lehet beállítani. Számértékek elfogadottak. A százalékos értékek is lehetségesek. Ezek az elem szövegméretére vonatkoznak, amelyhez a sor magasságát megadták. Mielőtt definiálnátok a sor magasságát, figyelmeztetlek, hogy előfordulhat, hogy egy böngésző/végberendezés elsőbbséget ad a sor magasságának megadásának más tulajdonságokkal szemben, és az elemek le lesznek vágnak, ha ők magasabbak. Bosszantó lehet főleg a grafikáknál. Tehát teszteljétek az eredményeket, mielőtt az oldalt online közzéteszitek.
A következő példa bemutatja, hogyan lehet használni a line-height-ot.
<p style="line-height:1.4em; font-size:1em;">Néha csinál az ember egy nagyszerű elrendezést, de hiányoznak a fotók, és ha csak üres kereteket használ fel, akkor az elrendezés eléggé pucér lehet. Jobban is lehetne csinálni:<br /> Ebben a videó tréningben megmutatom nektek a legjobb webcímeket, hogy gyorsan juthassatok ingyen megfelelő képtartókhoz. Egy zseniális listát találtok például itt: <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">itt</a>.</p> <p style="line-height:2em; font-size:1em;">Néha csinál az ember egy nagyszerű elrendezést, de hiányoznak a fotók, és ha csak üres kereteket használ fel, akkor az elrendezés eléggé pucér lehet. Jobban is lehetne csinálni:<br /> Ebben a videó tréningben megmutatom nektek a legjobb webcímeket, hogy gyorsan juthassatok ingyen megfelelő képtartókhoz. Egy zseniális listát találtok például itt: <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">itt</a>.</p> <p style="line-height:1em; font-size:1em;">Néha csinál az ember egy nagyszerű elrendezést, de hiányoznak a fotók, és ha csak üres kereteket használ fel, akkor az elrendezés eléggé pucér lehet. Jobban is lehetne csinálni:<br /> Ebben a videó tréningben megmutatom nektek a legjobb webcímeket, hogy gyorsan juthassatok ingyen megfelelő képtartókhoz. Egy zseniális listát találtok például itt: <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">itt</a>.</p>
Itt három szövegrész definiálásra került, amelyekhez különböző sorközök lettek hozzárendelve.
A sorköz segítségével nagymértékben befolyásolható a szövegek olvashatósága. Tehát óvatosan bánj a line-height-gal.
Végül is az a kérdés merül fel, hogy milyen sorközt kellene választani. Általában 130 és 150 százalék közötti sorközökről beszélünk.
p {
line-height: 150%;
}
Végül is az olvashatóság elsősorban a betűtípus szélességétől függ. Itt az irányadó elv az, hogy minél hosszabbak a szövegsorok, annál nagyobb legyen a sorköz. Mindenképpen teszteljétek az oldalt annak érdekében, hogy az olvashatóság valóban megmaradjon.
Vízszintes szövegalakítás
A text-align tulajdonság határozza meg a szövegabsztraktok és más blokk elemekben található szövegek vagy inline elemek vízszintes igazítását. A következő értékek állíthatók be a text-align tulajdonság esetén:
• left – balra igazítás
• right – jobbra igazítás
• center – középre igazítás
• justify – sorkizárt igazítás
Itt van egy példa ismét:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>Így néz ki az eredmény a böngészőben:
Vegyétek figyelembe, hogy a text-align nemcsak a szövegtartalmakra vonatkozik. A tulajdonság valójában az összes inline elemre vonatkozik. Tehát ha egy kép van beillesztve, a text-align meghatározás érvényes lesz erre az elemre is.
Még egy megjegyzés: a text-align -nak – legalábbis az hivatalos CSS-meghatározás szerint – nem kellene hatással lennie a blokkelemekre. (Bár vannak böngészők, amelyek alkalmazzák blokkelemekre is). Ha blokk elemeket szeretnél igazítani, ezekben az esetekben használd a már bemutatott margin tulajdonságokat.
