2011. november 15., kedd

CSS hátterek, szövegformázások...

Most hogy megismerkedtünk a CSS alapjaival, neki is állhatunk a részleteknek is. Tudjuk, hogy a CSS segítségével a HTML-kód elemeit formázhatjuk. Nézzük meg, hogy hogyan adhatunk egy elemnek hátteret és milyen módon alakíthatjuk azt.


BACKGROUND-COLOR

A background-color értéke meghatározza a HTML elem háttérszínét.

elem{
background-color:#fff;
}

A színt megadhatjuk:

  • HEX-kódban --> #fff
  • RGB-kódban --> rgb(213,102,211)
  • a szín nevével --> green
Ha az egész oldalnak szeretnénk háttérszínt adni, akkor az elemünk a body lesz.

body {
background-color:green;
}

BACKGROUND-IMAGE:

A background-image értéke meghatározza a HTML elem hátterét, ami most egy kép.

elem{
background-image: url('valami.jpg');
}

Alapértelmezésben a kép ismétlődik, tehát lefedi az egész elemet.

A HÁTTÉRKÉP ISMÉTLÉSE VÍZSZINTESEN ÉS FÜGGŐLEGESEN:

Alapértelmezésben a képet mindkét irányba ismétli, de vannak olyan esetek, amikor csak az egyikre lenne szükség. 

elem{
background-image: url('valami.jpg');
background-repeat: repeat-x;
}

Az (x) a vízszintes, az (y) pedig a függőleges. 
Ha azt szeretnénk, hogy ne ismétlődjön egyszer sem, akkor adjuk meg a no-repeat értéket a background-repeat-nek.

elem{
background-image:('valami.jpg');
beckground-repeat:no-repeat;
}

Ha a hátteret (ami nem ismétlődik) pozicionálni szeretnénk, akkor használjuk a background-position-t. Értékeit itt megnézhetitek.

BACKGROUND-ATTACHMENT:
Segítségével a hátteret fixszé változtathatjuk. Értéke lehet fixed és scroll. Előbbinél a háttér görgetésnél fix, nem mozdul, utóbbinál pedig a görgetéssel együtt mozog. 

elem{
background-image:('valami.jpg');
background-attachment:fixed;
}

CSS GYORSÍTÁS:
A CSS-ben rengeteg helyen van lehetőség lerövidíteni a kódot. Nem biztos, hogy az átláthatóságnak jót tesz, de azért megismerkedünk vele:

Ha jól megnézed, akkor sok beállítást eszközölhetünk a hátterek esetében. 

elem{
background-color:#fff;
background-image:('valami.jpg');
beckground-repeat:no-repeat;
background-position:right top;
}

Hogyan egyszerűsíthetjük le ezt 1 sorban? Nézzük meg először az elemek sorrendjét:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
Minden elem background beállítás. A rövidítés így néz ki:

elem{
background: color image repeat attachment position
}

body{
background: #fff url('valami.jpg') no-repeat fixed right top
}

SZÖVEGFORMÁZÁSOK:


szöveg színe:


Megadhatjuk:

  • HEX-kódban --> #fff
  • RGB-kódban --> rgb(213,102,211)
  • a szín nevével --> green
elem{
color:#fff;
}

Az alapértelmezett színt a body elemmel adhatjuk meg.

body{
color:#fff;
}

szövegigazítás:
A szöveg vízszintes igazítására szolgál. Lehet right (jobbra), left (balra), center (középre), justified (sorkizárt). A sorkizárt azt jelenti, hogy a szöveg a sor elejétől a végéig tart (ezt a szóközök méretének növelésével éri el).

elem{
text-align:center;
}

szövegdekorálás:
Leggyakrabban arra használjuk, hogy letüntessük az aláhúzást a linkek alól.

a {
text-decoration:none;
}

Azonban használhatjuk szövegdekorálásra is. Lehetséges értékeit itt megnézhetitek.

szövegátalakítás:

Segítségével a szöveget nagybetűsre (uppercase), kisbetűsre (lowercase) és nagy kezdőbetűsre (capitalize) alakíthatjuk.

elem{
text-transform:capitalize;
}


szövegbehúzás:
segítségével a bekezdés első sorának adhatunk behúzást. 

p {
text-indent:20px;
}

A text-indent értéke a behúzás mértéke.

IDE TARTOZIK:

  • karakterköz (letter-spacing): Értéke a karakterek közötti távolságot adja meg. (pl.: 5px)
  • sorköz (line-height): Értéke megadja a sorok közötti távolságot. Értékét háromféleképpen adhatjuk meg: kihagyott sorok száma (pl.: 5), kihagyott pixelek száma (pl.: 5px) és százalék, ahol a 100% egy sor magasságának felel meg (pl.: 150%).
  • szóköz (word-spacing): Értéke a szóközök távolságát adja meg. (pl.: 5px)
  • tördelés egy elemen belül (white-space): Értéke a szöveg tördelésének módját határozza meg. Értékeit itt kipróbálhatod.
  • függőleges igazítás (vertical-align): Értéke a kép vagy szövegrész függőleges igazítását határozza meg. Értékeit itt kipróbálhatod.
  • szöveg iránya (direction): Értéke a szöveg megjelenésének irányát határozza meg. Értékeit itt megnézheted.
Gondolom feltűnt, hogy egy kicsit gyorsabb, tömörebb üzemmódra kapcsoltunk. Ennek az az oka, hogyha idáig eljutottál, akkor valószínű megértetted a HTML, CSS lényegét, szintaktikáját. Ezért a legtöbb elemet, értéket nem kell részletesen átvennünk. Ajánlom mindenkinek a linkek kipróbálását, megértését. Ha valami nem érthető, akkor írj egy hozzászólást. Legközelebb megnézzük a betűtípusokat és a linkek formázását.