DOBOZOK. A doboz négy részből áll: 1. Margó (margin) 2. Szegély (border) 3. Kitöltés (padding) 4. Tartalom (content)

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "DOBOZOK. A doboz négy részből áll: 1. Margó (margin) 2. Szegély (border) 3. Kitöltés (padding) 4. Tartalom (content)"

Judit Vargané
8 évvel ezelőtt
Látták:

1 CSS

2 DOBOZOK

3 DOBOZOK A doboz négy részből áll: 1. Margó (margin) 2. Szegély (border) 3. Kitöltés (padding) 4. Tartalom (content)

4 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

5 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

6 KITÖLTÉS PÉLDA Sima.szoveg {align: left ; border: 10px groove #99999}

7 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}

8 KITÖLTÉS PÉLDA Egyszerre mind.szoveg {align: left ; border: 10px groove #99999; padding: 20px}

9 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

10 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.

11 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ó.

12 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

13 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 }

14 POZICIONÁLÁS

15 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)

16 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.

17 STATIC

18 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.

19 RELATIVE

20 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.

21 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.

22 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.

23 FIXED

Hasonló dokumentumok

Tamás Ferenc: CSS táblázatok 2.

Tamás Ferenc: CSS táblázatok 2. Ez az írás azoknak készült, akik már értik a HTML és a CSS nyelveket, csak használat közben kellene egy adott tulajdonság vagy érték. Kérem, hogy senki se ezzel kezdje a