Tamás Ferenc: HTML-tanfolyam

22.14.) Stíluslapok

TFeri.hu logo A HTML-nyelv elsősorban szövegek egyszerű leírására szolgál, formátumára és megjelenítésére szinte semmilyen instrukcióval sem szolgál. Sokszor előfordul, hogy a megjelenítők nem képesek pontosan a szerző által megálmodott formátumban megjeleníteni a tartalmat. Ezért kell használni a stíluslapokat, amely először a Internet Explorer 3.0-ban, illetve a Netscape Navigator 4.0-ban jelent meg. Még egy indok a CSS-ek használata mellett: ha egyszerre párhuzamosan kell formázni sok lapot, akkor elegendő a stíluslapot átírni és máris egyszerre átformálódik az összes weblap.
A stílus leírását többféleképpen is bele lehet ágyazni a lapokba.

22.14.a.) A <LINK> tag segítségével

Teljes alakban: <LINK REL="stylesheet" HREF="styles.css" TYPE="text/css"> A TITLE paraméterbe bele lehet írni egy tetszőleges címet a CSS fájlból, amelyet a böngészők felhasználnak az éppen aktuális lap megjelenítésére. Ha több ilyen is fel van sorolva, akkor a böngésző felajánlja a választást. Javaslat: az alapértelmezett stíluslap legyen az utolsó, mivel az Explorer 3.0-ás nem ajánlja fel a választást, hanem a legutolsót jeleníti meg. Még egy tanács: a felhasználók lusták. Nem hajlandóak választani, így nem érdemes több stílust felhasználni, csak egyet, de az legyen mesterien kidolgozva. További paraméter még a HREF, ahová a stíluslap URL-je kerüljön! Az egész utalást érdemes a <HEAD>-szekcióba tenni. Most pedig lássunk egy konkrét példát: (minta33.html)
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
     <title>Stilusok</title>
<link REL="StyleSheet" TYPE="text/CSS" HREF="Stilusok/Summer.css" TITLE="Minta33">
</head><body bgcolor="#FFFF00">

<h1>Csatolt CSS-p&eacute;lda</h1>
Ez a p&eacute;lda a TFeri.css 
nev&ucirc; st&iacute;luslapot haszn&aacute;lja a megjelen&iacute;t&eacute;shez..
</body>
</html>
A <LINK> paraméterei - az említetteken kívül - nem túl bonyolultak. Az említett REL paramétere stíluslapok használatánál érthetően kötelező: "stylesheet". Szintén kötelező a TYPE="text/css" is, mivel ez a link típusára utal. A TITLE és a HREF használatáról már szó esett. Lehet használni a DISABLED elemet is, amikor - például az oldal kipróbálásakor - semlegesíteni kell az elemet. Szintén használható a MEDIA paraméter, mely értékei szerint lehet SCREEN, PRINT vagy ALL is. (képernyős kimenet, csak nyomtató, mindkettő - alapértelmezés)

22.14.b.) A <HEAD> tagen belül, közvetlenül a <STYLE> tag segítségével

A módszer az előzőhöz képest annyival más, hogy itt nem külön file-ban kell kiírni az egyes formázási kívánalmakat, hanem közvetlenül a <HEAD> és a </HEAD> között. Sajnos ezzel a módszerrel éppen a stíluslapok azon előnye veszik el, hogy egyszerre lehet sok fájl formázását megváltoztatni, de akkor hasznos lehet, ha csak néhány kisebb file-t kell megváltoztatni. Legyen példa az előző file - átírva eme módszerrel: (minta34.html) 
<HTML>
<HEAD>
<TITLE>Stílusok</TITLE>
<STYLE TYPE="text/css" TITLE="Bright Colours">
body {background: blue; color: red}
p {color: red;font-size: 14 pt;font-family: Arial;font-weight: bold;margin-left: 5%}
H1 {font-family: "Times New Roman"; color: green; font-weight: bold;
 text-transform: capitalize; margin-left: 3; font-size:25; font-style: "bold"}
</STYLE>
</HEAD>
<BODY>
<H1>Be&aacute;gyazott CSS</H1>
<P>Be&aacute;gyazott st&iacute;luslapok.</p>
</BODY>
</HTML>
A <STYLE> lehetséges paraméterei, mint a fentiekben is látható, egyszerűek. A TYPE="TEXT/CSS" kötelező. Használható a  TITLE is a stílus címének megadásához, de ez itt igen csekély jelentőségű. Ugyancsak használhatóak az előzőben (is) ismertetett DISABLED és MEDIA paraméterek.

22.14.c.) Az egyes tageken belül

