2011. november 22., kedd

CSS Doboz modell - keret (border)

Tegnap megbeszéltük a doboz modell alapjait. A hét folyamán részletesen végignézzük a modell elemeit. A mai napon megismerkedünk a keretekkel (border).

Tudjuk, hogy mi a keret ( egy sáv a tartalom és az eltartás körül). Most pedig megismerjük a formázásik lehetőségeket:


BORDER-STYLE

Megadja, hogy milyen keretet szeretnél megjeleníteni.

elem{
border-style:dotted;
}


Itt vannak az értékek.

BORDER-WIDTH:

Megadja a keret szélességét.

elem{
border-width:5px;
}


Értékeit itt megnézhetitek. Megadhatjuk szövegesen vagy pixelben is (ezt jobban szeretjük :D).

BORDER-COLOR:

Megadja a keret színét.

elem{
border-color:red;
}


Értékei. Az már megtanult módokon adhatjuk meg (szövegesen, rgb kóddal, hex kóddal).

FONTOS:

Van lehetőségünk az különböző oldalak keretét külön formázni.

  • border-top: a felső keret
  • border-right: a jobb oldali keret
  • border-bottom: az alsó keret
  • border-left: bal oldali keret
Minden oldal keretét külön tudjuk formázni a megtanult módon.

elem{
border-bottom-style:dotted;
}


RÖVIDÍTÉS:

Kétféle rövidítést nézünk most meg:

Ha a különböző kereteket egy sorban szeretnénk formázni, akkor a táblázatoknál már megtanult módon tehetjük meg. A felső keret értékével kezdjük és az óramutató járásával megegyezően megadjuk a többit is.

PÉLDA:

elem{
border-width:10px 5px 15px 20px;
}


A felső keret 10px-es, a jobboldali 5px-es, az alsó 15px-es, a baloldali pedig 20px-es.

A másik rövidítés pedig a keret "globális" megjelenítésének egyszerűbb megadása (minden oldal egyforma)
Először a méretét adom meg, majd a típusát, végül a színét. Tehát:

elem{
border: 10px solid red;
}


Az összes keret 10px-es, folytonos és piros.

Holnap megnézzük a margókat és egy újdonságot is.

Nincsenek megjegyzések:

Megjegyzés küldése