Informatika – Tanulj programozni ↹ CSS

,,A CSS (Cascading Style Sheets, magyarul: lépcsőzetes stíluslapok) a számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le.”

Egy kicsit egyszerűbben megfogalmazva: a CSS-el formázhatjuk meg a weboldalunk megjelenését. Például beállíthatjuk a szöveg méretét, kinézetét, színét, meghatározhatjuk, hogy egy oldalon belül hol helyezkedjék el egy kép, hogy nézzen ki ez a kép, legyen-e kerete, le legyen-e kerekítve a sarka stb.

Mire lehet használni a CSS-t?

A teljesség igénye nélkül most felsorolok pár dolgot, amelyet CSS-el lehet megoldani. (Azért nem sorolom fel az összeset, mert a CSS segítségével körülbelül mindent elintézhetünk, így ez egy soha véget nem érő lista volna.)

• háttérkép beállítása
• háttérszín beállítása
• szövegméret beállítása
• szövegszín beállítása
• betűtípus meghatározása
• képek elhelyezkedésének meghatározása
• szövegigazítás változtatása
• tartalmak keretezése
• margó beállítása
• stb.

Miért találták ki a CSS-t, ha ott van a HTML is?

Aki már ismeri a HTML nyelvet az nagyon jól tudja, hogy a HTML-t azért találták ki, hogy leírjuk vele a weboldal tartalmát. Fontos, hogy a tartalmát és nem a kinézetét.

De ahogy haladtunk előrébb az időben, úgy megjelent a fejlesztők részéről az az igény, hogy jó lenne, ha tudnánk a tartalmunkat formázni is. Ezáltal szebbé, egyedibbé tenni weboldalunkat.

Ezért bevezették a HTML nyelven belül történő formázást, amely kisebb káoszhoz vezetett. Nagyon nehéz és idegőrlő volt minden egyes HTML elemhez egyesével hozzáadni a megfelelő formázást.

Ennek a problémának a megoldására a W3C (World Wide Web Consortium) 1990-ben létrehozta a CSS-t. A CSS leválasztja a formázást a HTML-től, emiatt egy sokkal könnyebben átlátható rendszert alkot.

A CSS-ben nincsenek „tagek”, szelektorok, tulajdonságok és értékek vannak. A HTML tageket CSS segítségével lehet formázni.

Leggyakoribb CSS szelektorok

A szelektorok határozzák meg, hogy mely HTML-elemekre vonatkoznak a stílusok.

1. * – Univerzális szelektor (minden elemre vonatkozik).

   * { margin: 0; padding: 0; }
   

2. tag – Elem szelektor (pl. minden <p> vagy <h1> elemre).

   p { color: blue; }
   h1 { font-size: 24px; }
   

3. .class – Osztály szelektor (egy adott osztályú elemekre).

   .box { background-color: lightgray; }
   

4. #id – ID szelektor (egyedi elem az oldalon).

   #header { text-align: center; }
   

5. tag1, tag2 – Csoportosított szelektor (több elemre egyszerre).

   h1, h2, h3 { font-family: Arial, sans-serif; }
   

6. tag1 tag2 – Leszármazott szelektor (csak adott elemen belül).

   div p { color: green; }
   

7. tag1 > tag2 – Közvetlen gyermek szelektor.

   div > p { font-weight: bold; }
   

8. tag1 + tag2 – Szomszédos testvér szelektor.

   h1 + p { font-style: italic; }
   

9. [attrib] – Attribútum alapú szelektor.

   input[type="text"] { border: 1px solid black; }
   

---

Leggyakoribb CSS tulajdonságok

Ezek a CSS-ben használt legfontosabb tulajdonságok, amelyekkel az elemeket formázhatod.

1. Szövegformázás

• color – Szöveg színe.
• font-size – Betűméret.
• font-weight – Betűvastagság (pl. bold).
• font-family – Betűtípus.
• text-align – Szöveg igazítása (left, center, right).
• text-decoration – Dekoráció (pl. underline, none).
• letter-spacing – Betűköz.
• line-height – Sortávolság.

2. Háttér és szegélyek

• background-color – Háttérszín.
• background-image – Háttérkép beállítása.
• border – Szegély (border: 1px solid black;).
• border-radius – Lekerekített sarkok.

3. Dobozmodell (Box Model)

• width – Szélesség.
• height – Magasság.
• margin – Külső térköz (más elemekhez képest).
• padding – Belső térköz (a tartalom és a szegély között).
• display – Megjelenítési mód (block, inline, flex, grid).

4. Pozicionálás és elhelyezés

• position – Elhelyezés (static, relative, absolute, fixed).
• top, left, right, bottom – Pozíció meghatározása.
• z-index – Rétegek sorrendje.

5. Rugalmas elrendezések

• flexbox (display: flex;) – Rugalmas elrendezés.
• grid (display: grid;) – Rács alapú elrendezés.
• align-items – Függőleges igazítás flexboxban.
• justify-content – Vízszintes igazítás flexboxban.