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