Az óra célja: Ismerje meg a táblázat tulajdonságait és a CSS táblaelrendezési elveit
Vessünk egy pillantást a CSS-tábla alapvető tulajdonságaira
határ
Egy ingatlan egyben van figyelembe véve, és egyszerre több ingatlant foglal magában:
- BORDER-STÍLUS
- HATÁRSZÉLESSÉG
- SZEGÉLYSZÍN
Van egy kollektív szabály is:
table.collapse (border-collapse: collapse;) table.separate (border-collapse: külön;)
Eredmény:
szélessége és magassága
(asztal magassága és szélessége)
Értékek:
Példa:
szöveg igazítás
(vízszintes igazítás)
Értékek:
- középen (középen)
- balra (balra igazítva)
- jobbra (jobbra igazítva)
- igazít (szélesség)
függőleges igazítás
(függőleges igazítás)
Értékek:
- alapvonal (alapvonal)
- alindex (mint alindex)
- szuper (felső indexként)
- felső (felső)
- középső (középső)
- alsó (alul)
- % (a sortávolság magasságából)
Példa:
párnázás
(asztal párnázás)
háttérszín (háttér)
szín (szöveg színe)
CSS táblázat elrendezés
A táblázat tulajdonságainak nagy száma és kialakításuk variációi miatt a táblázatok hosszú idő a weboldalak elrendezésének szabványai közé tartoztak. Ha láthatatlanná teszi a táblázat szegélyeit, akkor az egyes celláit az oldal különálló blokkjaiként használhatja: fejléc, menü, lábléc stb.
De ez nem teljesen helyes, mert minden címkének megvan a maga célja, és a táblázatoknak nem kellett volna az oldal elrendezését szolgálniuk. Az alternatíva hiánya azonban késztette a tervezőket az ilyen típusú elrendezési módszer alkalmazására.
Most van egy másik módszer - a rétegek használata, amelyek fokozatosan felváltották a táblákat az ilyen típusú weblapokkal való munka során. Néhány tervező azonban még manapság is sikeresen alkalmazza az asztalelrendezést.
Kétoszlopos táblázatelrendezés
Az egyik legelterjedtebb elrendezési mód a kétoszlopos, i.e. az oldal két részre oszlik.
Példa:állítsa be az oldal fő keretét két oszlopba: az első - fix méretű, a második - a böngészőterület többi részére. A feladat végrehajtása CSS-stílusokkal ()
Teljesítmény:
| </ fej> <test> <table id = "maket" cellpacing = "0"> <tr> <td id = "balra"> 1</td> <td id = "jobbra"> 2</td> </ tr> </ táblázat> ... |
| 1 | 2 |
Eredmény:
Példa: a cellák eltérő hátterének beállítása (két oszlop egymástól való elválasztásához) és az oszlopok közötti távolság beállítása (elválasztó)
Teljesítmény:
Adjunk hozzá új stílustulajdonságokat:
/ * a bal oldali cellához * / td # balra (szélesség: 200 képpont; háttér: #ccc; szegély: 1 képpont, tömör fekete; / * ideiglenesen a szegélyeket jelöli * /) / * a jobb oldali cellához * / td # jobbra (háttér: # fc3; szegély: 1 képpont tömör fekete; / * ideiglenesen a szegélyeket jelöli * /) / * az elválasztóhoz * / #razdel (szélesség: 10 képpont; / * Oszlopok közötti távolság * /)
Együtt:
| </ fej> <test> <table id = "maket" cellpacing = "0"> <tr> <td id = "balra"> 1</td> <td id = "razdel"> <td id = "jobbra"> 2</td> </ tr> </ táblázat> |
| 1 | 2 |
Új cella lett hozzáadva az elválasztóhoz.
Eredmény:
Példa: segítségével készítsen elválasztót a táblázat oszlopai között szaggatott vonal a szomszédos cellák határai
Teljesítmény:
Adjunk hozzá új szegélytulajdonságokat a cellákhoz:
/ * bal oldali cellához * / td # balra (szélesség: 200 képpont; háttér: #ccc; / * Bal oldali oszlop háttérszíne * / / * új * / szegély-jobb: 1 képpont szaggatott # 000; / * Jobb oldali szaggatott szegély beállításai * / )
Együtt:
| </ fej> <test> <table id = "maket" cellpacing = "0"> <tr> <td id = "balra"> 1</td> <td id = "jobbra"> 2</td> </ tr> </ táblázat> |
| 1 | 2 |
Eredmény:
Háromoszlopos táblázatelrendezés
Létezik egy fix vagy „folyékony” elrendezés fogalma.
Javított elrendezésű CSS
- Használata rögzített elrendezés a teljes táblázat szélessége pixelben van megadva, majd a monitor és a böngészőablak felbontásától függetlenül a táblázat mindig azonos szélességű lesz.
- Ebben az esetben a fennmaradó oszlopok szélességét is rögzíteni kell.
- Lehetőség van arra, hogy egy cella szélességét ne adjuk meg, akkor a rendszer automatikusan kiszámolja a többi cella és a teljes táblázat méretei alapján.
Példa: hozzon létre egy három oszlopból álló oldalsablont. Rögzített táblázat elrendezés használata:
- bal oldali oszlop - 150 pixel;
- középső oszlop - 400 pixel;
Teljesítmény:
| </ fej> <test> <table id = "maket" cellpacing = "0"> <tr> <td id = "balra"> 1</td> <td id = "central"> 2</td> <td id = "jobbra"> 3</td> </ tr> </ táblázat> |
| 1 | 2 | 3 |
Eredmény:
Gumi makett
- Táblázat szélessége a "gumi" kialakítás használatakor beállítva a böngészőablak szélességének százalékában... Hogy. a böngészőablak megváltozásakor a táblázat mérete is megváltozik.
- Az összes cella szélessége telepíthető százalékban.
- A második lehetőség az, hogy mikor egyes cellák szélessége alapítva százalékban, a néhány pixelben.
Fontos: Az összes oszlop szélességének összege 100%, függetlenül a táblázat szélességétől.
Példa:
- bal oszlop - 20%;
- középső oszlop - 40%;
- jobb oszlop - 40%;
Állítsa be az oszlopok hátterét, és vizuálisan válassza el az oszlopokat szegéllyel.
Teljesítmény:
| </ fej> <test> <table id = "maket" cellpacing = "0"> <tr> <td id = "balra"> 1</td> <td id = "central"> 2</td> <td id = "jobbra"> 3</td> </ tr> </ táblázat> |
| 1 | 2 | 3 |
Eredmény:
Fontolja meg a második lehetőséget, amikor a böngésző automatikusan kiválasztja a középső oszlop szélességét; példa erre a kép: 
Példa: hozzon létre egy három oszlopból álló oldalsablont. Folyékony táblázat elrendezés használata:
- bal oldali oszlop - 150 pixel;
- középső oszlop - 40%;
- jobb oldali oszlop - 200 pixel;
Állítsa be az oszlopok hátterét, és vizuálisan válassza el az oszlopokat szegéllyel.
Teljesítmény:
| </ fej> <test> <table id = "maket" cellpacing = "0"> <tr> <td id = "balra"> 1</td> <td id = "central"> 2</td> <td id = "jobbra"> 3</td> </ tr> </ táblázat> |
| 1 | 2 | 3 |
Eredmény:
Az eredmény megközelítőleg ugyanaz lesz, csak a "nyújtás" következik be a központi oszlop miatt.
Beágyazott táblázat használata gördülékeny elrendezésben
Ha két oszlop szélessége százalékban van megadva, a harmadiké pedig pixelben, akkor nem fog tudni boldogulni egy táblázattal. Tehát, ha a teljes táblázat szélessége 100 százalék, az első oszlop 200 pixel, a többi oszlop pedig 20 százalék, akkor egy egyszerű számítás azt mutatja, hogy az első oszlop mérete 60 százalék. Ebben az esetben a böngésző nem fogadja el a megadott pixelben megadott értéket, a méretet százalékban állítja be. 
- Az eredeti táblázat két cellával jön létre. A táblázat szélessége százalékban van beállítva.
- A bal oldali cellához(első oszlop) szélessége be van állítva pixelben.
- Jobb cellaszélesség(alap a többi hangszóróhoz) nem meghatározott... A cellába egy második táblázat kerül be, amely szintén két cellából áll.
- A beágyazott táblázat celláinak szélessége százalékban van beállítva..
- A belső asztal szélességét 100 százalékra kell állítani hogy ez a táblázat az összes szabad helyet elfoglalja a külső táblázatban.
- A középső és jobb oldali oszlopszélesség a cella szélességéhez viszonyítva van, nem pedig a külső táblázat egészéhez.
Példa: hozzon létre egy három oszlopból álló oldalsablont. Folyékony elrendezés használata beágyazott táblázattal:
- bal oldali oszlop - 150 pixel;
- középső oszlop - 60%;
- jobb oszlop - 40%;
Állítsa be az oszlopok hátterét.
Teljesítmény:
A cellpadding és cellpacing címke attribútumok szükségesek itt, hogy ne legyen „rés” a táblák között. Tehát mi tanultunk veled a legtöbbet egyszerű műveletek amelyeket táblázatszegélyekkel lehet megvalósítani. És most az asztal sokkal esztétikusabbnak tűnik. A sejtek kitöltése azonban közvetlenül a határokon nyugszik. Ezt egyszerűen kijavíthatja a HTML-táblázat celláinak behúzásával. És akkor a kereten belüli szöveg, a cellában olvashatóbb lesz. Ha behúzásokat szeretne létrehozni egy cellában, használja az attribútumot cellatömítés címkéhez Ebben az esetben a behúzások a tulajdonság segítségével kerülnek beállításra párnázás... Segítségével nem lesz nehéz behúzni, ahol szükséges, azaz fent, jobbra, lent vagy balra, az alábbi tulajdonságok valamelyikével: padding-top, padding-right, párnázó-alsóés padding-bal. Beállíthatja, hogy hány képpont legyen behúzva. Íme egy példa, ahol az alsó margó lesz 20
pixel, és az összes többi lesz 10
... Ilyen CSS- a kód így fog kinézni: Td (kitöltés: 10 képpont; kitöltés alsó: 20 képpont;) És a stílusok teljes kódja ebben a szakaszban: Táblázat (szegély: tömör 1px kék; szegély-összecsukás: összecsukás;) td (szegély: tömör 1px kék; kitöltés: 10px; kitöltés-alsó: 20px;) Eredmény a böngészőben: A táblázatok létrehozásával kapcsolatos feladatok jellemzően címkék, attribútumok és tulajdonságok segítségével oldhatók meg, amelyek lehetővé teszik szegélyek, behúzások létrehozását a cellákban, valamint maguknak a celláknak a szín hátterét is. A táblázatokban a behúzások nem csak a cellákon belül vannak. Maguk a sejtek között is jelen lehetnek. A cellák közötti behúzás kétféleképpen lehetséges: Hangsúlyozni kell, hogy határtávolság a táblázat egészére, míg a tulajdonságra van írva párnázás közvetlenül a sejteknek ír elő. Nézzünk egy példát: Táblázat (szegély: tömör 1px kék; szegély-összecsukás: külön; szegélytávolság: 5px;) td (szegély: tömör 1px kék; kitöltés: 10px; kitöltés-alsó: 20px;) És a végeredmény: Rögtön rögzítsük, hogy ne próbáljon ilyen behúzásokat készíteni határ-összeomlás: összeomlás... Valójában ennek az opciónak a használatakor a cellák egymáshoz "tapadnak". És hogy elkülönüljenek egymástól, érdemes használni határ-összeomlás: külön... Fontos megérteni, hogy ez az érték az alapértelmezett. És csak azért használják, hogy egyértelműen bemutassák, hogyan oldják meg ezt a problémát. Ha ezt a sort töröljük, akkor az eredmény az egymástól különálló cellák formájában kerül mentésre. A CSS segítségével nemcsak a táblázat szegélystílusát állíthatja be, hanem az egyes cellák szegélyeinek stílusát is. Mivel minden cellának megvannak a saját határai, a szomszédos cellák közötti határ megduplázódik. De lehetséges a szomszédos cellák határait egyesíteni. Erre van egy border-collapse ingatlan. A következő értékeket veszi fel: border-collapse: külön - minden cellának saját szegélye van (alapértelmezett) határ-összeomlás: összeomlás - az általános határ border-collapse: inherit - az érték innen származik szülő elem Például hozzunk létre egy táblázatot, és állítsunk be egy keretet az oldalon található összes tábla cellájához. Először is ne változtassunk semmit, hogy lássuk, hogyan fog kinézni a táblázat: Stílus: 1 Miután a táblázatcellákhoz kereteket adtak, észrevehetővé vált, hogy a cellák tartalma túl közel van a szélekhez. A padding tulajdonság segítségével fehér szóközt adhat a cellák szélei és azok tartalma közé: Th, td (padding: 7px;) Próbáld ki " Az asztal mérete a tartalmától függ, de gyakran előfordulnak olyan helyzetek, amikor az asztal túl keskeny, és szükségessé válik a nyújtás. A táblázat szélessége és magassága módosítható a szélesség és magasság tulajdonságok segítségével, beállítva a kívánt méreteket akár magának a táblázatnak, akár a celláknak: Táblázat (szélesség: 70%;) th (magasság: 50 képpont;) Próbáld ki " Alapértelmezés szerint a táblázat fejléccelláiban lévő szöveg középre igazított, a normál cellákban pedig balra igazított szöveg, a text-align tulajdonság segítségével szabályozhatja a szöveg vízszintes igazítását. A függőleges igazítású CSS tulajdonság lehetővé teszi a szövegtartalom függőleges igazításának szabályozását. Alapértelmezés szerint a szöveg függőlegesen a cellák közepéhez igazodik. A függőleges igazítás felülbírálható a függőleges igazítás tulajdonság egyik értékével: Ha sok sort tartalmazó nagy táblázatokat szkennel a következővel: nagy mennyiség információ, nehéz lehet nyomon követni, hogy mely adatok tartoznak egy adott sorhoz. A felhasználók navigálásának megkönnyítése érdekében két különböző háttérszínt használhat felváltva. A leírt hatás létrehozásához használhatja az osztályválasztót, hozzáadva a táblázat minden második sorához:
Minden második sorhoz osztályattribútum hozzáadása fárasztó feladat. A probléma megoldására a: nth-child pszeudoosztály került a CSS3-ba alternatív módon... A váltakozó hatás most már kizárólagosan elérhető CSS használatával anélkül, hogy módosítani kellene a dokumentum HTML-jelölését. Az pszeudoosztály: n-edik gyermek a táblázat összes páratlan vagy páros sorát kijelölheti a kulcsszavakat: páros (páros) vagy páratlan (páratlan): Tr: n-edik gyermek (páratlan) (háttérszín: # EAF2D3;) Próbáld ki " A táblázatos adatok olvashatóságának javításának másik módja a változtatás háttérszín vonalak, ha rámutatjuk az egérkurzort. Ez segít kiemelni a kívánt táblázattartalmat, és javítja az adatok vizuális észlelését. Ennek a hatásnak a megvalósítása nagyon egyszerű, ehhez hozzá kell adni a hover pszeudoosztályt a táblázat sorválasztójához, és be kell állítani a kívánt háttérszínt: Tr: lebeg (háttérszín: # E0E0FF;) Próbáld ki " A HTML-táblázat középre igazítása csak akkor lehetséges, ha a táblázat szélessége kisebb, mint a szülőelem szélessége. A táblázat középre igazításához a margó tulajdonságot kell használni, legalább két értéket beállítva: az első érték a táblázat külső margójáért felelős felül és alul, a második pedig az automatikus középre igazításért: Táblázat (margó: 10px automatikus;) Próbáld ki " Ha különböző margókra van szüksége a táblázat tetején és alján, akkor a margó tulajdonságot három értékre állíthatja be: az első a felső margóért, a második a vízszintes igazításért, a harmadik pedig az alsó margóért lesz felelős: Táblázat (margó: 10px auto 30px;) Számos módszert mérlegeltünk egy oldal elemeinek stílusozására, mint például szöveges információk, linkek, képek, címsorok, de mindez még nem elég. A cikkeimben gyakran használok HTML elemeket, például táblázatokat, mert a legtöbb esetben azok segít a rendszerezésben fontos információés megkönnyíti a kiszolgálást. Ebben a cikkben bemutatom a HTML-táblázatok stílusának fortélyait, és új CSS-tulajdonságokat ismerhet meg, amelyeket e célok elérésére terveztek. A Hypertext Markup Language HTML biztosította számunkra nagyszámú lehetőség a CSS-stílusok tíz egyedi címkéhez való kötésére, amelyeket a táblázatokkal való munkához terveztek, javaslom, hogy ismételje meg őket a további tanulmányozás előtt: Ebben a példában mi: Példánk eredménye: A fenti példa után észrevehette, hogy a táblázat összes cellája között rés van. Nézzük meg, hogyan lehet eltávolítani a táblázat cellái közötti rést, vagy növelni azt. A szomszédos cellák határai közötti távolság beállításához a CSS tulajdonságot kell használni - border-spacing. Ebben a példában mi: Felhívom a figyelmet arra, hogy ha a border-spacing tulajdonságban csak egy hosszérték van megadva, akkor ez jelzi a távolságot vízszintesen és függőlegesen is, ha pedig két hosszérték van megadva, akkor az első határozza meg a vízszintes távolságot. és a második függőleges. A szomszédos cellák határai közötti távolság CSS-egységekben (px, cm, em stb.) adható meg. Negatív értékek nem megengedettek. Példánk eredménye: Mondhatod: - tehát eltávolítottuk a cellák közötti távolságot a border-spacing tulajdonság 0 értékű használatával, de most miért metszik egymást a cellák határai? A kettős szegélyek abból adódnak, hogy egy cella alsó szegélye hozzáadódik az alatta lévő cella felső szegélyéhez, hasonló helyzet alakul ki a cellák oldalain és ez logikus a megjelenítés szempontjából. a táblázatot, de szerencsére van mód arra, hogy közöljük a böngészővel, hogy mi vagyunk, nem akarjuk látni a cellahatárok ilyen szemtelen viselkedését. Ehhez a CSS border-collapse tulajdonságát kell használni. Furcsa módon a border-collapse tulajdonság használata az összecsukási értékkel igen a legjobb mód hogyan lehet eltávolítani a cellák közötti rést, és nem kap kettős szegélyt közöttük. Fontolja meg a határok viselkedésének összehasonlítását, amikor a border-spacing tulajdonságot 0 értékkel és a border-collapse tulajdonságot collapse értékkel használjuk: Ebben a példában mi: Példánk eredménye: A CSS használatával beállíthatja, hogy megjelenjen-e a táblázat üres celláinak szegélye és háttere vagy sem. Az üres cellák tulajdonság felelős ezért a viselkedésért, amely alapértelmezés szerint üres cellákat jelenít meg, amint azt az előző példákból is észrevette. Térjünk át egy példára: Ebből a példából nagyon egyszerű megérteni, hogyan működik az üres cellák tulajdonság, ha elrejtésre van állítva, akkor az üres cellák és a bennük lévő háttér elrejtve, ha megjelenítésre van állítva (alapértelmezett), akkor azok megjelennek. Nézzünk meg egy másik egyszerű tulajdonságot a táblázatok stílusozásához – a caption-side, amely beállítja a táblázat feliratának helyzetét (a táblázat felett vagy alatt). Alapértelmezés szerint a feliratoldali tulajdonság a tetejére van állítva, ami a feliratot a táblázat fölé helyezi. Ahhoz, hogy a címet a táblázat alá helyezhesse, az alsó értékű tulajdonságot kell használni. Nézzünk egy példát ennek a tulajdonságnak a használatára: Ebben a példában létrehoztuk két osztály amelyek a táblázat fejlécének pozícióját szabályozzák. Első osztályú ( .topCaption) fölé helyezi a táblázat címét, ezt alkalmaztuk az első táblára, a második osztályra pedig ( .bottomCaption) alatta helyezi el a táblázat címét, a második táblázatra alkalmaztuk. Osztály .topCaption alapértelmezett feliratoldali tulajdonsággal rendelkezik, és demonstrációs célból jött létre. Példánk eredménye: A legtöbb esetben, amikor táblázatokkal dolgozik, módosítania kell a tartalom igazítását a fejléceken és az adatcellákon belül. A text-align tulajdonságot a vízszintes igazításhoz használják, hasonlóan bármely szöveginformációhoz. Ennek a tulajdonságnak a szöveghez való használatát korábban a "" cikkben tárgyaltuk. A cellákban lévő tartalom igazításának beállításához speciális kulcsszavakat kell használnia a text-align tulajdonsággal. Tekintsük ennek a tulajdonságnak a kulcsszavainak alkalmazását a következő példában. Ebben a példában létrehoztuk négy osztály, amelyek különböző vízszintes igazításokat állítottak be a cellákban és alkalmazták azokat a táblázat soraira. A cellában lévő érték megegyezik a text-align tulajdonság értékével Példánk eredménye: A vízszintes igazítás mellett a függőleges igazítást is megadhatja a táblázatcellákban a függőleges igazítás tulajdonság segítségével. Kérjük, vegye figyelembe, hogy a táblázat celláival való munka során ennek a tulajdonságnak csak a következő értékei * használhatók: *
- A táblázat cellájára alkalmazott sub, super, text-top, text-bottom, long és% értékek úgy fognak viselkedni, mintha az alapértéket használnák. Nézzünk egy példát a felhasználásra: Ebben a példában létrehoztuk négy osztály, amelyek különböző függőleges igazításokat állítottak be a cellákban, és alkalmazták őket a táblázat soraira. A cellában lévő érték megegyezik az adott sorra alkalmazott függőleges igazítási tulajdonság értékével. A CSS alapértelmezés szerint a böngésző automatikus táblázatelrendezési algoritmusát használja. Ebben az esetben az oszlopszélességet a cella legszélesebb törésmentes tartalma határozza meg. Ez az algoritmus bizonyos esetekben lassú lehet, mivel a böngészőnek el kell olvasnia a táblázat teljes tartalmát, mielőtt meghatározná a végleges elrendezését. A táblázat elrendezési típusának böngésző általi megváltoztatásához automatikus tovább rögzített, akkor a table-layout CSS tulajdonságot kell használnia, amely rögzített értékre van állítva. Ebben az esetben a vízszintes elhelyezés csak attól függ a táblázat szélességétől és az oszlopok szélességétől, és nem a cellák tartalmától. A böngésző az első sor beérkezése után azonnal elkezdi megjeleníteni a táblázatot. Következésképpen a rögzített algoritmus lehetővé teszi egy ilyen táblázat elrendezésének gyorsabb elkészítését, mint az automatikus verzió használata. Ha nagy táblákkal dolgozik, fix algoritmust használhat a teljesítmény javítására. Nézzük meg ennek a tulajdonságnak az alkalmazását a következő példával: Ebben a példában mi: A "" cikkben már részben érintettük a táblázat sorai és oszlopai stílusának módszereit. Ebben a cikkben egy csoportos pszeudoosztály használatát vizsgáltuk, amely lehetővé teszi a sorstílusok váltakozását a táblázatokban értékek használatával. még (becsületes) és páratlan (páratlan), vagy elemi matematikai képlet. Tekintsük újra a korábbi technikákat, és fedezzük fel a táblázatok sorainak és oszlopainak stílusának új módjait. Térjünk át a példákra. Ebben a példában mi: Példánk eredménye: Térjünk át a következő példára, amelyben megvizsgáljuk a táblázatsorok stílusozásának lehetőségeit. Ebben a példában mi: Példánk eredménye: Rizs. 153 Példa a táblázatok sorainak stíluszására A következő példa bemutatja, hogyan lehet saroklekerekítést alkalmazni a táblázatcellákra (tulajdonságra). Ebben a példában mi: Példánk eredménye: A következő példa a HTML elemek használatát érinti Ebben a példában mi: Példánk eredménye: Nos, és az utolsó példa, amely meglehetősen nehezen érthető, és magas szintű CSS-ismereteket igényel, mivel a tantárgy keretein belül részletes tanulmányozásra tervezett jövőbeni témákat érint. Az előző példában rájöttünk arra, hogy HTML elem Ebben a példában mi: Példánk eredménye: Ha a tanulmány ezen szakaszában nem érti az elemek elhelyezésének folyamatát, akkor ne csüggedjen, ez egy nehezen érthető téma, amit szintén nem vettünk figyelembe, de mindenképpen figyelembe vesszük a következő cikkben. oktatóanyag "Elemek pozicionálása a CSS-ben". Mielőtt továbblépne a következő témára, fejezze be a gyakorlati tevékenységet: Ha nehézségei vannak a gyakorlat végrehajtásával, bármikor megnyithatja a példát egy külön ablakban, és megtekintheti az oldalt, hogy megnézze, milyen CSS-t használtak. 2016-2020 Denis Bolshakov, megjegyzéseket és javaslatokat küldhet az oldal munkájával kapcsolatban a [email protected] címre Számítógépes segítség Olympus |
