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.