hu en sv en hu it hu en hu de hu ja hu hu hu hu hu hu hu hu en hu hu hu hu en hu hu hu hu hu hu hu hu hu hu hu hu en hu hu hu hu cs hu hu hu hu hu hu hu hu hu hu hu hu ca hu cs hu hu hu hu hu hu hu hu hu hu hu hu en hu hu hu hu hu cs hu cs en hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu cs hu cs en hu hu hu 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 en hu hu hu en hu it hu en hu de hu ja hu hu hu hu hu es es es tr en hu
HTML stílus, stíluslap és CSS használata, avagy HTML style - WEBiskola
Weboldalszerkesztő (HTML, CSS, JS kódszerkesztő) HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső)
Ebből a cikkből ingyen megtanulhatsz mindent a HTML stílusbeállításokról, illetve a CSS stíluslapok csatolásáról, HTML-el való összekapcsolásáról.
HTML stílusok, stíluslapok használata, avagy HTML style
A HTML stílus (vagy angolul a HTML style) arra való, hogy a weboldalunk kinézetét személyre tudjuk szabni vele. Például ezeken keresztül adhatjuk meg, hogy a háttér színe piros legyen, vagy a szöveg a mérete nagy.
Ha szeretnénk a weboldalunknak egyedi kinézetet, stílust adni, akkor 4 lehetséges módon tehetjük azt meg.
Nézzük meg a HTML stílusok, stíluslapok csatolási lehetőségeit:
Ö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 adott elem kezdőcímkéjébe (tag-jébe) a stílus definíciókat
Most pedig vizsgáljuk meg ezeket a stílusbeállítási lehetőségeket egyesével.
Ez tekinthető a legegyszerűbb és leggyorsabb stílus (style) megadás módnak, viszont ebből kifolyólag számos hátránya is van.
TARTALOM  Code language: HTML, XML (xml)
Fontos megjegyezni, hogy nem csak a p taggel működnek a stílusok, nyugodtan írhattam volna BODY-t vagy bármi mást.
A legtöbben, akik ezt a cikket olvassák már tisztában vannak a p tag használatával, így tudhatják, hogy egy sima p tag így néz ki:  TARTALOM .
De most kapott egy “style=”STÍLUS DEFINÍCIÓK;”” kiegészítést.
A “style=” szekció után kell idézőjelek közé megadnunk a stílus beállításait. Rengeteg stílusbeállítás létezik, nem szükséges még mindet ismernünk. Legyen elég annyi, hogy a “color” a szöveg színét állítja. E szerint így alakul a példánk:
Ez egy piros szöveg lesz.   Ez nem piros, mert itt nincs stílusdefiníció.  Code language: HTML, XML (xml)
Ez nem piros, mert itt nincs stílusdefiníció.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Rendkívül gyorsan és egyszerűen hozzátudjuk adni a kívánt elemhez a kívánt stílust.
Nem tudjuk egységesen szerkeszteni az összes p stílusát. Ha később megadunk még egy p elemet, akkor annál újra meg kell adni a szöveg színét.
Stílus (STYLE) a HEAD szekcióba
Ez a megoldás már sokkal kedvezőbb, hiszen itt elég egyetlen egyszer megadnunk és a HTML dokumentumunkba lévő összes p elem piros lesz.
STÍLUSDEFINÍCIÓ     Code language: HTML, XML (xml)
A fenti példából látszik, hogy a STYLE-t a HEAD-en belül kell megadni! A   taget  -al le kell zárnunk. A kettő közé kerülnek a stílus meghatározások. Alább láthattok egy példát.
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. <<
Elég egyetlen egyszer megadnunk és az összes elem olyan lesz, amilyennek szeretnénk.
Az adott oldalon élni fognak a stílusbeállítások, viszont ha csinálunk egy másik aloldalt az oldalunkhoz (például egy Információk oldalt pluszba), akkor ott már nem lesznek érvényesek a stílusbeállításaink.
HTML dokumentum összekapcsolása külső CSS fájllal
Őszintén megvallva ez az én kedvenc módszerem. Ez teszi a kódot a leginkább tisztává és átláthatóvá.
Code language: HTML, XML (xml)
Ha a CSS fájl (.css kiterjesztésű legyen!) és a HTML dokumentum ugyanabba a mappába van, akkor elegendő csak a CSS fájl nevére hivatkozni és nem kell az elérési útvonalát megadni.
Fontos tudni, hogy a   tag-et a  -ben kell elhelyezni.
A “rel” és a “type” részeket ne módosítsuk, hiszen innen tudja a böngésző, hogy egy CSS fájlra mutatunk. Egyedül a “href” részbe módosítsuk a CSS fájl elérését.
Érdemes még tudni, hogy akár több CSS fájlt is belinkelhetünk, de nem érdemes ész nélkül többet használni, mert az a weboldalunk betöltődését lassíthatja.
Most pedig nézzünk egy példát:
Minden p-nek pirosnak kell lennie.   Ennek is.      Code language: HTML, XML (xml)
p { color:red; } Code language: CSS (css)
Minden p-nek pirosnak kell lennie.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A fenti példát megvizsgálva megállapíthatjuk, hogy a HTML kódba hivatkozunk (vagy linkeljük) a stilus.css nevű fájlra, amelyben megvan adva, hogy a p elemek pirosan jelenjenek meg. Így a jobb szélső részben láthatjuk, hogy az összes p elemünk pirosként jelenik meg.
Ha egyszer meghatározzuk a CSS stílusdefinícióit, akkor többé már nem kell. Elég, ha minden egyes oldalon, dokumentumon csak erre az egy fájlra hivatkozunk.
Egy kicsit időigényes. Sok időbe telik míg létrehozol egy új fájlt, meghatározod a stílusokat, majd összelinkeled a két fájlt.
Az @import segítségével külső stíluslapokat importálhatunk be HTML-fájlunkba. Ez tulajdonképpen ugyanazt csinálja, mintha belinkelnénk a CSS fájlt, csak ez itt nem HTML, hanem CSS utasítás.
@import url(ELÉRÉSI.ÚTVONAL); Code language: CSS (css)
Pár információ az @import-ról
A @import utasítás megengedi, hogy egy CSS fájlba egy másik CSS fájlt importálj.
A @import utasításnak a dokumentum tetejében kell elhelyezkednie, de fontos, hogy a @charset deklaráció után legyen megtalálható.
Támogatja a média lekérdezéseket is.
Az importálási utasítás végére kötelező kitenni a pontosvesszőt.
A példánk ugyanúgy néz ki, mint az előző esetben, csak a CSS fájlra való mutatás változott.
@import url("STILUS.css");      Minden p-nek pirosnak kell lennie.   Ennek is.      Code language: HTML, XML (xml)
p { color:red; } Code language: CSS (css)
Minden p-nek pirosnak kell lennie.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Alább megadok pár stílusbeállítási lehetőséget, amelyeket kipróbálhattok a CSS tesztelgetések során.
color: (pl.: green;) a szöveg színét állathatjátok be vele
background-color: (pl.: black;) a háttérszínt lehet beállítani vele
font-size: (pl.: 22px;) szövegméretet lehet állítani
text-align: (pl.: center;) szövegigazításra használatos
margin: (pl.: 15px;) margót ad a szövegeknek
Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!
HTML alapok (A HTML webprogramozás alapjai)
HTML elemek: Minden, amit tudnod kell a HTML-elemekről
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)
Mi az a CSS? A CSS bemutatása
#CSS #html #html css #HTML ismeretek #html lecke #HTML lecke tanulás #HTML leckék #html magyar #html magyar nyelven #html magyar tananyag #html magyarul #html programozás #html stílus #html style #html tananyag #html tanulás #ingyenes html tananyag #magyar html #magyar nyelvű html tananyag #online html #online html tananyag #online html tanulás #stílus #style #webprogramozás alapjai #webprogramozás alapok
Mi az a HTML? (A HTML bemutatása)
HTML oldal felépítése, struktúrája (Miből áll egy HTML dokumentum?)
HTML szerkesztők (Milyen HTML szerkesztő programot használjak?)
HTML dokumentum készítése (Hogyan hozz létre olyan fájlt, amit a böngésző megtud jeleníteni)
HTML dokumentum szerkesztése, módosítása
Mi az a HTML TAG? A HTML elemek felépítése
HTML elemek: Minden, amit tudnod kell a HTML-elemekről
HTML alapok (A HTML webprogramozás alapjai)
Weboldalak forráskódjának megtekintése (Így nézd meg bármelyik oldal HTML kódját)
HTML TITLE használata (Oldal nevének megadása)
HTML címsorok (h1, h2, h3, h4, h5, h6)
HTML bekezdés (HTML p)
HTML pre használata – Hogy úgy jelenjen meg a szöveg, ahogy beírtad
Mi az a HTML span és hogyan kell használni? [HTML span útmutató]
HTML szövegszín, betűszín módosítása (HTML font color és color)
HTML háttérszín beállítása (background-color)
HTML szövegformázás (Formázás CSS nélkül)
HTML sortörés (HTML br)
HTML képek használata (HTML img)
HTML háttérkép beállítása (HTML background-image)
HTML karakterkódolás, karakterkészlet megadása (HTML meta charset)
HTML komment, azaz megjegyzés a HTML dokumentumba
HTML head – Mi megy a fej részbe?
HTML body – Mi megy a HTML törzsébe?
HTML stílus, stíluslap és CSS használata, avagy HTML style
[Színkódok] HTML színmegadási módok (Színmegadás RGB, RGBA, HEX, HSL és HSLA színkóddal)
Színek használata a HTML nyelvben (Színkódok használata)
HTML táblázat készítés (HTML table)
HTML hivatkozások, linkek (HTML a href)
HTML lista, felsorolás (HTML ol, ul, li)
HTML class – Minden, amit tudnod kell a HTML osztályokról
HTML id – Minden, amit tudnod kell a HTML azonosítóról
A HTML div elem használata
HTML űrlap elemei (HTML Forms)
Kliensoldali űrlapellenőrzés: űrlapmezők ellenőrzése HTML és JavaScript segítségével