A CSS egy olyan leírónyelv, melynek segítségével különböző stíluslapokat hozhatunk létre és ágyazhatunk be HTML honlapjainkba. Ezek a stíluslapok befolyásolják az oldal megjelenését: meghatározhatjuk velük, hogy az egyes HTML elemek mekkora méretben, milyen színnel jelenjenek meg.
Mi is az a CSS ?
A CSS (Cascading Style Sheets) egy olyan leírónyelv, melynek segítségével különböző stíluslapokat hozhatunk létre és ágyazhatunk be HTML honlapjainkba. Ezek a stíluslapok befolyásolják az oldal megjelenését (design-ügyileg kiváló nyelv), meghatározhatjuk vele, hogy az egyes HTML tagek (bekezdések, táblázatok, címsorok stb.) hogyan jelenjenek meg, meghatározhatjuk a méretüket, színüket, stílusukat, típusukat stb.
A CSS története
A CSS megjelenésének oka az volt, hogy a weboldalakon megnőtt az igény az egyre bonyolultabb, kiforrottabb elemekre és formázásokra, amiket már az eredetileg egyszerű szöveges információk ábrázolására kitalált HTML-lel már nem nagyon lehetett megoldani. (Sok mindent meg lehetett, csak nagyon sok munka volt mindenhol beállítani a különböző formázásokat, így a nyelv elvesztette egyszerűségét, áttekinthetőségét). Itt jött képbe a CSS, mely sokkal rövidebbé, rugalmasabbá és szabadon kezelhetőbbé tette a HTML dokumentumokat.
Maga nyelv már elég régóta létezik, a CSS (1) 1996. december 17-én készült el. A nyelv kiadása óta több verziója is megjelent, 1998. május 12-én napvilágot látott a CSS 2 is (a CSS 2.1 és CSS 3 készülése pedig folyamatban van). A legelterjedtebb böngészők nagy része ma már támogatja a CSS nyelv elemeit, de még mindig vannak olyan böngészők is, amelyek egyes nyelvi elemeket rosszul jelenítenek meg vagy kihagynak, mert nem tudják értelmezni.
Miért éppen a CSS?
Most egy példán keresztül bemutatjuk, hogy hogyan tudjuk megkönnyíteni a munkánkat a CSS-sel. A feladat az, hogy készítsünk el két felsorolást és két bekezdést betűformázásokkal. A feladatot először csak HTML-lel oldjuk meg, azután használjuk a CSS-t.
<html>
<head>
<title>Feladat megoldása HTML-lel</title>
</head>
<body>
<ul>
<font color="#EBEBEB"><li>Első felsorolás első sora</font></li>
<font color="#EBEBEB"><li>Első felsorolás második sora</font></li>
</ul>
<font color="#EBEBEB"><p><font size="6">Első bekezdés</font></p>
<ul>
<font color="#EBEBEB"><li>Második felsorolás első sora</font></li>
<font color="#EBEBEB"><li>Második felsorolás második sora</font></li>
</ul>
<p><font size="6">Második bekezdés</font></p>
</body>
</html>
Láthatjuk, ez egy általános HTML dokumentum, minden egyes bekezdés - és felsorolás elemet külön kellett formázni, ez egy kicsit hosszadalmas dolog ennél nagyobb dokumentumoknál. Sőt, még a tagekbe és belekavarodhatunk, nem tudjuk, hogy mit hol zártunk le stb. És ha egy nagyobb dokumentumban mindent így formázunk, akkor a lap olyan lassan fog betölteni, hogy a felhasználók megőrülnek. Most nézzük meg, hogy ezt hogyan lehetett volna megoldani CSS-sel:
<html>
<head>
<title>Feladat megoldása CSS-sel</title>
<style type ="text/css">
li { color: #EBEBEB }
p { font-size: 28px }
</style>
</head>
<body>
<ul>
<li>Első felsorolás első sora</li>
<li>Első felsorolás második sora</li>
</ul>
<p>Első bekezdés</p>
<ul>
<li>Második felsorolás első sora</li>
<li>Második felsorolás második sora</li>
</ul>
<p>Második bekezdés</p>
</body>
</html>
Mint láthatjuk, a dokumentum sokkal áttekinthetőbb, rugalmasabb, könnyebben szerkeszthető és lényegesen rövidebb lett. A HTML-ben a betűméretet csak 1-7 -ig választhatjuk ki, de a CSS-ben annyi Pixel-t (px) adunk meg, amennyit akarunk. Már egy ilyen kicsi dokumentumnál is tapasztalhatjuk a CSS előnyeit, és ez még nem minden, amit ez a nyelv tud...
Fontos megemlíteni, hogy a CSS nyelv magában nem sokat ér, ha valaki arra adja a fejét, hogy megtanulja és még nem ismeri a HTML-t legalább alapszinten, az előbb a HTML-lel kezdje, és csak azután (miután a HTML-t elsajátította) fogjon bele a CSS-be!
Forrás:prog.hu
|
AJÁNLOM AZ OLDALT
Friss bejegyzések
Friss hozzászólások
Archívum
