Weblapprogramozás

- Oktatási segédanyag középiskolák számára

Stíluslapok használata

A stíluslapok használata (CSS - Cascading Style Sheets) már egyáltalán nem kezdő szint a weblapprogramozás terén. Ebben a dokumentumban ezért nem is célom bemutatni részletekbe menően a használatát. Egy kis betekintést azonban szeretnék nyújtani, mert stíluslapok használata egyike a mai legfejlettebb webszerkesztési technikáknak.

Mire jók a stíluslapok?

A legnagyobb jelentőségük a tartalom és a kinézet szétválasztása. Használatukkal lehetőség nyílik egy adott tartalomhoz vagy oldalhoz különféle kinézeteket, megjelenést rendelni. Ezáltal könnyen elkészíthető pl. egy nyomtatásra szánt változat, egy gyengén látók számára optimalizált változat, stb. Ezen kívül jelentősen megkönnyíti egy sok oldalból álló weblap szerkesztését, és későbbi módosítását, hiszen a formázás (általában) egy helyen, egy külön fájlban helyezkedik el. Szerkesztéskor csak ki kell választanom a megfelelő stílust, amit használni szeretnék, de akár tovább is fejleszthetem, kibővíthetem a meglévő stílusokat.

Az egységes megjelenítésen kívül azonban számos előnye van, többek között az oldal szerkezeti vázát is meg lehet vele határozni. Ezért is említem éppen ennél az anyagrésznél.

Példaképpen nézzük meg ennek a dokumentumnak a nyitó oldalát, stíluslapokkal (ahogy idáig): index.html, majd pedig nézzük meg stíluslap nélkül: index2.html! Látható, hogy az oldal ugyanúgy használható, azonban csak a tartalom maradt meg...

Hogyan használható a stíluslap?

Stíluslapok használatának alapvetően két módja van: vagy az adott fájlban definiáljuk (határozzuk meg) az adott stílust, vagy pedig egy külön, ún. css fájlban. Összetettebb weboldalaknál mindenképpen ez ajánlott, hiszen így minden fájljához hozzá tudjuk csatolni ugyanazt a stílus lapot, és a teljes oldal kinézetét egy fájl szerkesztésének segítségével meg tudjuk változtatni.

Stílusok használata amúgy nem teljesen idegen, hiszen eddig is használtunk már stílus jelölést a HTML nyelvben: pl. a címsorok <h1>, <h2>, stb. használata. Fontos azonban, hogy a HTML szabvány nem tartalmazza az ezek megjelenítésére vonatkozó szabályokat, hanem azt a böngésző programokra bízza.

Hogyan lehet stílust definiálni?

CSS elemek meghatározásával (definiálásával).
Egy CSS elemnek két fő része van: a szelektor és a deklaráció.

A szelektor azt a HTML elemet (vagy elemeket) jelöli ki, amelyikre a formázás vonatkozni fog, a deklaráció pedig magát a formázást jelenti.

Szelektorok

Ő mondja meg, melyik HTML elemre legyen érvényes a deklarált formázás.

Három fő lehetőségünk van, a következőkre vonatkozhat:

- Egy adott HTML címkére:

Például:

H1 {color: blue}

Ekkor a formázás (jelen esetben: kék szín) a <h1> HTML címke tartalmára fog vonatkozni.

 

- Egy adott osztályra:

Például:

.kek {color: blue}

Fontos, hogy az osztály nevét ponttal vezessük be. Ekkor a formázás azokra a HTML címkékre vonatkozik, amelyeknél a címkén belül hivatkozunk a "kek" nevű osztályra:

Például:

<p class="kek"> Ez a szöveg kéken fog megjelenni. </p>

Ez a szöveg kéken fog megjelenni.

 

- Egy adott azonosítójú címkére:

Például:

#piros_szoveg {color: red}

Ekkor az a szöveg lesz piros, amelyik azonosítója a "piros_szoveg". Azonosítókat hasonlóan tudunk megadni a HTML címkén belül, mint osztályokat, csak a class helyett az id szelektort kell alkalmazni:

Például:

<p id="piros_szoveg"> Ez a szöveg piros lesz. </p>

Ez a szöveg piros lesz.

 

Valamint, lehet ezeket lehet összetetten is alkalmazni, pl. adott azonosítón belüli adott osztály:

#azonosito_nev .osztaly_nev {valamilyen formazas}

De mi megelégszünk az egyszerű stílus definíciókkal. Érdemes megnézni példának azonban ennek a dokumentumnak a stílus-definíciós fájlját: main_css. (Átalakítottam a fájl kiterjesztését .txt-re, hogy ne legyen gond a megtekintésével, valójában main.css a fájl neve.)

Deklarációk

