CSS összefoglaló

9. osztály css Web

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 egy külön fájlban, amit az HTML fájlokhoz hivatkozunk, vagy beleépíthetjük az HTML fájlokba.
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évében kell megadni:

A CSS-ben a szabályokat a html elemekre, osztályokra (class), vagy azonosítókra (id) alkalmazhatjuk.

Stílus html elemre: 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!

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.

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.

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.

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.