Brielle
Brielle
2015. aug 02

Ebben a CSS tutorialban most arról lesz szó, hogyan formálhatjátok meg bejegyzéseiteket, illetve hogyan vethettek be néhány egyszerű trükköt egyedi bekezdések készítésére. Sokan nem gondolnánk, de oldalunk megjelenésében nagyon sokat közrejátszik a bejegyzések formázása, némi CSS kód nagyon sokat formálhat oldalunk igényességében. Ha érdekel néhány egyszerű trükk, akkor tarts velem!

Bekezdés HTML

Először is, fontos tudnunk, hogy is néz ki a bekezdés HTML kódja. Általában a legtöbb szövegeditor ezekre épít, akár a WordPress, akár a CKEditor. De hogyha más helyen is alkalmaznánk a bekezdés kódot (akár oldalmodul), akkor azt is e szerint jelenítjük meg:

<p> ...bezedés tartalma... </p>

Alap bekezdés formázása

A bekezdéseknek formázását, ha nem is CSS-ből, de a Word szövegszerkesztőből már biztosan ismered. Alapvető formázási eszközei a szöveg elrendezése, sorköz, első sor behúzása, térköz egyebek. Most megismerheted, ezeket hogyan adhatjuk meg CSS segítségével.

Szöveg elrendezés

A szöveg elrendezése lehet jobbra, balra, középre igazított, esetleg sorkizárt. Leggyakrabban a sorkizárt elrendezést használjuk, mivel a szöveg így automatikusan kitölti a rendelkezésre álló teret, és a látvány is igényesebb. De mivel több paraméter is létezik, ezért most mind bemutatásra kerül. Így adjuk meg CSS-ben:

p {
text-align: justify;
}

paraméterek lehetnek: right (jobbra), left (balra), center (középre), justify (sorkizárt)

Sorköz

A sorköz számomra egy nagyon fontos paraméter, hiszen ha nem adjuk meg, akkor a szöveg az alapértelmezett sorközzel jelenik meg, ami zavaró lehet a szemnek, mivel a sorok túl közel vannak egymáshoz. Hosszabb szöveg esetén könnyedén átcsúszhatunk egy másik sorba olvasás közben, ami elég kellemetlen. Ezért kell megadnunk egy bizonyos méretű sorközt. A szövegünk igényesebben, és sokkal szellősebben fog kinézni, amit kellemes elolvasnia a szemnek.

p{
line-height: 18px;
{

A sorköz ne legyen se túl nagy, se túl kicsi. Az alap betűméretnél mindenképpen legyen nagyobb, de kipróbálás után be tudod állítani szemmértékre is.

Térköz

A térközzel tulajdonképpen a bekezdések közötti távolságot adhatjuk meg. Ez hasznos lehet, hiszen alapvetően egyik bekezdés rögtön a másik után következik, alapértelmezett sorközzel. Viszont ez is zavaró lehet, főleg, ha egy hosszabb szövegről van szó. Hiszen általában minden bekezdésben egy új témára térünk ki, a bekezdések másról szólnak, így ha egybefolyik a szöveg, akkor az sem készteti az olvasót a folytatásra.

Térközt mi CSS-ben paddinggal adunk meg. Megadhatunk egy felső, illetve alsó paddingot is, vagy ezek közül csak az egyiket.

p{
padding-top: 5px;
padding-bottom: 5px;
}

Behúzás

Bekezdéseknél általában szeretjük, ha az első sor kicsit beljebb kezdődik, mint a többi. Ez nem csak esztétikai szempontból fontos, hanem azért is, mert a szem könnyebben áll rá, sokkal jobban elkülöníti az egyes bekezdéseket.

p{
text-indent: 30px;
}

Egyértelműen pixelben adjuk meg a behúzást. Ne legyen túl nagy, se túl kicsi, próbáld megtalálni az arany középutat. Leginkább akkor lesz szükséged behúzásra, ha hosszú szöveget jelenítesz meg oldaladon sok bejegyzéssel.

Egyedi bekezdés készítése

Oldalunk izgalmassá tételére használhatunk egyedi bejegyzéseket is, mely az alap tartalmat elkülöníti a többitől. Egy teljesen egyedi bejegyzésnek akár adhatunk háttérszínt, eltérő betűtípust, vagy hasonlók. Nézzük hát, hogyan alakíthatjuk ki.

HTML kód

Először is, fog kelleni egy CSS meghatározás a HTML kódunkba. Én ezt most hasonlóképpen fogom elnevezni:

<p class="infobox"> ... bezedés tartalma ... </p>

Tehát minden olyan bekezdésnél, melynél szeretnénk, hogy az egyedi bekezdésünk jelenjen meg, bele kell írnunk class meghatározással az elnevezését.

CSS kód

Az már csak rajtunk múlik, hogy milyenre szeretnénk az egyedi bekezdésünket, viszont a példa kedvéért én is készítettem egy alapkódot neked:

p.infobox{
background-color: #e6dca3;
border: solid 0px #4d6e78;
padding: 5px;
font-weight: bold;
color: #682828;
margin-bottom: 5px;
}

Ennyi lenne ez a kis CSS tutorial, mely apró, de annál hasznosabb általános trükköket tartalmaz. Ha bármilyen kérdésetek lenne elolvasása után, akkor azt hozzászólásban jelezzétek.


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *