2.2. fejezet¶

A fejezet anyaga¶

CSS alapok¶

Az eddigiek során tárgyalt HTML nyelvet a weboldal tartalmának kialakítására és strukturálására használtuk. Ha a tartalmat formázni is szeretnénk, akkor a CSS-re (Cascading Style Sheets) lesz szükségünk.

Szintaxis¶

A CSS utasítások szintaxisa a következőképpen néz ki:

szelektor {
  tulajdonság1: érték1;
  tulajdonság2: érték2;
  ...
}

A szelektor (más néven kijelölő) segítségével megmondjuk, hogy a weboldal mely elemét (vagy elemeit) szeretnénk formázni. Ezután kapcsos zárójelek között, pontosvesszővel elválasztva megadjuk az elvégzendő formázásokat tulajdonság: érték formában. A tulajdonság az adott elem formázandó tulajdonsága (pl. háttérszín, betűtípus, térköz stb.), az érték pedig az adott tulajdonsághoz tartozó, beállítani kívánt érték.

A CSS kódba írhatunk kommenteket (megjegyzéseket) is az alábbi szintaxissal:

1	`/* Ez egy komment a CSS kódban */`

Példa: Egy konkrét CSS kódrészlet

/* egy egyszerűbb szelektor és néhány formázás */

body {
  margin: 0;                        /* margó */
  padding: 0;                       /* térköz */
  background-color: #f0f0f0;        /* háttérszín */
}

/* egy összetettebb szelektor */

#main-content .center {
  text-align: center;               /* szöveg vízszintesen középre igazítása */     
}

CSS beágyazása¶

Egy HTML kódba többféleképpen is beágyazhatunk CSS formázásokat.

Inline CSS esetén a tagek style attribútumának értékeként adjuk meg a CSS formázást. Ekkor a formázás mindig csak az adott objektumra lesz érvényes. Ebben az esetben nem használunk CSS szelektort, hiszen mindig az aktuális objektumot formázzuk.

<p style="color: blue;">I'm blue da ba dee da ba die...</p>

Figyelem

Az inline CSS nem hatékony, valamint a kód átláthatóságát is rontja. Emiatt, ha csak lehet, kerüljük a használatát!

A lapon belüli (internal) CSS-t a <head>-ben adjuk meg, <style> és </style> között. Az így kiadott formázások az aktuális HTML dokumentumra lesznek érvényesek.

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>CSS alapok</title>
    <meta charset="UTF-8"/>
    <style>
      /* az itt kiadott CSS utasítások az aktuális HTML fájlra vonatkoznak */
      p { color: blue; }
    </style>
  </head>
  <body>
    <p>I'm blue da ba dee da ba die...</p>
    <p>Da ba dee da ba die...</p>
  </body>
</html>

A külső (external) CSS lényege, hogy a CSS formázásokat egy külső (.css kiterjesztésű) fájlba írjuk, majd ezt a fájlt ágyazzuk be a HTML állományunk <head> részében, a <link/> páratlan tag segítségével. Ekkor a külső CSS fájlban lévő formázások minden olyan HTML dokumentumra érvényesek lesznek, amelyek ezt a CSS fájlt beágyazzák.

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>CSS alapok</title>
    <meta charset="UTF-8"/>
    <!-- a main.css nevű külső CSS fájl beágyazása -->
    <link rel="stylesheet" href="main.css"/>
  </head>
  <body>
    <!-- a weboldal tartalma... -->
  </body>
</html>

Tipp

A külső (external) CSS különösen hasznos akkor, amikor egy weboldal több lapjának szeretnénk ugyanazt a formázást adni.

Alapvető szelektorok¶

Ebben a részben megismerkedünk a négy legalapvetőbb CSS szelektortípussal, amikkel HTML objektumokat jelölhetünk ki. A következő leckében ezek felhasználásával összetettebb szelektorokat is készítünk majd.

