<![CDATA[HHWForum.hu - Webdesign]]> https://hhwforum.hu/ Thu, 28 May 2026 20:32:14 +0000 MyBB <![CDATA[Kinézet elkészítéséhez segítség]]> https://hhwforum.hu/thread-4090.html Sat, 17 Sep 2016 20:15:08 +0800 Mr.D]]> https://hhwforum.hu/thread-4090.html Kinézet elkészí­téséhez segí­tség

Sziasztok Smile

Készí­tettünk egy online rajzfilmekkel foglalkozó weblapot,de meggyűlt a bajunk a design elkészí­tésével. Sajnos eddig senki sem tudott benne segí­teni ezért lehet,hogy picit bonyolult az elképzelésünk (Javascript, HTML , CSS magas szinten). A tárhelyen wordpress szerkesztőt használunk. Aki tud segí­teni: [EMAIL="onlinerajzfilmek@gmail.com"]onlinerajzfilmek@gmail.com[/EMAIL] cí­mre í­rjanak.
(szükség esetén tudunk fizetni is (bár ingyen jobb lenne ) persze csak akkor,ha elérhető árat mondasz!)
Köszönjük mindenki segí­tségét!
]]> Kinézet elkészí­téséhez segí­tség

Sziasztok Smile

Készí­tettünk egy online rajzfilmekkel foglalkozó weblapot,de meggyűlt a bajunk a design elkészí­tésével. Sajnos eddig senki sem tudott benne segí­teni ezért lehet,hogy picit bonyolult az elképzelésünk (Javascript, HTML , CSS magas szinten). A tárhelyen wordpress szerkesztőt használunk. Aki tud segí­teni: [EMAIL="onlinerajzfilmek@gmail.com"]onlinerajzfilmek@gmail.com[/EMAIL] cí­mre í­rjanak.
(szükség esetén tudunk fizetni is (bár ingyen jobb lenne ) persze csak akkor,ha elérhető árat mondasz!)
Köszönjük mindenki segí­tségét!
]]> <![CDATA[Online CSS szerkesztő]]> https://hhwforum.hu/thread-360.html Wed, 15 Oct 2008 16:45:07 +0800 Palee]]> https://hhwforum.hu/thread-360.html Online CSS szerkeszt?

Találtam egy jó kis CSS szerkesztő progit, amit online és legenrálja neked a kódot is.
Idézet:A kódrészlet megtekintéséhez be kell jelentkezned, vagy nincs jogosultságod a tartalom megtekintéséhez.
Plus tudok ajánlani egy marha jó online képszerkesztőt, ami majdnem PS szinten van! (de komolyan) [Kép: tongue.gif]
Idézet:A kódrészlet megtekintéséhez be kell jelentkezned, vagy nincs jogosultságod a tartalom megtekintéséhez.
]]> Online CSS szerkeszt?

Találtam egy jó kis CSS szerkesztő progit, amit online és legenrálja neked a kódot is.
Idézet:A kódrészlet megtekintéséhez be kell jelentkezned, vagy nincs jogosultságod a tartalom megtekintéséhez.
Plus tudok ajánlani egy marha jó online képszerkesztőt, ami majdnem PS szinten van! (de komolyan) [Kép: tongue.gif]
Idézet:A kódrészlet megtekintéséhez be kell jelentkezned, vagy nincs jogosultságod a tartalom megtekintéséhez.
]]> <![CDATA[CSS: 9. Margó tulajdonságok]]> https://hhwforum.hu/thread-355.html Fri, 10 Oct 2008 00:14:33 +0800 HTML]]> https://hhwforum.hu/thread-355.html
Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.
W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

Idézet:A kódrészlet megtekintéséhez be kell jelentkezned, vagy nincs jogosultságod a tartalom megtekintéséhez.

Fordí­tásért külön köszönet illeti Szabeszt! Köszi a segí­tséget! Smile]]>
Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.
W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

