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

HTML
DOWNLOAD

Méret: px

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

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

Orsolya Jónásné
8 évvel ezelőtt
Látták:

1 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 CSS tanulmányait, mert ez nem bevezető jellegű írás! Első rész! Színek és hátterek: CSS tulajdonság Magyar megfelelő Érték(ek) Példa color 1 / 29

2 szövegszín color: red; background-attachment háttérminta-parancs fixed (vízjel) scroll (gördül) background-attachment: fixed; background-color háttérszín 2 / 29

3 transparent (átlátszó / öröklődő) background-color: yellow; background-image háttérkép Kép URL-je vagy none (semmi). background-image: url('valami.jpg'); background-repeat háttérkép ismétlődése repeat (ismétlődés/alapeset) repeat-x (csak vízszintesen) 3 / 29

4 repeat-y (csak függőlegesen) no-repeat (nincs ismétlődés) background-repeat: repeat-y; background-position-x Háttérkép vízszintes pozíciója length (hosszúság) percentage (%) left (balra) center (középre) right (jobbra) background-position-x: 25%; 4 / 29

5 background-position-y Háttérkép függőleges pozíciója length (hosszúság) percentage (%) left (balra) center (középre) right (jobbra) background-position-y: 2cm; background-position Háttérkép pozíciója length (hosszúság) percentage (%) 5 / 29

6 left (balra) center (középre) right (jobbra) background-position: 25% 2cm; background A teljes háttér Előzőek összesen! Sorrend: background: background-color background-image background-repeat background-attac background: yellow url('valami.jpg') repeat-y fixed 25% 2 cm; W3Schools.com referencia: 6 / 29

7 MSDN-referencia: Elemek határai: CSS tulajdonság Magyar megfelelő Érték(ek) Példa border-top-width Felső határ szélessége thin (vékony) medium (közepes) thick(vastag) 7 / 29

8 szám/mértékegység border-top-width:1cm; border-bottom-width Alsó határ szélessége thin (vékony) medium (közepes) thick(vastag) szám/mértékegység border-bottom-width:1cm; border-right-width Jobb oldali határ szélessége thin (vékony) medium (közepes) 8 / 29

9 thick(vastag) szám/mértékegység border-right-width: thick; border-left-width Bal oldali határ szélessége thin (vékony) medium (közepes) thick(vastag) szám/mértékegység border-left-width: thin; border-width 9 / 29

10 Elem határai Sorrend: felső, jobb, alsó, bal. thin (vékony) medium (közepes) thick(vastag) szám/mértékegység border-width: 1cm thick 1cm thin; border-top-color Felső határ színe border-top-color: red; 10 / 29

11 border-bottom-color Alsó határ színe border-bottom-color: #ABCD34; border-right-color Jobb oldali határ színe border-right-color: green; border-left-color Bal oldali határ színe 11 / 29

12 border-left-color: blue; border-color Határok színe Sorrend: felső, jobb, alsó, bal. border-color: red green #ABCD34 blue; border-top-style Felső határ típusa none(semmi; alapértelmezett) dotted (pontozott) dashed (szaggatott) 12 / 29

13 solid(sima vonal) double (dupla vonal) 3-dimenziós groove, (nem ridge, kerettípusok mindenhol!) inset, paraméterei: outset, window-inset, hidden border-top-style: dotted; border-bottom-style Alsó határ típusa Mint a felsőnél! border-bottom-style: dashed; border-right-style Jobb oldali határ típusa Mint a felsőnél! 13 / 29

14 border-right-style: double; border-left-style Bal oldali határ típusa Mint a felsőnél! border-left-style: groove; border-style Határ típusai Sorrend: felső, jobb, alsó, bal. Mint a felsőnél! border-style: dotted double dashed groove; border-top 14 / 29

15 Felső határ paraméterei Sorrend: width,, color. style Paraméterek: mint fent! border-top: 2mm groove red; border-bottom Alsó határ paraméterei Sorrend: width,, color. style Paraméterek: mint fent! border-bottom: 10pt dashed gray; border-right Jobb oldali határ paraméterei 15 / 29

16 Sorrend: width,, color. style Paraméterek: mint fent! border-right: 0.3in dotted blue; border-left Bal oldali határ paraméterei Sorrend: width,, color. style Paraméterek: mint fent! border-left: 1cm ridge black; border Elem határai Sorrend: width,, color. style 16 / 29

17 Paraméterek: mint fent! - W3Schools.com referencia: MSDN referencia: Margók, helyek és gördítő sávok: CSS tulajdonság Magyar megfelelő Érték(ek) Példa 17 / 29

