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.
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
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öbbMint láthatjuk, minden egyes címsor (A A stíluslapot tartalmazó állományban (a példában A beágyazott stíluslapokhoz hasonlóan az így meghatározott stílus az egész dokumentumra érvényes.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.A cím megadásakor hasonlóképpen járhatunk el, mint a linkeknél általában, azaz akár 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: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:Itt az első három szintű címsornak határoztuk meg a színbeli megjelenését.A példában három fejezetet és egy címsort soroltunk a
Az egyes kiválasztókat keverhetjük is, például a következő példában aA stíluslapban a kettőskeresztet használtuk az azonosításhoz, a HTML forrásban pedig az Mint a stílusdefinícióban láthatjuk, ilyenkor először azt az elemet kell leírnunk, amin belül (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 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: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!
■ 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.
A sorozatban megjelent
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>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>trükka 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, egylink elem segítségével:<head>
<link rel="stylesheet" href="kulso.css" type="text/css">
</head>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; }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, minthafont 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>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>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, egykiválasztóés egy
tulajdonságré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 }kiválasztó { tulajdonság } kiválasztó { tulajdonság }
kiválasztó
{
tulajdonság
}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; }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 egyclass 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>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>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>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 atd é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>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>input[type] { ... }
input[type="password"] { ... }
input[type~="pass"] { ... }Ö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.
hasznald a legjobb eszkozt
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!
re: használd a legjobb eszközt
Használjátok egészséggel! ;)
Üdv: laze
re: használd a legjobb eszközt
Persze mindenki használja szíve szerint az eszközöket, s a TpoStyle egy valóban jó eszköz!
Topstyle
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
Topstyle
IE?!
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"!!!
scrollbar
--
üdv: kmm...
leirtam miert nem
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.
Firefox, mint a legjobb eszköz
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.
Bocsi, de valaki magyarazza m
Web Developer extension
Miért kell html kommentbe tenni a <style>-t?
---jul
Miért kell html kommentbe tenni a style-t?
Web Developer extension
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.
példák
" következő formátumok mind helyesek:Az előző példákban láthattuk,"
/sun
re: példák
-boogie-
IE
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 :(
Valaszokat elore is kossz
Udv
Black
Mert nem tudja.
Igen a cikk azt irja az ujabb
Azt nem tudtam hogy az IE 6 reginek szamit bo"css".
Ha CSS-ről van szó
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.
Nem kényszerűség
Problemat megoldottam, atirta
Azert kossz az infot.
Azert van meg itt valami. Ez
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.
Kozben megtalaltam a parancso
cursor: pointer;
Nem tud valaki egy oldalt ahol ossze vannak foglalva a CSS parancsok, lehetoleg magyarul?
Kicsit pontosítanék
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-
Erdekes bibi
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 ;-)
Felejtsd el az idézőjeleket
"45px";helyesen45px;, abackground: 'url(kep.gif)';pedigbackground: url(kep.gif);. Ha nagyon akarsz idézőjelet használni, akkor az url() belsejébe tehetsz.Olvasd el figyelmesen a cikket... :)
-boogie-
mégis ie6 tudja a legtöbbf
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.
válasz
ez nem igaz.
--
üdv: kmm...
Első a Firefox :)
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...
kiválasztás
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?
Könyvtárszerkezet...
#main p, akkor az összes amainid-jű elemen belülipelemre vonatkozik a szabály.-boogie-
Könytárszerkezet
Szülő-gyermek
a ~ b, hanem aa > bforma felelős. Nos, ezt tényleg így van, eddig rosszul szerepelt a cikkben, most javításra került.-boogie-
CSS osztály töbszöri beállítása!
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á.
DE
Esetleg a @media hasznos lehet.
man css
--
Szeretettel: Károly György Tamás
kgyt&kgyt.hu - http://kgyt.hu
# - problem
komlyan nem világos a cikk alapján?
...
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.
KOvács Pista és a 2b
#kovacspista {}
.2a {}
Vagy:
XVG-456-os rendszámú (azonosítójú) autó egy S-Class Mercedes
#XVG456 {}
.sclassmercedes {}
# problem
Második mondat
-boogie-
# re
miért lehetne?
több osztály
Mi a konkrét probléma amit szeretnél megoldani?
Különbség pl.
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.:
Attila
td>b kontra td b
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 (???)
Egymásba ágyazott lista mint menü
A table>tr>td sor azért nem megy, mert a table és tr között van egy tbody elem is.
<Nincs cím>
szám karakterrel kezdődő class problémája
Specifikáció
Vagyis nem kezdődhet számmal. És nem, az IE nem jól csinálja. A Firefox csinálja jól.
Kösz a tájékoztatást!
Porrima