Idézet:A kódrészlet megtekintéséhez be kell jelentkezned, vagy nincs jogosultságod a tartalom megtekintéséhez.

Fordí­tásért külön köszönet illeti Szabeszt! Köszi a segí­tséget! Smile]]> <![CDATA[CSS: 8. Kőrvonal tulajdonságok]]> https://hhwforum.hu/thread-354.html Fri, 10 Oct 2008 00:11:24 +0800 HTML]]> https://hhwforum.hu/thread-354.html CSS: 8. Körvonal tulajdonságok

A CSS segí­tségével lehetőséged van egy elem köré kontúrt húzni a keret szegélyén túl, hogy egy elem "kiemelkedő" legyen. Ez egy új dolog, érdemes kipróbálni! Figyelem! Az Internet Explorer és a Netscape böngészők nem jelení­tik meg a kontúrt!!!

Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.
W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

[Kép: o1wk2.png]]]> CSS: 8. Körvonal tulajdonságok

A CSS segí­tségével lehetőséged van egy elem köré kontúrt húzni a keret szegélyén túl, hogy egy elem "kiemelkedő" legyen. Ez egy új dolog, érdemes kipróbálni! Figyelem! Az Internet Explorer és a Netscape böngészők nem jelení­tik meg a kontúrt!!!

Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.
W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

[Kép: o1wk2.png]]]> <![CDATA[CSS: 7. Keret tulajdonságok]]> https://hhwforum.hu/thread-351.html Wed, 08 Oct 2008 20:39:43 +0800 HTML]]> https://hhwforum.hu/thread-351.html
Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.
W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

[Kép: b1pn4.png]
[Kép: b2lh0.png]
]]>
Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.
W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

[Kép: b1pn4.png]
[Kép: b2lh0.png]
]]> <![CDATA[CSS: 6. Betű tulajdonságok]]> https://hhwforum.hu/thread-350.html Wed, 08 Oct 2008 20:38:15 +0800 HTML]]> https://hhwforum.hu/thread-350.html CSS: 6. Bet? tulajdonságok

A CSS segí­tségével a betűnek a családját, kiemeltségét, méretét és a stí­lusát állí­thatod be.
Megjegyzés: CSS1-ben a betűket betűnévvel azonosí­tották. Hogyha a böngésző nem támogatja az adott betűtí­pust, akkor az alapértelezett betűtí­pusra fog átváltani.

Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.
W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

[Kép: f2_www.kepfeltoltes.hu_.png]
[Kép: f3_www.kepfeltoltes.hu_.png]



Fordí­tásért külön köszönet illeti Szabeszt! Köszi a segí­tséget! Smile]]> CSS: 6. Bet? tulajdonságok

A CSS segí­tségével a betűnek a családját, kiemeltségét, méretét és a stí­lusát állí­thatod be.
Megjegyzés: CSS1-ben a betűket betűnévvel azonosí­tották. Hogyha a böngésző nem támogatja az adott betűtí­pust, akkor az alapértelezett betűtí­pusra fog átváltani.

Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.
W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

[Kép: f2_www.kepfeltoltes.hu_.png]
[Kép: f3_www.kepfeltoltes.hu_.png]



Fordí­tásért külön köszönet illeti Szabeszt! Köszi a segí­tséget! Smile]]> <![CDATA[CSS: 5. Szőveg tulajdonságok]]> https://hhwforum.hu/thread-349.html Wed, 08 Oct 2008 01:25:56 +0800 HTML]]> https://hhwforum.hu/thread-349.html CSS: 5. Szöveg tulajdonságok

A CSS segí­tségével egy szövegnek a tulajdonságait szabhatod testre. Megadhatod a szöveg szí­nét, növelheted vagy csökkentheted a karakterek közti távolságot, igazí­thatod, kidekorálhatod a szöveget, behúzhatod a szöveg első sorát és még sok más tulajdonságot.


Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.
W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