A deklarációk magát a formázást adják meg, általában két részből állnak (paraméter: érték), és egyszerre több paramétert is meg lehet határozni.

Például:

H1 {
font-size: 16px;
font-family: Helvetica;
font-weight: bold;
}

Ekkor az egyes címsorral formázott szövegek 16 pont méretűek, Helvetica betűtípusúak és félkövér stílusúak lesznek.

Számtalan paramétert és megjelenítési tulajdonságot át lehet állítani, akit komolyabban érdekel ez a témakör, annak ajánlott szakirodalomban utána néznie. Ezen kívül, a professzionális honlap-szerkesztő szoftverekben ezek beállítása menüvel is lehetséges, így nem kell tudnunk a paraméterek konkrét nevét.

Hogy lehet egy stíluslapot egy adott oldalhoz csatolni?

Miután a megfelelő stílusokat elkészítettük egy külön .css fájlban egy tetszőleges szövegszerkesztő programmal, csak hivatkoznunk kell rá az adott weboldal fej részében, a következő képpen:

<link href="sajat.css" rel="stylesheet" type="text/css">

Ahol a sajat.css fájl az, amit előre elkészítettünk, és tartalmazza a beállított formátumokat.

Stílus definiálás az oldalon belül

A tananyag elején említettem, hogy nem csak külső fájlban lehet a stílusokat definiálni, hanem az adott oldalon belül is. Ez azonban nem ajánlott, vagy csak olyan stílusoknál alkalmazható, amiről már az elején biztosan tudom, hogy más oldalon nem lesz rá szükség!

Ebben az esetben a stílust definíciókat ugyancsak az oldal fej részében kell megadnom, a következő címkék között:

<style type="text/css">
<!--

    és

-->
</style>

Például:

<style type="text/css">
<!--
 .kek {color: blue}
 .piros {color: red}
-->
</style>

Konkrét megvalósítás

Ennyi elmélet után, most már elegendő információnk van a stíluslapok megértéséhez, úgyhogy készítsünk el egy konkrét stíluslap-megvalósítást, ahol a stílusok számára egy külön .css fájlt fogunk létrehozni.

Elsőször is, egy külön könyvtárba készítsük el a következő egyszerű HTML dokumentumot, legyen a neve stiluslap.html.

A fájl tartalma:

<HTML>
  <HEAD>
  <TITLE>Stíluslapok</TITLE>
 </HEAD>
 <BODY>
  <h1>Stílusok</h1>
  <p>Ez egy alap szöveg.
     Az oldal tartalmát ilyen formátumban  írom.</p>
  <h2>Első cím </h2>
  <p>Ide jön az első fejezet tartalma.</p>
  <h2>Második cím</h2>
  <p>Ide pedig a második fejezeté.</p>
  <p>Ez a szöveg kiemelt.</p>
 <p>Ez pedig már nem... </p>
 </BODY>
</HTML>

Majd, készítsünk el hozzá a külön stíluslap-fájlt, ugyanabba a könyvtárba. A fájl neve legyen elso.css.

A fájl tartalma:

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #CC0000;
font-style: italic;
letter-spacing: 3pt;
text-align: center;
}

h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #009933;
text-decoration: underline;
text-align: left;
}

.kiemelt {
font-weight: bold;
color: #0000CC;
font-style: italic;
}

A fenti stíluslap a következőket tartalmazza (sorrendben):

  • bekezdések: Arial, 14 pontos betűméret.
  • egyes címsor: Arial, 18 pontos betűméret, félkövér, piros, dőlt, 3 pontos betűköz, középre igazítás.
  • kettes címsor: Georgia betűtípus, 16 pontos méret, világoszöld szín (#009933), aláhúzott stílus és balra igazított.
  • "kiemelt" osztály: félkövér, kék szín, dőlt stílus.

Ha a fájl elkészült, nincs más dolgunk, mint a stiluslap.html fájl fej részében elvégezni a stíluslap csatolását a dokumentumoz:

<HEAD>
<TITLE>Stíluslapok</TITLE>
<link href="elso.css" rel="stylesheet" type="text/css">
</HEAD>

Valamint, a kiemelésre szánt bekezdéshez rendeljük hozzá, a kiemelt osztályt!

<p class="kiemelt">Ez a szöveg kiemelt.</p>

Az oldal ezzel elkészült, az eredeti fájl megtekinthető itt: stiluslap_alap.html, az eredmény pedig itt: stiluslap.html. A változás jelentős. :)

Teljes részletességű CSS tananyag található az érdeklődők számára a következő internet-címen : http://weblabor.hu/cikkek/cssalapjai1

Tovább a következő fejezethez >>

Weblapprogramozás oktatása középiskolában - Készült: 2007