Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: ]  
Freelance Jobs

Témaköreink

 


On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 362414

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [55276]
2. CSS
Bevezetés a CSS alapjaiba [30768]
3. CSS
A pozícionálás, és a z-index [30256]
4. CSS
A felhasználói felület - első rész [24599]
5. CSS
Függőleges menü, legördülő almenüvel [24468]
 

 

CSS -> Margók-, szegélyek-, és a kitöltés tulajdonságai

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-03-27 14:30:31
Lektorálta: Wicky
Lektorálva:
2005-10-01 13:04:12 [16062]
Egy oldal tervezésénél, kivitelezésénél nagyon fontosak a margók, a szegélyek és a kitöltések.
A doboz (DIV) elhelyezésénél, vagy szöveg, kép igazításánál fontos szerepet kapnak, hisz befolyásolják az adott elem elhelyezkedését, vagy a szöveg és az oldal széle illetve egy kép közötti üres hely méretét.

A három tulajdonság megértéséhez szükségünk van a CSS dobozmodelljének ismeretére.
A modell szerint minden elem egy négyszögletes dobozban van. A doboz külső részén ( legszélsőbb keretén) a margó helyezkedik el. Ez befolyásolja a többi, szomszédos elemtől való távolságot. A margón belül a szegély (border) van. Ez rendelkezik szín, vastagság, vonaltípus tulajdonságokkal.
A legbelső doboz, és a szegély közötti kitöltési hely, padding van. Működése a margóéval megegyező.
És végül az egész dobozmodell magja a tartalom (content).

1. Margók



Mint a fent említettem a CSS dobozmodell alapján, a margók e modell legkülső részén vannak.
Befolyásolják az adott elem távolságát annak szomszédos elemeitől.
A margóknak nincs semmilyen látszólagos tulajdonságuk, értékük. Csak méretüket határozhatjuk meg.
Választható tulajdonságaik:

margin-top - a felső margót -,
margin-bottom - az alsó margót -,
margin-left - a bal margót állítja be
margin-right - a jobb margót méretezhetjük
margin - összefoglaló, rövid tulajdonság. Nem kell külön-külön megadnunk a margó részeit, hanem egyszerre maghatározhatjuk értékeiket egy és négy között. Az első a felső margót-, a második a jobb margót-, a harmadik az alsót, a negyedik értéke pedig a bal margót szabályozza.

Értékeik:

konkrét számmal (pl.: 12px)
százalékos formában
illetve auto, ami a böngésző beállítását használja

#valami{
      margin: 10px 11px 12px 13px;
}

A valami azonosítójú eleme felső margója 10px, jobb margója 11px, alsó 12px, és a feslő margója 13px.
Százalékos forma:
#valami1.1{
      margin: 110% 100% 40% 55%;
}

A felső margó 110 százalékos, a jobb 100 százalékos, az alsó 40, a bal margó 55 százalékos.

2. Szegélyek



A szegélyek (border) a margón belül helyezkednek el. Számos látszólagos tulajdonságuk van.

1. Szélességüket a:

border-top-width - a felső keret szélessége
border-bottom-width - az alsó keret
border-left-width - bal keret
border-right-width - jobb keret szélessége
border-width - összefoglaló tulajdonság. Használata a margóknál bemutatott módon történik.

Értéküket megadhatjuk számmal (22px), vagy angol szavakkal.

thin - vékony keret
thick - vastag keret
medium - közepes keret

Ha konkrét szélességet akarunk alkalmazni, ajánlott a számmal való megadás, mert a fenti három érték értelmezése böngészőfüggő.

2. Stílusukat a border-style: tulajdonsággal állíthatjuk be. Itt is, mint az előzőekben lehetőség van a keretek részenkénti beállítására.
Tehát elérhető a border-top-style, border-bottom-style, border-left-style, és a border-right-style is.
Számos értékkel rendelkezik ez a tulajdonság.
Nézzünk párat.

none, hidden: nincs szegély
dotted: pontozott vonal
dashed: szaggatott vonal
solid: folyamatos vonal
double: két folyamatos vonal (a szegélyszélességébe beletartozik a két vonal és az üres tér is)
groove: a keret bemélyed
ridge: a keret kiemelkedik

3. A szegélyek színeit a border-color: segítségével változtathatjuk meg. Ebben az esetben külön beállíthatjuk az egyes szegélyek részeit, a top, bottom, left, és right kiegészítés használatával.
Értéke szinte mindig valamilyen hexadecimiális színkód, esetleg angol színnév. Létezik transparent érték is, ami átlátszóvá teszi a szegélyt méretének megtartásával, de nem minden böngésző támogatja.

A szegélytulajdonságoknál lehetőségünk van a fent említett három tulajdonság összevonására.
#valami2{
      border-top: 10px dotted #000000;
}

Előbb a keret szélességét, majd a stílusát és végül a színét határoztuk meg. Alkalmazhatjuk a keret összes részére egyszerre is. Ekkor a border tulajdonságot használjuk.

3. Kitöltés



A padding tulajdonság a tartalom és a szegély közti üres részt határozza meg. Szintén több részre osztható e tulajdonság is.

padding-top - a felső rész szélessége
padding-bottom - az alsó rész
padding-left - bal üres rész
padding-right - jobb rész szélessége

Értékei megegyeznek a margó értékeivel.

konkrét szám (pl.: 10px)
százalékos forma
auto, ami a böngésző beállítását használja

Itt is össze lehet vonni a különböző tulajdonságokat:
#valami5{
      padding: 10px 11px 12px 13px;
}

Az első érték a felső, a második a jobb, utána az alsó és végül a bal üres hely szélessége.
* Minden további kérdéseddel fordulj az anyag írójához.

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!