Tamás Ferenc: Weblapkészítés HTML alapokon – 9. rész
CSS alapismeretek 4. rész
23.1. fejezet: CSS alapismeretek – Táblázatok
Táblázatot a HTML nyelv segítségével elég egyszerűen hozhatunk létre, de a CSS segítségével már elég változatossá is tehetjük. Ez a leírás csak pár fontos tulajdonságot ír le.
Táblázat határa: Ez a szokásos border tulajdonság, amit alkalmazhatunk a táblázat minden lényeges elemére (table, th, tfoot, td, tr). Példa:
table, th, td {
border: 1px solid black;
}
Megjegyzés: ezzel a kódrészlettel dupla vonalas táblázatot hozunk létre, mivel keretet adunk egyrészt a táblázat egyes celláinak (td), illetve magának a táblázatnak (table) is.
Teljes kód: htmlpelda39.html.
Táblázat határainak egyszerűsítése: ha a fenti problémát szeretnénk elkerülni, akkor érdemes ezt a tulajdonságot befűzni, így már csak sima vonalas lesz a táblázatunk. Példa:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Teljes kód: htmlpelda40.html.
Megjegyzés: ha csupán a táblázat körül szeretnénk keretet, akkor elegendő a table tagnek megszabni a tulajdonságait.
Magasság és szélesség: ezek a megszokott width, illetve height elemek. Példa:
table {
width: 100%;
}
th {
height: 50px;
}
Vízszintes rendezettség: ez is a máshol már megismert tulajdonság. Lehetséges értékei: left, right, center, Szokásos előfordulási helyei: th, td. Példa:
td {
text-align: right;
}
Függőleges rendezettség: lehetséges értékei: top, bottom, middle. Szokásos előfordulási helyei: th, td. Példa:
td {
height: 50px;
vertical-align: bottom;
}
Helyhagyás: (padding) a táblázat egyes elemei körül mekkora üres hely legyen. Érdemes figyelni a táblázat egyes celláinak értékeire! Szokásos előfordulási helyei: th, td. Példa:
th, td {
padding: 15px;
text-align: left;
}
Táblázat színei: az egyes elemeket a szokásos módon lehet színezni. A lenti példában a táblázat fejléce zöld háttérszínű lesz fehér karakterekkel:
th {
background-color: #4CAF50;
color: white;
}
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_table.asp
23.2. fejezet: CSS alapismeretek – Pozíció
Ez megadja a megfelelő elem helyét, ami lehet:
- állandó (static)
- relatív (relative)
- fix (fixed)
- abszolút (absolute)
Az egyes elemeket lehet alsó, felső, bal vagy jobb oldalhoz képest pozícionálni. Azonban az egyes elemek helyzete nem fog a kívánalmak szerint beállni a position tag használata nélkül.
position: static; Ez a HTML alapértelmezés. Ez a pozíció nem használja az alsó, felső, bal vagy jobb oldal tulajdonságait. Példa:
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative; Ez valamelyik oldalhoz képest pozícionálja a kívánt elemet. A lenti példában a bal oldalhoz képest 40 képpont távolságban van a pozícionált elem:
div.relative {
position: relative;
left: 40px;
border: 3px solid #73AD21;
}
position: fixed; Itt egy adott helyen lesz az elem, tehát csak ott jelenhet meg. A helyes beállításhoz szükséges az oldalak használata is. A lenti példában a jobb alsó sarokban van egy 300 képpont széles elem:
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute; Itt az utolsó elem legközelebbi pontjához képest pozícionálható egy elem. Példa:
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
Teljes példa: htmlpelda41.html.
Átlapozható elemek: itt az egyes elemek (például kép) háttérbe kerülhetnek. A z-index tulajdonság mutatja meg a sorrendjüket. Ha ez a z-index negatív értéket kap, akkor az elem háttérbe kerül. Példa:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Teljes példa: htmlpelda42.html.
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_positioning.asp
23.3. fejezet: CSS alapismeretek – Túlcsordulás
Időnként előfordul, hogy az egyes elemekre hagyott hely túl kicsinek bizonyul. Ilyenkor érdemes a túlcsordulással foglalkozni. Négy alapvető értéke lehetséges:
overflow: visible; Alapértelmezés. A túlcsordulás nem számít. Az elem megjelenítése folytatódik. Példa:
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
Teljes példa: htmlpelda43.html.
overflow: hidden; Rejtett. Csak az elem határáig jelenik meg a tartalom. Példa:
div {
overflow: hidden;
}
Az előző példa átszerkesztve:
overflow: scroll; Gördíthető. Gördítősáv megjelenítésével tekinthető meg az elem. Példa:
div {
overflow: scroll;
}
overflow: auto; Automatikus viselkedés. Ha túlcsordulás fordul elő, akkor megjelenik a gördítősáv. Példa:
div {
overflow: auto;
}
Irány szerinti túlcsordulás: a fenti tulajdonságok keverhetők az x-y iránynak megfelelően. Példa:
div {
overflow-x: hidden; /* Vízszintes gördítősáv elrejtése */
overflow-y: scroll; /* Függőleges gördítősáv hozzáadása */
}
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_overflow.asp
23.4. fejezet: CSS alapismeretek – Lebegés (float) és tisztítás (clear)
float: Egy kép körbevétele szöveggel egyszerűbben nem is mehet, mint a float elem. A lenti példában egy jobb oldalon lévő képet írunk körbe szöveggel:
img {
float: right;
margin: 0 0 10px 10px;
}
Megjegyzés: nagyon erősen javasolt a kép pontos méreteinek megadása már a HTML-kódban!
clear: A képet (vagy egyéb elemet) körbevevő szöveg tulajdonságainak megadása. Lásd: htmlpelda44.html.
clearfix: Ha egy belső elem magasabb, mint az őt tartalmazó, akkor érdemes használni a clearfix-et ami felülírja a tartalmazó elem méreteit az „overflow: auto;” segítségével. Példa:
.clearfix {
overflow: auto;
}
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_float.asp
23.5. fejezet: CSS alapismeretek – Pszeudó-osztályok
A pszeudó-osztályok használatának nincsenek kifejezett szabályai, de három példa is hozható:
- elem, amikor az egér fölötte van
- a meglátogatott és a meg nem látogatott linkek megkülönböztetése
- a fókuszban lévő elem megjelölése
Lássuk a fenti példákat pár kódrészlettel!
Alapvetően a pszeudó-osztály szintaxisa a következő:
selector:pseudo-class {
property:value;
}
Példa a linkekre:
/* meg nem látogatott link */
a:link {
color: #FF0000;
}
/* meglátogatott link */
a:visited {
color: #00FF00;
}
/* egér a link felett */
a:hover {
color: #FF00FF;
}
/* kiválasztott link */
a:active {
color: #0000FF;
}
A pszeudó-osztályok és a CSS-osztályok keverhetők is, például a következő link színt vált, ha az egér fölé kerül:
a.highlight:hover {
color: #ff0000;
}
A következő példa teljes HTML-kód lesz, melyben a háttérszín változik meg, ha a div elem fölé kerül az egér. (htmlpelda45.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<p>Ha a div egység fölé kerül az egér, akkor megváltozik a háttérszín. </p>
<div>Ide húzza az egeret!</div>
</body>
</html>
A következő példa csak akkor látszik, ha egy megadott elem fölé kerül az egér.
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_pseudo_classes.asp
(További példákkal.)
23.6. fejezet: CSS alapismeretek – Átlátszóság
Az egyes képeknél igen fontos lehet az átlátszóság, melynek értéke 0.0 és 1.0 között lehet (a határokat is beleértve). Alapértelmezett az 1.0, amikor az elem teljes egészében (összes színnel és kontraszttal) látható.
 |
|
|
| Opacity 0.2 | Opacity 0.5 | Opacity 1.0 |
A fenti táblázatban pl. az első kép forráskódja a következő:
<img src="/htmlpelda46.jpg" alt="Erdő" width=200 style="opacity:0.2">
Példa:
img {
opacity: 0.5;
filter: alpha(opacity=50);
}
Teljesebb példa a következő kóddal: (htmlpelda46.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Kép átlátszóság</h1>
<p>Jelen példában az átlászóságot a :hover-rel együtt használjuk.</p>
<img src="/htmlpelda46.jpg" alt="Erdő">
</body>
</html>
Megjegyzés: a fenti kódot az Internet Explorer 8-as és előtte lévő kiadásai nem így támogatják!
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_image_transparency.asp
(További példákkal.)
23.7. fejezet: CSS alapismeretek – Navigációs eszköztár
Minden weblapnál kiemelten fontos a jó navigálás. Ehhez elengedhetetlen egy korrektül működő navigációs panel vagy eszköztár. A legtöbb weboldal ezt változó színű vagy hátterű panellel oldja meg. Alapvetően a navigációs eszköztár egy lista a lehetséges linkekről. Példa legyen a következő:
<ul>
<li><a href="https://www.google.hu">Google</a></li>
<li><a href="https://www.microsoft.com/hu-hu/">Microsoft</a></li>
<li><a href="https://www.w3schools.com/">W3Schools</a></li>
<li><a href="https://tferi.hu/">A szerző honlapja</a></li>
</ul>
Első lépésként vegyük ki a listából az egyes elemek előtt pontokat, illetve a bekezdést! Példa:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Második lépésként alakítsuk függőleges sávvá a linkgyűjteményünket! Példa:
li a {
display: block;
width: 120px;
}
Megjegyzés: a width: 120px segítségével az egész terület kattintható lesz, nem csupán a szöveg!
A teljes példa egybeszerkesztve: (htmlpelda47.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 120px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="https://www.google.hu">Google</a></li>
<li><a href="https://www.microsoft.com/hu-hu/">Microsoft</a></li>
<li><a href="https://www.w3schools.com/">W3Schools</a></li>
<li><a href="https://tferi.hu/">A szerző honlapja</a></li>
</ul>
<p>A háttérszín csupán a kattintható területet láttatja.</p>
</body>
</html>
Most némi változtatással érjük el, hogy az egér alatti link háttérszíne megváltozzon. Példa:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Itt jön a szín változtatása! */
li a:hover {
background-color: #555;
color: white;
}
Ezt még fűszerezhetjük azzal is, hogy a linket tartalmazó szöveget a rendelkezésre álló hely közepére tesszük. Példa:
li {
text-align: center;
}
Íme egy kicsit összetettebb példa, amelyben egy függőleges, fix helyzetű navigációs eszköztárat helyezünk el:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* teljes magasság */
position: fixed; /* fix helyzet */
overflow: auto; /* Görgetés engedélyezése, ha túl nagy a tartalom. */
}
Megjegyzés: ez a kis képernyős mobil eszközökön nem biztos, hogy működik!
A másik gyakran alkalmazott helyzet a vízszintes navigációs eszköztár. Két alapvető módszer van a létrehozására: inline, illetve floating listaelemek.
Nézzünk most egy teljes HTML-kódot a vízszintes navigációs mintára (az előző elemekkel):
(htmlpelda48.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href="https://www.google.hu">Google</a></li>
<li><a href="https://www.microsoft.com/hu-hu/">Microsoft</a></li>
<li><a href="https://www.w3schools.com/">W3Schools</a></li>
<li><a href="https://tferi.hu/">A szerző honlapja</a></li>
</ul>
</body>
</html>
Jól látható, hogy itt a legegyszerűbb módon vannak felsorolva a linkek, simán egymás után. Őszintén szólva "fapados" az elrendezés.
Ha egy kicsit módosítunk, akkor már szebb lehet az eredmény:
li {
float: left;
}
a {
display: block;
padding: 10px;
background-color: #dddddd;
}
Itt már minden elem szélessége egyforma, ráadásul az elemeknek van háttérszíne is.
Megjegyzés: ha az ul elemhez adjuk a háttérszínt, akkor az egész navigációs panelnek egyforma lesz a háttérszíne.
Most következzen egy összetett teljes HTML-kód, melyben egy színváltó hátterű linkek vannak:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a href="https://www.google.hu">Google</a></li>
<li><a href="https://www.microsoft.com/hu-hu/">Microsoft</a></li>
<li><a href="https://www.w3schools.com/">W3Schools</a></li>
<li style="float:right" ><a href="https://tferi.hu/" >A szerző honlapja</a></li>
</ul>
</body>
</html>
Megjegyzés: a fenti példában a 4. link jobbra van rendezve, így egy további lehetőség is adott.
Ötlet: érdemes az egyes elemekhez egy kiemelő színt rendelni, mellyel pl. a jobb oldalon más színű csíkot húzunk. Példa:
li {
border-right: 1px solid #bbb;
}
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_navbar.asp
(További példákkal.)
23.8. fejezet: CSS alapismeretek – Legördülő menük
Ez a másik igen gyakori elem a weblapoknál. Alapvetően vízszintes menükhöz szokás rendelni, de ez nem feltétel. Ez a fejezet csupán pár példát mutat be az igen széles eszköztárból.
1. példa: (htmlpelda50.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Színváltós legördülő menü</h2>
<div class="dropdown">
<span>Egeret húzza ide!</span>
<div class="dropdown-content">
<p>Helló világ!</p>
</div>
</div>
</body>
</html>
Ez egyetlen egy elemet képes megjeleníteni, azt is csak akkor, ha a fenti elem fölé kerül az egér.
2. példa: Egy alapból legördülő 3 elemes menü. (htmlpelda51.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Legördülő menü</h2>
<p>Húzza az egeret a menüpont fölé.</p>
<div class="dropdown">
<button class="dropbtn">Menüpont</button>
<div class="dropdown-content">
<a href="#">1. link</a>
<a href="#">2. link</a>
<a href="#">3. link</a>
</div>
</div>
<p><strong>Megjegyzés:</strong> A href="#" helyett valódi címek mehetnek az éles weblapokra. </p>
</body>
</html>
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_dropdowns.asp
(További példákkal.)
23.9. fejezet: CSS alapismeretek – Egérfeliratok
Ezt a megoldást elég ritkán használják a weblapok, de időnként szükség lehet rá. Ismét kezdjük egy egyszerű példával! Az alábbi kód egy sima feliratot ad ki az adott menőhöz, ha az egér fölé kerül: (htmlpelda52.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Egérfelirat pozíciója */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style></head>
<body style="text-align:center;">
<div class="tooltip">Egérrel jöjjön ide!
<span class="tooltiptext">Egérfelirat szövege</span>
</div>
<p>Megjegyzés: nem a legjobb a felirat helyzete, ezen érdemes finomítani!</p>
</body>
</html>
Ha jobb oldalra akarjuk állítani az egérfeliratot, akkor érdemes a következő kódrészletet használni:
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Ugyanez a bal oldalra:
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Valamint a tetejére:
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Csak javasolt érték! */
}
Végül az aljára:
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
Ha a fenti feliratokat egy aprócska kis nyíllal is szeretnénk fűszerezni, akkor a ::after osztályt kell használni. Minta:
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Megjegyzés: a többi irány hasonlóan működik.
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_tooltip.asp
(További példákkal.)