hu en sv en hu it hu en hu de hu ja hu hu hu hu hu hu hu hu it hu hu ceb hu en hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu hu hu hu hu hu hu hu hu hu en hu hu hu hu hu hu hu hu hu en hu hu hu hu hu hu el hu hu cs hu hu hu hu hu hu hu hu es es es tr en hu hu hu hu hu hu hu hu hu fr hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu it hu en hu de hu ja hu hu hu hu hu es es es tr en hu
Mi az a CSS? A CSS bemutatása - WEBiskola
Weboldalszerkesztő (HTML, CSS, JS kódszerkesztő) HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső)
Ha nem tudod, hogy mi az a CSS és, hogy mire használjuk, akkor ez a cikk segít eligazodni a témában. Tanuld meg belőle a CSS fogalmát és használatát.
Ha ismerkedtél már a weboldalfejlesztéssel, vagy olvastál a HTML-ről, akkor biztosan szembejött veled a CSS is. Hiszen a CSS az egyik legalapvetőbb nyelv a weboldal készítés során.
A WikiPedia így fogalmazza meg a CSS definícióját: ,,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 én úgy írnám le, hogy: a CSS-el formázhatjuk meg a weboldalunk megjelenését. Például állíthatjuk be a szöveg színét, vagy a képek elhelyezkedését 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.)
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.
Hogy néz ki egy CSS kód?
A CSS kód megjelenése a csatolási módjától függ, de azt elmondhatjuk általánosságban, hogy (ha nem inline módszert használunk, akkor) először jön az elem neve, amit formázni szeretnénk, majd azután jön az, ahogyan szeretnénk formázni. Például:
ELEM { TULAJDONSÁG: ÉRTÉK; }
Az elem helyére az az elem kerül, amit formázni szeretnénk, például egy p. A tulajdonság helyére az kerül, amelyik tulajdonságát szeretnénk formázni, például, ha a színét szeretnénk, akkor a color. Az érték helyére azt kell írnunk, ahogyan szeretnénk formázni a tulajdonságot. Például a szín esetében, ha pirossá akarjuk tenni, akkor a red. Így néz ki végül a kód.
p { color: red; } Code language: CSS (css)
Stílusok, stíluslapok csatolási lehetőségei
Egy HTML fájlhoz többféleképpen is csatolhatjuk a CSS stíluslapot:
Összekapcsolhatjuk a HTML dokumentumunkat egy külső CSS fájllal
A HTML dokumentumon belül a   szekcióban is megadhatjuk a stílusbeállításokat
Beágyazhatjuk az elem kezdő tag-jébe is a stílus definíciókat
Alább csak nagyon röviden elemzem ezeket a módszereket, mert később következik egy lecke, ahol sokkal részletesebben kifejtem az összes módszert.
Ez a legegyszerűbb és talán leggyorsabb módszer is, de mindezek ellenére a legkevésbé is ajánlott
TARTALOM  Code language: HTML, XML (xml)
A szintaxisból látszik, hogy itt az adott elem kezdőcímkéjébe biggyesztjük be a stílusbeállításokat. Rendkívül gyorsan használható, mert nem kell új fájlt létrehoznunk, nem kell külső fájlt becsatolnunk. A hátránya az, hogy így csak egyetlen egy elem stílusbeállítását határoztuk meg. Mindegyik elemnek egyesével kell megadnunk a stílusát, ami nagyon időigényes.
Stílus (STYLE) a HEAD szekcióba
Ez a megoldás már sokkal elegánsabb, de még mindig nem a legjobb.
ELEM {STÍLUSDEFINÍCIÓ;}     Code language: HTML, XML (xml)
A fenti példából látszik, hogy ebben az esetben a stílusbeállításokat a   részben helyezzük el, így már lehetőségünk van arra, hogy globálisan formázzuk az összes elemet. Nem szükséges az összes p elemhez bekattintanunk és begépelnünk, hogy piros legyen. Elég csak a  -en belül megadnunk, hogy az összes p elem piros legyen.
HTML dokumentum összekapcsolása külső CSS fájllal
Ez a legszebb és leginkább átlátható módszer, hiszen itt a CSS fájl teljesen el van választva a HTML fájltól. Külön fájlba kerül a CSS és a HTML is, így a kód nagyon átlátható marad.
A HTML dokumentum CSS fájllal való összekötésének szintaktikája:
Code language: HTML, XML (xml)
Ezt a kódot a HTML fájl   részében kell elhelyezni! A fenti kódban egyedül a “href=” utáni részt kell módosítani, ide jön a CSS fájl elérési útvonala.
A CSS fájlban lévő stílus megadás szintaktikája:
ELEM { STÍLUSDEFINÍCIÓ; }
Az @import funkció használatával külső stíluslapokat importálhatunk be a HTML dokumentumba. Ez a módszer nagyban hasonlít az előzőhöz.
@import url(ELÉRÉSISI.ÚTVONALL); Code language: CSS (css)
Ez a kód is ugyanúgy a HTML dokumentum   szekciójába kerül.
HTML + CSS kód
p {color:red;}        Minden p-nek pirosnak kell lennie.   Ennek is.      Code language: HTML, XML (xml)
Minden p-nek pirosnak kell lennie.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A fenti kódban az látszik, hogy a stílusbeállításokat a HTML dokumentum fej részébe helyeztem el. Meghatároztam benne, hogy a p elemek színe piros legyen.
Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!
CSS alapok (A CSS alapjainak összefoglalója)
A legfontosabb, legalapvetőbb CSS parancsok, utasítások
CSS használatának, csatolásának módszerei
#css bemutatása #css bemutató #css kezdőknek #css magyar #css magyar nyelven #CSS programozás #css webprogramozás #magyar css #mi a css #mi az a css #webprogramozás alapjai #webprogramozás alapok
Mi az a CSS? A CSS bemutatása
Mi az a CSS kijelölő, azaz szelektor? (CSS selector használata)
A legfontosabb, legalapvetőbb CSS parancsok, utasítások
CSS használatának, csatolásának módszerei
A CSS használata [CSS használati útmutató]
CSS komment, azaz megjegyzés használata (CSS comments)
Színek használata CSS segítségével (CSS colors)
Szövegszín beállítása CSS-ben (CSS color)
CSS háttérszín beállítása (CSS background-color)
CSS színátmenet (Lineáris és sugárirányú CSS gradient)
CSS háttérkép beállítása (CSS background-image)
Dőlt betű beállítása CSS-el (CSS italic)
Szöveg aláhúzás CSS segítségével (CSS underline)
CSS szövegformázás (Szövegszín, szövegigazítás, szövegátalakítás, szövegdekoráció, szövegárnyék, szöveg háttér)
CSS keretek, szegélyek használata (CSS border)
CSS margó beállítása (CSS margin)
CSS alapok (A CSS alapjainak összefoglalója)
CSS padding használata (CSS padding magyarul)
CSS hivatkozások, linkek formázása (HTML a elem formázása CSS segítségével)
CSS táblázat formázás (CSS table)
Gomb formázása CSS-el (CSS button)
CSS képigazítás (Kép igazítása középre, balra, jobbra CSS-el)
Reszponzív weboldal készítése (Viewport és CSS Media Query)
CSS pozíció (abszolút, relatív, rögzített, statikus, ragadós)
Mi az a z-index és hogyan kell használni?
CSS float használata (CSS úsztatás, lebegés)
CSS szélesség, magasság (width, height, max-width, max-height, min-width, min-height)
CSS fonts (betűkészlet, betűtípus, betűvastagság)