CSS bevezető
Ha ezt a bevezetőt már elolvastad, akkor itt egy bővebb leírást találsz. Vigyázz! Abban a leírásban a HTML tag nevek és az attribútumok neveit a régi szokás szerint nagy betűkkel írják. Kompatibilitási okok miatt te azért már kis betűket használj!
A HTML formázás modern módszere a CSS. Ez egy külön nyelv, amivel a HTML tag-jeink kinézetét adhatjuk meg.
Szerintem a legkényelmesebb, ha a CSS leírásunkat külön fájlban tartjuk. Ekkor a HTML fájlunk <head> </head> részébe be kell tennünk egy új sort, amiből a böngésző tudni fogja, hogy CSS-sel szeretnénk formázni, és hogy merre találja a CSS fájlt magát.
<link href="stilus.css" rel="stylesheet" type="text/css" media="screen" />
A paraméterek értelme
- href="stilus.css": ez adja meg, hogy hol van, és mi a neve a CSS fájlunknak.
- rel="stylesheet": ez a fájl az oldalunk megjelenési stílusát fogja meghatározni.
- type="text/css": CSS nyelven adja meg a stílust.
- media="screen": a képernyőn való megjelenést befolyásolja. (Meg lehetne adni más CSS fájlt a nyomtatáshoz, mobil eszközökhöz stb.)
Itt következik egy példa HTML fájl:
<html> <head> <title>CSS próba</title> <link href="stilus.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <h1>CSS próba</h1> <h2>Táblázat</h2> <table> <tr> <td class='valami'>Egy</td> <td>Kettő</td> </tr> <tr> <td>Megérett a meggy</td> <td>Csipkebokor vessző</td> </tr> </table> <h2>Szöveg</h2> <p class='valami'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </body> </html>
Mentsd el a fenti példát! (Ne feledd a "html" kiterjesztést!)
Félkövérrel ki is emeltem benne, hogy a hivatkozás szerint a "stilus.css" nevű fájlban fogja a böngésző a stílus utasításokat keresni. Ám ilyen fájlunk még nincs. Hozz tehát létre egy új üres fájlt a szövegszerkesztőben, és mentsd el "stilus.css" néven abba a mappába, ahol a HTML fájlod is van! (Még mindig csak az angol abc kisbetűit, számokat és az aláhúzás karaktert használjuk fájl- és mappa nevekben.)
A "stilus.css"-ben csak CSS utasítások lesznek, melyek általános alakja ilyen:
szelektor { attribútum név 1 : érték 1; attribútum név 2 : érték 2; ... }
A szelektor határozza meg, hogy a HTML oldalon mely tag-ekre vonatkozik az utasítás. Utána kapcsos zárójelek közt jön a deklaráció. A deklaráció attribútum név — attribútum érték párosokból áll. A név és az érték között kettőspont van, az érték után pontosvessző.
Mondjuk változtassuk meg az egész oldal háttérszínét! (background-color) és a szöveg színét (color)! Írd be az alábbi példát a "stilus.css"-be (használhatsz más színeket is), mentsd el, és nyisd meg böngészőben a HTML fájlt!
body { background-color: #880000; color: white; }
Most a szelektor rész body, ezért a kapcsos-zárójelek közt megadott formázás az összes <body> tag-re érvényes — persze ilyenből csak egy van. Vedd észre, hogy a CSS-ben nem kell (sőt, nem szabad) < > közé tenni a tag neveket!
Hasonlóképp bármilyen másik tag-re is írhatunk szabályokat. Például adjunk szegélyt az összes táblázat cellának (<td>)! A szegélyezéshez használandó attribútumok:
- border-width: szegély szélessége
- border-style: szegély stílusa — két értéket elég ismernünk
- none: nincs szegély
- solid: folytonos szegély
- border-color: a szegély színe
td { border-width: 1px; border-style: solid; border-color: red; }
A szélességnél meg kell adni a mértékegységet is. Kétféle mértékegységet szokás általában használni:
- px: képpont
- %: a tag szülőjének (a tag-et tartalmazó tag) szélességéhez képest
Egyébként a fent említett attribútumok helyett használható a border is: ennek egy sorban megadható a szélesség, a stílus és a szín — ám jól kell figyelni, hogy ebben a sorrendben adjuk meg ezeket. A fenti példával tehát egyenértékű a következő:
td { border: 1px solid red; }
Lehetséges több féle tag-nek ugyanazokat a formázási szabályokat megadni: ehhez a tag-ek nevét a szelektor részben vesszővel elválasztva kell megadni. Színezzük át a címsorokat (<h1>) és az al-címsorokat(<h2>)!
h1, h2{ color: #FFC000; }
Ám gyakran nem akarunk minden azonos típusú tag-et átformázni. Ilyenkor a HTML fájlban adjunk class attribútumot a formázni kívánt tag-eknek. Eme attribútum értékét mi választhatjuk meg, de a fájl nevekhez hasonlóan itt is csak ékezet nélküli kisbetűket használjunk! A fenti HTML példában ki is emeltem a két class="valami" attribútumot. Ezekre a tag-ekre a CSS fájlban úgy hivatkozhatunk, hogy a class nevét (a példában "valami") egy pont után írjuk.
.valami { background-color: black; }
A fenti két módszert (kiválasztás tag neve szerint / kiválasztás class attribútum szerint) kombinálhatjuk is. Ha csak a "valami" osztályú bekezdéseket (p) akarjuk formázni, akkor ilyet írhatunk:
p.valami { width: 50%; }
Gyakorlásképp a HTML fájlban adjál új class attribútumot a jobb alsó cellának és a második bekezdésnek! Készíts a CSS fájlban utasítást, mely ezeknek a háttérszínét sárágra, szöveg színét feketére állítja!
Újra puska, ha nem menne egyedül: Változás a HTML-ben.
... <td class='mas'>Csipkebokor vessző</td> ... <p class='mas'>Duis aute irure dolor in reprehenderit in ... </p>
.mas { background-color: yellow; color: black; }