A CSS (Cascading Style Sheets) egy nyelv, amely lehetővé teszi a weboldalak formázásának és megjelenésének szabályozását. A CSS segítségével megadhatjuk a szöveg méretét, betűtípusát, színét, háttérképet, elrendezést, és még sok más tulajdonságot. A CSS segítségével a weboldalakat egyedibbé, esztétikusabbá és könnyebben használhatóvá tehetjük.
A stílus elhelyezése
A CSS használatával elkülöníthetjük a weboldal tartalmát és formázását, így a kód olvashatóbbá és könnyebben karbantarthatóvá válik. A CSS-t többféleképpen is alkalmazhatjuk, például külön fájlban, amire a HTML fájlokból hivatkozunk, vagy beleépíthetjük az HTML fájlokba.
css fájlban:
Célszerű külön fájlban megadni, mert így több helyen is felhasználható, és sokkal könnyebb módosítani. A css fájl a html oldal fejlécében kell megadni:
|
1 |
<link rel="stylesheet" href="stilus.css"> |
Az oldal fejlécében: <style></style> tagok között.
|
1 2 3 |
<style> p { color: blue; } </style> |
inline: Megadhatunk stílust inline is. Ebben az estben a html tag-be kell beírni a style attributumot.
|
1 |
<p style="color:red;">Piros szöveg</p> |
A CSS-ben a szabályokat a html elemekre, osztályokra (class), vagy azonosítókra (id) alkalmazhatjuk.
Alapvető CSS szintaxis
|
1 2 3 |
szelektor { tulajdonság: érték; } |
Szelektorok
html tag-re: tegyük fel, hogy szeretnénk minden bekezdést félkövérré tenni. Ebben az esetben a css fájlunkba ennyit írunk: (ez a html fájlban található összes <p> elemre érvényes lesz! A stílusokat lehet csoportosítani is. Ha például a H1, H2,H3 címeket egyszerre szeretnénk mondjuk zöld betúszínnel írni, akkor egyszerűen vesszővel fel lehet sorolni őket.
|
1 2 3 4 5 6 |
p{ text-weight: bold; } h1,h2,h3{ color: green; } |
id azaz egyedi elemek. Tegyük fel, hogy csak egyetlen bekezdést akarunk formázni, legyen zöld a szöveg színe. Ebben az esetben a html fájlban teszünk egy id-t a <p>-be. A css fájlban az id-ra #-tel tudunk hivatkozni. #bekezdesem.
|
1 |
<p id="bekezdes"> Ez itt egy mondat.</p> |
|
1 2 3 |
p { color: green; } |
class azaz osztály Mi a helyzet akkor, ha pl. 10db bekezdésem van, de csak 4-et akarok megformázni azonos stílussal? Legyenek sorkizártak. Ilyenkor használom a class-t. A html tagnek adni kell egy osztályt, amire a css fájlban .osztalyneve névvel tudunk hivatkozni.
|
1 |
<p class="osztalyom">Ez egy formázott szöveg lesz.</p> |
|
1 2 3 |
.osztalyom { text-align: justify; } |
Meg kell még említenem a * -ot, amivel az összes html tag-et egyszerre lehet formázni.
A CSS-ben a szabályokat a későbbiekben definiált szabályok felülírhatják, ezáltal az adott elemre vonatkozó szabályokat a „cascading” (láncolás) elve alapján állítjuk be.
CSS-ben lehetőség van responsive design-ra is, ami lehetővé teszi a weboldalak megjelenésének módosítását különböző képernyőméretek esetén, így biztosítva a weboldal megfelelő megjelenését minden eszköz.
Kommentek: /* */ között elhelyezhetőek.
CSS doboz modell
A CSS dobozmodell lehetővé teszi, hogy formázzuk és rendezzük az HTML elemeket a weboldalakon. A dobozmodell alapján minden HTML elem egy dobozként jelenik meg, amelynek van egy külső és belső margója, szegélye és kitöltése. A dobozmodell segítségével kontrollálhatjuk az elemek méretét, elhelyezését és megjelenését a weboldalakon.
content – maga a tartalom (szöveg, kép)
padding – belső margó(térköz) a tartalom és a keret között
border – keret
margin – külső margó, az adott elem és más elemek között
box-sizing – szabályozza, hogy a width és height tartalmazza-e a padding-ot és a border-t:
content-box(alapértelmezett): csak a tartalom mérete.border-box: tartalom + padding + border együtt.
Bejárási sorrend (top → right → bottom → left)
Rövidítések használata (margin, padding, border)
Alapvetően van alsó,felső, király, ász… izé alsó, felső, bal, jobb margó/szegély/padding.
Tehát ezeket egyesével is tudjuk használni, és összevonva is.
- felső margó: margin-top
- alső margó: margin-bottom
- bal margó: margin-left
- jobb margó: margin-right
ugyanígy a padding és border esetében is…
Összevonva:
margin: 10px 15px 20px 25px; /* felső | jobb | alsó | bal */
margin: 10px; /* minden oldal */
margin: 10px 20px; /* felső-alsó | jobb-bal*/
margin: 10px 15px 20px; /* felső | jobb-bal | le */
Szegély: border: 2px solid black; /* vastagság | stílus | szín * ebben az esetben mind a 4 oldal egyforma/
Lekerekített szegély: border-radius
|
1 2 |
padding: 10px 20px 30px 40px; /* 10px felül, 20px jobb, 30px alul, 40px bal */ |
Szöveg formázása
A CSS szövegformázási tulajdonságok (például color, font-size, text-align, stb.) alkalmazhatók mind blokkszintű, mind inline elemekre. DE! A text-align-ra figyelni kell!
Blokkszintű elem → text-align hatással van a benne lévő szövegre.
Inline elem → csak a saját szövegrészét formázza, nem igazítja a teljes sort.
Szöveg színe
Színeket többféle módon is meg lehet adni. Nevükkel, hexadecimális értékkel, RGB kóddal.
|
1 |
color: red; /* vagy #ff0000, rgb(255,0,0) */ |
Betűtípus és méret
Betűtípus-családok (font-family)
- Talpas (serif): betűk végén kis vonások vannak → hagyományos, nyomtatott stílus.
- Talpatlan (sans-serif): egyszerű, letisztult betűk → modern, képernyőn jól olvasható.
- Monospace: minden betű azonos szélességű → kódokhoz.
- Cursive: kézírásos stílus.
- Fantasy: dekoratív betűk.
Fontos: mindig adjunk meg tartalék betűtípust és egy általános családot!
|
1 2 |
font-family: Arial, sans-serif; /* betűtípus */ font-size: 16px; /* betűméret */ |
Méretezési lehetőségek
- px (pixel): fix méret
- em: a szülő elem betűméretéhez viszonyított arány
- rem: a gyökér (html) betűméretéhez viszonyított arány.
- %: százalékos arány
- kulcsszavak: small, medium, large, x-large.
Betűstílus és vastagság
|
1 |
font-style: italic; /* dőlt */ |
normal: alapértelmezett, nem dőlt.
italic: dőlt betű (ha van külön italic változat a betűtípusban).
oblique:→ döntött betű (nem igazi italic, hanem mesterségesen döntött).
Betűvastagság – font-weight
A szöveg vastagságát (félkövérségét) szabályozza.
normal (400) → normál vastagság.
bold (700) → félkövér. Számértékek (100–900)
Szöveg igazítása
|
1 2 3 4 |
text-align: left; /* balra */ text-align: center; /* középre */ text-align: right; /* jobbra */ text-align: justify; /* sorkizárt */ |
Szöveg dekoráció
text-decoration-line: underline | overline | line-through | none
text-decoration-color: pl. red
text-decoration-style: solid | double | dotted | dashed | wavy
|
1 2 |
text-decoration: underline; /* aláhúzás */ text-decoration: none; /* linkek aláhúzásának eltüntetése */ |
Szöveg átalakítása
|
1 2 3 |
text-transform: uppercase; /* NAGYBETŰS */ text-transform: lowercase; /* kisbetűs */ text-transform: capitalize; /* Minden Szó Nagybetűvel */ |
Betűköz és sorköz
|
1 2 |
letter-spacing: 2px; /* betűk közötti tér */ line-height: 1.5; /* sorköz */ |
Szöveg árnyék
|
1 |
text-shadow: 2px 2px 5px gray; /* x-eltolás | y-eltolás | elmosás | szín */ |
Példa bekezdés formázására:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
p { color: #333; font-family: Verdana, sans-serif; font-size: 18px; font-weight: bold; text-align: center; text-transform: uppercase; letter-spacing: 1px; line-height: 1.6; text-shadow: 1px 1px 3px #aaa; } /* Összevonva is meg lehet adni őket: */ #pelda {font: italic bold 16px Arial, sans-serif;} /* font-style | font-weight | font-size | font-family */ |
A háttér formázása
Háttérszín beállítása
A background-color tulajdonsággal állíthatjuk be az elem háttérszínét.
Lehetséges értékek:
- Színnév:
red,blue,green - HEX kód:
#ff0000 - RGB:
rgb(255, 0, 0) - RGBA (átlátszósággal):
rgba(255, 0, 0, 0.5)
Például világoskék háttér az egész weboldalnak:
|
1 2 3 |
body { background-color: lightblue; } |
Háttérkép beállítása
A background-image tulajdonsággal adhatunk képet az elem hátteréhez.
Kiegészítő tulajdonságok háttérképhez
- background-repeat
- background-position
- background-size
- background-attachment
|
1 2 3 4 5 6 |
body { background-image: url('hatter.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; } |
Frissítve: 2025.11.11.