[Kép: text_www.kepfeltoltes.hu_.png]]]> CSS: 5. Szöveg tulajdonságok

A CSS segí­tségével egy szövegnek a tulajdonságait szabhatod testre. Megadhatod a szöveg szí­nét, növelheted vagy csökkentheted a karakterek közti távolságot, igazí­thatod, kidekorálhatod a szöveget, behúzhatod a szöveg első sorát és még sok más tulajdonságot.


Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.
W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

[Kép: text_www.kepfeltoltes.hu_.png]]]> <![CDATA[CSS: 4. Háttér tulajdonságok]]> https://hhwforum.hu/thread-348.html Wed, 08 Oct 2008 01:20:16 +0800 HTML]]> https://hhwforum.hu/thread-348.html
Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.
W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

[Kép: table1_www.kepfeltoltes.hu_.png]

(A képre kattintva teljes méretben megtekinthető a táblázat.) ]]>
Böngésző támogatás: IE: Internet Explorer ; F: Firefox ; N: Netscape.
W3C: A W3C melyik CSS ajánlása tartalmazza. (1: CSS1 ; 2: CSS2)

[Kép: table1_www.kepfeltoltes.hu_.png]

(A képre kattintva teljes méretben megtekinthető a táblázat.) ]]> <![CDATA[CSS: 3. Hogyan?]]> https://hhwforum.hu/thread-347.html Wed, 08 Oct 2008 01:18:56 +0800 HTML]]> https://hhwforum.hu/thread-347.html Hogyan illessz be egy stí­luslapot?
Amikor egy böngésző elolvas egy stí­luslapot át fogja alakí­tani az oldalt a stí­luslapnak megfelelően. Háromféle módon illeszthetsz be stí­luslapot az oldaladba:

1.) Külső stí­luslap
A külső stí­luslap akkor hasznos, hogyha több oldal megjelenését szeretnéd egyetlen fájllal irányí­tani. Mindegyik oldal forráskódjának fej (head) szerepelnie kell a stí­luslap elérési útvonalának a <link> parancs segí­tségével.
<div class='htmltop'>HTML[/align]<div class='htmlmain'><head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>[/align]A böngésző ki fogja olvasni a stí­lus definí­ciókat a mystyle.css fájlból és annak megfelelően fogja formázni az oldal stí­lusát.

Külső stí­luslapot bármilyen szövegszerkesztő programmal tudsz készí­teni. Arra figyelj, hogy ne használj HTML parancsokat a stí­luslapon belül és .css formátumba mentsd el a munkád végeztével. Például:
<div class='htmltop'>HTML[/align]<div class='htmlmain'>hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}[/align]

[Kép: lamp.gif] Figyelj arra, hogy ne hagyj üres helyet az értékek és a mértékenységek között, mert néhány böngésző hibásan fogja értelmezni! Például véletlenül "margin-left: 20px" -t í­rtál a "margin_left: 20px" helyett.

2.) Beépí­tett stí­luslap
Beépí­tett stí­luslapot akkor használj, hogyha egy oldalnak egyéni megjelenést szeretnél adni. A stí­luslapot az oldal head részében adhatod meg a <style> parancs használatával. <div class='htmltop'>HTML[/align]<div class='htmlmain'><head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>[/align]
A böngésző most olvasni fogja a stí­lus definí­ciókat és ezeknek megfelelően fogja beállí­tani az oldalt.
Megjegyzés: Régebbi böngészők nem ismerik a <style> parancsot ezért ki fogják hagyni, viszont a tartalmát meg fogják jelení­teni. Ezt ki tudod védeni egyszerűen úgy, hogy a <style></style> közti részt HTML-es megjegyzésbe teszed ().
<div class='htmltop'>HTML[/align]<div class='htmlmain'><head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>[/align]

