3. modul · CSS alapok · 18. lecke
A CSS-alapok modul záró leckéje. Megtanulod átírni egy elem viselkedését — blokkból soron belülit, soron belüliből dobozt, vagy eltüntetni —, áttekintjük az összes fontos mértékegységet, és háttérképet teszünk a dobozok mögé.
display tulajdonsággal.inline-block értékkel.
A 11. leckében megtanultuk, hogy vannak blokkszintű és soron belüli
elemek, és azt is jeleztük: ez csak alapértelmezés. Az elem viselkedését a
display tulajdonság határozza meg — és ezt bármikor átállíthatod.
A display csak a megjelenést változtatja meg, a
jelentést nem. Egy blokkszintűvé tett link továbbra is link; egy vízszintesen megjelenő
lista továbbra is lista. Ezért mindig a tartalomhoz illő HTML-elemet választod, és
a megjelenést utána állítod be CSS-ből.
| Érték | Alapból ilyen | Viselkedés |
|---|---|---|
block | div, p, h1, ul, form | Új sorban kezdődik, kitölti a szélességet, minden méret működik. |
inline | a, span, strong, em | A sorban marad, a felső-alsó margó és a width hatástalan. |
inline-block | button, input, select | A sorban marad, de minden méret működik rajta. |
none | head, script | Egyáltalán nem jelenik meg, és helyet sem foglal. |
list-item | li | Blokk, plusz jelölő (pont vagy szám). |
flex, grid | — | Elrendezési módok — a 20. és a 21. leckében. |
Klasszikus eset: egy függőleges menü, ahol a linkeknek a teljes szélességükben kattinthatónak kell lenniük, nem csak a feliratukon.
<p><strong>inline (alapból):</strong></p> <div class="menu"> <a href="#">Kezdőlap</a> <a href="#">Receptek</a> </div> <p><strong>block:</strong></p> <div class="menu blokk"> <a href="#">Kezdőlap</a> <a href="#">Receptek</a> </div>
.menu {
max-width: 220px;
border: 1px solid #d1d5db;
}
.menu a {
padding: 8px 12px;
color: #be123c;
text-decoration: none;
}
.menu a:hover {
background-color: #fce7f3;
}
.blokk a {
display: block;
}
padding is rendesen széttolja őket.
És fordítva: a listaelemek alapból egymás alatt vannak. display: inline
értékkel egy sorba kerülnek.
<p>Címkék:</p> <ul class="cimkek"> <li>leves</li> <li>vegetáriánus</li> <li>gyors</li> <li>olcsó</li> </ul>
.cimkek {
padding-left: 0;
}
.cimkek li {
display: inline;
background-color: #fce7f3;
color: #9f1239;
padding: 3px 10px;
border-radius: 999px;
}
list-item
módban vannak — a pontok is eltűntek. A HTML-ben ez továbbra is egy négyelemű lista.
A 17. leckében láttuk, hogy soron belüli elemen a width és a felső-alsó
margó nem működik. Az inline-block érték ezt oldja meg: az elem
a sorban marad, de teljes értékű dobozként viselkedik.
<p>Szöveg <span class="d i">inline</span> szöveg.</p> <p>Szöveg <span class="d ib">inline-block</span> szöveg.</p> <p>Szöveg <span class="d b">block</span> szöveg.</p>
.d {
width: 120px;
margin: 12px 6px;
padding: 6px;
background-color: #fce7f3;
border: 2px solid #be123c;
}
.i { display: inline; }
.ib { display: inline-block; }
.b { display: block; }
A 17. lecke profilkártyáján már láttad: a „Kapcsolat" gomb egy link volt
display: inline-block értékkel. Most nézzük meg, miért.
<p> <a class="gomb" href="#">Regisztráció</a> <a class="gomb masodlagos" href="#">Bővebben</a> </p> <p>A gombok alatti szöveg nem csúszik rájuk.</p>
.gomb {
display: inline-block;
padding: 0.6em 1.3em;
margin-bottom: 8px;
background-color: #be123c;
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
}
.gomb.masodlagos {
background-color: white;
color: #be123c;
border: 2px solid #be123c;
}
inline-block érték nélkül a felső-alsó belső térköz rálógna
az alatta lévő szövegre, és az alsó margó sem működne. Így a gombok rendes dobozok, mégis egymás
mellett maradnak.
Feltűnhetett, hogy a két gomb között van egy kis hely, pedig nem adtunk meg margót.
Ez a HTML-ben a két <a> közötti sortörés: soron belüli
módban egy szóközként jelenik meg (4. lecke, szóköz-összevonás). Két gomb között ez éppen jól jön —
de ha pontos illesztés kell, zavaró. A Flexbox (20. lecke) ezt a problémát nem ismeri.
Egy elemet háromféleképpen tüntethetsz el, és a három nem ugyanaz:
<p>display: none</p> <div class="sor"> <span class="d">1</span> <span class="d none">2</span> <span class="d">3</span> </div> <p>visibility: hidden</p> <div class="sor"> <span class="d">1</span> <span class="d hidden">2</span> <span class="d">3</span> </div> <p>opacity: 0</p> <div class="sor"> <span class="d">1</span> <span class="d atlatszo">2</span> <span class="d">3</span> </div>
p { margin: 8px 0 4px; font-size: 13px; }
.d {
display: inline-block;
width: 50px;
padding: 8px 0;
text-align: center;
background-color: #be123c;
color: white;
}
.none { display: none; }
.hidden { visibility: hidden; }
.atlatszo { opacity: 0; }
display: none | visibility: hidden | opacity: 0 | |
|---|---|---|---|
| Látszik? | nem | nem | nem |
| Helyet foglal? | nem | igen | igen |
| Rá lehet kattintani? | nem | nem | igen (!) |
| Felolvassa a képernyőolvasó? | nem | nem | igen |
| Mire jó? | Tényleg el kell tüntetni (például egy lenyíló menü zárt állapota) | A helyének meg kell maradnia | Áttűnéses animációk kezdő- és végállapota (23. lecke) |
Amit CSS-sel rejtesz el, az ott van a HTML-ben — bárki megnézheti a forrásban vagy F12-vel, és egyetlen kattintással láthatóvá teheti. Jelszót, személyes adatot, megoldókulcsot soha ne „rejts el" így.
Az 5. leckében megígértük, hogy a listák jelölőit CSS-ből is át lehet alakítani. A
list-style-type tulajdonság erre való.
<ul class="kor"><li>circle</li><li>circle</li></ul> <ul class="negyzet"><li>square</li><li>square</li></ul> <ol class="romai"><li>upper-roman</li><li>upper-roman</li></ol> <ol class="betu"><li>lower-alpha</li><li>lower-alpha</li></ol> <ul class="nincs"><li>none</li><li>none</li></ul>
ul, ol { margin: 0 0 8px; }
.kor { list-style-type: circle; }
.negyzet { list-style-type: square; }
.romai { list-style-type: upper-roman; }
.betu { list-style-type: lower-alpha; }
.nincs { list-style-type: none; }
li::marker {
color: #be123c;
}
::marker pszeudo-elemből jön. Az utolsó
listának nincs jelölője, de a behúzás megmaradt — ezt a lista saját
belső térköze okozza.
Ha egy listából menüt, címkesort vagy kártyasort építesz, szinte mindig ezzel kezdesz:
.menu {
list-style-type: none; /* nincs pont */
padding-left: 0; /* nincs behúzás */
margin: 0; /* nincs külső térköz */
}
A pont eltűnik, de a HTML-ben — és a képernyőolvasónak — továbbra is lista marad.
<ul class="menu"> <li><a href="#">Kezdőlap</a></li> <li><a href="#">Receptek</a></li> <li><a href="#">Rólam</a></li> <li><a href="#">Kapcsolat</a></li> </ul>
.menu {
list-style-type: none;
padding: 0;
margin: 0;
background-color: #be123c;
}
.menu li {
display: inline-block;
}
.menu a {
display: block;
padding: 12px 13px;
color: white;
text-decoration: none;
}
.menu a:hover {
background-color: #9f1239;
}
inline-block rése — ez a módszer régen általános
volt, ma a Flexbox (20. lecke) a korszerű megoldás.
Az eddigi leckékben több mértékegységgel is találkoztál. Itt az összes, egy helyen. A legfontosabb kérdés mindegyiknél: mihez viszonyít?
| Egység | Mihez viszonyít? | Tipikus használat |
|---|---|---|
px | Semmihez — rögzített | Keretvastagság, árnyék, apró részletek |
rem | A html elem betűméretéhez | Betűméret, egységes térközök (16. lecke) |
em | Az elem saját (betűméretnél a szülő) betűméretéhez | Szöveghez igazodó térköz, pl. gomb belső térköze |
% | A szülő méretéhez | Rugalmas szélesség, képek (7. pont) |
vw | A böngészőablak szélességének 1%-a | Teljes szélességű sávok (8. pont) |
vh | A böngészőablak magasságának 1%-a | Teljes képernyős fejléc (8. pont) |
ch | A „0" karakter szélessége az adott betűvel | Szöveghasáb szélessége, pl. max-width: 65ch |
fr | A szabad hely egy része | Csak Grid-elrendezésben (21. lecke) |
A px abszolút: mindig ugyanakkora. Az összes többi
relatív: valami máshoz igazodik, ezért ha az a valami változik — nagyobb betű,
keskenyebb ablak —, velük együtt változik. A rugalmas, bármilyen képernyőn jól működő oldal
titka a relatív egységek (22. lecke).
A margin: 0 ugyanazt jelenti, mint a margin: 0px
vagy a margin: 0rem — nulla az nulla. Minden más számnál viszont
kötelező az egység (kivétel a 16. leckében látott line-height).
A kényelmesen olvasható szöveg soronként nagyjából 45–75 karakter. Ennél hosszabb sornál
a szem nehezen találja meg a következő sor elejét. A max-width: 65ch érték
pontosan ezt adja — és a betűmérettel együtt nő.
A százalék a szülő elem méretéhez viszonyít. A width: 50%
tehát nem a képernyő felét jelenti, hanem annak a doboznak a felét, amelyikben az elem van.
<div class="szulo szeles">
<div class="gyerek">50%</div>
</div>
<div class="szulo keskeny">
<div class="gyerek">50%</div>
</div>
<img class="rugalmas" src="kepek/taj.jpg"
alt="Naplemente" width="800" height="500">
.szulo {
border: 2px dashed #9ca3af;
margin-bottom: 10px;
}
.szeles { width: 100%; }
.keskeny { width: 200px; }
.gyerek {
width: 50%;
background-color: #be123c;
color: white;
padding: 6px 0;
text-align: center;
}
.rugalmas {
max-width: 100%;
height: auto;
}
max-width: 100% érték nem engedi szélesebbre, mint a szülője.
img {
max-width: 100%;
height: auto;
}
Ez a két sor szinte minden stíluslapban ott van. A kép sosem lesz szélesebb a helyénél, és a
height: auto érték megtartja az arányát — akkor is, ha a HTML-ben ott a
width és a height attribútum (7. lecke).
<div class="szulo auto"> <div class="gyerek">height: 50%</div> <p>A szülőnek nincs magassága.</p> </div> <div class="szulo rogzitett"> <div class="gyerek">height: 50%</div> </div>
.szulo {
border: 2px dashed #9ca3af;
margin-bottom: 10px;
}
.rogzitett { height: 120px; }
.gyerek {
height: 50%;
background-color: #be123c;
color: white;
padding: 0 8px;
}
p { margin: 4px 8px; font-size: 13px; }
height: 50% hatástalan: a szülő magassága
auto, vagyis a tartalmától függ — a böngésző nem tudja, minek számolja az
50%-át. A másodiknál a szülő 120 px magas, így a gyerek pontosan 60 px.
A vw és a vh nem a szülőhöz, hanem a
böngészőablak látható részéhez (angolul viewport) viszonyít.
100vh = az ablak teljes magassága, 50vw = az
ablak szélességének fele.
<div class="nyito"> <h1>Anna konyhája</h1> <p>Görgess lejjebb ↓</p> </div> <p class="tovabb"> Itt kezdődik az oldal tartalma — a fejléc pontosan egy képernyőnyi magas volt. </p>
body { margin: 0; }
.nyito {
min-height: 100vh;
background-color: #be123c;
color: white;
text-align: center;
padding-top: 25vh;
box-sizing: border-box;
}
.nyito h1 { margin: 0; }
.tovabb { padding: 16px; }
A width: 100vw érték Windowson a függőleges görgetősáv szélességét is
tartalmazza. Ha az oldal görgethető, a doboz pár képponttal szélesebb lesz a látható résznél,
és megjelenik egy bosszantó vízszintes görgetősáv. Teljes szélességű blokkhoz a
width: 100% — vagy egyszerűen semmi, hiszen a blokk alapból kitölti a helyet.
A 17. lecke szabálya itt is érvényes: egy alacsony, fekvő telefonon a fejléc tartalma talán nem fér
bele 100vh magasságba. A min-height érték mellett ilyenkor a fejléc
egyszerűen megnő, a height mellett a tartalom kilógna.
A 7. leckében az <img> elemmel tettünk képet az oldalra. Van egy másik
mód is: háttérképként, CSS-ből. A kettő nem cserélhető fel:
<img> elem | Háttérkép (CSS) |
|---|---|
| A kép tartalom: termékfotó, profilkép, ábra | A kép díszítés: textúra, hangulatkép egy felirat mögött |
Van alt szövege, a képernyőolvasó felolvassa | Nincs alt — a képernyőolvasó nem is tud róla |
| Kinyomtatódik | Nyomtatáskor alapból elmarad |
„Ha a kép eltűnne, hiányozna az oldalról egy információ?" Igen → <img>
elem, alt szöveggel. Nem, csak szegényebb lenne a látvány → háttérkép.
| Tulajdonság | Gyakori értékek | Mit csinál? |
|---|---|---|
background-image | url("kepek/taj.jpg") | Maga a kép |
background-size | cover, contain, 200px | Mekkora legyen |
background-position | center, top, 50% 30% | Melyik része látsszon |
background-repeat | no-repeat, repeat | Ismétlődjön-e (alapból igen!) |
<div class="doboz alap">alapértelmezés (ismétlődik)</div> <div class="doboz cover">cover</div> <div class="doboz contain">contain</div>
.doboz {
height: 110px;
margin-bottom: 10px;
border: 2px solid #be123c;
background-image: url("kepek/taj.jpg");
background-color: #fce7f3;
color: white;
font-weight: bold;
padding: 6px 10px;
}
.cover {
background-size: cover;
background-position: center;
}
.contain {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Ez az egyik leggyakoribb háttérkép-hiba. Az url() útvonal
a CSS-fájlhoz viszonyít, nem a HTML-hez. Ha a stíluslap egy css
mappában van:
weboldal/
├── index.html
├── css/
│ └── style.css ← itt írod az url()-t
└── kepek/
└── taj.jpg
…akkor a helyes útvonal url("../kepek/taj.jpg") — előbb ki kell lépni a
css mappából (6. lecke). A HTML-ből nézve működne a
kepek/taj.jpg, a CSS-ből nézve nem.
A háttérképes fejléc gyakori elem, de van egy problémája: a szöveg a kép világos részein olvashatatlan lehet. A megoldás egy áttetsző sötét réteg a kép és a szöveg között.
<div class="fejlec"> <h1>Túrázás a Bükkben</h1> <p>Három nap, hatvan kilométer, egy naplemente.</p> </div>
body {
margin: 0;
font-family: "Segoe UI", Arial, sans-serif;
}
.fejlec {
padding: 60px 20px;
text-align: center;
color: white;
background-color: #3b1f3a;
background-image:
linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.45)),
url("kepek/taj.jpg");
background-size: cover;
background-position: center;
}
.fejlec h1 {
margin: 0 0 8px;
font-size: 2rem;
}
background-image tulajdonságnak két rétege van vesszővel
elválasztva: felül egy 45%-ban fedő fekete réteg (egy egyszínű színátmenet), alatta
a fénykép. A background-color érték a tartalék: ha a kép nem töltődik be,
a fehér szöveg akkor is olvasható marad a sötét háttéren.
Ha háttérképre fehér szöveget teszel, a background-color legyen sötét. Amíg a
kép betöltődik — vagy ha nem töltődik be —, a látogató különben fehér szöveget látna fehér háttéren.
A színátmenet a CSS szemében kép — ezért a background-image
tulajdonságba kerül, nem a background-color tulajdonságba. Letöltendő fájl
viszont nincs: a böngésző rajzolja.
<div class="d a">fentről lefelé</div> <div class="d b">balról jobbra</div> <div class="d c">átlósan, három színnel</div> <div class="d d-kor">kör alakú</div>
.d {
padding: 18px 12px;
margin-bottom: 8px;
color: white;
font-weight: bold;
border-radius: 8px;
}
.a {
background-image: linear-gradient(#fb7185, #9f1239);
}
.b {
background-image: linear-gradient(to right, #be123c, #7e22ce);
}
.c {
background-image:
linear-gradient(135deg, #f43f5e, #be123c 55%, #86198f);
}
.d-kor {
background-image: radial-gradient(#fb7185, #4c0519);
}
to right) vagy fokot (135deg),
a színek mellé pedig százalékot, hogy hol legyen az adott szín. A tananyag fejléceinek bíbor–lila
átmenete pontosan így készül.
A színátmenet a díszítés eszköze. Szöveg mögé csak olyat tegyél, ahol a szöveg mindkét végponton olvasható — a 16. lecke kontrasztszabálya itt a legvilágosabb és a legsötétebb pontra is vonatkozik.
| Hiba | Mi történik, és mi a megoldás? |
|---|---|
width egy linken — nem működik |
A link soron belüli elem. display: inline-block vagy block érték kell. |
| Listából menü, de ott maradt a pont és a behúzás | list-style-type: none; padding-left: 0; |
Elrejtés opacity: 0 értékkel |
Az elem helyet foglal, és kattintható marad — láthatatlan gombra kattinthat a látogató. Eltüntetéshez display: none. |
| Érzékeny adat „elrejtése" CSS-sel | Ott marad a HTML-ben, bárki megnézheti. Ilyet ne küldj el a böngészőnek. |
height: 50% nem működik |
A szülőnek nincs rögzített magassága. A magasság-százalékhoz a szülő magasságát is meg kell adni. |
width: 100vw után vízszintes görgetősáv |
A vw a görgetősávot is beleszámolja. Használj width: 100% értéket. |
| A háttérkép nem jelenik meg | Az url() útvonal a CSS-fájlhoz képest értendő — gyakran hiányzik a ../. F12 → Console mutatja a 404-et. |
| A háttérkép kicsi, és ismétlődik | Hiányzik a background-size: cover vagy a background-repeat: no-repeat. |
| Tartalmi kép háttérképként | Nincs alt szöveg, a képernyőolvasó nem tud róla. Tartalomhoz <img> elem. |
| Fehér szöveg háttérképen, háttérszín nélkül | Amíg a kép nem töltődik be, olvashatatlan. Adj sötét background-color értéket is. |
Színátmenet a background-color tulajdonságban |
Érvénytelen — a színátmenet kép. A helye: background-image. |
Előbb válaszolj magadban, csak utána nézd meg a megoldást.
1. Egy linknek gombként kellene kinéznie belső térközzel és alsó margóval, de a sorban kell maradnia. Melyik display érték kell?
inline-block. A sorban marad, mint egy soron belüli elem, de a méretek és a felső-alsó térközök is működnek rajta, mint egy blokkon.
2. Mi a különbség a display: none és a visibility: hidden között?
Mindkettő eltünteti az elemet, de a display: none mellett a helyét sem foglalja el — a szomszédok összecsúsznak. A visibility: hidden mellett üres hely marad utána.
3. Miért veszélyes egy gombot opacity: 0 értékkel elrejteni?
Mert láthatatlan lesz, de kattintható marad és helyet foglal — a látogató véletlenül rákattinthat egy gombra, amit nem is lát. A képernyőolvasó is felolvassa. Eltüntetéshez display: none kell.
4. Egy 400 px széles dobozban lévő elemre width: 50% szabály vonatkozik. Milyen széles lesz, ha a böngészőablak 1200 px széles?
200 px. A százalék a szülőhöz viszonyít, nem az ablakhoz — az ablak szélessége itt nem számít.
5. Egy teljes képernyős nyitó fejlécet szeretnél. height: 100%, height: 100vh vagy min-height: 100vh?
min-height: 100vh. A 100% a szülőhöz viszonyítana (aminek általában nincs rögzített magassága), a vh a képernyőhöz. A min-height pedig megengedi, hogy kis képernyőn nagyobbra nőjön, ha a tartalom nem fér el.
6. A stíluslapod a css/style.css, a képed a kepek/hatter.jpg fájl. Mit írsz az url() zárójelébe?
url("../kepek/hatter.jpg"). Az útvonal a CSS-fájlhoz viszonyít, tehát előbb ki kell lépni a css mappából.
7. Mi a különbség a background-size: cover és a contain érték között?
A cover teljesen kitölti a dobozt, és a kilógó részeket levágja. A contain az egész képet megmutatja, de üres sáv maradhat mellette.
8. Egy termék fotója kerüljön a termékoldalra. Háttérkép vagy <img> elem?
<img> elem, alt szöveggel. A termékfotó tartalom: ha eltűnne, hiányozna egy információ. Háttérkép csak díszítésre való.
display tulajdonság az elem viselkedését állítja — a jelentését nem.block: új sor, teljes szélesség · inline: a sorban marad, a szélesség és a felső-alsó margó hatástalan · inline-block: a sorban marad, és minden méret működik.display: inline-block. Teljes szélességben kattintható menüpont: display: block.display: none (helyet sem foglal) · visibility: hidden (hely marad) · opacity: 0 (hely marad, kattintható!). A rejtett tartalom nem titok.list-style-type: none; padding-left: 0; — a HTML-ben lista marad.px abszolút · rem, em, %, vw, vh, ch relatív. A rugalmas oldal kulcsa a relatív egység.% a szülőhöz viszonyít. Magasság-százalékhoz a szülőnek is kell magasság.img { max-width: 100%; height: auto; }vw/vh = a böngészőablak 1%-a. Teljes képernyős blokk: min-height: 100vh. A 100vw értéket kerüld.<img> elem tartalomra. Szinte mindig: background-size: cover és background-position: center.url() útvonal a CSS-fájlhoz viszonyít.background-color tartaléknak.background-image: linear-gradient(…).Ismered a szabályok felépítését, a kijelölőket, a kaszkádot, a színeket, a betűket, a dobozmodellt és a megjelenési módokat. Egyetlen dolog hiányzik még: az, hogy a dobozokat egymás mellé, rácsba, rögzített helyre tudd tenni. Erről szól majd a következő modul — az elrendezés.