Csoportosítás
2015.04.20. 16:34, Enma22
Vagyis az egyes kódrészek kicsit összeszedve
Ebben a cikkben összeszedem nektek a kódrészeket, melyeket eddig használtunk az egyes részek átalakításához, hogy kicsit átláthatóbb legyen a dolog.
Mivel most az összes kód a fejlécek részben található, így ezt a cikket majd kiemelem a menübe, így mindig elérhető lesz, ha csak egy-egy részt szeretnétek megnézni.
A keretek, vagyis a border az megvan külön cikkben, ezeket is ugye hozzá lehet adni egy-egy részhez.
Háttér elemek:
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
A color az olyan amit szeretnél, vagy transparent.
Image, ez ugye egy url cím lesz így: background-image: url()
Repeat, ismétlődés, ez lehet no-repeat, repeat, repeat-x és repeat-y. Az x és y tengelyekről van szó, ezeket tudnotok kell mit jelent.
Attachment, vagyis hogy fix vagy gördülős legyen e, a fix a legjobb választás. A kód tehát vagy fixed vagy scroll lesz.
A position paranccsal adhatod meg, hogy hol is helyezkedjen el a háttérképed, ha netán kisebb, mint a képernyő mérete.
Ez ugye akkor így néz ki: background-position:
és a szöveg
left top - bal fenn
left center - bal közép
left bottom - bal lenn
right top - jobb fenn
right center - jobb közép
right bottom - jobb lenn
center top - közép fenn
center center - közép közép
center bottom - közép lenn
százalékos megoldás
50% 50%
pixelekben
150px 200px
Ezek tengelyek, x és y melletti elmozdulást jelölnek.
Szöveg elemek:
color: ide színkódot lehet megadni, ilyen lesz a színe
letter-spacing: köz a betűk között
text-align: a szöveg helyzete, right, left, center, justify (sorkizárt)
text-decoration: none, underline (aláhúzott), overline (felülhúzott), line-through (áthúzott).
text-shadow: árnyék, 2px 2px x000000; vagy elmosással: 2px 2px 3px #000000; ha az első két szám helyére nullát írsz, akkor neonos hatást kap a szöveg az elmosás révén.
text-transform: uppercase (nagybetűs), lowercase (kisbetűs), capitalize (szavak első betűje nagy), vagy none (semmi)
Betűk:
font-family: google fontsban találsz szépeket, vagy maradhatnak az alap betűtípusok is, tahoma pl.
font-style: normal vagy italic (dőlt)
font-size: méret
font-weight: normal vagy bold (félkövér).