CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
szövegszín
Szín neve vagy kódja
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
CSS táblázatok 2. Írta: TFeri.hu
Szín neve vagy kódja
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
CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
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: http://www.w3schools.com/css/css_background.asp
6 / 29
CSS táblázatok 2. Írta: TFeri.hu
MSDN-referencia: http://msdn.microsoft.com/en-us/library/ms530722%28v=VS.85%29.aspx
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
CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
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
Szín neve vagy kódja
border-top-color: red;
10 / 29
CSS táblázatok 2. Írta: TFeri.hu
border-bottom-color
Alsó határ színe
Szín neve vagy kódja
border-bottom-color: #ABCD34;
border-right-color
Jobb oldali határ színe
Szín neve vagy kódja
border-right-color: green;
border-left-color
Bal oldali határ színe
Szín neve
vagy kódja
11 / 29
CSS táblázatok 2. Írta: TFeri.hu
border-left-color: blue;
border-color
Határok színe
Sorrend: felső, jobb, alsó, bal.
Szín neve
vagy kódja
border-color: red green #ABCD34 blue;
border-top-style
Felső határ típusa
none(semmi; alapértelmezett)
dotted (pontozott)
dashed (szaggatott)
12 / 29
CSS táblázatok 2. Írta: TFeri.hu
solid(sima vonal)
double (dupla vonal)
3-dimenziós groove, (nemridge, 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
CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
Paraméterek: mint fent!
-
W3Schools.com referencia: http://www.w3schools.com/css/css_border.asp
MSDN referencia: http://msdn.microsoft.com/en-us/library/hh772046%28v=vs.85%29.aspx
Margók, helyek és gördítő sávok:
CSS tulajdonság
Magyar megfelelő
Érték(ek)
Példa
17 / 29
CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
...%
...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
both(mindkettő rendezés
rendezve)
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
CSS táblázatok 2. Írta: TFeri.hu
loose (alapértelmezés; főleg
strict (egyaránt használt a
japán és koreai nyelvnél használt)
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
CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
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
CSS táblázatok 2. Írta: TFeri.hu
padding
Szükséges felső, jobb, helyalsó, 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!
Szín neve vagy kódja scrollbar-3dlight-color: red; scrollbar-arrow-color
Gördítő sáv nyilainak színe. Nem minden
támogatja!
Szín neve vagy kódja
scrollbar-arrow-color: #BB00CC;
26 / 29
CSS táblázatok 2. Írta: TFeri.hu
scrollbar-base-color
Gördítő sáv alapszíne. Nem minden támogatja!
Szín neve vagy kódja
scrollbar-base-color: #C23;
scrollbar-darkshadow-color
Gördítő sáv sötét háttérszíne. Nem minden
támogatja!
Szín neve vagy kódja scrollbar-darkshadow-color: yellow; scrollbar-face-color
Gördítő tégla színe az oldalsávon. Nem minden
támogatja!
Szín neve vagy kódja
scrollbar-face-color:
black;
27 / 29
CSS táblázatok 2. Írta: TFeri.hu
scrollbar-highlight-color
Gördítő sáv háttérszíne. Nem minden
támogatja!
Szín neve vagy kódja scrollbar-highlight-color: #CCC; scrollbar-shadow-color
Gördítő sáv 3D-s háttérszíne. Nem minden
támogatja!
Szín neve vagy kódja 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!
Szín neve vagy kódja scrollbar-track-color: #123456; table-layout
Egyes elemek szélessége. Csak a következő
elemeknél használható: currentStyle, runtimeStyle, style
28 / 29
CSS táblázatok 2. Írta: TFeri.hu
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: http://www.w3schools.com/cSS/css_margin.asp
MSDN referencia: http://msdn.microsoft.com/en-us/library/ms530799%28v=VS.85%29.aspx
29 / 29