ugrás a tartalomhoz

CSS alapjai I.

Bártházi András · 2004. Már. 18. (Cs), 23.30
CSS alapjai I.
Híreinkben sokszor hangoztattuk, hogy a CSS használata sok terhet vehet le a vállunkról hosszú távon. A Weblabor váltásával most már mi is ezt az utat járjuk. Annak érdekében, hogy még többen ismerjék fel a CSS előnyeit, cikksorozatot indítunk a technológia megismertetése érdekében.

A cikksorozat első részében a CSS alapjairól lesz szó: bemutatásra kerül, hogy mi az a CSS, miért jó, ha oldalaink megjelenésének befolyásolására ezt használjuk, illetve elkezdünk megismerkedeni azzal, hogy milyen lehetőségeink vannak a nyelvben annak meghatározására, hogy mely elem(ek) tulajdonságait szeretnénk befolyásolni.

Mi az a CSS?

A CSS jelentése Cascading Style Sheets, azaz egymásba ágyazott stíluslapok. A HTML oldalaink megjelenését befolyásoló egyszerű nyelvről van szó, mely segítségével meghatározhatjuk, hogy hogyan (és hol) jelenjenek meg az egyes HTML elemek (paragrafusok, címsorok, stb.), többek között befolyásolhatjuk a színüket, méretüket, elhelyezkedésüket, margóikat, stb. Az egymásba ágyazhatóság (kaszkádolás) arra utal, hogy több stíluslapot, meghatározást is megadhatunk egyszerre, illetve egy stílus lehet több elemre is érvényes, amit egy másik stílussal felüldefiniálhatunk. A stílusok öröklődnek az oldal hierarchiája szerint, ha például a gyökér elemre definiálunk egy stílust, akkor az többnyire az oldal összes elemére érvényes (a tulajdonságok örökölhetőségétől függően).

Történelem

A HTML nyelvet fejlesztői a kezdetekben nem professzionális megjelenítést lehetővé tevő, hanem a tartalom egyszerű közlését megoldó leírónyelvnek tervezték, ennek függvényében került kialakításra is. A nyelv megjelenése egyre több ember számára tette lehetővé, hogy publikálhasson a weben, és az internet terjedése is egyre több és több új felhasználót hozott. A felhasználók elkezdtek egyre többre vágyni, az évek során felmerült annak az igénye, hogy lehessen a nyomdai megjelenéshez hasonlóan befolyásolni a weboldalak kinézetét. Így a HTML kiegészült bizonyos formázási lehetőségekkel.

Az új formázási lehetőségek sokmindent lehetővé tettek, de a nyelv ezzel elvesztette az egyszerűségét, a dokumentumok a megjelenés miatt egyre bonyolultabbá és összetettebbé váltak. A weboldalak forrásának akár több, mint a fele lehet, hogy már nem is a tartalomról, hanem a megjelenésről szólt, jelentősen megnövelve ezzel a dokumentumok méretét és komplexitását. Ezt tetőzte, hogy a szabvány kiforratlanságából, illetve a böngészőgyártók érdekkülönbségeiből adódóan a webhely tervezők kénytelek voltak a különböző böngészők sajátosságaival is szembesülni, és ezeket megkerülendő, mindenféle trükköket alkalmazni, ha szép, az elképzeléseik szerinti oldalakat szerettek volna készíteni. Nos, ezen segített megjelenésével a CSS szabvány, melyet a böngészők az utóbbi években egyre egységesebben értelmeznek, s sokkal szabadabban, rugalmasabban tudjuk vele befolyásolni HTML oldalaink megjelenését, mint azt korábban bármikor is tehettük (és a HTML nyelv szabványa is sokkal kiforrottabb lett, megjelent például az XHTML, továbbá sok új irányelv, ami azt írja le, hogy a dokumentumnak nem a megjelenésről, hanem a tartalomról kell szólnia, stb.). Persze a helyzet még mindig nem ideális, s egy jó ideig nem is lesz az, köszönhetően a domináns böngésző technológiai elmaradottságának, de így is egy nagyon jól használható eszközt tudhat magáénak az a fejlesztő, aki megismeri a CSS nyújtotta lehetőségeket.

A technológia már viszonylag elég régóta létezik, a CSS szabvány leírása 1996. december 17-n látott napvilágot a W3C honlapján (nem ide tartozik, de jó tudni, hogy időközben hazánkban is képviseli magát a konzorcium egy irodával, és saját weblapjuk is van). A szabvány azóta több kiadást ért meg, illetve 1998. május 12-n napvilágot látott a CSS 2 szabvány leírása is (a CSS 2.1 és CSS 3 kidolgozása pedig folyamatban van, a tervek elérhetőek a W3C honlapján - pár újabb böngésző meg is valósít bizonyos dolgokat ezek közül). Fontos megemlíteni, hogy a szélesebb körben használt böngészők viszonylag nagy részét támogatják a CSS szabványnak, de azért ellenőrizni sohasem árt, hogy nem értenek-e félre valamit (mert könnyen előfordul). Azt is figyelembe általában a szabványok egy alkészletét valósítják meg, előfordulhat, hogy a CSS 2-ből már ismert sokmindent egy böngésző, viszont van olyan CSS 1 szabványbeli elem, melyet még mindig nem valósít meg.

Miért CSS?

Egy alapvető példán keresztül nézzük meg, miért lesz egyszerűbb az életünk a CSS használatával. Vegyünk egy általános oldalt, ahol több címsor és bekezdés található. Szeretnénk, ha a címsoraink betűi nagyok és sötétvörösek lennének, míg a bekezdéseink betűi kisebbek és sötétzöldek. Ezt HTML formázással a következőképpen tudjuk megvalósítani:
<html>
<head>
  <title>CSS példa</title>
