CSS - intermediate - Lecke száma 5
Távolságok és egyszerű keretek
Ebben a leckében megtanulunk keretet adni szöveghez, képhez. Egyelőre csak a border tulajdonságot használjuk erre a célra. Megtanuljuk ugyanakkor eltávolítani a bekeretezett (vagy éppen keret nélküli) tartalmat a kerettől illetve az egyéb tartalmaktól.
Új CSS kulcsszavak ebben a leckében:
border – ez a kulcsszó alkalmas egy HTML címke által bezárt rész vagy kép keretezésére. Egyszerre adhatjuk meg a keret vastagságát, típusát és színét. Ezekre külön is létezik CSS tulajdonság.
margin – ezzel a tulajdonsággal egy HTML elem távolságát adhatjuk meg a szomszédaitól. Így eltudunk eltávolítani szöveget vagy képet a böngésző szélétől vagy egymástól. Ha egy értéket adunk meg mind négy irányba alkalmazza, de külön is megadhatóak a távolságot: margin-top, margin-right, margin-bottom, margin-left.
padding – ez a tulajdonsággal adhatjuk meg a tartalom távolságát a keretétől. Ebben az esetben is külön állítható a távolság mind a négy irányban: padding-top, padding-right, padding-bottom, padding-left.
Példa:
A fenti példában a bekezdésre 5 pixel széles, összefüggő, kék keret van alkalmazva a border tulajdonság segítségével.
A kerettől a böngésző széle 20 pixel távolságra van, a cím is. Ezt a margin tulajdonsággal érjük el.
A keret és a bekezdés szövege között van 10 pixel távolság állítva a padding tulajdonság állítva.
Kiegészítések:
Ha viszont margin:10px 20px; leírással találkozunk, a 10pixel a felső és alsó, a 20 pixel a jobb és bal távolságot jelenti.
Új CSS kulcsszavak ebben a leckében:
border – ez a kulcsszó alkalmas egy HTML címke által bezárt rész vagy kép keretezésére. Egyszerre adhatjuk meg a keret vastagságát, típusát és színét. Ezekre külön is létezik CSS tulajdonság.
margin – ezzel a tulajdonsággal egy HTML elem távolságát adhatjuk meg a szomszédaitól. Így eltudunk eltávolítani szöveget vagy képet a böngésző szélétől vagy egymástól. Ha egy értéket adunk meg mind négy irányba alkalmazza, de külön is megadhatóak a távolságot: margin-top, margin-right, margin-bottom, margin-left.
padding – ez a tulajdonsággal adhatjuk meg a tartalom távolságát a keretétől. Ebben az esetben is külön állítható a távolság mind a négy irányban: padding-top, padding-right, padding-bottom, padding-left.
Példa:
A fenti példában a bekezdésre 5 pixel széles, összefüggő, kék keret van alkalmazva a border tulajdonság segítségével.
A kerettől a böngésző széle 20 pixel távolságra van, a cím is. Ezt a margin tulajdonsággal érjük el.
A keret és a bekezdés szövege között van 10 pixel távolság állítva a padding tulajdonság állítva.
Kiegészítések:
- A keret típusát föltétlenül meg kell adni a border tulajdonságnak, hogy a keret megjelenjen. Ha a border: 5px solid blue; beállításból a solid kimarad nem lesz keret.
- A padding és margin is megadható más mértékegységgel is a pixelen kívül: kísérletezhetünk százalékkal, centiméterrel, ponttal is a pixelen kívül.
- Mind a padding, mind a margin esetében megadható a négy irányban a távolság egy sorban.
- Például a padding: 0px 5px 10px 15px; beállítás azt jelenti, hogy felül 0px távolságra van, a jobb oldalon a távolság 5px, alul 10px és baloldalon 15px.
- Megadhatunk három vagy két értéket is. Ezeket is tudja a értelmezni a böngésző:
margin: felső jobb+bal alsó;
margin: felső+alsó jobb+bal;
Például a margin: 10px 15px 20px; formában a 10 pixel távolság a felső részre vonatkozik, a 15 pixel a bal és jobb oldali távolságot jelenti, a 20 pixel az alsó résztől való távolságot jelenti.Ha viszont margin:10px 20px; leírással találkozunk, a 10pixel a felső és alsó, a 20 pixel a jobb és bal távolságot jelenti.
Feladatok
1. Adj hozzá egy osztálynevet a képhez a aspect.html fájlban, és modosítsd astyle.css –ben megadottak alapján , 2px folyamatos szegéllyel,az általad kiválasztott színre . A szegély színe akkor változik, amikor a kurzort fölé helyezzük.
Tekintsd meg az eredményt
2. Alkalmazz minden bekezdésre egy 1px-es bal oldali szegélyt, melynek színe az Ön által kiválasztott lesz, bal oldalon 20px távolság a szegély és a szöveg között, és 10px a böngésző margója és a határ között.
Tekintsd meg az eredményt
3. Az index html-be, a megjelölt képhez ad hozzá a következő modosításokat index.html : a képnek és a feliratnak fél centiméteres távolságban kell lennie a böngésző margójától balra, a feliratnak pedig, a képtől 0,25 centiméter távolságra kell lennie.
Tekintsd meg az eredményt
Kérdőív
1. Mi változik egy képen, ha hozzáadjuk a következő beállítást?
margin: 0px 10px;
margin: 0px 10px;
2. Melyik CSS formázás rossz?
3. A következő leírások közül melyik nem eredményez látható határt?
4. Ha az alábbi beállításokat alkalmazzuk egy képre, akkor milyen távolságra lesz a környező tartalomtól?
padding: 10px;
margin: 5px;
border: 2px solid;
