Logó{CSS3 Tutoriál}

Alapok

Hogyan adhatunk stílust a HTML kódunkhoz?

Ez a fejezet a HTML és a CSS összekapcsolásának módjairól szól.


Beágyazott (in-line):

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

Szintaxis:

  • <tag style="paraméter:érték;paraméter:érték"></tag>
  • A formázni kívánt elemnél használjuk a style attribútumot.
  • 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.

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épest 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ó.

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ódunkban a <style type="text/css"></style> elemeket. Ezeket bárhova elhelyezhetjük, de elõnyös a fejrészbe. Ez nem csak az olvashatóságot javítja, hanem ekkor eleve a stílusnak megfelelõen töltõdik be a honlap a böngészõbe. Ha a törzs részbe raknánk a style elemeket, akkor a tartalom elõbb stílus nélkül töltõdne be, és csak ezután venné fel a stílust. Ezáltal a felhasználó a képernyõ felvillanását érzékelné.
  • 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ílus-szabályokat tartalmaz.
  • A CSS szabályokat a style elemen belül helyezhetjük el. Ezek pontos szerkezete késõbb lesz ismertetve.
  • 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.

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.

Szintaxis:

  • Helyezzük el a <link> elemet a HTML lapunk fej ré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épest. 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.

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 fej ré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.
  • Az importálási szabály végérõl fontos, hogy 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'); 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.

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édia elemek szerint. Így akár egyetlen stíluslapon definiálhatók a különbözõ kimenetekhez tartozó CSS szabályok.

A használata a következõ:

  • 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édia szabá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 media elemek hasonlóan importálhatók be, mint az @import elemek, csupán a media attribútum helyes kitöltésére kell ügyelni.

Tárnok Tamás Attila - CSS3 Tutoriál - 2010