Elem szelektor: tagnév alapján jelöli ki az összes ugyanolyan típusú HTML elemet
Class szelektor: azokat az elemeket jelöli ki, amelyek az adott class értékkel rendelkeznek; az ilyen szelektort ponttal (.) kezdjük
Id szelektor: az adott id értékkel rendelkező elemet jelöli ki; az ilyen szelektort kettős kereszttel (#) kezdjük
Univerzális szelektor: a * szelektorral az összes HTML objektumot kijelölhetjük

Példa: A négy alapvető szelektortípus: elem szelektor, class szelektor, id szelektor és univerzális szelektor

div { /* az itt megadott formázás minden <div> objektumra vonatkozik */ }

.foo { /* az itt megadott formázás a class="foo" attribútummal rendelkező elemekre vonatkozik */ }

#bar { /* az itt megadott formázás az id="bar" attribútumú elemre vonatkozik */ }

* { /* az itt megadott formázás minden HTML objektumra vonatkozik */ }

Értékek, mértékegységek¶

Mielőtt megismernénk az első konkrét, HTML elemek formázására szolgáló CSS utasításainkat, érdemes áttekinteni a CSS-ben használatos fontosabb mértékegységeket.

Hosszúság megadása:
- abszolút hosszúság: mm (milliméter), cm (centiméter), in (inch = hüvelyk), pt (pont), px (pixel), pc (pica)
- relatív hosszúság: % (más értékekből számolódik), em (betűmérethez viszonyít), rem (gyökérelem betűméretéhez viszonyít), vw (ablakszélesség 1%-ához viszonyít), vh (ablakmagasság 1%-ához viszonyít)
Szögek megadása: deg (fok), rad (radián), grad (gradián)
Színek megadása:
- angol névvel - pl. blue
- decimális RGB-kóddal - pl. rgb(0, 0, 255)
- százalékos RGB-kóddal - pl. rgb(0%, 0%, 100%)
- hexadecimális RGB-kóddal - pl. #0000FF

A színmegadási módokról részletesebben

Az additív színkeverés a vörös (Red), zöld (Green) és kék (Blue) alapszínekkel dolgozik, és ezekből kever ki különböző színeket. Az RGB-kód (a decimális, a százalékos és a hexadecimális RGB-kód is) azt kódolja, hogy a három alapszínből rendre mekkora mennyiséget használtunk fel egy adott szín kikeveréséhez.

A decimális RGB-kódnál mindhárom alapszín mennyisége 0 és 255 közötti lehet. Például az rgb(0, 0, 255) azt jelenti, hogy a vörös (Red) szín mennyisége 0, a zöld (Green) szín mennyisége szintén 0, a kék (Blue) szín mennyisége pedig a maximális 255 - tehát ez a színkód éppen a kék színt kódolja.

Az alapszínek mennyiségét megadhatjuk százalékosan is, ekkor értelemszerűen 0% és 100% közötti értékeket írunk mindenhova. Például százalékos megadás esetén a kék szín kódja a következő lesz: rgb(0%, 0%, 100%).

A hexadecimális RGB-kód is pontosan ugyanígy működik, csak talán első ránézésre ez nem annyira világos. A hexadecimális RGB-kódban # (kettős kereszt) után 6 darab, tizenhatos számrendszerbeli számjegyet adunk meg (tehát minden számjegy 0 és F (= 15) közötti). Az első két számjegy a vörös (Red), a második kettő a zöld (Green), az utolsó kettő pedig a kék (Blue) szín mennyiségét kódolja. Például a #0000FF a kék színt kódolja, hiszen a vörös és zöld mennyisége minimális (00), a kék mennyisége pedig a maximális (FF).

Ha az adott (vörös, zöld vagy kék) színkomponenshez tartozó 2 számjegy megegyezik, akkor ezt rövidítve is írhatjuk. Például #0066FF helyett azt is írhatjuk, hogy #06F.
A hexadecimális színkód nem érzékeny a kis- és nagybetűkre (tehát például #12BD0F és #12bd0f ugyanaz).

Tipp

Nyilván senki nem akarja fejből megtanulni az összes létező színkódot. Szerencsére vannak olyan online szoftverek (például ez), amelyekkel manuálisan kiválaszthatunk egy nekünk tetsző színt a színpalettáról, és megtudhatjuk annak az RGB-kódját.

Szövegek formázása¶

Az alábbiakban áttekintjük a szövegekkel kapcsolatos fontosabb CSS formázásokat.

font-family: betűtípus
- értékeként több betűtípus is felsorolható vesszővel elválasztva - ekkor a felsoroltak közül a legelső telepített betűtípus lesz beállítva
- a több szóból álló betűtípusok nevét (pl. Courier New) aposztrófok között ('...') adjuk meg
font-size: betűméret
font-weight: betűvastagság
- lehetséges értékei: normal (alapértelmezett vastagság), bold (vastag), bolder (vastagabb), lighter (vékonyabb), 100 és 900 közötti szám
font-style: italic - dőlt betűssé tétel
color: betűszín
text-align: szöveg vízszintes igazítása
- lehetséges értékei: left (balra), right (jobbra), center (középre), justify (sorkizárt)
text-transform: szöveg átalakítása
- lehetséges értékei: uppercase (csupa nagybetűs), lowercase (csupa kisbetűs), capitalize (minden szó első betűje nagybetű), none (alapértelmezett)

Példa: Néhány szövegformázás

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Szövegformázások</title>
    <meta charset="UTF-8"/>
    <style>
      p {
        font-family: Arial, Verdana, sans-serif;  /* betűtípus */
        font-size: 20px;                          /* betűméret */
        font-weight: bold;                        /* félkövér betűk */
        color: darkblue;                          /* sötétkék betűszín */
      }

      span {
        font-family: 'Courier New';               
        font-style: italic;                       /* dőlt betűk */
        color: #F00;                              /* vörös betűszín */
      }
    </style>
  </head>
  <body>
    <p>A házimacska<span>(Felis silvestris catus)</span> életmódja és viselkedése</p>
  </body>
</html>

A kód kimenete

A dobozmodell¶

Minden HTML objektum felfogható egy téglalap alakú dobozként. CSS-ben gyakran használjuk a dobozmodell fogalmat, amikor elemek elrendezéséről és dizájnolásáról beszélünk. Az alábbi ábrán láthatjuk ennek a dobozmodellnek a részeit. (Az ábra forrása)

CSS dobozmodell

A content jelenti a doboz tartalmát, ami általában az elem szöveges tartalma vagy egy kép.
A padding a tartalom körül található belső térköz.
A border a tartalmon és a belső térközön kívül elhelyezkdő szegély.
A margin a szegélyen kívül található külső margó.

Térközök megadása¶

A padding-top, padding-right, padding-bottom és padding-left CSS tulajdonságokkal beállíthatjuk egy elem felső, jobb oldali, alsó és bal oldali térközének a mértékét.

Ezek a jellemzők összevonva is megadhatók a padding tulajdonsággal, amelynek értékeként megadjuk sorban a felső, jobb, alsó és végül a bal térköz mértékét. Ha ezek közül valamelyik paramétert elhagyjuk, akkor az a szemközti oldaltól fogja örökölni az értéket.

Példa: Térköz megadása a padding tulajdonsággal

.pelda1 {
  /* felső térköz: 10px, jobb térköz: 20px, alsó térköz: 30px, bal térköz: 40px */
  padding: 10px 20px 30px 40px;
}

.pelda2 {
  /* felső térköz: 0px, jobb térköz: 10px, alsó térköz: 0px, bal térköz: 10px */
  /* (mert az alsó térköz a felsőtől, a bal térköz a jobbtól örökli a méretet) */
  padding: 0 10px;
}

Margók megadása¶

Nagyon hasonlóan, mint ahogy azt a térközöknél láttuk, a margók is megadhatók...

...külön-külön, a margin-top, margin-right, margin-bottom és margin-left tulajdonságokkal
...összevonva, a margin tulajdonsággal (felső-jobb-alsó-bal sorrendben itt is - ha valamelyik margó méretét nem adjuk meg, akkor a szemközti oldaltól örökli azt).

A margin-left és margin-right tulajdonságoknál az auto értéket felhasználhatjuk az elem vízszintes igazítására:

margin-left: auto: vízszintesen jobbra igazítja az elemet
margin-right: auto: vízszintesen balra igazítja az elemet
ha mind a bal, mind a jobb margó értéke auto, akkor vízszintesen középre igazodik az elem.

Példa: Elem vízszintesen középre igazítása

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>A CSS dobozmodell</title>
    <meta charset="UTF-8"/>
    <style>
      div {
        border: 3px solid black;      /* szegély (a szemléletesség kedvéért) */
        padding: 5px;                 /* belső térköz (az esztétika kedvéért) */
      }

      .center {
        width: 300px;                /* az elem szélességét 300 pixelre csökkentjük */
        margin-left: auto;          /* vízszintesen középre igazítjuk az elemet */
        margin-right: auto;
        text-align: center;         /* a szöveges tartalmat is középre igazítjuk */
      }
    </style>
  </head>
  <body>
    <div class="center">Ezt akarjuk középre igazítani...</div>
  </body>
</html>

Szegélyek megadása¶

A szegélyek megadására a border CSS tulajdonság szolgál. Ennek értékeként 3 paramétert adunk meg: rendre a szegély vastagságát, stílusát és színét. Ezeket egyébként külön-külön is megadhatjuk a border-width, border-style és border-color tulajdonságokkal.

A szegély vastagsága (border-width) lehet a thin (vékony), medium (közepes) és thick (vastag) kulcsszavak valamelyike, de ha ennél pontosabbak szeretnénk lenni, akkor akár pixelben is megadhatjuk a szegélyvastagságot.

A szegély stílusa (border-style) lehet solid (folytonos), dashed (szaggatott), dotted (pontozott), double (dupla), groove (faragott), ridge (kidomborodó), outset (kiemelkedő), inset (süllyesztett), none (nincs szegély) vagy hidden (rejtett).

Ha nem szeretnénk minden irányból szegélyt adni egy objektumnak, akkor a border-top, border-right, border-bottom és border-left tulajdonságokkal külön-külön is megadhatjuk a felső, jobb, alsó és bal szegélyek értékét.

Példa: Szegélyek megadása

.pelda1 {
  /* 3 pixel vastag, folytonos fekete szegély minden irányból */
  border: 3px solid black;
}

.pelda2 {
  /* vastag, dupla vonalas, piros színű alsó szegély */
  border-bottom: thick double red;
}

Elemek méretezése¶

Miután megismertük a CSS dobozmodellt, beszélhetünk a HTML elemek méretéről (szélességéről és magasságáról).

Egy elem szélességét a width, magasságát pedig a height CSS tulajdonsággal adhatjuk meg. Ezek értékeként megadható a korábban tárgyalt abszolút és relatív hosszúságmértékek valamelyike, vagy az auto speciális érték (ekkor a böngésző határozza meg a méretet).

Ehhez hasonlóan a min-width, max-width, min-height és max-height tulajdonságokkal rendre megadhatjuk egy elem minimális és maximális szélességét, valamint minimális és maximális magasságát.

A box-sizing tulajdonság¶

A méret (szélesség és magasság) megadásának többféle értelmezése lehet. Ennek szabályozására szolgál a box-sizing CSS tulajdonság. Értékei:

content-box: az elem méretébe csak a tartalom tartozik bele (alapértelmezett)
border-box: az elem méretébe a tartalom, a térközök és a szegélyek is beletartoznak.

Ha egy másik objektumon belül elhelyezkedő elem méretét százalékban adjuk meg, akkor előfordulhat, hogy a következő jelenséggel találjuk szembe magunkat:

<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>A box-sizing tulajdonság</title>
      <meta charset="UTF-8"/>
      <style>
         #parent { border: 10px solid black; }
         #child { width: 100%; border: 10px solid gray; padding: 10px; }
      </style>
   </head>
   <body>
      <div id="parent">
         <div id="child">Beágyazott objektum</div>
      </div>
   </body>
</html>

A kód kimenete

Látható, hogy a beágyazott objektum szegélye "kilóg" az őt tartalmazó objektumból, ami közel sem mondható szépnek. Ennek a jelenségnek az oka, hogy az elemek méretébe alapértelmezett módon csak az elem tartalma tartozik bele, a térközök és a szegélyek nem lesznek figyelembe véve a méret meghatározásakor (content-box).

Ha azt szeretnénk, hogy a méretbe a tartalom mellett a térközök és a szegélyek is beletartozzanak, használjuk a box-sizing: border-box utasítást!

<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>A box-sizing tulajdonság</title>
      <meta charset="UTF-8"/>
      <style>
         #parent { border: 10px solid black; }
         #child { width: 100%; box-sizing: border-box; border: 10px solid gray; padding: 10px; }
      </style>
   </head>
   <body>
      <div id="parent">
         <div id="child">Beágyazott objektum</div>
      </div>
   </body>
</html>

A kód kimenete

A háttér formázása¶

Ebben a részben megismerünk néhány fontosabb CSS tulajdonságot, amelyet a háttér formázására használhatunk.

background-color: háttérszín
- értékeként megadható egy szín vagy a transparent (átlátszó) kulcsszó
background-image: háttérkép
- a beállítani kívánt háttérkép elérési útvonalát az url('elérési_útvonal') segítségével adjuk meg
background-repeat: háttérkép ismétlődése
- lehetséges értékek: repeat (vízszintes és függőleges ismétlődés, alapértelmezett), repeat-x (vízszintes ismétlődés), repeat-y (függőleges ismétlődés), no-repeat (nem ismétli)
background-position: háttérkép pozíciója
- két értéket vár: rendre a vízszintes és a függőleges pozíciót
  - a vízszintes pozíció értékei: left (bal), right (jobb), center (középre)
  - a függőleges pozíció értékei: top (fent), bottom (lent), center (középre)
  - a fenti kulcsszavak helyett megadhatók százalékos értékek is a pozíciók helyén
  - nem kötelező mindkét értéket megadni (ha elhagyjuk a második paramétert, akkor függőlegesen középre lesz pozicionálva a háttérkép)
background-size: háttérkép mérete
- két értéket vár: rendre a vízszintes és a függőleges méretet
  - nem kötelező mindkét értéket megadni
  - megadható abszolút vagy relatív hossz, vagy a lenti kulcsszavak valamelyike
  - auto: automatikus (alapértelmezett)
  - cover: a tartalmazó elem szélességére vagy magasságára méretezi a háttérképet az eredeti méretarányok megtartásával úgy, hogy a kép a teljes hátteret kitöltse (lehet, hogy a kép bizonyos részei nem fognak látszani)
  - contain: a legnagyobb méretre skálázza a háttérképet az eredeti méretarányok megtartásával úgy, hogy a kép teljes egészében látható legyen

Tipp

A háttér tulajdonságai összevonva is megadhatók a background CSS tulajdonsággal. Bővebben itt.
A linear-gradient() és radial-gradient() függvények segítségével színátmenetes háttereket is használhatunk. Bővebb leírás itt és itt.

Példa: Háttérformázások (A felhasznált háttérkép forrása)

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Teljes képernyős háttérkép</title>
    <meta charset="UTF-8"/>
    <style>
      html, body {
        height: 100%;
        margin: 0;
      }

      body {
        background: url('bg.jpg') center/cover no-repeat;   /* teljes képernyős háttérkép */
      }

      h1 {
        background-color: darkblue;   /* a régebbi böngészők lehet, hogy nem ismerik a linear-gradient()-et */
        background: linear-gradient(90deg, darkblue, blue); /* színátmenetes kitöltés */
        color: #fff;
        text-align: center;
        margin-top: 0;
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Üdvözöllek a weboldalamon!</h1>
  </body>
</html>

A kód kimenete

Elem megjelenítése¶

A HTML elemek megjelenítését a display CSS tulajdonsággal szabályozhatjuk. A tulajdonság néhány lehetséges értéke:

inline: sorszintű elem (szélességét a tartalom szélessége határozza meg, nem kezdődik új sorban)
block: blokkszintű elem (szélessége a rendelkezésre álló szélesség, új sorban kezdődik)
inline-block: inline, de megadhatók a méretei (szélessége, magassága)
none: elem eltüntetése
manapság nagy népszerűségnek örvend még a flexbox és a grid.

Példa: Kép vízszintesen középre igazítása, elem eltüntetése (A felhasznált kép forrása)

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>A display tulajdonság</title>
    <meta charset="UTF-8"/>
    <style>
      /* kép vízszintesen középre igazítása */

      #my-pic {
        display: block;  /* először blokkszintűvé tesszük (a képek eredetileg inline-ok) */
        margin: 0 auto;  /* aztán a vízszintes margókat auto-ra állítjuk */
      }

      /* elem eltüntetése */

      .magical { display: none; }
    </style>
  </head>
  <body>
    <img id="my-pic" src="cat.jpg" alt="Egy klassz macsek"/>
    <p class="magical">Sitty-sutty, eltüntem</p>
    <p>Én pedig itt maradtam</p>
  </body>
</html>

A kód kimenete

Utolsó frissítés: 2024-02-10 17:23:02