H1{
color:#000000;
}
/*H1 elem színének beállítása*/
A fent említett példában a H1 elem színét feketére állítottuk. Nézzük meg mi történik ha az egyes címszintben más formázó karaktert is szeretnénk használni.
<h1>Ez a szöveg mindig <b>Félkövér </b>
Mivel a fenti példában nincs szín rendelve a <b> utasításhoz, ezért örökölni fogja az őt tartalmazó elem színét. Jelen esetben a feketét.Hasonlóképp más stílustulajdonságok is öröklődnek (font-size:12pt;) stb.. ! Tehát célszerű alapértelmezett stílustulajdonságokat alkalmazni. Alapértelmezett tulajdonságokat pedig egy olyan elemhez kötni, amely tartalmazz azokat az elemeket melyekre a stílust vonatkoztatni akarjuk. A HTML-ben erre a célra a <BODY> elem felel meg.
body{
color:#000000;
background:url(hatter.gif) blue;
}
Tehát a body szövegszínét feketére állítottuk, valamint hozzárendeltünk egy háttérképet, ami ha nem jelenik meg, akkor a háttérszínét kékkel tölti ki.Röviden összefoglalva, ha stílustulajdonságokat az oldal egész területén kívánunk alkalmazni, azt célszerű a body elemben megadni.
Csoportosítás
A stíluslap méretének csökkentéséhez, és az átláthatóság növeléséhez lehetőségünk van a szelektorokat vesszővel elválasztva csoportokba rendezni.
Például:
h1, h2, h3{
color:#000000;
}
Ebben a példában az első három címszintet rendeztük egy csoportba, aminek a deklarációban a fekete színt állítottuk be. Hasonlóképp a deklarációkat is csoportosíthatjuk. Vegyünk egy példát ahol megadunk pár szövegformázó beállítást, majd ezeket a beállításokat csoportosítjuk.
h1{
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
}
A fent példában megadtuk a h1 címszint betűtípusát és betűméretét.
h1{
font:bold 16px Verdana, Geneva, sans-serif;
}
A fent megadott szövegformázó deklarációk csoportosítása.
Például:
h1, h2, h3{
color:#000000;
}
Ebben a példában az első három címszintet rendeztük egy csoportba, aminek a deklarációban a fekete színt állítottuk be. Hasonlóképp a deklarációkat is csoportosíthatjuk. Vegyünk egy példát ahol megadunk pár szövegformázó beállítást, majd ezeket a beállításokat csoportosítjuk.
h1{
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
}
A fent példában megadtuk a h1 címszint betűtípusát és betűméretét.
h1{
font:bold 16px Verdana, Geneva, sans-serif;
}
A fent megadott szövegformázó deklarációk csoportosítása.
Stíluslap csatolása
Mint már azt korábban említettem, hogy a stílusok csatolására két lehetséges mód van. Az egyik amikor külső stílusállományt csatolunk, a másik mikor magában a HTML dokumentumban hozzuk létre a stílusokat. Az utóbbi nagyon egyszerű. A <HEAD> részben definiáljuk a <STYLE TYPE="TEXT/CSS"> parancsot amit a </STYLE> paranccsal zárunk le, majd ez a két elem közé elkészítjük a kívánt stílus.Ha ezeket a stíluselemeket a < BODY > elemben kívánjuk létrehozni, akkor célszerű egy GSML utasítással elrejteni a böngésző elöl hogy az ne zavarodjon bele.
<STYLE TYPE="TEXT/CSS">
<!--
h1{
color:#000000;
}
-->
</STYLE>
A külső stílusállomány használatához elsősorban készítsük el a stílusfájlt, amit .CSS kiterjesztéssel mentünk el. Majd ezt kapcsoljuk hozza a HTML dokumentum <HEAD> részéhez a <link rel="stylesheet" type="text/css" href="fájl.css" /> parancs sorral. Vigyázzunk arra hogy a stílus fájl teljes elérhetőségi útját adjuk meg, különben nem fog hozzákapcsolódni a HTML dokumentumunkhoz.
Példa:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS alkalmazás</title>
<link rel="stylesheet" type="text/css" href="fájl.css" />
<style type="text/css">
h1{
color:#000;
}
</style>
</head>
<body>
<h1> A címsor fekete</h1>
</body>
</html>
<STYLE TYPE="TEXT/CSS">
<!--
h1{
color:#000000;
}
-->
</STYLE>
A külső stílusállomány használatához elsősorban készítsük el a stílusfájlt, amit .CSS kiterjesztéssel mentünk el. Majd ezt kapcsoljuk hozza a HTML dokumentum <HEAD> részéhez a <link rel="stylesheet" type="text/css" href="fájl.css" /> parancs sorral. Vigyázzunk arra hogy a stílus fájl teljes elérhetőségi útját adjuk meg, különben nem fog hozzákapcsolódni a HTML dokumentumunkhoz.
Példa:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS alkalmazás</title>
<link rel="stylesheet" type="text/css" href="fájl.css" />
<style type="text/css">
h1{
color:#000;
}
</style>
</head>
<body>
<h1> A címsor fekete</h1>
</body>
</html>
CSS Bevezetés
Cascading Style Sheets (CSS)
A CSS egy olyan stíluslap megvalósító, ami lehetővé teszi hogy a HTML oldal szerzői egyedi stíluslapokat adjanak hozzá a dokumentumukhoz. CSS-el készíthetünk külső stíluslapokat, valamint létrehozhatjuk a HTML dokumentumban is. A web szerkesztők leginkább az általuk kedvelt stílust egyszer rögzítik, és ezt hívják meg minden HTML dokumentumhoz. A CSS utasítás két részből áll. Szelektor-ból ami tartalmazza a formázandó tag megnevezését, valamint deklarációból ami a meghatározott formázást végzi el.Például:
H3{
color:#000000;
}
Ebben a példában a szelektor a H3. A deklaráció a szín beállítás.A deklaráció két részre osztható.Tulajdonságra és értékre. A fent említett példában a tulajdonság a color, az érték pedig a szín kód. A color csak egy a töbmint 50 formázó karakter közül.Talán ez így most egy kicsit érthetetlen a számodra, de ha tovább olvasod mindig az új fejezeteket akkor szép lassan letisztul majd benned.
Ürlapok
A HTML dokumentumba létrehozhatunk űrlapokat, melyeket egy programkód segítségével feldolgozhatjuk. De nagyon sok egyéb hasznos dologra is használhatjuk ezeket az űrlapelemeket.Az űrlapokat mint eddig mindenhol a html nyelvbe színtén bevezeti egy <FORM>nyitó és A </FORM> záró utasítás, mely közrefogja az űrlapelemeket.A FORM utasításban amit szükséges megadnunk, az-az űrlap neve, az űrlap elküldésének módja (ez lehet POST illetve GET. Köztük az a különbség hogy a POST egy adatcsomagban küldi az űrlap adatait, míg a GET Url-ben).Az űrlap elemeket az <INPUT TYPE="" name=""> parancs vezeti be (Nincs záró utasítás párja). A TYPE paraméter jelöli hogy milyen űrlapelemet szeretnénk elhelyezni, a NAME pedig az űrlapelem nevét.Lehetséges típusai: TEXT->szövegbevitel, PASSWORD->jelszó, HIDDEN->rejtett, CHECKBOX->kapcsoló (több is kiválasztható egyszerre), RADIO->kapcsoló(egyszerre csak egy választható ki), FILE->csatolandó anyag, SUBMIT->nyomógomb, RESET->inicializáló gomb, BUTTON->egyébb nyomógomb, IMAGE->kép.Az input utasításban több opció is szerepel az aktuálisan kiválasztott űrlapelemhez. A VALUE opcióval megadhatjuk hogy milyen értéket vegyen fel.
TEXT: ennek az űrlapelemnek van méretbeállítása amit a SIZE="szám" paranccsal adhatunk meg.Valamint szabályozhatjuk a bevitt karakterlánc hosszúságát a MAXLENGTH="érték" utasítással definiálhatunk.
CHECKBOX és a RADIO típusú mezők további paramétere lehet a CHECKED opció ami bekapcsolja a kapcsolót alapértelmezésként.
SUBMIT és RESET: ezekhez a kiegészítő opció a VALUE="név", mely a nyomógombon megjeleníti az általunk megadott feliratot. A Submit nyomógomb megnyomásával küldi el a program az űrlapot, a Reset megnyomásával pedig visszaállíthatjuk az alapértelmezett űrlapot.
IMAGE: ezzel az opcióval készíthetünk egy képből nyomógombot.A hozzá tartozó parancs még az src="elérésiút/kp.kit".
Hosszabb szöveg bevitelére a <TEXTAREA NAME="név" ROWS="magasság" COLS="szélesség" VALUE="szöveg"> űrlapelemet használjuk.
Legördülő menüt pedig a <select name"név"></select> paranccsal hozhatunk létre. A menüben a menüpontokat az <option></option>utasításpárral hozhatunk létre. Minden menüpontot egy legördülő menüben a select elemek közé kell elhelyezni.
<form name="adatlap neve" method="post" action="proram.kit">
Vezetékneve:<input name="vezeteknev" type="text" />
Keresztneve:<input name="keresztnev" type="text" />
Neme: Férfi<input name="" type="radio" value="" checked="checked" /> Nő:<input name="" type="radio" value="" />
Város:<select name="">
<option>Budapest</option>
<option>Dunaújváros</option>
</select>
Adatlap törlés:<input name="delet" type="reset" value="Törlés" />
Adatlap küldése:<input name="ok" type="submit" value="Küldés" />
<input type="file" accept="application/pdf" />
</form>
TEXT: ennek az űrlapelemnek van méretbeállítása amit a SIZE="szám" paranccsal adhatunk meg.Valamint szabályozhatjuk a bevitt karakterlánc hosszúságát a MAXLENGTH="érték" utasítással definiálhatunk.
CHECKBOX és a RADIO típusú mezők további paramétere lehet a CHECKED opció ami bekapcsolja a kapcsolót alapértelmezésként.
SUBMIT és RESET: ezekhez a kiegészítő opció a VALUE="név", mely a nyomógombon megjeleníti az általunk megadott feliratot. A Submit nyomógomb megnyomásával küldi el a program az űrlapot, a Reset megnyomásával pedig visszaállíthatjuk az alapértelmezett űrlapot.
IMAGE: ezzel az opcióval készíthetünk egy képből nyomógombot.A hozzá tartozó parancs még az src="elérésiút/kp.kit".
Hosszabb szöveg bevitelére a <TEXTAREA NAME="név" ROWS="magasság" COLS="szélesség" VALUE="szöveg"> űrlapelemet használjuk.
Legördülő menüt pedig a <select name"név"></select> paranccsal hozhatunk létre. A menüben a menüpontokat az <option></option>utasításpárral hozhatunk létre. Minden menüpontot egy legördülő menüben a select elemek közé kell elhelyezni.
Példa:
<form name="adatlap neve" method="post" action="proram.kit">
Vezetékneve:<input name="vezeteknev" type="text" />
Keresztneve:<input name="keresztnev" type="text" />
Neme: Férfi<input name="" type="radio" value="" checked="checked" /> Nő:<input name="" type="radio" value="" />
Város:<select name="">
<option>Budapest</option>
<option>Dunaújváros</option>
</select>
Adatlap törlés:<input name="delet" type="reset" value="Törlés" />
Adatlap küldése:<input name="ok" type="submit" value="Küldés" />
<input type="file" accept="application/pdf" />
</form>
Bejegyzések
