CSS: 1. Bevezető

[HTML]

CSS: 1. Bevezet?

<span style="font-family:Tahoma">Amit már tudnod kell
Mielőtt elkezdenéd a tananyagot, már ismerned kell a HTML / XHTML nyelvet ahhoz, hogy használni tudd az itt leí­rtakat.

Mi az a CSS?
A CSS (Cascading Style Sheet) jelentése nem más, mint Egymásba í­í‚gyazott Stí­luslapok, amelyek meghatározzák, hogyan jelenjenek meg a weboldalaid. A stí­lusok alapvetően stí­luslapokban (több stí­lus egy fájlban eltárolva) vannak tárolva. Sok időt takarí­thatsz meg a segí­tségével. (Nem kell külön-külön egyesével beállí­tanod a megjelenéseket, helyette egy megjelenést több helyen alkalmazhatsz.)

A stí­lusok gyakori problémákat oldanak meg
A HTML parancsokat a dokumentumok tartalmának leí­rására tervezték. Az elkészült weboldalak megjelenése a böngészőkre volt bí­zva. Amint bőví­tették a parancsok sorát, egyre nehezebbé vált olyan weboldalakelkészí­tése, ahol a tartalom teljesen különállt a kinézettől. A probléma megoldására a W3C (World Wide Web Consortium) bevezette a STYLES parancsot, amelyet a HTML 4.0 alapból tartalmaz. Az összes főbb böngésző (Firefox, Opera, Internet Explorer, Netscape, Safari, stb.) megjelení­ti a CSS-el dí­szí­tett oldalakat.

A stí­luslapokkal sok munkát spórolhatsz meg
A stí­lusok (styles) meghatározzák, hogyan nézzenek ki a HTML-ben í­rt oldalak a böngészőben. A stí­lusok normálisan .css fájlokban vannak tárolva. Az újabb stí­lusokat egyszerűen bele lehet í­rni a .css fájlokba. A CSS egy áttörés a webdesign történetében, mert megengedi a fejlesztőknek, hogy irányí­tsák a stí­lusokat (különböző elemek megjelenését) és a különböző tartalmú oldalak azonos kinézetét egyetlen fájlban. Egyszer meghatározod egy elem stí­lusát (pl.: .alma { height: 12px; } - 12 pixel magas lesz az "alma" nevű csoport) és annyiszor alkalmazod más oldalakon, ahányszor akarod. Akár teljesen megváltoztathatod egy honlap kinézetét pár adat megváltoztatásával.

A megtöbbszörözött stí­lusok egyetlen egy stí­luslapba fognak beépülni
A stí­luslapok megengedik, hogy a stí­lus információja többféle módon legyen meghatározva. Egyszerű HTML elemeken belül (pl:

- 12 pixel széles lesz a kep.jpg), az oldal részében (pl.: .barack { height: 12px; } - 12 pixel magas lesz a "barack" nevű csoport) vagy egy külső CSS fájlban (pl.: .dio { height: 12px; } - 12 pixel magas lesz a "dio" nevű csoport). A külső CSS fájlt bele lehet épí­teni a különböző oldalakba (<link rel="stylesheet" type="text/css"href="style.css" />).

Beágyazási sorrend
Melyik stí­lus fog életbe lépni annál a HTML elemnél, amelyhez több megjelenési tulajdonságot adtunk meg?
í­í‚ltalánosan azt mondhatjuk, hogy az összes stí­lus egybe fog épülni virtuálisan, de a konkrét sorrend a következő:
</span>

• <span style="font-family:Tahoma"> Böngésző alapbeállí­tása</span>
• <span style="font-family:Tahoma"> Külső stí­luslapban szereplő stí­lus</span>
• <span style="font-family:Tahoma"> Belső stí­luslap (a részen belül)</span>
• <span style="font-family:Tahoma"> A HTML elem style attritbútumában szereplő beállí­tások</span>

<span style="font-family:Tahoma"> Tehát a belső HTML elem style attritbútumának van a legmagasabb prioritása, ami azt jelenti, hogy felül fogja í­rni a sorrendben előtte lévők beállí­tásait.
</span>