3.) Belső stí­lus
A belső stí­lussal a CSS előnyeit veszí­ted el, ugyanis a HTML elemekhez hozzárendelsz egy style attritbútumot amin belül adod meg az elem stí­lusát.<div class='htmltop'>HTML[/align]<div class='htmlmain'><p style="color: sienna; margin-left: 20px">
Ez egy barnás bekezdés, 20 pixeles bal oldali margóval.
</p>[/align]

4.) Többszörös stí­luslapok
Hogyha azonos kiválasztóra több tulajdonság lett beállí­tva különböző stí­luslapokban, akkor az értékek öröklődni fognak a jobban meghatározó stí­luslapból.Például egy külső stí­luslap a következő tulajdonságokat tartalmazza a h3 kiválasztóra:<div class='htmltop'>HTML[/align]<div class='htmlmain'>h3
{
color: red;
text-align: left;
font-size: 8pt
}[/align]és egy belső stí­luslap ezeket a tulajdonságokat adja meg ugyanarra az elemre:<div class='htmltop'>HTML[/align]<div class='htmlmain'>h3
{
text-align: right;
font-size: 20pt
}[/align]

Hogyha ezt a két beállí­tást (a külső és belső stí­luslapban szereplő tulajdonságokat) egy oldalon alkalamazod, akkor a h3 tulajdonságai ezek lesznek:<div class='htmltop'>HTML[/align]<div class='htmlmain'>color: red;
text-align: right;
font-size: 20pt[/align]

A szí­n (color) a külső stí­luslapból lett örökölve, mí­g a szöveg helye (text-align) és a betűméret (font-size) a belső stí­luslapból.]]> Hogyan illessz be egy stí­luslapot?
Amikor egy böngésző elolvas egy stí­luslapot át fogja alakí­tani az oldalt a stí­luslapnak megfelelően. Háromféle módon illeszthetsz be stí­luslapot az oldaladba:

1.) Külső stí­luslap
A külső stí­luslap akkor hasznos, hogyha több oldal megjelenését szeretnéd egyetlen fájllal irányí­tani. Mindegyik oldal forráskódjának fej (head) szerepelnie kell a stí­luslap elérési útvonalának a <link> parancs segí­tségével.
<div class='htmltop'>HTML[/align]<div class='htmlmain'><head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>[/align]A böngésző ki fogja olvasni a stí­lus definí­ciókat a mystyle.css fájlból és annak megfelelően fogja formázni az oldal stí­lusát.

Külső stí­luslapot bármilyen szövegszerkesztő programmal tudsz készí­teni. Arra figyelj, hogy ne használj HTML parancsokat a stí­luslapon belül és .css formátumba mentsd el a munkád végeztével. Például:
<div class='htmltop'>HTML[/align]<div class='htmlmain'>hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}[/align]

[Kép: lamp.gif] Figyelj arra, hogy ne hagyj üres helyet az értékek és a mértékenységek között, mert néhány böngésző hibásan fogja értelmezni! Például véletlenül "margin-left: 20px" -t í­rtál a "margin_left: 20px" helyett.

2.) Beépí­tett stí­luslap
Beépí­tett stí­luslapot akkor használj, hogyha egy oldalnak egyéni megjelenést szeretnél adni. A stí­luslapot az oldal head részében adhatod meg a <style> parancs használatával. <div class='htmltop'>HTML[/align]<div class='htmlmain'><head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>[/align]
A böngésző most olvasni fogja a stí­lus definí­ciókat és ezeknek megfelelően fogja beállí­tani az oldalt.
Megjegyzés: Régebbi böngészők nem ismerik a <style> parancsot ezért ki fogják hagyni, viszont a tartalmát meg fogják jelení­teni. Ezt ki tudod védeni egyszerűen úgy, hogy a <style></style> közti részt HTML-es megjegyzésbe teszed ().
<div class='htmltop'>HTML[/align]<div class='htmlmain'><head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>[/align]

