Forrás:
* Dan Livingston – CSS & DHTML webfejlesztőknek – Kossuth Kiadó, ISBN 963 09 4475 8
* Digitális kultúra tankönyv – Oktatási Hivatal
* saját szülemény
Ez az oldal egy nagyon-nagyon rövid betekintést kíván nyújtani a stíluslap fogalmáról, elhelyezéséről és használatáról.
A stíluslap fogalma
A stíluslap segítségével adott weboldal HTML címkéinek tulajdonságait állíthatjuk be.
A stíluslapok segítségével például az alábbi műveleteket tudjuk végrehajtani:
- a karakterek tulajdonságait tudjuk meghatározni,
- módosíthatjuk a HTML címkéket,
- rétegeket határozhatunk meg és helyezhetünk el az oldalon.
Mi a harmadik lehetőséggel nem foglalkozunk.
A stíluslap helye
Stílus elhelyezésének több lehetséges módja van, de alapvetően két helyen szoktunk definiálni:
- belső stíluslapként az adott html oldal fej részében,
- vagy külső stíluslapként, az adott html oldalra történő meghívás alapján.
1, Belső stíluslap a HTML oldal fej részében
Ekkor a stíluslap a <head> és a </head> címkék között kerül beillesztésre az alábbi példa szerint (a címkék színezésének nincs jelentősége, kizárólag a könnyebb megértést szolgálják!):
A fenti példa böngészőbeli eredménye:
2, Külső stíluslap csatolása
Külső stíluslapot akkor célszerű alkalmazni, ha a portálunk több, különálló HTML oldalból áll és mindegyik oldalon használni szeretnénk az adott stílusokat.
Ekkor két okból nem lenne célszerű belső stíluslapokat használni:
- A belső stíluslapokat mindegyik oldal fejrészében külön-külön be kellene gépelni, ill
- amennyiben módosításra/törlésre kerülne egy rész, akkor mindegyik oldalon egyenként meg kellene változtatni/törölni az adott egységet.
Ekkor a megoldás a külső stíluslap csatolása, azaz készíteni egy teljesen különálló stíluslapot és ezt behívni a kívánt oldalak mindegyikébe.
A behívás minden esetben az adott HTML oldal fejrészében történik.
Nézzük a fenti példát úgy, hogy elsőként készítünk egy stíluslapot, amelyben deklaráljuk (meghatározzuk) azt a bizonyos nagyBetu osztályt, majd ezt az elkészül külső stíluslapot behívjuk az adott HTML oldalra. Az eredmény ebben az esetben is ugyanaz lesz.
Elsőként elkészítjük a különálló osztaly.css állományt. Ezt megtehetjük egy egyszerű szövegszerkesztő alkalmazással is (például: WordPad, Jegyzettömb vagy akár a Visual Studio Code), azonban a mentésnél két dologra kell ügyelnünk:
- az állomány kiterjesztése .css legyen, ill.
- és ha WordPad-ben vagy Jegyzettömben írjuk, akkor egyszerű szövegként mentsük.
A Visual Studio Code-ban elkészült osztaly.css állomány:
Majd az osztaly.css állomány behívása az adott HTML oldal fejrészébe:
Ebben az esetben is ugyanazt az eredményt kapjuk:
A következő táblázat néhány, a stíluslapban használt tulajdonságot és annak magyarázatát tartalmazza:
Forrás: Digitális kultúra tankönyv| Tulajdonság | Leírás |
| text-align | a szöveg vízszintes igazításának módja. Értékei: left (balra), center (középre), right (jobbra), justify (sorkizárt). Példák: text-align:center, text-align:right |
| vertical-align | a szöveg függőleges igazításának módja. Értékei: top (fenn), bottom (alul), middle (középen) |
| font-size | a karakter mérete. Megadható például képpontokban (px), vagy akár százalékosan (%) is. Használható az em mértékegység is, amellyel az aktuális betűméret valahányszorosát állíthatjuk be. Példák: font-size:16px; font-size: 120%; font-size:1.5em; |
| font-weight | A szöveg félkövér megjelenítése. Tipikus értéke a bold. Ha vissza akarjuk állítani a normál megjelenést, használjuk a normal értéket! Példák: font-weight:bold; font-weight:italic; font-weight: normal |
| font-style | A szöveg dőlt megjelenítésére szolgál. Tipikus értéke az italic. Ha vissza akarjuk állítani a normál megjelenést, használjuk a normal értéket! Példák: font-style:italic; font-style:normal; |
| font-family | A karaktertípus beállítására szolgál. Konkrét karaktertípusokat fel lehet sorolni, a végén egy általános karakter családot kell megadni (pl.: serif=talpas karakterek, sans-serif=talp nélküli karakterek). Ha a karaktertípus neve szóközt tartalmaz, akkor aposztrófjelek közé kell tenni. Példák: font-family:Arial,Verdana, sans-serif; font-family:'Times New Roman',Times,serif; |
| border border-top border-right border-bottom border-left |
Az elemeket körülvevő szegély beállítására szolgál. Megadhatjuk a szegély vastagságát képpontokban (px), a szegély stílusát (solid=folytonos, dotted= pontozott, dashed=szaggatott, double= dupla, stb.), valamint a színét. Ha a border tulajdonságot használjuk, akkor mind a négy oldali szegély ugyanolyan lesz. Ha nem ezt akarjuk, akkor használhatjuk csak az adott oldalra vonatkozót (top=felső, right=jobb, bottom=alsó, left=bal) Példák: border-top: 1px solid blue; border:4 px double #8b0000 |
| border-radius | A szegély lekerekítettségét állítja be. Például: border-radius:20px; |
| float | Az adott elemet lehet balra vagy jobbra lebegtetni. A lebegtetés azt jelenti, hogy a környező elemek körbefolyják az adott elemet. Például: float:left; float:right; |
| padding padding-top padding-right padding-bottom padding-left |
Kitöltés megadása, ami a tartalom és az ezt körbevevő szegély közti térközt jelenti. Belső margónak is hívják. Ha a padding tulajdonságot használjuk, és egy értéket adunk meg, akkor mind a négy oldali beállítás ugyanakkora lesz. Ha nem ezt akarjuk akkor használhatjuk csak az adott oldalra vonatkozót. |
| margin margin-top margin-right margin-bottom margin-left |
A margó megadására szolgál. A margó az adott elem szegélye és az őt körülvevő többi elem közti távolságot jelenti. Ha a margin
tulajdonságot használjuk és egy értéket adunk meg, akkor mind a négy oldali beállítá ugyanakkora lesz. Ha nem ezt akarjuk, akkor használhatjuk csak az adott oldalra vonatkozót. Az elemek középre igazítására is a margóbeállítást kell használni, ilyenkor 'auto' értéket kell adni a bal és a jobb margónak. Ekkor a margin-left:auto; és margin-right:auto; tulajdonságokat kell beállítani. |
| color | A szöveg színének beállítására szolgál. Megadhatunk színneveket (pl: blue), de akár RGB színkódot is. A képszerkesztő programokban gyakran a színkódot hexadecimális kóddal is megtaláljuk, amelynek az elején egy # karakter áll. Az alábbi példában ugyanazon szín mergadását láthatjuk különböző módokon: color: darkred; color:#8b0000; color: rgb(139,0,0); |
| background-color | Háttérszín beállítása. A színek hasonlóan adhatók meg, mint a szövegszínek esetében |
| width | Az elem szélességét állítja be. A méret megadható képpontokban és akár százalékban is. Példák: width:600px; width: 50%; |
| height | Az elem magasságát állítja be. Hasonlóan állítható be, mint a szélesség. |
| min-width min-height |
Az elem minimális szélességét, illetve magasságát jelenti, amely alá nem lehet átméretezni a böngészőprogramban. |
| max-width max-height |
Az elem maximális szélességét, illetve magasságát jelenti, amely fölé nem lehet átméretezni a böngészőprogramban. |
| background-image | A háttérkép beállítására szolgál. A háttérkép elérhetőségét az url('') szövegen belül kell megadni, az aposztrófok között. Például: background-image:url('kepek/mancs.png'); |
| background-repeat | A háttérkép ismétlődéseinek bellítására alkalmas. Az értékei a következő lehetnek: no-repeat=nem ismétlődik), repeat (mozaikszerűen ismétlődő), no-repeat (nem ismétlődő), repeat-x (csak vízszintes irányban ismétlődő), repeat-y (csak függőleges irányba ismétlődő). Példák: background-repeat : no-repeat; |
| background-position | háttérkép bal felső sarkának koordinátái. Először az x tengelyre vonatkó, utána az y tengelyre vonatkozó értéketkell beállítani. Például background-position:0 20px |