CSS leírás és teljes referencia
1. fejezet: Bevezető
A HTML-nyelv elsősorban szövegek egyszerű leírására szolgál, formátumára és megjelenítésére igen csekély instrukcióval 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. Ez egy hatalmas lehetőség – saját példámból is tudom. Ha például egyetlen weblapon belül van több tucatnyi HTML-lap, akkor nem kell minden stílus-igazításkor minden egyes lapot egyesével átbogarászni, vagy egy jobb minőségű HTML-szerkesztővel a megfelelő elemeket átírni, hanem elegendő a CSS-lap megfelelő kiigazítása.
Másik fontos lehetőség a CMS-rendszerek - pl.: Joomla, Drupal, Wordpress, stb. - által tárolt CSS-ek átírása. Ilyen esetben gyakorlatilag minden egyes apró tulajdonságot a CSS tárol és ha csak 1-2 apróságot szeretnénk átírni a kinézeten belül, akkor elő kell venni a megfelelően áttekinthető CSS referenciát.
Sokan írtak a HTML-lel, illetve a CSS-sel kapcsolatban. Többen hiányolták, hogy a HTML nem teljes, mivel több paraméter nincsen benne. Igen, ez szándékos volt, mivel ezt a HTML-könyvet elsősorban az emelt szintű informatika érettségire készülőknek írtam. Persze bárki informatika iránt érdeklődő is forgathatja és nyugodtan, önállóan megtanulhatja belőle a nyelv alapjait. A CSS más téma! Kérem, hogy csak az vágjon bele a CSS-be, akinek szüksége van rá! Ez már nem egy tankönyv, hanem egy referencia. Igyekszem minél pontosabb lenni, de még érthető!
Fontos megemlíteni, hogy eme írás elkészítésekor igen sokat használtam a következő oldalakat:
2. fejezet: A CSS három alapvető formája
A stílus leírását többféleképpen is bele lehet ágyazni a lapokba. A legegyszerűbb és a leggyakoribb megoldás, ha egy önálló, külső CSS-lapot használunk. Példa:
<LINK REL="stylesheet" HREF="styles.css" TYPE="text/css">
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 a legutolsó lesz mindig az érvényes. További paraméter még a HREF , ahová a stíluslap URL-je kerüljön! Az egész utalást a HEAD-szekcióba kell tenni. Most pedig lássunk egy konkrét példát:
<!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élda</h1>
Ez a példa a TFeri.css
nevû stíluslapot használja a megjeleníté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)
A második lehetőség a <HEAD> tagen belüli STYLE megoldás. Itt nincs külső fájl, így nem használhatjuk más file-okban, viszont a megadott stíluskompozíciót az egész HTML-oldalon belül könnyedén alkalmazhatjuk. Legyen példa az előző file - átírva eme módszerrel:
<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ágyazott CSS</H1>
<P>Beágyazott stí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.
A harmadik módszer az egyes HTML-szerkesztők által előszeretettel használt tagen belüli formázás. Lényege, hogy a stílus hatóköre pontosan addig terjed ki, amíg a tag lezárásra nem kerül. Íme az eddig kétszer használt fájl harmadik verziója:
<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ágyazott CSS</H1>
<P style="color: red; font-size: 14 pt; font-family: Arial; font-weight: bold; margin-left: 5%">
Beágyazott stí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.
- Előző
- Következő >>