Kezdjünk is neki:
A CSS egy stílusleíró nyelv. Segítségével a HTML kódból eltávolíthatunk minden formázást és a stíluslapot (ami a formázást tartalmazza) külön szerkeszthetjük. Szemléltetésképpen nézzük meg ezt az oldalt. Az oldal jobb oldalán kiválaszthatunk különböző dizájnokat. A szöveg mindig ugyan az, csak a dizájnelemek változnak. Miért jó? Hogyha esetleg megszeretnéd változtatni az oldalad kinézetét, akkor nem kell végigbogarászni a HTML-kódot, hanem egyszerűen csak a stíluslapon belül dolgozunk. Itt egy W3-as példa.
SZINTAXIS:
 |
| Szinaxis Forrás:W3 Schools |
- selector - az az elem, amit szeretnél formázni
- property - tulajdonság
- value - érték
TEHÁT:
megadom az elem nevét amit formázni szeretnék, majd kapcsos zárójelek közé, pontosvesszővel elválasztva megadom a tulajdonságot és értékét.
MEGJEGYZÉSEK CSS-BEN:
Megjegyzéseket /* és */ közé helyezünk el. Ezek nem látszanak a böngészőben.
ID VAGY CLASS ATTRIBÚTIM:
Ezekkel a különböző elemeknek, szövegrészeknek nevet adhatunk a következőképpen:
<p id="bekezdes">Bekezdés szövege</p>
Azonos ID-jű elem nem lehet, ekkor a CLASS-ot használjuk. Például ha egy táblázatban minden páros számú sornak szeretnénk egyforma, de a páratlanok színétől elütő színt adni, akkor a párosok class-a egyforma lesz.
CSS-ben így hivatkozunk az ID-re:
#id{
color:green;
}
CSS-ben így hivatkozunk CLASS-ra:
.class{
color:green;
}
PÉLDA:
Itt egy táblázat. Azt akarjuk, hogy az első sor kivételével a páratlanok kékek, a párosak zöldek legyenek, az első sor meg legyen piros.
Az első sorból csak egy van. Használjunk ID-t. A párosokból és páratlanokból is több van. Használjunk CLASS-ot.
<tr id="elso">
<td>Páratlan</td>
<td>Páratlan</td>
</tr>
<tr class="paros">
<td>Páros</td>
<td>Páros</td>
</tr>
<tr class="paratlan">
<td>Páratlan</td>
<td>Páratlan</td>
</tr>
<tr class="paros">
<td>Páros</td>
<td>Páros</td>
</tr>
<tr class="paratlan">
<td>Páratlan</td>
<td>Páratlan</td>
</tr>
</table>
PÉLDA:
Itt egy táblázat. Azt akarjuk, hogy az első sor kivételével a páratlanok kékek, a párosak zöldek legyenek, az első sor meg legyen piros.
Az első sorból csak egy van. Használjunk ID-t. A párosokból és páratlanokból is több van. Használjunk CLASS-ot.
<table border="1">
<tr id="elso">
<td>Páratlan</td>
<td>Páratlan</td>
</tr>
<tr class="paros">
<td>Páros</td>
<td>Páros</td>
</tr>
<tr class="paratlan">
<td>Páratlan</td>
<td>Páratlan</td>
</tr>
<tr class="paros">
<td>Páros</td>
<td>Páros</td>
</tr>
<tr class="paratlan">
<td>Páratlan</td>
<td>Páratlan</td>
</tr>
</table>
A CSS-kód pedig így fog kinézni:
.paratlan{
background-color:blue;
}
.paros{
background-color:green;
}
#elso{
background-color:red;
}
Az, hogy mit, miért úgy csináltam a későbbi leckékben fogjuk megbeszélni. A példa a CLASS és ID közti különbséget próbálja szemléltetni. Ezt a kódot elmenthetjük *.css formátumban.
Most örvendünk, hogy megvan a CSS fájlunk. De hogyan kapcsoljuk össze a HTML-kóddal? Elvileg ezt már tudjuk de leírom még egyszer:
KÜLSŐ STÍLUSLAP:
Ilyenkor a HTML-kód fejében a valami.css fájl elérési útvonalát adom meg a következő képpen:
<head>
<link rel="stylesheet" type="text/css" href="valami.css" /></head>
Ilyenkor a HTML-kód fejében a valami.css fájl elérési útvonalát adom meg a következő képpen:
<head>
<link rel="stylesheet" type="text/css" href="valami.css" /></head>
link rel - megadja a dokumentum és a HTML-kód közötti kapcsolat típusát. Esetünkben "stylesheet" avagy stíluslap
type - megadja a csatolt dokumentum típusát.
href - megadja a stíluslap helyét, nevét.
BELSŐ STÍLUSLAP:
Ilyenkor a HTML-kód fejében adom meg a CSS-kódot a következő képpen:
<head>
<style type="text/css">
p {
color:red;
}
b {
color:green;
}
</style>
</head>
SORON BELÜLI STÍLUSLAP:
Ilyenkor a különböző elemeknek külön adjuk meg a stílusát.
<p style="color:red;">Ez egy bekezdés.</p>
FONTOS:
Fontos megemlíteni ezeknek a hierarchiáját. Íme a sorrend:
- a böngésző alapértelmezett stíluslapja
- soron belüli stíluslap
- belső stíluslap
- külső stíluslan
Belső és külső stíluslapok esetén a később megadott a magasabb rendű.
Ez azt jelenti, hogyha a külső stíluslapon megadod, hogy minden <p> legyen piros, aztán egy belső stíluslapon megadod, hogy minden <p> legyen zöld, akkor a <p>-k zöldek lesznek, hiszen a belső stíluslap magasabb rangú. Ugyan ez a többinél is igaz.
A következő leckében megnézzük a háttér és szövegformázásokat.
A következő leckében megnézzük a háttér és szövegformázásokat.
Nincsenek megjegyzések:
Megjegyzés küldése