Kék bekezdés
Ez egy kék bekezdés.
Ez is egy kék bekezdés.
==== CSS stílusok megadása ====
=== Inline ===
Az inline CSS közvetlenül az egyes HTML-elemekre alkalmaz stílusokat a ''style'' attribútumon keresztül. Az elem nyitó tagjában van meghatározva, például egy '''' vagy ''
Ez egy egyedi stílusú bekezdés, piros színnel és 16 pixel betűmérettel.
Ez a bekezdés az alapértelmezett formázást használja, nincs rá alkalmazva CSS.
Az inline CSS hasznos lehet az oldalon belül csak egy adott elem módosítására anélkül, hogy a lap többi részére hatással lenne. Az inline CSS gyakran nem ideális megoldás, mivel ezek a stílusok nem használhatók könnyen újra az oldal más részein.
=== Beágyazott ===
Beágyazott CSS a ''
Ez egy példa bekezdés.
A beágyazott CSS hasznos lehet egyetlen oldal stílusának meghatározására, mivel az összes CSS-szabály egy helyen marad a dokumentumon belül. Kevésbé hatékony azonban, ha több oldallal dolgozunk, mivel a stílusokat HTML-dokumentumok között nem tudjuk újrafelhasználni. === Külső === A külső CSS egy külön ''.css'' fájlban van meghatározva, és a HTML-dokumentumhoz a '''' elemmel kapcsolható. Az így kezelt CSS fájlra akár több HTML-fájl is hivatkozhat.
Egy külső stíluslap a következőhöz hasonló szabálygyűjteményt tartalmazhat:
/* styles.css */
p { color: blue; line-height: 1.5; }
h1 { font: 32px Arial; }
A külső CSS ideális több lapból álló weboldalak számára, mert lehetővé teszi az egységes stílusok alkalmazását több dokumentumban. Továbbá javítja a betöltési időket azáltal, hogy a böngészők gyorsítótárazhatják a különálló CSS-stíluslapot.
==== Kommentek ====
A CSS-ben a kommentek arra szolgálnak, hogy magyarázatokat adjunk a kódhoz, vagy ideiglenesen letiltsunk kódrészleteket anélkül, hogy ez befolyásolná a weboldal stílusát. A böngésző nem jeleníti meg ezeket, és nem hatnak a lap elrendezésére vagy megjelenésére.
/* Formázási szabályok a bekezdésekhez */
p {
color: black; /* A szöveg színének beállítása feketére */
font-size: 16pt; /* Betűméret beállítása 16 pontra */
}
==== Elem, ID és class selectorok ====
A CSS-szelektorok szolgálnak a HTML dokumentumon belül elemek kiválasztására. Három gyakori típusa az **elem**, a **class**, és az **ID** szelektor, amelyek mindegyike eltérő célt szolgál.
Az **elem szelektor** egy adott HTML-elemet céloz meg az oldalon, egyszerűen az elem nevével van meghatározva, például ''p'', ''h1'' vagy ''div''. Az alábbi példában az összes '''' elem 16px betűmérettel és fekete szövegszínnel jelenik meg:
Ez a bekezdés elem szelektorral kerül formázásra. Erre a bekezdésre ugyanazok a stílusok érvényesek. Ez a bekezdés class szelektorral kerül formázásra. Ez nem egy kiemelt bekezdés.
A **class szelektor** egy vagy több elemet céloz meg, melyek ugyanazzal a ''class'' attribútummal rendelkeznek. Az osztályszelektorokat egy pont és az osztály neve határozza meg. Az alábbi példában minden ''p'' és ''div'' elem, amely a ''highlight'' osztályt tartalmazza, sárga háttérrel és félkövér betűstílussal jelenik meg. Mivel az osztályok több elemhez is hozzárendelhetők, a class szelektorok nagyobb rugalmasságot biztosítanak a stílusok alkalmazásában.
Az **ID szelektor** egyetlen HTML-elemet céloz meg, annak ''id'' attribútuma alapján. Az ID szelektorokat a ''#'' szimbólum és az azonosító neve jelöli. Az alábbi példában kizárólag a ''
Ez a címsor ID szelektorral kerül formázásra.
Ezt a bekezdést nem érinti az ID szelektor.
Összegzésként az elem szelektorok széles körű formázásra használhatók, az ID szelektorok egyedi elemek célzott formázására szolgálnak, míg a class szelektorok lehetővé teszik több elem egyidejű formázását, magas szintű rugalmasságot biztosítva. Ezen szelektorok megértése és megfelelő kombinálása kulcsfontosságú a hatékony és könnyen karbantartható CSS írásához.
Az elemszelektorokat az elem neve jelöli, az osztályszelektorokat egy ''.'' és az osztály neve, míg az ID szelektorokat egy ''#'' és az azonosító neve:
^ Szelektor típusa ^ HTML példa ^ CSS szelektor |
| Elem szelektor | Test
| p | | Class szelektor |Test
| .highlight | | ID szelektor |Test
| #main-text | ==== Kaszkádolás ==== Alapértelmezés szerint, ha több szabály célozza meg ugyanazt a szelektort, a későbbi szabály felülírja az előzőt:
Ennek a bekezdésnek zöld színe lesz.
Ezen a működésen kivételes esetekben az [[https://www.w3schools.com/css/css_important.asp|!important]] tulajdonság alkalmazásával tudunk változtatni.
==== Hierarchia ====
Egyes szabályok képesek egymást felülírni. Mindig a hierarchiában magasabb szinten álló szabály fog érvényesülni az elemre.
{{:tanszek:oktatas:web_technologia_alapjai:pasted:20250219-144638.png}}
A következő példában a HTML-bekezdésre mindkét szabály érvényesül. Az egymásnak ellentmondó stílusok (zöld vagy piros szín) közül a specifikusabb szelektor segítségével meghatározott stílus kerül alkalmazásra:
Ez egy félkövér, zöld színű bekezdés.
Az ID szintű kiválasztás specifikusabb (magasabban szerepel a hierarchiában), mint az elem szintű, így a bekezdés színe zöld lesz.
==== Span és div elemek szerepe ====
A **span** és **div** elemek alapvető HTML-komponensek, amelyeket tartalmak csoportosítására és szervezésére használnak. Ezek olyan konténerek, amelyeket CSS segítségével lehet formázni.
A ''span'' elem egy **inline konténer**, melyet általában kisebb szövegrészek formázására használnak. Ebben a példában a ''span'' csak a „kék” szót színezi kékre anélkül, hogy a többi szövegre hatással lenne. A ''span'' elem ideális lehet specifikus stílusok alkalmazására egy hosszabb szövegen belül, például a szövegszín vagy betűvastagság megváltoztatására:
Ez egy kék szó egy bekezdésben.
A ''div'' elem egy **blokk szintű konténer**, ami azt jelenti, hogy alapértelmezés szerint a szülőelem teljes szélességét elfoglalja, és előtte és utána sortörést hoz létre. Általában nagyobb tartalmi egységek, például bekezdések, képek vagy más blokk szintű elemek csoportosítására használják. Például:
Szakasz címe
Ez a bekezdés egy div konténerben található.
==== Háttér formázása ====
A háttérstílusok használata CSS-ben lehetővé teszi a fejlesztők számára, hogy testre szabják egy elem hátterét. Számos olyan tulajdonság létezik, amelyekkel a háttér színét, képeit, átmeneteit és pozícióját lehet szabályozni. Például:
body {
background-color: #f0f0f0;
}
#header {
background-image: url('header.jpg');
}
==== Margin, padding és border ====
A **doboz-modell** (**box model**) egy alapvető CSS-koncepció, amely leírja, hogyan vannak az elemek felépítve és elhelyezve egy weboldalon. Minden HTML-elem egy téglalap alakú dobozként jelenik meg, amely négy különálló részből áll: margó (**margin**), szegély (**border**), kitöltés (**padding**) és maga a tartalom (**content**). A dobozmodell megértése kulcsfontosságú a webalkalmazások hatékony elrendezése és dizájnja szempontjából.
{{:tanszek:oktatas:techcomm:pasted:20240905-153005.png}}
A ''margin'' az elem körüli külső tér, míg a ''padding'' a tartalom és a szegély közötti belső tér. A ''szegély'' határozza meg az elem körvonalát.
Az alábbi példa megmutatja, hogyan lehet egy gombot formázni. Próbáld ki, mi történik, ha módosítod a border, margin, és padding tulajdonságok értékeit!
Formázott gomb példa
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas sapien arcu, finibus eget dignissim quis, placerat vel ante.
==== Szélesség és magasság beállítása ====
A ''width'' és ''height'' tulajdonságokkal lehet a méreteket meghatározni.
img {
width: 100px;
height: 100px;
}
==== Szövegformázás ====
A szövegformázásra számos tulajdonságot lehet használni.
p {
font-family: Arial;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-decoration: underline;
text-align: justify;
}
Ha érdekel, [[https://www.w3schools.com/css/tryit.asp?filename=trycss_text|próbálj ki többet itt]].
==== Feladat ====
Készítsd el a következő weboldalt: a szöveget lásd el HTML tag-ekkel, majd használj inline CSS-t, valamint class és id alapú selectorokat is!
A kész megoldást töltsd fel a GitHub repositorydba!
[[https://edu.iit.uni-miskolc.hu/_media/tanszek:oktatas:web_technologia_alapjai:pasted:20250219-150448.png|{{:tanszek:oktatas:web_technologia_alapjai:pasted:20250219-150448.png?100}}]]
//(A kép kattintásra nagyítható.)//
Nyers szöveg:
Neumann János
“Young man, in mathematics you don't understand things.
You just get used to them.”
John von Neumann
Margittai Neumann János (külföldön: John von Neumann,
született: Neumann János Lajos)
(Budapest, 1903. december 28. - Washington, 1957. február 8.)
magyar születésű matematikus. Kvantummechanikai elméleti kutatásai mellett a
digitális számítógép elvi alapjainak lefektetésével vált ismertté.
Neumann János
https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/JohnvonNeumann-LosAlamos.jpg/462px-JohnvonNeumann-LosAlamos.jpg
Született: 1903. december 28.
Elhunyt: 1957. február 8. (53 évesen)
Ismeretes mint: matematikus, informatikus, fizikus, egyetemi oktató
Állampolgárság: magyar, amerikai
Iskolái:
Budapest-Fasori Evangélikus Gimnázium
Frigyes Vilmos Egyetem
Magyar Királyi Pázmány Péter Tudományegyetem
Zürichi Műegyetem
Göttingeni Egyetem
Neumann hatalmas hozzájárult a matematikához, a kvantummechanikához,
a kvantumelmélethez, a játékelmélethez, az ökonómiához és az informatikához.
Számos olyan fogalom és elv fűződik a nevéhez, mint például a Neumann-elv a
kvantummechanikában, a Neumann-stabilitáselmélet a játékelméletben, vagy a
Neumann-eljárás a numerikus analízisben.
A számítástechnikának Neumann János jelentős alakja, elsők között ismerte
fel a digitális számítógépek potenciálját.
Neumann olyan alapvető koncepciókat és architektúrákat dolgozott ki,
amelyek meghatározóak lettek a mai modern számítógépek tervezésében
és működésében. Nevéhez fűződik a "Neumann-architektúra",
amely egy olyan számítógép-architektúra, amelyben a program és az adat
ugyanabban a memóriában található.
Neumann János rendkívül sokoldalú tudós volt, és kutatásai óriási hatást
gyakoroltak az informatika, a matematika és a tudomány egyéb területeire.
Munkássága és öröksége a mai napig hatással van a modern tudományos és
technológiai fejlesztésekre.