CSS
DOBOZOK
DOBOZOK A doboz négy részből áll: 1. Margó (margin) 2. Szegély (border) 3. Kitöltés (padding) 4. Tartalom (content)
TARTALOM Ez maga az elem, amelyik a dobozt létrehozza.
KITÖLTÉS A tartalom és a keret közötti teret adhatjuk meg vele TULAJDONSÁGAI CSS KÓD A tartalom háttértulajdonságai jellemzőek rá Csak a méret beállítására van lehetőség Mérete lehet 0 azaz nem kötelező hogy legyen Nem lehet negatív Értéke megadható %-ban illetve pixelben padding-top padding-rigth padding-bottom padding-left padding Megadható külön-külön Illetve mind a négy egyszerre
KITÖLTÉS PÉLDA Sima.szoveg {align: left ; border: 10px groove #99999}
KITÖLTÉS PÉLDA Külön-külön.szoveg {align: left ; border: 10px groove #99999; padding-right: 80px; padding-left: 80px; padding-bottom: 20px}
KITÖLTÉS PÉLDA Egyszerre mind.szoveg {align: left ; border: 10px groove #99999; padding: 20px}
SZEGÉLY Az elemek köré rajzolható vizuális tulajdonságokkal rendelkező (vastagság, stílus, szín) szegély. TULAJDONSÁGAI Be lehet állítani méretet Be lehet állítani stílust Be lehet állítani színt Lehet none azaz nem kötelező hogy legyen Értéke a paramétereinek sokféle lehet
SZEGÉLY CSS KÓD Szín Szegély stílus border-top-color border-right-color border-bottom-color border-left-color border-color Megadható külön-külön Illetve mind a négy egyszerre border-top-style border-right-style border-bottom-style border-left-style border-style Megadható külön-külön Illetve mind a négy egyszerre Megadható színkóddal, egyezményes szín nevekkel illetve lehet transparent is amikor kiterjedése van de nem látszik Méret Egyben az egész border Itt megadható a három egymás után szóközzel elválasztva border-top-width border-right-width border-bottom-width border-left-width border-width Megadható külön-külön Illetve mind a négy egyszerre Megadható pixelben illetve thin: vastag; medium: közepes; thick: vastag.
SZEGÉLY STÍLUSOK none: nincs szegély. Egyúttal a border-width tulajdonság értékét 0-ra állítja hidden: ugyanaz, mint a none (a táblázatok elemeinek kivételével, ahol a szegélyütközések elkerülésére szolgál) dotted: pontozott vonal dashed: szaggatott vonal solid: folyamatos vonal double: két folyamatos vonal; a szegélyszélesség a két vonal és a köztük lévő tér összege groove: a keret úgy néz ki, mintha a vászonba lenne mélyítve ridge: a keret úgy néz ki, mintha kiemelkedne a vászonból inset: az egész doboz úgy néz ki, mintha a vászonba lenne mélyítve outset: az egész doboz úgy néz ki, mintha kiemelkedne a vászonból
MARGÓ A dobozok egymástól való távolságát szabályozni illetve az oldal szélétől való távolságot. TULAJDONSÁGAI CSS KÓD Minden esetben átlátszó. Mérete lehet 0 azaz nem kötelező hogy legyen Csak a méret beállítására van lehetőség Értéke megadható %-ban illetve pixelben margin-top margin-rigth margin-bottom margin-left margin Megadható külön-külön Illetve mind a négy egyszerre
MARGÓ PÉLDA Sima Külön-külön Egyszerre mind img { float: left } img { margin-right: 20px; margin-bottom: 20px; float: left } img { margin: 20px; float: left }
POZICIONÁLÁS
PZICIONÁLÁS Négy féle értéke lehet a poziciónak: 1. static (statikus) 2. relative (relatív) 3. absolute (abszolút) 4. fixed (fix)
STATIC A statikus (static) érték (mely az alapértelmezett) ott jelenik meg az elem, ahol éppen tartunk a dokumentumban. Ennél az értéknél a bal és a fenti pozíció megadás (lásd mindjárt) figyelmen kívül lesz hagyva.
STATIC
RELATIVE A relatív (relative) érték esetén a statikushoz hasonló helyre kerül az elem, de lehetőségünk van a bal és fenti pozíció megadással eltolnunk. A következő elem elhelyezése úgy lesz számítva, mintha ez az elem a helyén maradt volna.
RELATIVE
ABSOLUTE Az abszolút pozícionálású elemek a (dokumentumfában) legközelebb eső olyan szülő elemhez képest lesznek pozícionálva, amelyikre szintén meg van adva a position tulajdonság MÁS értékkel, mint a static.
ABSOLUTE
FIXED Az elem mindig a helyén marad, nem lesz a többi elemmel együtt elgörgetve a gördítősáv használatakor. Ekkor is lehet pozícionálni a top, right, bottom, left tulajdonságokkal. Az IE 6 és régebbi verziói nem ismerik fel ezt a tulajdonságot. A position: fixed akkor lehet hasznos, ha pl. egy menüt kívánunk úgy megjeleníteni, hogy az mindig látható legyen.
FIXED