Nyomtatás

Tamás Ferenc: Weblapkészítés HTML alapokon – 6. rész

CSS alapismeretek 1. rész

20.1. fejezet: CSS alapismeretek


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:
https://www.w3.org/Style/CSS/Overview.en.html
https://msdn.microsoft.com/en-us/library/hh673536(v=vs.85).aspx
https://www.w3schools.com/css/default.asp


20.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">


A HREF paraméterbe a stíluslap URL-je kerüljön! A típus egyértelmű (type), ahogy a stípuslap utalás is (REL=”stylesheet”). Az egész utalást a HEAD-szekcióba kell tenni. Bele lehet még építeni a szerzőt (author), a felhasználói ikont (icon), További részletekért érdemes felkeresni a https://www.w3schools.com/Tags/att_link_rel.asp weblapot. 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 második lehetőség a <HEAD> tagen belüli STYLE megoldás. Itt nincs külső fájl, tehát nem használhatjuk más fájlokban, viszont a megadott stíluskompozíciót az egész HTML-lapon belül könnyedén alkalmazhatjuk. Legyen példa az előző fájl - á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ű.
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.


20.3.: Írjunk egyszerű 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. Igen fontos az öröklődés, mivel a végső formázást a legutoljára használt CSS határozza meg. 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 bonyolítani ö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 a túlbonyolított tulajdonságokon.
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 jelenjen 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-fájlban:

.alairas {Font-family="Arial, Times Nem Roman CE"; Font-size=15pt; color="red"}

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-fájlba:

<B class=”alairas”> Ez már aláírás-stílus </b>

Lássunk erre egy gyakorlati példát! (htmlpelda31.html)

<!DOCTYPE html>
<html>
<head>
<style>
.center {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="center">Piros és középre igazított cím.</h1>
<p class="center">Piros és középre igazított paragrafus.</p>

</body>
</html>


Most már jöhet a CSS-referencia!

Folytatása következik!