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

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


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



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


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


background-position-y

Háttérkép függőleges pozíciója


percentage (%)

left (balra)

center (középre)

right (jobbra)

background-position-y: 2cm;

background-position

Háttérkép pozíciója


percentage (%)

5 / 29


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


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


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


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)


border-left-width: thin;

border-width

9 / 29


Elem határai

Sorrend: felső, jobb, alsó, bal.

thin (vékony)

medium (közepes)

thick(vastag)


border-width: 1cm thick 1cm thin;

border-top-color

Felső határ színe


border-top-color: red;

10 / 29


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

Szín neve

vagy kódja

11 / 29


border-left-color: blue;

border-color

Határok színe


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


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


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


Mint a felsőnél!

border-style: dotted double dashed groove;

border-top

14 / 29


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



border-bottom: 10pt dashed gray;

border-right

Jobb oldali határ paraméterei

15 / 29




border-right: 0.3in dotted blue;

border-left

Bal oldali határ paraméterei



border-left: 1cm ridge black;

border

Elem határai


16 / 29



-

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


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


right (jobbról) layoutGridChar

Karakterek közti üres hely. Nem minden támogatja!


auto (legnagyobb karakterméret)

...%

...méret layout-grid-char: 5%; layoutGridLine

Sorok közti üres hely. Nem minden támogatja!


auto (legnagyobb karakterméret)

19 / 29


...%

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


20 / 29


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


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

...%


22 / 29


margin-bottom:

1cm;

margin-left

Elem bal oldali margója.

hosszúság

...%


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


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


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


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!


scrollbar-arrow-color: #BB00CC;

26 / 29


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!

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!


scrollbar-face-color:

black;

27 / 29


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.


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


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

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

Recommend Documents