Hogyan írj saját CSS-kódot?

Ha érdekelnek a kódok, és Te magad szeretnéd megírni a saját oldaladra, tudnod kell, hogyan épül fel egy kód.

Az alapvető elemeket már látod is:

• A szelektor (selector) megmondja, hogy minek adod meg a stílusát (pl. bekezdés, táblázat, cím, osztály)
• A tulajdonság (property) lehet bármi (pl. háttérszín, betűszín, betűméret, stb.)
• Minden tulajdonságnak van értéke (value), ez határozza meg, hogy milyen az a tulajdonság (pl. milyen a betű színe)

Így már tudjuk is értelmezni a példát: A bekezdések (=p=paragraph) betűszínét (color) szeretnénk pirosra változtatni, és - mivel a bekezdésnek egyszerre több tulajdonsága is lehet - a betűméretet (font-size) is meghatároztuk: 14 pixel-es.

Érdemes megnézni, hogy hol milyen írásjel van: egy adott szelektorhoz tartozó összes tulajdonság és érték kapcsos zárójelek közt van. Az egyes tulajdonság-érték párok (=deklaráció=declaration) után mindig pontosvessző van, szóköz nélkül, és a tulajdonság után kettőspont jön, utána megint nincs szóköz.

Ami a képen kicsit nagy a hely a szelektor (itt p-betű) és a deklarációk közt, de itt csak egy szóköz van.

Ahhoz, hogy a kód áttekinthetőbb legyen, érdemes minden deklaráció (tulajdonság-érték pár) után entert nyomni, mert az enter CSS-ben nem jelent semmit, tehát nem fog tőle megváltozni a kód:

p{
color:red;
font-size:14px;
}

A CSS kódba megjegyzéseket is tehetsz, hogy ha később változtatni szeretnél valamin, könnyen megtehesd, esetleg más is megértse a kódot. A megjegyzést ilyen jelek közé tedd: /* és */. A böngészők nem veszik figyelembe a megjegyzéseket:

/*Ez itt egy megjegyzés*/

p{
color:red;
/*Itt van még egy megjegyzés, lehet akár a kód közepén is*/
font-size:14px;
}

Ezen kívül tudnod kell, hogy a CSS kód mindig így kezdődik/végződik:

<style type="text/css">

IDE JÖN A CSS KÓD

</style>

<< vissza a CSS kódokhoz!