Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Bevezetés a stíluslapok használatába /Stíluslap csatolási módok

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élda
Forrá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

Példa - Egy nem követendő példa a beágyazott megadásra

Interaktív példa
Magyarázat

A 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élda
Forrá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

Példa - Az előbbi példa lapon belüli definícióval

Interaktív példa
Magyarázat

Itt 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élda
Forráskód
<style type="text/css">
  <link rel=stylesheet type="text/css" href="pelda.css">
</style>

Szintaxis

Példa - Az előbbi példa külső, belinkelt stíluslappal

Interaktív példa
Magyarázat

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

Fontos

Ezzel 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

Példa - Importált stíluslap

Interaktív példa
Magyarázat

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

Fontos

A @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

Megjegyzés

A médiatípusokkal később részletesebb példákon keresztül is megismerkedünk.

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.