A CSS-ben az elemeket általában téglalap alakú dobozként vagy sávokként kezelik. A dobozok leírásához a következő - nektek már biztosan ismert - tulajdonságokat használják:
• width – az elem szélessége
• height – az elem magassága
• left – bal távolság
• right – jobb távolság
• top – felső távolság
• bottom – alsó távolság
• margin – külső margó
• border – az elem körüli keret
• padding – belső margó, azaz a kerettől az elem tartalmáig mért távolság
Ezeket a tulajdonságokat már bemutattuk.
Az elemek összszélessége az egyes adatok szélességéből adódik össze. (Ugyanez vonatkozik a magasságra is).
Példa:
div#box {
width: 100px;
padding: 20px; /* 20px balra és jobbra /
border: 2px solid; / 2px balra és jobbra /
margin: 0 30px; / 30px balra és jobbra */
}Milyen szélességgel rendelkezik ez az div-terület? Nézzük meg az egyes értékeket:
• 100 képpont
• 2-szer 20 képpont
• 2-szer 2 képpont
• 2-szer 30 képpont
Ez összesen 204 képpontos elem szélességet eredményez.
Az elemek szélességét és magasságát a width és height határozzák meg. Ha ezek az adatok nem szerepelnek explicit módon a stíluslapban, akkor a következők érvényesek:
• Ha hiányzik a width, akkor a doboz annyira széles lesz, mint a körülvett elem.
• Ha hiányzik a height, akkor az elem annyira magas lesz, mint a tartalma.
Példa:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* 2px balra és jobbra */
margin: 0 30px; /* 30px balra és jobbra */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="kocka">PSD-Tutorials.de</div>
</body>
</html>
A böngészőben ez így néz ki:
A div-elem fölérendelt eleme a body. Ennek megfelelően az elem valóban olyan széles lesz, mint a body-elem. A magasság tekintetében azonban a tartalomhoz igazodik.
Minden nullára
Minden böngésző rendelkezik beépített stíluslappal. Ezekben a stíluslapokban néhány alapérték van meghatározva. Ez például a padding és a margin esetében is érvényes. Sajnos ezek az alapértékek eltérőek lehetnek a különböző böngészőkben. Ez a tény nehezíti meg, hogy az egyes böngészőkben azonos eredményeket érjünk el például a dobozmodell kapcsán. Ezért ajánlott az alapértékeket, amelyeket a böngészők előírnak, nullára állítani. Ezt így tehetitek meg:
* { padding: 0; margin: 0; }
Fűzzétek be ezt a sort a stíluslapotok elejére. Így már elkezdhetitek a dobozokat a kívánt helyre elhelyezni.
Doboztípusok
Annak módja, ahogyan egy elem végül megjelenik, és ahogyan hatást gyakorol más elemekre, az az elem típusától függ. Valójában a CSS specifikáció megkülönböztet a blokktípusú és az inline elemek között. (Vannak más típusok is, amelyeket ebben a pontban nem veszünk figyelembe, mivel alárendelt szerepet játszanak).
A blokkelemek mindig új sort hoznak létre. Az ezeket követő elemek szintén új sorban kezdődnek. Tipikus blokkelemek például a p, div, h1, ul stb. Ezekre az elemekre vonatkoznak a fent felsorolt tulajdonságok: külső margó, belső margó, magasság, szélesség és keret.
<h1>Digitális festés & Matte festés: A kép felépítésének meghatározása</h1> <p>Modul 2 - Rész 2: Egy kép mindig egész. Azonban mindig fontolóra kell venni, hogy hova tekint először a néző.</p>
A böngészőben látható eredmények azt mutatják, hogy a h1 és a p kitüntetett saját sorokat hoznak létre.
Az inline elemek viszont nem hoznak létre saját bekezdést, hanem inkább a normál szöveg folyamatában jelennek meg. Tipikus inline elemek például a span, em, strong, img, br stb. Az inline elemekre nincs érvényesek függőleges külső margók és szélesség- és magasságértékek.
<h1><em>Digitális festés & Matte festés</em>: A kép felépítésének meghatározása</h1> <p>Modul 2 - Rész két: <strong>Egy kép mindig egész</strong>. Azonban mindig fontolóra kell venni, hogy hova tekint először a néző.</p>
És itt az eredmény:
Most azokból az elemekből, amik valójában blokkelemek, blokkokká tehetünk.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digitális festészet & Matrica festészet</h1>
<p>Modul 2 - 2. rész: <em>Egy kép mindig egy egész</em>. Mindig el kell gondolkodnunk, hogy merre kell néznie az első pillantásra a nézőnek.</p>
</body>
</html>Nézzétek meg az eredményt a böngészőben.
A h1 címsor háttérszíne jelzi, hogy az elem az teljes szélességen elfoglal. Az szélesség az őt tartalmazó body-elemre vonatkozik.
Most jön a display tulajdonság játéka.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digitális festészet & Matrica festészet</h1>
<p>Modul 2 - 2. rész: <em>Egy kép mindig egy egész</em>. Mindig el kell gondolkodnunk, hogy merre kell néznie az első pillantásra a nézőnek.</p>
</body>
</html>
A display: inline hatására az elem szélessége megváltozik.
Valójában most az elem szélessége az elérhető tartalmakhoz igazodik. Itt egy áttekintés arról, hogy milyen értékeket lehet még hozzárendelni a display tulajdonsághoz:
• none – nincs megjelenítés
• block – az elem blokkelemként jelenik meg, tehát új sort hoz létre.
• inline – az elem inline-elemként jelenik meg, tehát a futó szövegben látszik.
• inline-block – külsőleg blokkként jelenik meg, magassággal, szélességgel és külső margóval rendelkezhet. Minden elem azonban a futó szövegben marad. Így ez egy blokk- és egy inline-elem kombinációja.
• list-item – az elem blokkelemként jelenik meg. Előtte azonban felsorolójelet szúr be.
• run-in – a tartalomtól függően blokk- vagy inline-elemet hoz létre.
• table – mint az ismert table-elem HTML-ben.
• inline-table – mint az HTML table-elem, de inline-ban.
• table-row – az elemek egymás mellett vannak elrendezve. Mint az HTML tr-elem.
• table-cell – egy táblázatcella elemet képvisel, mint a th és td HTML-elemek.
• table-row-group – egy elemcsoportot tartalmaz egymás mellett elrendezett gyermek-elemekkel. Mint a HTML tbody-elem.
• table-header-group – egy elemcsoportot tartalmaz egymás mellett elrendezett gyermek-elemekkel. Mint a HTML thead-elem.
• table-footer-group – egy elemcsoportot tartalmaz egymás mellett elrendezett gyermek-elemekkel. Mint a HTML tfoot-elem.
• table-column – a következő sorok tulajdonságait írja le. A table-column mint az HTML col-elem.
• table-column-group – ez az elem egy olyan elemcsoportot tartalmaz, amelyen keresztül egy oszlop elemeinek tulajdonságait lehet leírni. Mint az HTML colgroup-elem.
• table-caption – ez határozza meg a táblázat feliratát. A tulajdonság az HTML caption-elemre hasonlít.
Tényleg a CSS számos különféle elem típusra különféle megjelenítési lehetőségeket kínál. Ezek kulcsszerepet játszanak az elemek elhelyezésével kapcsolatban. Erről többet a következő tutoriálisokban.