Harmadik lehetőség a stílus megadására a legkisebb jelentőségű, mivel ez csupán az egyes tageken belül érvényes. Lényege, hogy a stílus hatóköre pontosan addig terjed ki, amíg a tag lezárásra nem kerül. Ez is jó módszer a HTML-nyelvű lapok "megnyit-bezár" stílusú megadása miatt. Példaként közlöm a fentiekben már kétszer is megírt file egy harmadik verzióját. (minta35.html)
<HTML>
<HEAD>
<TITLE>Stilusok</TITLE>
</HEAD>
<BODY style="background: blue; color: red">
<H1 style="font-family: "Times New Roman";color: green; font-weight: bold;
margin-left: 5%; text-transform: capitalize; margin-left: 3; font-size: 25; font-style: "bold">
Be&aacute;gyazott CSS</H1>
<P style="color: red; font-size: 14 pt; font-family: Arial; font-weight: bold; margin-left: 5%">
Be&aacute;gyazott st&iacute;luslapok.</p>
</BODY>
</HTML>
Véleményem szerint a három lehetséges módszer szerint a legjobban a legelsőt lehet kihasználni, de ez is, mint oly' sok minden a HTML-nyelvben, ízlés kérdése.

22.15.) Írjunk stíluslapot!

Az eddigiekben csak használtuk a stíluslapokat, de nem tudtunk írni egyet. Nos, éppen itt az ideje!
A parancsok és a lehetséges értékek használhatósága nem nehéz. Aki már használta valaha az OOP-ot (objektum-orientált programozást), már érteni fogja az öröklődési mechanizmust, de a többieknek kicsit nehezebb dolguk lesz ezúttal.
A lényeg: ha egy tagnak megadjuk a kinézetét, akkor azon belül az összes tag ezt örökölni fogja, hacsak felül nem írjuk ezt!
Például ha a BODY taget kékre állítjuk és a B taget döntöttre, akkor mivel a B a BODY-n belül van, ezért a <B> és a </B> közötti rész kéken és döntötten jelenik meg. Ezt természetesen tovább lehet kutyulni össze-vissza öröklődő tulajdonságokkal, de nem feltétlenül érdemes. Véleményem szerint a fenti példában emlegetett B taget nem érdemes átdefiniálni "csak a hecc" kedvéért, mivel későbbiekben nem tudunk kiigazodni az össze-vissza kutyult tulajdonságokon. Amit én személy szerint igen hasznosnak tartok, az a fejezetcímek (Hn) megvariálása.
A stíluslapok bejegyzései egyébként az alábbi formátumban jelennek meg:
Szülők.Név (Paraméter1: Érték1, Érték2, Érték3; Paraméter2: Érték1, Érték2, Érték3)
A fenti sorban 1 paraméterhez mindig 3 érték tartozik, de ez természetesen bármennyi lehet. (De azért minimum 1 legyen!) A 2 paraméter sem kötelező, mivel abból is csupán annyi a kikötés, hogy minimum 1 legyen. Ha a szülőt nem adjuk meg, akkor a beállított értékek a szülőtől függetlenül jelennek meg. Ha azt szeretnénk, hogy csak a H1-es fejlécben aláhúzott szövegek jelenjelek meg kéken, akkor a következő sort kell kiadnunk:
H1.U {color="blue"}
Saját magunk is definiálhatunk alosztályokat. Ez ugyanolyan értékű része lesz a szülőosztálynak, mint bármi más része. Adjuk ki például a következő parancsot egy CSS-file-ban:
.alairas {Font-family="Arial, Times Nem Roman CE"; Font-size=15pt; color="red"; text-decoration="blink"}
Használata is egyszerű. Ha például a B tagben szeretnénk egy imént definiált stílust használni, akkor a következő részt kell betenni a HTML-file-ba:
<B class="alairas"> Ez már aláírás-stílus </b>
Érdemes kipróbálni a CLASS paramétert, mivel a HTML-tagek döntő többségében használhatók!
A lehetséges stílusdefiníciók listája nem rövid, de hasznos lehet:

Még valami: a HTML-kódban egy adott paraméter értéke beállítható, ha objektum=paraméter_érték sor segítségével, ám ha simán az objektum kerül a forráskódba, akkor visszaadja a paraméter_értéket. Javaslat: sokszor nézze meg a forráskódot!

22.15.a.) Betű- és szövegformázások

22.15.b.) Színek és háttérértékek

Minta: Az oldalsó gördítőcsík színezésének mintája ezen a weblapon is látható. - részlet a CSS-lapból!
EredetiMagyarázat
body
{
	font-family: Courier New, Arial, Times New Roman, Times, Garamond;
	background-color: #00FA9A;
	color: #008000;
	text-align: left;
 	scrollbar-arrow-color: green;
	scrollbar-face-color: #00FF8A;
	scrollbar-highlight-color: black; 
	scrollbar-shadow-color: green; 
	scrollbar-track-color: #32CD32;
}
 
body
{
	Betűtípus
	Háttérszín kódja
	Szövegszín kódja
	Szöveg rendezési módja
 	Az oldalsó gördítő csík nyilának színe
	Az oldalsó gördítő csík gombjainak alapszíne
	Az oldalsó gördítő csík kiemelt részeinek színe
	Az oldalsó gördítő csík árnyékának színe
	Az oldalsó gördítő csík alapszíne
}

22.15.c.) Elemek határai

22.15.d.) Osztályozási tulajdonságok

22.15.e.) Pozícionálási tulajdonságok

22.15.f.) Nyomtatási tulajdonságok

22.15.g.) Pszeudo-osztályok és egyéb tulajdonságok

Folytatás itt!