Differences

This shows you the differences between two versions of the page.

--- tanszek:oktatas:web_technologia_alapjai:css [2025/02/19 14:45] – kissa
+++ tanszek:oktatas:web_technologia_alapjai:css [2025/02/19 15:23] (current) – [Hierarchia] kissa
@@ Line 201: / Line 201: @@
 </code>
-Ezen a működésen kivételes esetekben az [!important](https://www.w3schools.com/css/css_important.asp) tulajdonság alkalmazásával tudunk változtatni.
+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. A hierarchiában magasabb szinten álló szabály fog érvényesülni az elemre.
+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.
-![CSS specificity](imgs/css_specificity.png)
+{{: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:
 <code xml>
 <head>
     <style>
+        /* id szintű selector */
+        #green-text {
+            color: green;
+        }
         /* elem szintű selector */
         p {
             font-weight: bold;
             color: red;
-        }
-        /* id szintű selector */
-        #green-text {
-            color: green;
         }
     </style>
@@ Line 227: / Line 230: @@
 </code>
-==== span és div elemek szerepe ====
+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'': Inline elem, mely a szöveg egy részét jelöli ki.
+==== Span és div elemek szerepe ====
-  * ''div'': Blokk elem, mely több tartalmat rendez egy blokkba.
-<code xml>
+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.
-<p>Ez egy <span style="color: red">piros</span> szöveg.</p>
-<div style="font-weight: bold">
+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:
-    <p>Ez egy félkövér szöveg.</p>
-    <p>Ahogy ez is.</p>
+<code XML>
-    <p>És ez is.</p>
+<p>Ez egy <span style="color: blue;">kék</span> szó egy bekezdésben.</p>
+</code>
+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:
+<code XML>
+<div style="background-color: lightgrey;">
+  <h1>Szakasz címe</h1>
+  <p>Ez a bekezdés egy div konténerben található.</p>
 </div>
 </code>
@@ Line 243: / Line 253: @@
 ==== Háttér formázása ====
-A ''background'' tulajdonsággal lehet a háttér stílusát meghatározni.
+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:
-<code css>
+<code CSS>
 body {
     background-color: #f0f0f0;
@@ Line 257: / Line 267: @@
 ==== Margin, padding és border ====
-A ''margin'' a külső tér, míg a ''padding'' a belső tér a HTML elem körül. A ''border'' a HTML elem körvonala.
+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.
-Ezt a megoldást „box modellnek” is nevezzük.
-![CSS box model](imgs/css_box_model.drawio.png)
+{{:tanszek:oktatas:techcomm:pasted:20240905-153005.png}}
-<code css>
+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.
-div {
-    margin: 10px;
-    padding: 20px;
-    border: 1px solid black;
-    border-radius: 5px;
-}
-</code>
+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!
+<code XML>
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Formázott gomb példa</title>
+  <style>
+    .styled-button {
+      color: green;
+      background-color: lightgreen;
+      margin: 10px;
+      padding: 20px;
+      border: 1px solid red;
+      border-radius: 5px;
+    }
+  </style>
+</head>
+<body>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <button class="styled-button">Kattints rám!</button>
+  <p>Maecenas sapien arcu, finibus eget dignissim quis, placerat vel ante.</p>
+</body>
+</html>
+</code>
 ==== Szélesség és magasság beállítása ====
@@ Line 296: / Line 323: @@
     text-align: justify;
 }
+</code>
+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:
+<code>
+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.
 </code>