Bevezetés a stíluslapok használatába
Stíluslap csatolási módok
Az alábbi kódban négyféle csatolási módot mutatunk be:
Forráskód<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8">
<title>Stíluslap csatolási módok</title>
<!-- külső stíluslap belinkelése -->
<link rel=stylesheet type="text/css" href="css/stilus1.css" title="alap">
<!-- lapon belüli definíció -->
<style type="text/css">
<!--
h1 {color: blue}
@import url("css/stilus2.css");
<!-- A fenti szabállyal külső stíluslapot importálunk -->
<!-- Az alábbival pedig a nyomtatott médiára vonatkozó tulajdonságot adunk meg -->
@media print {
body {font-family: Times, serif;}
}
-->
</style>
</head>
<body>
<h1>A címsor1 kék</h1>
<h2>A címsor2 piros</h2>
<!-- Az alábbi sorban egy beágyazott megadást látunk -->
<p style="color: green;">Az egész bekezdés zöld</p>
</body>
</html>
Beágyazott, inline megadás
A CSS-deklarációinkat több módon is elhelyezhetjük a HTML-állományunkban. A legegyszerűbb (és egyben számos hátránnyal járó) megoldás, hogy a stílusdefiníciót beágyazott (in-line) módon használjuk.
PéldaForráskód<p style="color: green;">Az egész bekezdés zöld</p>
Az ily módon elkészített weblapok hátránya, hogy nehézkessé válik az arculatuk illetve a tartalmuk módosítása, mivel a HTML és a CSS keverve helyezkedik el a forrásban. A beágyazott stíluslap használatának másik hátránya, hogy nem tudjuk megfelelően kihasználni a CSS azon lehetőségeit, hogy különböző média típusokra (pl. képernyő, mobil eszköz, nyomtatási nézet, képernyőolvasó) más-más stílust rendelhessünk.
A formázni kívánt elemnél használjuk a style attribútumot. A szabály az adott elemre, illetve azok leszármazottaira lesz érvényes.
Szintaxis
- <tag style="paraméter:érték;paraméter:érték"></tag>
- Az attribútum értékét, azaz a CSS-deklarációkat dupla idézőjelek között adjuk meg.
- Egy CSS deklaráció egy tulajdonság-érték párból áll, amit egy kettőspont választ el egymástól.
- Minden deklaráció végén pontosvessző áll.
- Az utolsó deklaráció végéről a pontosvessző elhagyható, azonban érdemes kitenni, mert így sok későbbi bosszúság elkerülhető.
- Mindezek után, ha nem vétettünk hibát, a HTML-elem tartalma az általunk megadottaknak megfelelően fog megjelenni.
Példa - Egy nem követendő példa a beágyazott megadásra
MagyarázatA fentiekben egy igazán nem hatékony, és ezért kerülendő példát látunk. Itt úgy értük el, hogy minden címsor kék színű legyen, hogy beágyazott módon helyeztük el ezt a tulajdonságot.
A következő példában látjuk majd, hogy ennél van sokkal egyszerűbb módszer is.
Vissza a tartalomjegyzékhez
Lapon belüli definíció létrehozása a style tag segítségével:
A CSS-szabályainkat elhelyezhetjük a style elem által határolt blokkban is. Ez a módszer az előzőhöz képpest már jobban tükrözi azt a szemléletet, hogy a tartalom és a megjelenés elkülönüljön egymástól. Azonban ennél a módszernél is a CSS formázószabályok a HTML-fájlon belül helyezkednek el, ami számos hátránnyal járhat. Gondoljunk csak arra, hogy egy website több, azonos arculattal rendelkező önálló lapból áll. Ezzel a módszerrel ilyenkor elkerülhetetlen a kód duplikációja.
PéldaForráskód<style type="text/css">
h1 {color:blue}
</style>
A tutoriálban fellelhető interaktív példákban is ezt a módszert alkalmazzuk, de csak azért, hogy a példák minél könnyebben szerkeszthetők, átírhatók legyenek. A legtökéletesebb megoldást, majd a később bemutatandó módszer, a külső stílusállomány jelenti.
Szintaxis
- Helyezzük el a HTML-kódunk fej <head> részében a <style type="text/css"></style> elemeket.
- A style elemben levő type="text/css" attribútum elárulja a böngészőnek, hogy az elem a CSS szabványnak megfelelő szöveges stílusszabályokat tartalmaz.
- A CSS-szabályokat a style elemen belül helyezhetjük el. Ezek pontos szerkezetét később ismertetjük.
- A style elemet úgy is használhatjuk, hogy kiegészítjük a media paraméterrel is, ami azt fogja befolyásolni, hogy a stílusok milyen médiatípusokra vonatkozzanak. Például a print jelenti a nyomtatást, a screen a képernyőt, az all pedig az összes médiatípust. A későbbiekben erről még részletesebben beszélünk.
Példa - Az előbbi példa lapon belüli definícióval
MagyarázatItt most úgy értük el, hogy minden címsor kék legyen, hogy egy lapon belüli definíciót készítettünk, amelyben a <h1> tagre vonatkozóan olyan szabályt állítottunk be, hogy legyen kék.
Ezt a lapon belüli definíciót külső állományba is kivihetjük, amit belinkelhetünk, vagy importálhatunk. Ezt mutatjuk meg a későbbiekben.
Vissza a tartalomjegyzékhez
Hivatkozás külső stíluslapra, a link elem segítségével:
A CSS-szabályainkat külső fájlból is elérhetjük, mégpedig a link elem segítségével, amit a HTML-fájl fejrészében helyezzük el. A külső fájl, ami a CSS szabályokat tartalmazza egy egyszerű szöveges fájl, css kiterjesztéssel. Ekkor már valóban elválasztódik a tartalom a megjelenéstől. A gyakorlatban ez egy széleskörűen használt módszer stílus hozzáadására.
PéldaForráskód<style type="text/css">
<link rel=stylesheet type="text/css" href="pelda.css">
</style>
Szintaxis
- Helyezzük el a <link> elemet a HTML lapunk fejrészébe.
- Írjuk be az elembe a rel="stylesheet" attribútumot és értékét, ezzel eláruljuk a böngészőnek, hogy az elem egy stíluslapot fog belinkelni.
- Írjuk be az elembe a href="stiluslap.css" attribútumot és értékét, ami a CSS-szabályokat tartalmazó stíluslap relatív címét határozza meg, a HTML-fájlhoz képpest. Gyakori hiba ennek az attribútumnak a hibás kitöltése, ezért érdemes odafigyelni a helyes útvonalra. (Mappák esetén mindig / jelet használjunk!)
- Írjuk az elembe a type="text/css" attribútumot és értékét, ami segít a böngészőnek meghatározni, hogy a belinkelt stíluslap a CSS szabványnak megfelelő deklarációkat tartalmazó szöveges fájl.
- Végül itt is megadhatjuk a media paramétert, amellyel megadhatjuk, hogy a stílusok mely médiatípusokra vonatkozzanak.
- Több <link> elemmel több stíluslapot is belinkelhetünk.
- Ügyeljünk arra is, hogy minél több stíluslapot linkelünk be, weblapunk annál lassabban töltődik majd be.
Példa - Az előbbi példa külső, belinkelt stíluslappal
MagyarázatMost a h1 {color:blue} definíciót egy külső stílusállományban helyeztünk el (h1pelda.css), és azt linkeltük be az oldal fej részében.
FontosEzzel a megoldással (valamint az importálással) ugyanazt a stíluslapot több oldalhoz is hozzárendelhetjük. Ha úgy döntünk, hogy a címsor mégsem kék színű, akkor csak egy helyen kell megváltoztatni a tulajdonságot és az az összes olyan oldal megjelenésére hatással lesz, ahol a külső stíluslapot használtuk.
Vissza a tartalomjegyzékhez
Stíluslap beimportálása
Az @import kulcsszóval külső stíluslapot importálhatunk be HTML-fájlunkba. Ez gyakorlatilag ugyanazt csinálja, mint a link tag, csak ez nem HTML-, hanem CSS-utasítás. Így egy külső stíluslapállomány is tartalmazhat más állományokra vonatkozó importálási utasítást.
Szintaxis
- Helyezzük el a HTML-fájl fejrészébe a <style type="text/css"> </style> elemeket és attribútumait.
- Helyezzük el a style elemek közzé az importálási szabályt @import url(stiluslap.css);, ami meghatározza a külső CSS-fájl relatív útvonalát a HTML-fájlhoz képest.
- A @import url(stiluslap.css); megadás helyett használhatjuk a rövidebb megadást is: @import "stiluslap.css";
- Fontos, hogy az importálási szabály végéről ne hagyjuk le a pontosvesszőt!
- A style elemekbe az importálási szabályon kívül más szabályok is beilleszthetők, azonban ilyenkor az import szabálynak meg kell előznie minden más CSS-szabályt.
- Az @import url('stiluslap.css'); (vagy rövidebben @import 'stiluslap.css';) szabály segítségével CSS fájlokat is beimportálhatunk más CSS-fájlokba. Ilyenkor fontos, hogy a CSS-fájl legelső sora tartalmazza az import szabályt.
- Az importálás történhet úgy is, hogy megadjuk, hogy milyen médiatípusra vonatkozik a beimportált állomány:
- @import url("nyomtat") print;
- Nyomtatás médiára szánt stílusállomány importálása.
- @import url("proj.css") projection, tv;
- Kivetítőre, TV-re szánt stíluslap importálása.
- @import url("keskeny.css") handheld and (max-width: 400px);
- A kézi és a maximum 400px vízszintes méretű eszközökre készült stíluslap importálása.
- A fenti szabály alkalmazásával fontos lépést tehetünk majd a reszponzív arculat felé, ahol minden felbontásban az optimális stíluslapot tudjuk felkínálni.
Példa - Importált stíluslap
MagyarázatA külső állomány ugyanaz, mint az előző példában, csak most nem belinkeltük, hanem importáltuk a CSS @import lehetőségével.
FontosA @import szabályt egy külső stílusállományban is elhelyezhetjük!
Vissza a tartalomjegyzékhez
A @media szabály használata
A @media szabály használatával a stílusszabályok már a stíluslapon csoportosíthatók médiaelemek szerint. Így akár egyetlen stíluslapon definiálhatók a különböző kimenetekhez tartozó CSS-szabályok.
Szintaxis
- Helyezzük el a @media kulcsszót a CSS-szabályainkat tartalmazó fájlba.
- Ezt követi az a média típus, amire majd a CSS-szabályokat alkalmazni akarjuk. Ezeket az értékeket értékül adhatjuk HTML-elemek media attribútumainak is.
- Ezek az értékek a következők:
- Az all esetén a médiaszabály minden kimenő berendezés számára érvényes lesz.
- A braille esetén a média szabály a Braille írás kimenettel rendelkező berendezések számára lesz érvényes.
- Az embossed esetén a média szabály a Braille nyomtatók számára lesz érvényes.
- A handheld esetén a média szabály a kis képernyős kézi eszközök számára, mint PDA-k vagy mobiltelefonok számára lesz érvényes.
- A print esetén a média szabály a nyomtatók, vagy nyomtatási nézetek számára lesz érvényes.
- A projection esetén a média szabály a projektorok, és egyéb kivetítők számára lesz érvényes.
- A screen esetén a média szabály a színes számítógép képernyők számára lesz érvényes.
- A speech esetén a média szabály a beszédszintetizátorok számára lesz érvényes.
- A tty esetén a média szabály az elektromos írógépek, terminálok vagy bármilyen korlátozott vizuális megjelenítéssel bíró eszköz számára lesz érvényes.
- A tv esetén a média szabály televízió képernyők számára lesz érvényes.
- Vesszővel elválasztva több média típust is megadhatunk, így mindegyikre alkalmazva lesznek a blokk részben felsorolt CSS-szabályok.
- Végül egy zárójelek közötti blokkban soroljuk fel a formázó CSS-szabályokat.
- A mediaelemek hasonlóan importálhatók be, mint az @import elemek, csupán a media attribútum helyes kitöltésére kell ügyelni.
MegjegyzésA médiatípusokkal később részletesebb példákon keresztül is megismerkedünk.
Vissza a tartalomjegyzékhez
