,,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.
*– Univerzális szelektor (minden elemre vonatkozik).* { margin: 0; padding: 0; }tag– Elem szelektor (pl. minden<p>vagy<h1>elemre).p { color: blue; } h1 { font-size: 24px; }.class– Osztály szelektor (egy adott osztályú elemekre)..box { background-color: lightgray; }#id– ID szelektor (egyedi elem az oldalon).#header { text-align: center; }tag1, tag2– Csoportosított szelektor (több elemre egyszerre).h1, h2, h3 { font-family: Arial, sans-serif; }tag1 tag2– Leszármazott szelektor (csak adott elemen belül).div p { color: green; }tag1 > tag2– Közvetlen gyermek szelektor.div > p { font-weight: bold; }tag1 + tag2– Szomszédos testvér szelektor.h1 + p { font-style: italic; }[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.