3.) Belső stí­lus
A belső stí­lussal a CSS előnyeit veszí­ted el, ugyanis a HTML elemekhez hozzárendelsz egy style attritbútumot amin belül adod meg az elem stí­lusát.<div class='htmltop'>HTML[/align]<div class='htmlmain'><p style="color: sienna; margin-left: 20px">
Ez egy barnás bekezdés, 20 pixeles bal oldali margóval.
</p>[/align]

4.) Többszörös stí­luslapok
Hogyha azonos kiválasztóra több tulajdonság lett beállí­tva különböző stí­luslapokban, akkor az értékek öröklődni fognak a jobban meghatározó stí­luslapból.Például egy külső stí­luslap a következő tulajdonságokat tartalmazza a h3 kiválasztóra:<div class='htmltop'>HTML[/align]<div class='htmlmain'>h3
{
color: red;
text-align: left;
font-size: 8pt
}[/align]és egy belső stí­luslap ezeket a tulajdonságokat adja meg ugyanarra az elemre:<div class='htmltop'>HTML[/align]<div class='htmlmain'>h3
{
text-align: right;
font-size: 20pt
}[/align]

Hogyha ezt a két beállí­tást (a külső és belső stí­luslapban szereplő tulajdonságokat) egy oldalon alkalamazod, akkor a h3 tulajdonságai ezek lesznek:<div class='htmltop'>HTML[/align]<div class='htmlmain'>color: red;
text-align: right;
font-size: 20pt[/align]