18 clear Lebegő elemek eltüntetése none (semmi) left (balról) right (jobbról) both (mindkét oldalról) clear: left; layoutflow Tartalom írásiránya. Nem minden támogatja! none (alapértelmezett) left (balról) 18 / 29

19 right (jobbról) - layoutgridchar Karakterek közti üres hely. Nem minden támogatja! none (alapértelmezett) auto (legnagyobb karakterméret)...%...méret layout-grid-char: 5%; layoutgridline Sorok közti üres hely. Nem minden támogatja! none (alapértelmezett) auto (legnagyobb karakterméret) 19 / 29

20 ...%...méret layout-grid-line: 2cm; layoutgridmode Tartalmi elemek rendezése. Nem minden támogatja! line (csak sorban van rendezve) char(csak karakter-szerint van rendezve) both(mindkettő rendezés egyszerre) none(alapértelmezés; nincs üres hely) layout-grid-mode: char; Főleg ázsiai nyelveknél. layoutgridtype Tartalmi elemek rendezési típusa. Nem minden támogatja! 20 / 29

21 loose(alapértelmezés; főleg japán és koreai nyelvnél használt) strict (egyaránt használt a kínai, a genko-japán és a koreai nyelveknél) fixed(egyéb ázsiai nyelveknél, illetve azonos távsort kívánó írásmódnál) layout-grid-type: loose; Főleg ázsiai nyelveknél. layoutgrid A szöveg rendezési típusainak összesítése. Nem minden támogatja! Paraméterek: lásd az előző négy paramétert! - margin-top Elem felső margója. hosszúság...% auto (alapértelmezett) margin-top:100px; 21 / 29

22 margin-right Elem jobb oldali margója. hosszúság...% auto (alapértelmezett) margin-right: 5%; margin-bottom Elem alsó margója. hosszúság...% auto (alapértelmezett) 22 / 29

23 margin-bottom: 1cm; margin-left Elem bal oldali margója. hosszúság...% auto (alapértelmezett) margin-left: 3mm; margin Elem felső, margója. jobb, Sorrend: alsó, bal. Paraméter: mint fent! margin:100px 5% 1cm 3mm; padding-top 23 / 29

24 Szükséges hely az objektum teteje és egyéb tartalom között. hosszúság...% auto (alapértelmezett) padding-top: 20px; padding-right Szükséges hely az objektum jobb oldala és egyéb tartalom között. hosszúság...% auto (alapértelmezett) padding-right: 2mm; 24 / 29

25 padding-bottom Szükséges hely az objektum alja és egyéb tartalom között. hosszúság...% auto (alapértelmezett) padding-bottom: 23%; padding-left Szükséges hely az objektum bal oldala és egyéb tartalom között. hosszúság...% auto (alapértelmezett) padding-left: 2cm; 25 / 29

26 padding Szükséges felső, jobb, hely alsó, az objektum bal. és egyéb tartalom között. Sorrend: Paraméter: mint fent! padding: 20px 2mm 23% 2cm; scrollbar-3dlight-color Gördítő sáv 3D-s megvilágított színei. Nem minden támogatja! scrollbar-3dlight-color: red; scrollbar-arrow-color Gördítő sáv nyilainak színe. Nem minden támogatja! scrollbar-arrow-color: #BB00CC; 26 / 29

27 scrollbar-base-color Gördítő sáv alapszíne. Nem minden támogatja! scrollbar-base-color: #C23; scrollbar-darkshadow-color Gördítő sáv sötét háttérszíne. Nem minden támogatja! scrollbar-darkshadow-color: yellow; scrollbar-face-color Gördítő tégla színe az oldalsávon. Nem minden támogatja! scrollbar-face-color: black; 27 / 29

28 scrollbar-highlight-color Gördítő sáv háttérszíne. Nem minden támogatja! scrollbar-highlight-color: #CCC; scrollbar-shadow-color Gördítő sáv 3D-s háttérszíne. Nem minden támogatja! scrollbar-shadow-color: olive; scrollbar-track-color Gördítő sávok közötti tér színét adja meg. Nem minden támogatja! scrollbar-track-color: #123456; table-layout Egyes elemek szélessége. Csak a következő elemeknél használható: currentstyle, runtimestyle, style 28 / 29

29 auto (alapértelmezés, max. lehetséges szélesség) fixed (adott széles oszlopok) table-layout: fixed; zoom Nagyítás. Csak a következő elemeknél használható: currentstyle, runtimestyle, style, TABLE. normal (1-szeres nagyítás, alapértelmezés) nagyítás (pl.: % vagy méret) zoom: 200%; W3Schools.com referencia: MSDN referencia: 29 / 29

Hasonló dokumentumok

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

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