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 en hu cs hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu en tr hu hu hu hu hu hu hu en hu hu hu hu hu el hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu hu hu hu hu cs hu hu hu 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
CSS alapok (A CSS alapjainak összefoglalója) - WEBiskola
Weboldalszerkesztő (HTML, CSS, JS kódszerkesztő) HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső)
Ebben a cikkben mindent megtalálsz, ami a CSS alapjaihoz köthető. Megtudhatod azt, hogy mi a CSS fogalma, hogy hogyan néz ki a szintaktikája, hogy hogyan tudod csatolni a HTML dokumentumhoz, hogy melyek a legalapvetőbb, leggyakoribb CSS utasítások, parancsok és hogy melyik CSS utasítást hogyan kell használni. Szóval ha érdekelnek a CSS alapok és szeretnél képbe kerülni ezzel kapcsolatban, akkor tarts velünk.
Kezdjük rögtön a legelején: mi az a CSS? És mi a fogalma? A WikiPedia szerint:
,,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.”
Ez elsőre egy kicsit bonyolultnak tűnhet, ezért közérthetőbben én így fogalmaznám meg:
A CSS segítségével formázhatjuk meg a weboldalunk megjelenését.
Például ezzel állíthatjuk be a szöveg színét, a képek elhelyezkedését, vagy azt, hogy mekkora legyen egy betű.
Már fentebb említettem egy két példát, de azért még felsorolok párat, hogy még egyértelműbb legyen, hogy pontosan mire is használhatjuk a CSS-t.
Először is el kell döntenünk, hogy hogyan szeretnénk a CSS-t használni (de erről majd alább olvashattok, mert egy kicsit masszív téma) és attól függ, hogy hogyan néz ki a szintaxisa. Elöljáróban annyit megosztok, hogy kétfajta szintaxis létezik.
Az egyik, amikor a HTML dokumentumon belül az elem kezdő címkéjében adjuk meg a CSS kódot.
TARTALOM  Code language: HTML, XML (xml)
Ez a szöveg piros.  Code language: HTML, XML (xml)
A másik megoldás, amikor a CSS kódot nem inline helyezzük el, hanem vagy a HEAD-be vagy egy külső CSS fájlba. Ilyenkor így néz ki a szintaktika:
ELEM { STÍLUSBEÁLLÍTÁSOK; }
p { color:red; }        Ez a szöveg piros.      Code language: HTML, XML (xml)
Ez a szöveg piros.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A CSS szintaktikájáról itt olvashatsz bővebben.
Hogy néz ki egy CSS kód?
p { color: red; } VAGY  TARTALOM  Code language: HTML, XML (xml)
Bár fent már láthattatok rá példát, de egy CSS kód így néz ki, a p azt jelenti, hogy azt az elemet szeretnénk formázni. A color arra utal, hogy a színét szeretnénk módosítani, míg a red azt jelenti, hogy pirosra szeretnénk állítani.
CSS csatolásának a módszerei
Erről a témáról csak nagyon röviden fogok írni, mert már egy egész cikket szántam a témának, melyet itt olvashattok.
Szóval a CSS csatolása 4 eltérő módszerrel történhet:
Összekapcsolhatjuk a HTML dokumentumot egy külső CSS fájllal
A HTML dokumentum   részében is megadhatjuk a CSS-t
Beágyazhatjuk az adott elem kezdőcímkéjébe (tag-jébe) a stílus meghatározásokat
Ez az a módszer, amikor a HTML dokumentumban az elem kezdőcímkéjébe ágyazzuk a CSS utasításokat.
TARTALOM  Code language: HTML, XML (xml)
A CSS kód ugyanúgy a HTML dokumentumban marad, de itt már kihelyezzük a HEAD-be.
STÍLUSDEFINÍCIÓ;     Code language: HTML, XML (xml)
Ebben az esetben a CSS kód kikerül egy külső .css kiterjesztésű fájlba.
Ezt a kódot kell a HTML dokumentum fejrészébe illeszteni.
Code language: HTML, XML (xml)
És így néz ki a stílusbeállítás a különálló CSS fájlban.
ELEM { TULAJDONSÁG: ÉRTÉK; }
Ennél a módszernél a CSS ugyanúgy egy külső fájlba kerül, csak másképp hívjuk meg azt.
@import url(ELÉRÉSISI.ÚTVONALL); Code language: CSS (css)
Ezekről a csatolási módszerekről itt olvashatsz sokkal részletesebben.
Legfontosabb CSS parancsok, utasítások, kódok
Most, hogy már ennyi mindent tudunk áttérhetünk a CSS alapok egyik legfontosabb részére, a legalapvetőbb CSS utasításokra. Azért fontosak ezek az utasítások, mert ezek jönnek a leggyakrabban szembe az emberrel, ha a CSS-el foglalkozik.
CSS segítségével lehetőségünk van ezeket a paramétereket is módosítani.
Betűtípus   Betűméret  Code language: HTML, XML (xml)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Módosíthatjuk a szöveg színét, háttérszínét és azt is, hogy merre legyen rendezve a szöveg.
Jobbra igazítás.   Jobbra igazítás.   Sárga háttér  Code language: HTML, XML (xml)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Természetesen ennél sokkal több alapvető CSS utasítás van, amelyekről itt olvashatsz.
CSS kommentekre, megjegyzésekre azért van szükség, hogy megtudjuk jelölni a kódot magunk vagy mások számára a későbbi könnyebb érthetőség miatt.
/* Ide jön a megjegyzés. */ Code language: JSON / JSON with Comments (json)
/* Ezzel a kóddal az összes p elemet pirossá színezem. */ p { color: red; /* De akár ide is kommentelhetek. */ } Code language: CSS (css)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ahogy láthatjuk a CSS kódunkhoz fűzött kommentár, megjegyzés nem jelenik meg a böngészőben, az csak számunkra elérhető.
Még több információt ide kattintva érsz el a CSS kommentekről, megjegyzésekről.
Nagyon röviden összefoglalva ezeket az információkat mondhatjuk a CSS alapjainak. Ha valaki ezekkel már tisztában van az egy kiváló kiindulási alap. Ha valakinek ez nem elég, akkor ide kattintva még rengeteg CSS tananyagot érhet el teljesen ingyen.
Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!
Mi az a CSS? A CSS bemutatása
A legfontosabb, legalapvetőbb CSS parancsok, utasítások
CSS használatának, csatolásának módszerei
Tömbök a JavaScript-ben (Tömbök magyarázata, létrehozása, elemek hozzáadása, módosítása, törlése, indexelés, tömb hosszának megállapítása)
#CSS #css alapok #css kezdőknek #css magyar #css magyar nyelven #css összefoglaló #CSS programozás #css webprogramozás #magyar css #webfejlesztés #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)