A szí­n (color) a külső stí­luslapból lett örökölve, mí­g a szöveg helye (text-align) és a betűméret (font-size) a belső stí­luslapból.]]> <![CDATA[CSS: 2. Szintaxis]]> https://hhwforum.hu/thread-346.html Tue, 07 Oct 2008 01:55:02 +0800 HTML]]> https://hhwforum.hu/thread-346.html Szintaxis
A CSS szintaxisa három részből van felépí­tve: a kiválasztóból [selector] (amivel megadod, hogy melyik HTML elemnek szeretnéd megváltoztatni a megjelenését, pl: <h1>), a tulajdonságbólértékből [value] (milyen értéket vegyen fel az előbb megadott tulajdonság, pl: red).selector {property: value}
pl:
a {color: #CCDDEE;}Vedd észre, hogy a tulajdonság és az érték között van egy ":" és az egész egy "{ }" közé van foglalva. Hogyha két szóból áll az érték, akkor tegyél köréjük idézőjelet (""). Pl.:</span></span><div class='htmltop'>HTML[/align]<div class='htmlmain'>p {font-family: "sans serif"}[/align] <span style=font-family:Tahoma">

Hogyha több tulajdonságot szeretnél adni egy kiválasztóhoz, akkor azokat egymástól pontosvesszővel ( ; ) válaszd el. Pl.:

</span><div class='htmltop'>HTML[/align]<div class='htmlmain'>p {text-align:center;color:red}[/align]<span style="font-family:Tahoma">vagy

</span><div class='htmltop'>HTML[/align]<div class='htmlmain'>p {
text-align: center;
color: black;
font-family: arial
}[/align]<span style="font-family:Tahoma">

Csoportosí­tás
Csoportokba foglalhatsz kiválasztókat, egymástól vesszővel (,) elválasztva. A csoport minden egyes tagjára érvényes lesz az a tulajdonság és a vele járó érték, amit beállí­tunk a csoporthoz. Az alábbi példában a header (fejléc) elemeket foglaltuk egy csoportba, mindegyik fejléc zöld szí­nű lesz:
[property] (amivel megadod, hogy melyik tulajdonságát szeretnéd módosí­tani, pl: szí­nét) és az </span><div class='htmltop'>HTML[/align]<div class='htmlmain'>h1,h2,h3,h4,h5,h6
{
color: green
}[/align]<span style="font-family:Tahoma"><span style="color:Black">

Az osztály kiválasztó
Az osztály (class) kiválasztóval egy HTML elemhez különböző értékű tulajdonságokat rendelhetsz hozzá. Az alábbi példában a "p" (bekezdés) elemből készí­tünk két csoportot. Az egyiket jobbra, a másikat pedig balra igazí­tjuk.</span></span><div class='htmltop'>HTML[/align]<div class='htmlmain'>p.right {text-align: right}
p.center {text-align: center}[/align]<span style="font-family:Tahoma">

Az osztály attritbútumot bele kell épí­tened a HTML dokumentumba ahhoz, hogy érvénybe lépjenek a benne meghatározott tulajdonságok. Az előbbi példa beépí­tve egy kódrészletbe:</span>
<div class='htmltop'>HTML[/align]<div class='htmlmain'><p class="right">
Ez a bekezdés jobbra igazí­tott lesz
</p>
<p class="center">
Ez pedig középre lesz igazí­tva
</p>[/align]<span style="font-family:Tahoma">

Ahhoz, hogy egy elem több osztályhoz (csoport) tartozzon egymástól szóközve elválaszva kell megadni a csoportok neveit. Pl: </span><div class='htmltop'>HTML[/align]<div class='htmlmain'><p class="center bold">
Ennek a bekezdésnek a megjelenését a "center" és a "bold" csoportok tulajdonságai és azoknak az értékei határozzák meg.
</p>[/align]<span style="font-family:Tahoma">Eddig csak egy HTML elemet osztottunk csoportokra. Mostantól viszont már lehetőségünk van egy csoportot több HTML elemnél alkalmaznunk. Pl:.

</span><div class='htmltop'>HTML[/align]<div class='htmlmain'>kozep {text-align: center} <h1 class="kozep>
Ez a fejléc középre lesz igazí­tva.
</h1>

<p class="kozep">
Ez a bekezdés is középre lesz igazí­tva.
</p>[/align]<span style="font-family:Tahoma"><span style="color:Black">

[Kép: lamp.gif]
Ne kezdj csoportneveket számmal, mert egyes böngészők nem tudják értelmezni!

Stí­lusok hozzáadása elemekhez, amelyeknek egyéni attritbútumaik vannak Meghatározott HTML elem, meghatározott tulajdonsága (attritbútuma) esetén is meg tudod határozni, hogyan jelenjen meg. Pl:

</span></span><div class='htmltop'>HTML[/align]<div class='htmlmain'>input[type="text] {background-color: blue}[/align]<span style="font-family:Tahoma"><span style="color:Black">

Azoknak az input elemeknek lesz kék a háttere, amelyek szövegbeviteli (text) mezők.

Az id kiválasztó
Meghatározhatsz HTML elemeket egyéni id-k alapján is. Ameddig a csoporotba foglalt elemek neveit ponttal (.) kell kezdeni, addig az egyéni névvel (id-val) ellátottakét pedig kettőskereszttel (#). Az alábbi példában a "zold" nevű elem háttere zöld szí­nű lesz.

</span></span><div class='htmltop'>HTML[/align]<div class='htmlmain'>#green {color: green}[/align]<span style="font-family:Tahoma"><span style="color:Black">

Az alábbi kódban szereplő "p" elem csak akkor lesz középre igazí­tva (center) és piros (red) szí­nnel í­rva, hogyha "para1"-nek hí­vják.

</span></span><div class='htmltop'>HTML[/align]<div class='htmlmain'>p#para1
{
text-align: center;
color: red
}


Ez a bekezdés alapértelmezett (általában fekete) szí­nű lesz.
</p><p id="para1">
Ez a bekezdés pedig piros szí­nű lesz és középre lesz igazí­tva.
</p>[/align]<span style="font-family:Tahoma"><span style="color:Black">[Kép: lamp.gif]Szintén NE kezdj id-val ellátott kiválasztókat számmal, mert néhány böngésző nem fogja tudni értelmezni!

CSS megjegyzések
A megjegyzések könnyebben értelmezhetővé teszik a hosszabb kódokat, í­gy érdemes használni őket, nehogy eltévedj közöttük. A megjegyzéseket a böngészők kihagyják, í­gy azok nem kerülnek megjelení­tésre az oldaladat látogatók előtt, csak a forráskódban lesznek láthatóak. A megjegyzéseket "/*" jellel kell kezdeni és "*/" jellel lezárni. Több sorból is állhat a megjegyzés, amiket akár két tulajdonság közé is beépí­thetsz. Pl.:
</span></span><div class='htmltop'>HTML[/align]<div class='htmlmain'>/* Ez
egy
több sorból
álló, külső
megjegyzés. */

p
{
text-align: center;
/* Ez egy belső megjegyzés. */
color: black;
font-family: arial
}[/align]]]> Szintaxis
A CSS szintaxisa három részből van felépí­tve: a kiválasztóból [selector] (amivel megadod, hogy melyik HTML elemnek szeretnéd megváltoztatni a megjelenését, pl: <h1>), a tulajdonságbólértékből [value] (milyen értéket vegyen fel az előbb megadott tulajdonság, pl: red).selector {property: value}
pl:
a {color: #CCDDEE;}Vedd észre, hogy a tulajdonság és az érték között van egy ":" és az egész egy "{ }" közé van foglalva. Hogyha két szóból áll az érték, akkor tegyél köréjük idézőjelet (""). Pl.:</span></span><div class='htmltop'>HTML[/align]<div class='htmlmain'>p {font-family: "sans serif"}[/align] <span style=font-family:Tahoma">

Hogyha több tulajdonságot szeretnél adni egy kiválasztóhoz, akkor azokat egymástól pontosvesszővel ( ; ) válaszd el. Pl.:

</span><div class='htmltop'>HTML[/align]<div class='htmlmain'>p {text-align:center;color:red}[/align]<span style="font-family:Tahoma">vagy

</span><div class='htmltop'>HTML[/align]<div class='htmlmain'>p {
text-align: center;
color: black;
font-family: arial
}[/align]<span style="font-family:Tahoma">

Csoportosí­tás
Csoportokba foglalhatsz kiválasztókat, egymástól vesszővel (,) elválasztva. A csoport minden egyes tagjára érvényes lesz az a tulajdonság és a vele járó érték, amit beállí­tunk a csoporthoz. Az alábbi példában a header (fejléc) elemeket foglaltuk egy csoportba, mindegyik fejléc zöld szí­nű lesz:
[property] (amivel megadod, hogy melyik tulajdonságát szeretnéd módosí­tani, pl: szí­nét) és az </span><div class='htmltop'>HTML[/align]<div class='htmlmain'>h1,h2,h3,h4,h5,h6
{
color: green
}[/align]<span style="font-family:Tahoma"><span style="color:Black">

Az osztály kiválasztó
Az osztály (class) kiválasztóval egy HTML elemhez különböző értékű tulajdonságokat rendelhetsz hozzá. Az alábbi példában a "p" (bekezdés) elemből készí­tünk két csoportot. Az egyiket jobbra, a másikat pedig balra igazí­tjuk.</span></span><div class='htmltop'>HTML[/align]<div class='htmlmain'>p.right {text-align: right}
p.center {text-align: center}[/align]<span style="font-family:Tahoma">

Az osztály attritbútumot bele kell épí­tened a HTML dokumentumba ahhoz, hogy érvénybe lépjenek a benne meghatározott tulajdonságok. Az előbbi példa beépí­tve egy kódrészletbe:</span>
<div class='htmltop'>HTML[/align]<div class='htmlmain'><p class="right">
Ez a bekezdés jobbra igazí­tott lesz
</p>
<p class="center">
Ez pedig középre lesz igazí­tva
</p>[/align]<span style="font-family:Tahoma">

Ahhoz, hogy egy elem több osztályhoz (csoport) tartozzon egymástól szóközve elválaszva kell megadni a csoportok neveit. Pl: </span><div class='htmltop'>HTML[/align]<div class='htmlmain'><p class="center bold">
Ennek a bekezdésnek a megjelenését a "center" és a "bold" csoportok tulajdonságai és azoknak az értékei határozzák meg.
</p>[/align]<span style="font-family:Tahoma">Eddig csak egy HTML elemet osztottunk csoportokra. Mostantól viszont már lehetőségünk van egy csoportot több HTML elemnél alkalmaznunk. Pl:.

</span><div class='htmltop'>HTML[/align]<div class='htmlmain'>kozep {text-align: center} <h1 class="kozep>
Ez a fejléc középre lesz igazí­tva.
</h1>

<p class="kozep">
Ez a bekezdés is középre lesz igazí­tva.
</p>[/align]<span style="font-family:Tahoma"><span style="color:Black">

[Kép: lamp.gif]
Ne kezdj csoportneveket számmal, mert egyes böngészők nem tudják értelmezni!

Stí­lusok hozzáadása elemekhez, amelyeknek egyéni attritbútumaik vannak Meghatározott HTML elem, meghatározott tulajdonsága (attritbútuma) esetén is meg tudod határozni, hogyan jelenjen meg. Pl:

</span></span><div class='htmltop'>HTML[/align]<div class='htmlmain'>input[type="text] {background-color: blue}[/align]<span style="font-family:Tahoma"><span style="color:Black">

Azoknak az input elemeknek lesz kék a háttere, amelyek szövegbeviteli (text) mezők.

Az id kiválasztó
Meghatározhatsz HTML elemeket egyéni id-k alapján is. Ameddig a csoporotba foglalt elemek neveit ponttal (.) kell kezdeni, addig az egyéni névvel (id-val) ellátottakét pedig kettőskereszttel (#). Az alábbi példában a "zold" nevű elem háttere zöld szí­nű lesz.

</span></span><div class='htmltop'>HTML[/align]<div class='htmlmain'>#green {color: green}[/align]<span style="font-family:Tahoma"><span style="color:Black">

Az alábbi kódban szereplő "p" elem csak akkor lesz középre igazí­tva (center) és piros (red) szí­nnel í­rva, hogyha "para1"-nek hí­vják.

</span></span><div class='htmltop'>HTML[/align]<div class='htmlmain'>p#para1
{
text-align: center;
color: red
}


Ez a bekezdés alapértelmezett (általában fekete) szí­nű lesz.
</p><p id="para1">
Ez a bekezdés pedig piros szí­nű lesz és középre lesz igazí­tva.
</p>[/align]<span style="font-family:Tahoma"><span style="color:Black">[Kép: lamp.gif]Szintén NE kezdj id-val ellátott kiválasztókat számmal, mert néhány böngésző nem fogja tudni értelmezni!

CSS megjegyzések
A megjegyzések könnyebben értelmezhetővé teszik a hosszabb kódokat, í­gy érdemes használni őket, nehogy eltévedj közöttük. A megjegyzéseket a böngészők kihagyják, í­gy azok nem kerülnek megjelení­tésre az oldaladat látogatók előtt, csak a forráskódban lesznek láthatóak. A megjegyzéseket "/*" jellel kell kezdeni és "*/" jellel lezárni. Több sorból is állhat a megjegyzés, amiket akár két tulajdonság közé is beépí­thetsz. Pl.:
</span></span><div class='htmltop'>HTML[/align]<div class='htmlmain'>/* Ez
egy
több sorból
álló, külső
megjegyzés. */

p
{
text-align: center;
/* Ez egy belső megjegyzés. */
color: black;
font-family: arial
}[/align]]]> <![CDATA[CSS: 1. Bevezető]]> https://hhwforum.hu/thread-345.html Tue, 07 Oct 2008 01:52:55 +0800 HTML]]> https://hhwforum.hu/thread-345.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: [Kép: kep.jpg] - 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>]]> 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: [Kép: kep.jpg] - 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>]]>