</head>
<body>
<h1><font size="4" color="#a00000">Bevezetés</font></h1>
<p><font size="2" color="#00a000">A vers...</font></p>
<h1><font size="4" color="#a00000">Tárgyalás</font></h1>
<p><font size="2" color="#00a000">A költő...</font></p>
<h1><font size="4" color="#a00000">Összefoglalás</font></h1>
<p><font size="2" color="#00a000">Végezetül...</font></p>
</body>
</html>
Mint láthatjuk, minden egyes címsor (h1) és bekezdés (p) esetén meg kellett határoznunk a megjelenést (font), ráadásul ezáltal sokkal kevésbé lett áttekinthető a HTML forrásunk. További probléma, hogy a betűk méretének meghatározására nincs más lehetőségünk (a szabvány szerint), csak az előre definiált (1-től 7-ig meghatározott) méretek közül kiválasztani a nekünk megfelelőt. Amennyiben egy bonyolultabb oldalról van szó, még áttekinthetetlenebbé válhat a forrás, bonyolultabbá téve az utólagos szerkesztést. Nem lehetne ezt a formázást egyszerűbben elérni? Nézzük, hogyan alakul ugyanez stíluslapok használatával:
<html>
<head>
  <title>CSS példa</title>
  <style type="text/css"><!--
  h1 { font-size: 20px; color: #a00000; }
  p { font-size: 12px; color: #00a000; }
  --></style>
</head>
<body>
<h1>Bevezetés</h1>
<p>A vers...</p>
<h1>Tárgyalás</h1>
<p>A költő...</p>
<h1>Összefoglalás</h1>
<p>Végezetül</p>
</body>
</html>
A trükk a fejlécben látható style elemeken belül van. Meghatározzuk, hogy a HTML állományban levő összes címsor (h1) elem és bekezdés (p) elem a fentiekben meghatározott kívánságainknak megfelelően jelenjen meg. Csak egyszer kellett ezt megtenni, továbbá a kódunk is sokkal átláthatóbb lett. A pontos méretet is meghatározhattuk, ezúttal pixelben megadva azt, de további mértékegységek is rendelkezésünkre állnak. Amennyiben valamiért utólag módosítanunk kell a megjelenést, egyből csak egy helyen kell ezt megtennünk, s mindenhol meg is változik. Az egyszerűbb szerkeszthetőségen és karbantarthatóságon kívül az így elkészített dokumentum sokkal kisebb méretű is lesz, gyorsabban letöltődik, kisebb adatforgalmat generál. Ha egy külső állományban helyezzük el a stílusdefiníciókat, akkor több dokumentum megjelenését is befolyásolni tudjuk egyszerre, továbbá ha a böngésző gyorsítótárazza a meghatározásokat, az adatforgalom tovább csökken. További előny, hogy az újabb böngészők egyre inkább támogatják a szabványokat, s ha mi is tartjuk hozzá magunkat, akkor egyre kisebb munkával egyre több látogató fogja pontosan ugyanúgy látni a honlapunkat (az eddigi "minden böngészőn megnézem, hogy jó-e" stílusú munkával szemben). Persze mint a korábbiakban is ki lett hangsúlyozva, csodát egyelőre a CSS-től se várjunk, de mindenképpen számíthatunk rá, hogy ez fogja meghatározni a jövő honlapjainak megjelenését.

CSS hozzákapcsolása a HTML-hez

A fentiekben egy példát láttunk, hogyan kapcsolhatjuk a CSS-t a HTML állományunkhoz, hogyan határozhatjuk meg ennek a megjelenését. Lássuk a lehetőségek listáját (melyeket szabadon, akár keverve is használni tudunk):

Beágyazott stíluslap

Ezt láthattuk a fenti példában. A stílusleírást a HTML oldal fejlécében kell elhelyezni, style elembe ágyazva. A fenti példában HTML megjegyzésbe is tettük (<!-- ... -->), ezzel azt érjük el, hogy az olyan böngészők, amik nem ismerik a stíluslapokat, ne jelenítsék meg a stílus definíciónkat. Az így meghatározott stílus az egész dokumentumra érvényes lesz.

Külső stíluslap

A stíluslapunkat elhelyezhetjük egy külső állományban is, így lehetővé téve, hogy az több HTML állományra is érvényes legyen, s központilag szerkeszthetővé váljon (ne kelljen minden egyes HTML állományt megváltoztatnunk, ha a honlapunk ezentúl másképp jelenne meg). A külső stíluslapokra az oldal fejlécében tudunk hivatkozni, egy link elem segítségével:
<head>
  <link rel="stylesheet" href="kulso.css" type="text/css">
</head>
A stíluslapot tartalmazó állományban (a példában kulso.css a neve) csak a stíluslapjaink definícióját kell elhelyeznünk, pl:
h1 { font-size: 20px; color: #a00000; }
p { font-size: 12px; color: #00a000; }
A beágyazott stíluslapokhoz hasonlóan az így meghatározott stílus az egész dokumentumra érvényes.

Elemhez rendelt stíluslap

Bár kevés alkalommal van rá szükség, de akkor jól jön, hogy az egyes HTML elemekhez helyben is tudunk stílust meghatározni. Ez nagyon hasonlít ahhoz, mintha font elemekkel határoznánk meg az adott elem megjelenését, bár nagyságrendekkel több formázási lehetőségünk van. Egy elem stílusának a meghatározásához egy style attribútumot kell hozzá felvennünk:
<h1 style="font-size: 20px; color: #a00000;">Bevezetés</h1>
Mint láthattuk, itt csak magát a megjelenést kellett leírnunk, nem kellett meghatározni, hogy mire vonatkozik: az így definiált stílus csak az adott elemre, illetve az adott elemen belül lesz érvényes.

Importált stíluslap

További lehetőségünk, hogy egy stílus meghatározáson belül egy másik, külső stílus meghatározásra hivatkozzunk (erre értelem szerint a beágyazott és a külső stíluslap meghatározásoknál van módunk). Ez a következőképpen történhet:
<style type="text/css"><!--
@import url(http://www.honlapunk.hu/stilusok/masik.css);
--></style>
A cím megadásakor hasonlóképpen járhatunk el, mint a linkeknél általában, azaz akár url(masik.css) formában is írhatjuk, amennyiben ugyanabban a könyvtárban található mint a HTML állományunk. A külső stílus hivatkozásnak meg kell előznie minden más definíciót, amennyiben már szerepel előtte más, figyelmen kívül lesz hagyva!

Stílusok formátuma

Egy önálló stílus definíciós állomány, vagy egy beágyazott stílus több meghatározást tartalmazhat. Egy-egy meghatározás két részből áll, egy kiválasztó és egy tulajdonság részből. A kiválasztó rész azt határozza meg, hogy mely HTML elemekre vonatkozzon a definíció, míg a tulajdonság rész a megjelenést befolyásolja. Amikor elemhez rendelünk stílust, akkor csak a tulajdonság részt kell meghatároznunk. A következőképpen épül fel tehát egy stílusdefiníció:
kiválasztó { tulajdonság }
kiválasztó { tulajdonság }
kiválasztó { tulajdonság }
Az egyes definícióknak, de még a kiválasztónak és a tulajdonságnak sem szükséges új sorban lenniük, gyakorlatilag szabadon ránk van bízva, hogy a fenti tartalmat milyen elrendezésben valósítjuk meg. A következő formátumok mind helyesek:
kiválasztó { tulajdonság } kiválasztó { tulajdonság }
kiválasztó

  {
  tulajdonság
  }
Az előző példákban láthattuk, hogy egy-egy kiválasztóhoz több tulajdonságot is megadhatunk, ekkor a tulajdonságokat pontosvesszővel elválasztva kell felsorolnunk. Több kiválasztót is meghatározhatunk, a kiválasztókat vesszővel kell elválasztani:
kiválasztó, kiválasztó { tulajdonság; tulajdonság; }

Kiválasztók

A kiválasztók nagyon rugalmasan használhatóak, mint azt a továbbiakban látni fogjuk egyszerű és mégis összetett módon tudjuk meghatározni, hogy mely elemekre vonatkozzanak a tulajdonságaink. Ebben a cikkben még nem mutatjuk be az összes lehetőséget, de megpróbáljuk bemutatni, hogy milyen széleskörűen tudjuk szabályozni a kiválasztást.

Elem kiválasztás

A legegyszerűbb kiválasztási lehetőséget nyújtja a számunkra, egy HTML elemet határozhatunk meg vele, amihez hozzá szeretnénk rendelni a különböző tulajdonságokat. Az eddigiekben ilyenre láthattunk példát:
h1, h2, h3 { color: #a00000; }
Itt az első három szintű címsornak határoztuk meg a színbeli megjelenését.

Osztály alapú kiválasztás

A HTML elemeket lehetőségünk van osztályokba sorolni. Ekkor az adott osztályba sorolni kívánt elemhez egy class tulajdonságot rendelünk hozzá, amelynek az értéke az osztálynevünk lesz. A stíluslapban ehhez az osztályhoz határozhatunk meg megjelenést. Ha szeretnénk kiemelni egyes fejezeteket a szövegünkből, pirossal megjelenítve azokat, akkor a következőképpen járhatunk el:
<html>
<head>
  <title>CSS példa</title>
  <style type="text/css"><!--
  h1 { font-size: 20px; color: #a00000; }
  p { font-size: 12px; color: #00a000; }
  .fontos { color: #ff0000; }
  --></style>
</head>
<body>
<h1>A cserebogarak halhatatlanságáról</h1>
<p class="fontos">A cserebogárnak vannak lábai. Ebből...</p>
<p>Minden cserebogárnak van lába...</p>
<p class="fontos">A cserebogárnak vannak szárnyai is...</p>
<p>A szárnyaival repülni tud...</p>
<p>A halhatatlanság azt jelenti, hogy...</p>
<h1 class="fontos">FONTOS!</h1>
<p class="fontos">A cserebogarak halhatatlansága tehát...</p>
</body>
</html>
A példában három fejezetet és egy címsort soroltunk a fontos osztályba, a stíluslapban pedig a kiválasztónk ponttal kezdődött, ami azt jelezte, hogy ennek az osztálynak határozzuk meg a megjelenését. A példából még valami kiderül: az egyes stílusdefiníciók felül tudják bírálni egymást, illetve egy osztály bármelyik elemhez tartozhat. A fontos osztálynak mást színt adtunk meg, mint a bekezdéseknek, illetve a címsornak (itt ez a szín fog érvényesülni), míg a betűméretet tekintve a bekezdésben, illetve a címsorban meghatározott méretet öröklik a fontosnak besorolt bekezdések is.

Az egyes kiválasztókat keverhetjük is, például a következő példában a fontos címsoroknak definiálunk egy háttérszínt is:
<html>
<head>
  <title>CSS példa</title>
  <style type="text/css"><!--
  h1 { font-size: 20px; color: #a00000; }
  p { font-size: 12px; color: #00a000; }
  .fontos { color: #ff0000; }
  h1.fontos { background: #ffcccc; }
  --></style>
</head>
<body>
<h1>A cserebogarak halhatatlanságáról</h1>
<p class="fontos">A cserebogárnak vannak lábai. Ebből...</p>
<p>Minden cserebogárnak van lába...</p>
<p class="fontos">A cserebogárnak vannak szárnyai is...</p>
<p>A szárnyaival repülni tud...</p>
<p>A halhatatlanság azt jelenti, hogy...</p>
<h1 class="fontos">FONTOS!</h1>
<p class="fontos">A cserebogarak halhatatlansága tehát...</p>
</body>
</html>

Azonosító alapú kiválasztás

Az azonosító alapú kiválasztás nagyon hasonló az osztály alapúhoz, egy lényeges különbség van: csak és kizárólag egy elemet tudunk egy bizonyos azonosítóval megjelölni egy HTML dokumentumon belül.
<html>
<head>
  <title>CSS példa</title>
  <style type="text/css"><!--
  h1 { font-size: 20px; color: #a00000; }
  p { font-size: 12px; color: #00a000; }
  #halhatatlan { color: #ff0000; }
  --></style>
</head>
<body>
<h1>A cserebogarak halhatatlanságáról</h1>
<p>A cserebogárnak vannak lábai. Ebből...</p>
<p>Minden cserebogárnak van lába...</p>
<p>A cserebogárnak vannak szárnyai is...</p>
<p>A szárnyaival repülni tud...</p>
<p>A halhatatlanság azt jelenti, hogy...</p>
<p id="halhatatlan">A cserebogarak halhatatlansága tehát...</p>
</body>
</html>
A stíluslapban a kettőskeresztet használtuk az azonosításhoz, a HTML forrásban pedig az id tulajdonságot. A kiválasztókat itt is keverhetjük (bár mivel egy azonosító csak egy konkrét elemre vonatkozhat, ezért nincs rá szükség), a p#halhatatlan egy szabályos kiválasztó.

Helyzetérzékeny kiválasztás

A stíluslapban lehetőségünk van a HTML fában betöltött helye alapján meghatározni egy elemről, hogy hogyan nézzen ki. Kevésbé bonyolultan megfogalmazva: a helyzetérzékeny kiválasztásnál a fában egy adott elem alatt levő elemhez rendelhetünk stílust, például megmondhatjuk, hogy a táblázatokon belül levő félkövér betűk sötétkékek legyenek, miközben a normál bekezdésekben levőknek nem fog megváltozni a színe.
<html>
<head>
  <title>CSS példa</title>
  <style type="text/css"><!--
  table b { color: #0000a0; }
  --></style>
</head>
<body>
<table border="1">
<tr>
  <th colspan="2">A <b>cserebogarak</b> halhatatlanságáról</th>
</tr>
<tr>
  <td>A <b>cserebogárnak</b> vannak lábai. Ebből...</td>
  <td>Minden <b>cserebogárnak</b> van lába...</td>
</tr>
</table>
<p>Minden <b>cserebogár</b> bogár...</p>
</body>
</html>
Mint a stílusdefinícióban láthatjuk, ilyenkor először azt az elemet kell leírnunk, amin belül (table), majd egy szóközt követően azt, amire (b) szeretnénk megadni a stílust. Több szintet is felölelhet a kiválasztónk, pl. használhatunk table tr b formát is, illetve keverhetjük a korábbiakban megismert kiválasztokat kedvünkre: table.fontos tr#egyedi b.

Szülő-gyermek kiválasztás

A szülő-gyermek kiválasztás abban különbözik a helyzetérzékeny kiválasztástól, hogy az elemeknek a fában betöltött helye szerinti közvetlen szülő-gyermek kapcsolata esetén tudjuk megadni a stílusmeghatározását. Az előző példánál maradva itt külön meg kell mondanunk azt, hogy a td és a th elemeken belüli b elemek esetén szeretnénk a színt megadni:
<html>
<head>
  <title>CSS példa</title>
  <style type="text/css"><!--
  th>b, td>b { color: #0000a0; }
  --></style>
</head>
<body>
<table border="1">
<tr>
  <th colspan="2">A <b>cserebogarak</b> halhatatlanságáról</th>
</tr>
<tr>
  <td>A <b>cserebogárnak</b> vannak lábai. Ebből...</td>
  <td>Minden <b>cserebogárnak</b> van lába...</td>
</tr>
</table>
<p>Minden <b>cserebogár</b> bogár...</p>
</body>
</html>
Az egyes elemeket itt most nem szóközzel, hanem nagyobb jellel választottuk el. Itt is lehet több szinten keresztüli kiválasztást leírni, például tr>th>b, amennyiben ez számunkra a megfelelőbb, illetve keverni a korábban megismert lehetőségeket. A szülő-gyermek kiválasztást a CSS szabvány újabb, második verziója, ezáltal az újabb böngészők támogatják csak!

Tulajdonság alapú kiválasztás

Előfordulhat, hogy egy adott paraméterének megléte, vagy annak az értéke szerint szeretnénk egy HTML elemhez kiválasztást rendelni, például szeretnénk csak a jelszó beviteli mezőkben a csillagok színét megváltoztatni:
<html>
<head>
  <title>CSS példa</title>
  <style type="text/css"><!--
  input[type="password"] { color: #0000a0; }
  --></style>
</head>
<body>
<form>
Név: <input name="name">
Jelszó: <input type="password" name="pwd">
</form>
</body>
</html>
A fenti példában látható, hogy a HTML elem neve után szögletes zárójelben a paraméter neve, majd az értéke következik. Lehetőségünk van a paraméter meglétére, a paraméter értékére, illetve a paraméter értékében szereplő jelsorozatra keresni:
input[type] { ... }
input[type="password"] { ... }
input[type~="pass"] { ... }
A tulajdonság alapú kiválasztást a CSS szabvány újabb, második verziója, ezáltal az újabb böngészők támogatják csak!

Összefoglalás

Egyelőre még csak elkezdtünk ismerkedni a CSS-sel, a megadásuk lehetőségeit, illetve az egyszerűbb kiválasztók használatát tanultuk meg. A kiválasztók bármilyen formában keverhetőek (ahogyan fentebb is láttunk pár példát rá), ezáltal nagyon rugalmasan használhatóak. A következő lépés annak bemutatása lesz, hogy milyen lehetőségeink vannak egy elem megjelenésének a befolyásolására, azután, hogy kiválasztottuk a most megismert kiválasztók valamelyikének segítségével. Ennek a cikksorozatnak a keretében a tervek szerint nem fogunk rá kitérni, de jó azt is tudni, hogy nem csak HTML, hanem például XML dokumentumok, interfészek (pl. XUL) megjelenésének a befolyásolására is használható eszközzel ismerkedünk éppen meg.
 
Bártházi András arcképe
Bártházi András
Az Emarsys-nál dolgozik vezető fejlesztőként, és az API-ért, integrációkért felelős termékmenedzserként. Szeret profi csapatban profit alkotni.
1

hasznald a legjobb eszkozt

Jano · 2004. Már. 19. (P), 14.12
CSS
tanulashoz ajanlatos nem az Internet Explorert hasznalni mert sajnos
rengeteg hibaja van. Rosszul vagy eppen hiabasan ertelmez dolgokat igy
esetleg oruletbe fog kergetni mikor a CSS szabvany szerinti, altalad
jol irt dolog nem mukodik benne.
Erdemesebb Mozilla alapu bongeszokon peldaul: Netscape, FireFox
(mindoszze 6Mb) esetleg Operan kiserletezni es amikor ott jol jelenik
meg akkor keresni valami modszert, hogy IE-n is jo legyen mert forditva
nem fog menni!
Nestcape4 -et el kell felejteni. Pontosabban az oreg bongeszok
kategoriajaba sorolni ahol design nem lesz, de tartalom elerheto.
Nagyon, nagyon kevesen hasznaljak mar es borzalmasan rossz a CSS
ertelmezoje. Hogy az oldal tartalma elerheto legyen ezert @import modon
erdemes a stiluslapokat a laphoz hozzaaadni mivel azt N4 nem ismeri es
igy nem fog teljesen hasznalhatatlanna valni az oldalunk.
Ha valaki ketelkedik a CSS erejeben akkor latogasson el a
csszengarden.com nevu oldalra. Ott egy HTML kodhoz csak a stiluslapok
valtoztatasaval rendelnek hozza mas-mas designt!
3

re: használd a legjobb eszközt

laze · 2004. Már. 23. (K), 10.10
Namármost a teszteléssel kapcsolatosan igazad van. Én fejlesztési oldalról szeretnék hozzászólni. Vagyis, inkább ajánlanék egy eszközt, a Homesite mellé adott TopStyle ( http://www.bradsoft.com/ ) nevezetű programot. A program követi a Homesite áldásos útját, azaz ismeri és figyelmeztet a hivatalos, W3C szabványok betartására. Stíluslapunknál a CSS Level 1, 2 és Mobile Profile mellett kiválaszthatjuk a legtöbb böngésző főbb verzióival kompatibilis ellenőrzést is!

Használjátok egészséggel! ;)

Üdv: laze
4

re: használd a legjobb eszközt

Bártházi András · 2004. Már. 23. (K), 12.06
A TopStyle nem rossz program, de azért említsük meg, hogy fizetős és hogy sajnos csak Windowsra létezik, míg az eddigi megoldások ingyenes és platformfüggetlen megoldást biztosítottak. Nekem egy Eclipse és egy Firefox segítségével nagyon jól használható fejlesztői környezetem van, nem beszélve arról, hogy tudtommal a TopStyle-nak nincsen live preview funkciója, míg a Firefox Web Developer pluginját használva amint változtatok valamit a CSS-en, egyből látszik is az eredménye. Egy hasonló megoldás Internet Explorerre is létezik.

Persze mindenki használja szíve szerint az eszközöket, s a TpoStyle egy valóban jó eszköz!
7

Topstyle

Granc Róbert · 2004. Már. 23. (K), 18.08
Nem isteníteni akarom, mostanában többet használom a Firefox + WebDev extension kombinációt, csak a korrektség kedvéért:
a TopStyle-nak van ingyenes, Lite változata is. Valamint (legalábbis a teljes verzióban) van live preview, sőt beépített kétböngészős, összehasonlító preview is.

Robi
8

Topstyle

Bártházi András · 2004. Már. 23. (K), 19.28
Ez viszont akkor kellemes meglepetés nekem. :) Talán utána kellett volna néznem, mielőtt ilyeneket beszélek. ;)
34

IE?!

Anonymous · 2005. Jan. 24. (H), 11.35
Itt jAnO:)
Nem értem, miért javasolsz nem IE-t, amikor a legtöbben azt használják és ha nem arra optimalizálod a CSS-t, akkor... Amúgy én pl. az Opera-t kedvelem, de elég érdekes, hogy a (leg)újabb verziókig nem tudta a scrollbar-t "színezni"!!!
35

scrollbar

kmm · 2005. Jan. 24. (H), 11.49
azert nem tudta, mert nem szabvanyos.
--
üdv: kmm...
36

leirtam miert nem

Jano · 2005. Jan. 24. (H), 13.38
A probelam ott van, hogy a CSS szabvany es az IE CSS ertelmezese elter!

Egy dolog az, hogy megtanuld a CSS logikajat ahogy azt kitalaltak es egy masik dolog, hogy megtanuld, hogy az IE hogyan ertelmezi azt es hgyan tudsz olyan hatast elerni amit szeretnel.

A problema az, hogyha a masodikat tanulod meg, akkor soha nem fogsz tudni olyan lapot kesziteni ami a tobbi bongeszoben is jol nez ki!

Mondok egy peldat: az olaszok eleg lazan veszik a KRESZ betartasat es nem nagyon indexelnek savvaltaskor, Olaszorszagban ezt mar ugy nagyreszt gondolom megszoktak es odafigyelnek, hogy hatha az a masik kocsi a kovetkezo pillanatban bevag eled. Ha ide jon hozzank egy olasz, ahol azert az index-elesi szabalyt emberek betartjak akkor nagyobb valoszinuseggel fog karambolt okozni. Es hiaba fogja azt mondani, hogy naluk ez nem szokas, a szabalyban (szabvanyban) benne van es o lesz a hibas!

A webfejlesztesnel nagyon gyakori, hogy anelkul, hogy utana olvasnanak az emberek, egyszeruen "kiprobalom, ha megy megy, ha nem megy nem megy alapon" irjak az oldalakat. Igy nincsen meg a viszonyitasi alap, hogy vajon a bongeszo jol csinalja-e.

Az, hogy az IE-t hasznaljak a legtobben az nem mentseg! Neked 100%-ra kell torekedned. Fokepp figyelembe veve a tendenciakat, mely szerint az IE reszesedes csokken.
2

Firefox, mint a legjobb eszköz

Bártházi András · 2004. Már. 19. (P), 15.58
Ehhez
még annyit tennék hozzá, hogy a Firefox-ot tudom javasolni, a Web
Developer extension-nel. A legújabban már bele van épitve egy CSS
szerkesztést on-the-fly lehetővé eszköz, ami a Ctrl-Shift-E-re behozza
bal oldalt az adott oldal CSS forrását, és úgy szerkesztheted, hogy
amint megváltoztatsz valamit, egyből látszik a hatása.
9

Bocsi, de valaki magyarazza m

Anonymous · 2004. Már. 24. (Sze), 13.47
Bocsi, de valaki magyarazza mar el mi ez a "Web Developer extension", ill. hogy honan lehet letolteni. A mozilla.org-on nem talaltam.
11

Web Developer extension

T.G · 2004. Már. 24. (Sze), 23.24
http://www.chrispederick.myacen.com/work/firefox/webdeveloper/
5

Miért kell html kommentbe tenni a &lt;style&gt;-t?

js · 2004. Már. 23. (K), 15.31
De most komolyan: a stíluslap definíció mindig a head-ben van. Az nem fog megjelenni. Minek akkor körbe kommentezni?
---jul
6

Miért kell html kommentbe tenni a style-t?

Bártházi András · 2004. Már. 23. (K), 17.11
Igazad van. A modern böngészők legtöbbje figyelmen kívül hagyja, nem jeleníti meg. Ez egy régről ránk maradt megoldás. Ha viszont azt nézed meg, hogy hátránya nincsen, és még ma is esetleg előfordulhat olyan böngésző (nem kell PC-re gondolni, vannak mobilok és más eszközök is), ami nem ismeri a style-t, akkor szerintem a legjobb, ha használod. A réges-régi böngészők esetén valós probléma volt, hogy a fejlécbe beírt sorokat is megjelenítették. Ugyanezt a kérdésről beszéltek itt is: CSS-Discuss lista
10

Web Developer extension

Bártházi András · 2004. Már. 24. (Sze), 14.02
Web Developer Extension, első link.

Ez egy új eszköztárat jelenít meg, amin van jó sok kellemesen használható kiegészítés, ezenkívül a legújabb verziói már magukban foglalják a CSS Edit nevű kiegészítőt is, amivel az oldalsávon tudod élőben szerkeszteni az aktuális oldal CSS-ét.
12

példák

Anonymous · 2004. Ápr. 9. (P), 13.31
Csak nálam nem jelennek meg a lapon a példák? Ilyeneket látok:
" következő formátumok mind helyesek:Az előző példákban láthattuk,"

/sun
13

re: példák

Bártházi András · 2004. Ápr. 9. (P), 14.03
Nem, mindenkinek rossz volt. Javítottam.

-boogie-
14

IE

Anonymous · 2004. Május. 21. (P), 19.32
HI

Lenne egy lama kerdesem, nem igazan vagyok jartas css-ben.
A kovetkezo peldat hiaba probaltam IE ala konfiguralni nem sikerult, Mozilla alatt tokeletesen mukodik de az atlag felhasznalok nem hasznaljak :(

<html>
<head>
<title>CSS példa</title>
<style type="text/css">
<!--  
input[type="password"] {
 color: #0000a0;
 }  
-->
</style>
</head>
<body>
<form>
Név: <input name="name">
Jelszó: <input type="password" name="pwd"></form>
</body>
</html>
Tudna valaki segiteni benne?
Valaszokat elore is kossz

Udv
Black
15

Mert nem tudja.

Hojtsy Gábor · 2004. Május. 21. (P), 20.15
Ezt nem tudja az IE. Mint ahogy a cikk is írja, csak az újabb böngészők tudják.
16

Igen a cikk azt irja az ujabb

Anonymous · 2004. Május. 21. (P), 22.16
Igen a cikk azt irja az ujabb bongeszok, de az IE-t megcsak veletlenul sem zarjaki.
Azt nem tudtam hogy az IE 6 reginek szamit bo"css".
17

Ha CSS-ről van szó

Hojtsy Gábor · 2004. Május. 21. (P), 22.59
Ha CSS-ről beszélünk, akkor az IE6 nagyon réginek számít, különben idén augusztusban lesz három éves. A Mozilla meg az Opera már klasszisokkal előrébb jár, persze nem csak CSS tekintetében.
18

Ok ok, csak ez igy eleg gaz.

Anonymous · 2004. Május. 21. (P), 23.06
Ok ok, csak ez igy eleg gaz.
Meg akartam volna kimelni magam par szaz sor atirasatol, meghat ugye nem mondhatom a oldal latogatoinak hogy telepitsek fel az oldal kedveert a Mozillat mert azzal szeb meg jobb lessz az oldalam.
19

Nem kényszerűség

Hojtsy Gábor · 2004. Május. 21. (P), 23.10
Az új CSS trükkökkel lehet használhatóbbá tenni az oldalt azok számára, akik bátrak maguk választani. Sokan teszik azt, hogy egy élvezhető megoldást készítenek böngészőfüggetlenül, de a szabványt korrektül támogató böngészőkben jobban néz ki az oldal, mert az igazi extrák csak ott jönnek elő. Ettől nem lesz szükségszerű a Mozilla vagy más telepítése, csak előnyökkel jár (már most nagyon sok webhelyet tekintve).
20

Problemat megoldottam, atirta

Anonymous · 2004. Május. 22. (Szo), 01.26
Problemat megoldottam, atirtam mindent.
Azert kossz az infot.
21

Azert van meg itt valami. Ez

Anonymous · 2004. Május. 22. (Szo), 01.58
Azert van meg itt valami.
Ezek az ujnak nevezett bongeszok sem tudnak mindent, vagy lehet en vagyok lama.
Pl. cursor: hand; stylust nem tudtam allitani hogy Mozillan mukodjon, vagy esetleg mas parancs kell.
Hat nem tudom de ez css style nem igazan tamogatott bongeszok reszerol. Ami megy egyik bongeszon nem megy a masikon, ez eleg gaz. Azt hiszem CSS-bol nem fogok komplet oldalt kesziteni az biztos.
22

Kozben megtalaltam a parancso

Anonymous · 2004. Május. 22. (Szo), 02.08
Kozben megtalaltam a parancsot ugyan azt csinalja mint a hand parancs es ez jo Mozilla-val is.
cursor: pointer;
Nem tud valaki egy oldalt ahol ossze vannak foglalva a CSS parancsok, lehetoleg magyarul?
23

Kicsit pontosítanék

Bártházi András · 2004. Május. 22. (Szo), 12.21
CSS-ben nincsenek "parancsok" itt felül, ebben a cikkben pontosan le van írva a helyes szóhasználat: egy CSS fájl kiválaszók és tulajdonságok összessége.

Nem a cursor: pointer; tulajdonság jó Mozilla alatt, hanem ez a szabványos.

Ez a cikksorozat (CSS alapjai sorozat) lényege pontosan az, hogy végigvezet a CSS kiválasztókon és tulajdonságokon... ;)

-boogie-
24

Erdekes bibi

Anonymous · 2004. Jún. 14. (H), 18.26
Haliho!

A kovetkezo pelda Internet Explorerrel mukodik, es FireFoxal sajnos nem ;-( Van valakinek otlete, hogy miert?

proba.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<link rel="stylesheet" href="proba.css" type="text/css">
</head><body><form>
<input type="submit" value="" id="x">
</form></body></html>

proba.css:
input#x {
background:'url(kep.gif)';
height:"45px";
width:"45px";
}

Es termeszetes a kep.gif is ott van a konyvtarban, ahol a proba.html es proba.css

Kivancsian varom a hozzaszolasokat!

Udv, Eyesis (MEg nem regisztralodtam ;-) Mindjart megteszem ;-)
25

Felejtsd el az idézőjeleket

Hojtsy Gábor · 2004. Jún. 14. (H), 18.52
A "45px"; helyesen 45px;, a background: 'url(kep.gif)'; pedig background: url(kep.gif);. Ha nagyon akarsz idézőjelet használni, akkor az url() belsejébe tehetsz.
26

Olvasd el figyelmesen a cikket... :)

Bártházi András · 2004. Jún. 14. (H), 20.10
Olvasd el figyelmesen a cikket, ott le van írva és szemléltetve van, hogy hogyan kell leírni a definíciókat. Az értékeket nem kell sem idézőjelbe, sem aposztrófok közé tenni. IE alatt csoda, hogy működik, ez is a hibás szabvány implementációjának köszönhető...

-boogie-
31

mégis ie6 tudja a legtöbbf

Anonymous · 2004. Aug. 18. (Sze), 10.31
mégis ie6 tudja a legtöbbféle formázási lehetőséget,
az opera-nal is van olyan dolog ami nem működik.
hiaba akarod megváltoztatni pl: input elemnek a keretszinét, operaban nem fog működni.
nagyon fontos: ezzel nem védeni akarom az ie-t, áá dehogy, csak nekem mindig az működik elsőre jól, mig a többi böngészőnél fellép valami kis gixer. lehet, ha valami komolyabb feladatot kellene megoldanom, akkor megfordulna a véleményem.
32

válasz

kmm · 2004. Aug. 19. (Cs), 07.15
hiaba akarod megváltoztatni pl: input elemnek a keretszinét, operaban nem fog működni.

ez nem igaz.
--
üdv: kmm...
33

Első a Firefox :)

T.G · 2004. Aug. 19. (Cs), 07.21
nekem mindig az működik elsőre jól, mig a többi böngészőnél fellép valami kis gixer
Itt van a hiba. Ha elsőre egy nem szabványtámogató rendszert használsz, akkor nehéz lesz szabványossá alakítani... De ha először szabványos oldalt csinálsz, akkor utána sokkal könnyebb az ie hibáit kijavítani...
27

kiválasztás

Ajnasz · 2004. Júl. 28. (Sze), 10.41
Lehet, hogy láma kérdés, de én nem tudom a választ és gondoltam megkérdezem.
A firefox.hu oldal css-ének a forrásában azt vettem észre, hogy több kiválasztó van egymás mellé írva és nem értem teljesen ezeknek az értelmezését. Több kiválasztó egyes tulajdonságai többször van megadva. Ekkor felülírja az előzőben megadottat?
Avagy ezt rosszul értelmeztem és úgy kéne értelmeznem, mintha egy (rossz példával) könyvtárstruktúra lenne és a #main a "gyökér" ezután pedig "alkönytárak" helyezkednek el? Vagy hogy is van ez?
28

Könyvtárszerkezet...

Bártházi András · 2004. Júl. 28. (Sze), 11.21
Ez kicsit a könyvtárszerkezethez hasonlít. Amikor azt írom, hogy #main p, akkor az összes a main id-jű elemen belüli p elemre vonatkozik a szabály.

-boogie-
29

Könytárszerkezet

Ajnasz · 2004. Júl. 28. (Sze), 11.43
Értem és köszönöm a segítséget.
30

Szülő-gyermek

Bártházi András · 2004. Júl. 30. (P), 07.26
Kaptunk egy visszajelzést, miszerint a szülő-gyermek kiválasztásért nem a a ~ b, hanem a a > b forma felelős. Nos, ezt tényleg így van, eddig rosszul szerepelt a cikkben, most javításra került.

-boogie-
37

CSS osztály töbszöri beállítása!

Anonymous · 2005. Júl. 3. (V), 20.53
Mi a helyzet akkor, ha van 2 külön css álományom, és az egyiket kontrolálásra szeretném használni ( amit később szúrok be ).
pl:
<link rel="stylesheet" type="text/css" href="stilus.css">
<link rel="stylesheet" type="text/css" href="control.css">

az elsőben:
h1 { border: 1px solid #FF0000; color: #FFFFFF }

a másodikban: ( control.css )
h1 { color: #FF0000 }

Ekkor viszon a keret marad, csak a betűszín módosul.

Nincs olyan lehetőség, hogy a teljes stílusbeállítást felülírja. Itt persze nem arra gondolok, hogy szépen bepötyögöm a másodikba is a border beállításokat más paraméterrel. Hanem arra, hogy esetleg van egy kulcsszó hozzá.
38

DE

kgyt · 2005. Júl. 4. (H), 15.43
De bizony be kell pötyögni...
Esetleg a @media hasznos lehet.
man css

--
Szeretettel: Károly György Tamás
kgyt&kgyt.hu - http://kgyt.hu
39

# - problem

Anonymous · 2005. Okt. 24. (H), 16.06
Hello, a gond az, hogy nemtudom hogy akkor most valójában miben is különbözik a class, és az id... meg tudnátok mondani, mert ebből az 1 egyszerű (biztos jól megfogalmazott) mondatból sajnos nem értem, hogy mi is az értelme... A válasz(oka)t kösz szépen! (többmindent is kipróbáltam: opera, explorer, de vhogy semmi különbséget nem láttam... talán egy példa jól mutatná)
40

komlyan nem világos a cikk alapján?

Hojtsy Gábor · 2005. Okt. 24. (H), 16.47
A HTML elemeket lehetőségünk van osztályokba sorolni. Ekkor az adott osztályba sorolni kívánt elemhez egy class tulajdonságot rendelünk hozzá, amelynek az értéke az osztálynevünk lesz.
...
Az azonosító alapú kiválasztás nagyon hasonló az osztály alapúhoz, egy lényeges különbség van: csak és kizárólag egy elemet tudunk egy bizonyos azonosítóval megjelölni egy HTML dokumentumon belül.
41

KOvács Pista és a 2b

Jano · 2005. Okt. 24. (H), 20.05
Kovács Pista nevű (azonosítójú) gyerek a 2a osztályba jár.

#kovacspista {}
.2a {}

Vagy:
XVG-456-os rendszámú (azonosítójú) autó egy S-Class Mercedes
#XVG456 {}
.sclassmercedes {}
42

# problem

Anonymous · 2005. Okt. 26. (Sze), 19.50
Kösz a válaszokat, de nem segítettek semmit... a gond az, hogy nem egy elméleti példára gondoltam, mert ebből semmit nem lehet megérteni, ami írtatok... a lényeg: egyszerre több class ostzályt egy html-tagbe, és a másiknál nem lehet így szóközösen elválasztani, és több fajta stílust alkalmazni így, de azért megpróbáltatok segíteni, thx.
43

Második mondat

Bártházi András · 2005. Okt. 26. (Sze), 20.16
Kérlek fogalmazzad meg a második mondatodat, mert nem lehet érteni.

-boogie-
44

# re

Anonymous · 2005. Okt. 27. (Cs), 16.05
Szal nem lehet egy HTML parancson az id opción belül több azonosítót használni...
45

miért lehetne?

Hojtsy Gábor · 2005. Okt. 27. (Cs), 16.36
Mint a cikk is írja, és ki is emeltük, egy azonosító csak egy elemhez rendelhető. Minek adnál egy elemnek több azonosítót is, amikor semelyik másik elemnek egyik felhasznált azonosítót sem adhatod már? Miért akarod megnehezíteni az életed azzal, hogy egy elemnek több egyedi nevet is akarsz adni? Nem elég megjegyezni, hogy mi az az egy név, amivel hivatkozhatsz rá?
46

több osztály

Jano · 2005. Okt. 27. (Cs), 17.48
Nicns olyan, hogy HTML parancs! HTML elemre gondolsz? Id csak egy lehet. Osztály viszont több is! És természetesen id és osztály egyszerre használható.

Mi a konkrét probléma amit szeretnél megoldani?
47

Különbség pl.

attlad · 2005. Okt. 27. (Cs), 19.01
miben is különbözik a class, és az id

Az id nem csak arra jó, hogy CSS-ben hivatkozhass egy elemre, pl. lehet oldalon belüli hivatkozásra használni (<a href="#termekek">Termékek</a>), JavaScriptben is használhatod (document.getElementById('termekek')), stb. CSS szempontjából pl. az a különbség, hogy CSS-ben az id szelektor "súlya" nagyobb (100), mint a class-é (10) pl.:

<style type="text/css">
#termekek {
  background: red;
}
.kiemelt {
  background: green;
}
</style>

<p id="termekek" class="kiemelt">Tartalom</p>
Piros lesz a bekezdés háttere hiába a zöld van később meghatározva.

Attila
48

td>b kontra td b

eMeLA · 2006. Jan. 12. (Cs), 20.13
Nem egésszen értem a "Helyzetérzékeny kiválasztás" és a "Szülő-gyermek kiválasztás" közti különbséget.

Miért és hol van szükség "Szülő-gyermek kiválasztás"-ra amikor azt a "Helyzetérzékeny kiválasztás"-sal le lehet fedni.

TABLE TR TD B és a TABLE>TR>TD>B is ugyanaz, ugyanakkor az előzőből ha kihagyunk egy elemet akkor az nagyobb árnyaltságot eredményez, mig az utobbi nem müködik. Magyarul az utobbira ("Szülő-gyermek kiválasztás") nincs szükség (???)
49

Egymásba ágyazott lista mint menü

Jano · 2006. Jan. 12. (Cs), 21.21
Legyen egy egymásba ágyazott listánk amit menünek akarunk használni. A külső ul kapjon .menu osztály elnevezést. Ekkor az "ul.menu li" szabály minden li elemre érvényes lesz, tehát első és második szint is, míg az "ul.menu > li" csak az első szintűekre.

A table>tr>td sor azért nem megy, mert a table és tr között van egy tbody elem is.
50

<Nincs cím>

eMeLA · 2006. Jan. 13. (P), 08.39
Hurrá ! Értem... Köszönöm !
51

szám karakterrel kezdődő class problémája

Porrima · 2008. Már. 27. (Cs), 22.49
Most kezdtem komolyabban alkalmazni a CSS-t, és egy problémába ütköztem, de nem az IE-nél, mert az jól csinálja, hanem a Mozillánál és a Firefoxnál.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>CSS próba Mozillával, Firefox-szal</title>

<style>
p.1cl {text-align: center}
p.cl {text-align: center}
</style>

</head>

<body>

<p class="1cl">számmal kezdődő class
</p>
<p class="cl">betűvel kezdődő class
</p>

</body>
</html>

Van arra szabály, hogy class nem kezdődhet számmal?
52

Specifikáció

zila · 2008. Már. 27. (Cs), 23.31
http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".


Vagyis nem kezdődhet számmal. És nem, az IE nem jól csinálja. A Firefox csinálja jól.
53

Kösz a tájékoztatást!

Porrima · 2008. Már. 30. (V), 15.01
Angolul annyit tudok, hogy a fenti szövegből már kiböngésztem én is, hogy a szintaktika szerint nem kezdődhet számmal: mégegyszer kösz!

Porrima