CSS tulajdonságok

A CSS tulajdonságok lényegében a stílusok, amelyeket alkalmazni szeretnénk a különböző elemekre a selector-ok segítségével.

Egy tulajdonság megírásához leírjuk a tulajdonság nevét majd kettőspont után az értékét amit szeretnénk, az alábbi módon:

    div
    {
        font-size: 14px;
    }


        

Egy selectoron belül bármennyi tulajdonságot írhatunk, minden tulajdonság végét ";"-l jelezhetünk.

A tulajdonságok között találunk olyanokat melyek öröklődnek, és olyanokat melyek nem, a nagy részűk nem öröklődik.

Öröklődő tulajdonságok:

    font-size - betű méret
    font-family - betű típus
    color - betű szín
    list-style - listáknál lista elem jelzése
    line-height - betű magasság
    text-align - szöveg igazítás


        

Gyakrabban használt tulajdonságok és értékeik:

Sajnos a tulajdonságok listája nagyon hosszú, és nem tudjuk az összeset leírni de szerencsére nem is kell, szinte mindenikre található példa. Íme néhány:
 

Vannak olyan tulajdonságok, melyeknél egyszerre több mindent beállíthatunk, ilyen pl. a border, background, padding, margin.

1. A border használata:

    div
    {
        border: 2px solid red;
    }


        

Az első érték a keret vastagságát jelenti, ezután jön a stílus (dashed, dotted, double, solid, inset, outset, ridge, none, stb.) majd a szín. Ezeket a tulajdonságokat külön külön is beállíthatjuk a border-size, border-style, border-color tulajdonságok segítségével.

2. A background használata:

    div
    {
        background: url( "link a képhez" ) left top repeat red;
    }


        

Az url értéke egy link kell legyen amely egy képre mutat, ezután jön a vízszintes eltolás balról, minusz érték esetén balra taszítjuk a képet, plussz érték esetén jobbra, aztán függőleges eltolás fentről, majd a repeat érték megmondja hogy milyen módon ismételjük a képet és végül a red a kép által ki nem töltött részt festi be az adott színre.
A repeat értékei lehetnek: repeat (minden irányban), repeat-x (vízszintesen), repeat-y (függőlegesen), no-repeat (ne ismételje).
A tulajdonságok itt is szintén beállíthatóak külön is a background-image, background-position-left, background-position-top, background-repeat, background-color tulajdonságok segítségével.

3. A padding és margin használata:

    div
    {
        padding: 5px;
        margin: 5px;
    }

    vagy

    div
    {
        padding: 5px 5px 5px 5px;
        margin: 5px 5px 5px 5px;
    }


        

A padding és margin esetében az óramutatóval megegyező irányban fentről haladva adjuk meg az értékeket, hogy hol mekkora távolságtartás legyen, felső, jobb, alsó, bal.
Ha mind a 4 eltolást meghatározzuk ebben a sorrendben kell eljárnunk. ha csak 1 értéket írunk, mind a 4 irány megkapja az adott értéket. Ha 2 értéket írunk, akkor az első érték a felső és alsó, míg a második a bal és a jobb értékei lesznek.

    div
    {
        padding: 5px 10px;
    }


        

Fent és lent 5 pixel távolságot, bal és jobb oldalt 10 pixel távolságot fog beállítani. Három érték esetében az első a felső, a második a bal és jobb és a harmadik az alsó távolságot eredményezi.

Egyéb fontos tulajdonságok: display, position, float

1. A display tulajdonság segítségével az elemeket átkonvertálhatjuk, inline elemből blokk elemmé, blokk elemből inline elemmé vagy táblázattá, inline-block elemmé, stb. Pl. ha írunk egy label elemet és szeretnénk, hogy mindenképp egyedül kerüljön egy sorba, se előtte se mögötte ne legyen más elem, akkor a display tulajdonságát megváltoztathatjuk block-ra, ezáltal átkonvertálhatjuk blokk elemmé.

    label
    {
        display: block; (értékei: block, inline, inline-block, inline-table, table-cell, none, stb.)
    }


        

A none értékkel elrejthetünk elemeket a weboldalról.

2. A position tulajdonságról egy következő leckében olvashat bővebben.

3. A float tulajdonságról egy következő leckében olvashat bővebben.

További tulajdonságok és példák a példatárban találhatóak.