2015. november 15., vasárnap

Betűk formázása

Üdv!


Ugyan nem itt kérték a segítséget, viszont máshol nem nagyon osztanám meg, mármint a történetes blogjaimon vagy a személyesen. Biztos vagyok benne, hogy vannak már, akik ismerik a betűk, a szöveg formázását, viszont saját magamból kiindulva, még mindig találok újdonságokat, amikkel tovább tudom alakítani a kinézetüket.
A betűket háromféle módon tudjuk kiemelni a szövegből. Vastag betűvel, dőlt betűvel és aláhúzott betűkkel, illetve a negyedik az áthúzás, de azt én nem nagyon szoktam használni, pluszban ennek nem is tudom a kódját, amivel tudnám formázni.
Nos, akkor lássuk is ezeket a kódokat:

Vastag betűk
b {
color: ;
font-family: ;
font-size: ;
font-weight: ;
text-shadow: ;
letter-spacing: ;
}

Dőlt betűk
i {
color: ;
font-family: ;
font-size: ;
font-weight: ;
text-shadow: ;
letter-spacing: ;
}

Aláhúzott betűk
u {
color: ;
font-family: ;
font-size: ;
font-weight: ;
text-shadow: ;
text-decoration: ;
border-bottom: ;
letter-spacing: ;
}

Most pedig akkor sorban leírom, hogy mivel mit tudtok változtatni. Természetesen ennél jóval több mindent tudtok még megváltoztatni, viszont általában én ezeket szoktam használni.
  • color: ez gondolom mindenki számára egyértelmű, hogy a vastag betű színét fogja megváltoztatni arra, amit te szeretnél, amivel kiemeled a szövegedből
  • font-family: korábban már írtam egy bejegyzést a google font használatáról, ahol pont egy ilyen kód részletet kell bemásolni a CSS-be
    természetesen nemcsak onnan lehet betűtípust választani, viszont, ha telepítjük a blogra, mindenki ugyanazt fogja látni, mint amit te is a sajátodon
  • font-size: ha itt állítod be a méretet, az el fog térni az alaptól, amit korábban már megadtál
  • font-weight: én ezt főként a vastag betűnél szoktam használni, ha nem akarom, hogy vastag legyen az adott betűtípusom, ilyenkor a normal szót írom be a pontos vessző elé és máris eltűnik a vastagság
  • text-shadow: ezzel árnyékot tudunk adni a betűnek
    három pixel értéket kell beírnunk, pl.: 1px 1px 1px #000000
  • text-decoration: ez az aláhúzott betűknél fontos, mert ha nem a megszokott sima vonallal akarjuk aláhúzni a betűket, akkor első lépésként ide be kell írnunk, hogy none
  • border-bottom: ha nem akarjuk az aláhúzott betűknél, hogy csak egy vonal legyen az aláhúzás, akkor ide be kell írni, hogy dotted (pöttyözött) vagy dashed (szaggatott), és máris egy egyedibb kinézetet tudunk varázsolni
    megadhatunk egy pixel méretet, amivel a pötty vagy a szaggatott vonal nagyságát adjuk meg
    természetesen ennek is átállíthatjuk a színét, a pixel érték után bemásoljuk a szín értékét a kettős kereszttel
  • letter-spacing: ide is egy pixeles értéket kell beírni, amivel a betűk közötti távolságot tudjuk állítani
Nos, én általában ezeket szoktam variálni, de ahogyan már írtam, ennél még több mindennel is lehet tovább formázni a betűinket. Az viszont nagyon fontos, hogy minden sort zárjunk le pontos vesszővel, az egész pedig a kapcsos zárójel között legyen. Illetve, ha készen van a kód, akkor üssetek egy entert, mert sokszor előfordul, hogy ugyan mindent jól begépelek, de csak az enter után mutatja a változásokat.
Ha bármi más kérdésetek, kérésetek lenne, nyugodtan írjátok meg! Kellemes napot mindenkinek.

Üdv,
Catalina

Nincsenek megjegyzések:

Megjegyzés küldése