Institute of Information Science - University of Miskolc

User Tools

Site Tools

Trace: • css • feleves_feladat • xml-rpc_minta_feladat • operatorok • grpc • uezenetsorok-rabbitmq_2 • html • python_gyakorlatok • graphql_integracio • halozatok
tanszek:oktatas:web_technologia_alapjai:css

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
tanszek:oktatas:web_technologia_alapjai:css [2025/02/19 14:41] – kissatanszek:oktatas:web_technologia_alapjai:css [2025/02/19 15:23] (current) – [Hierarchia] kissa
Line 130: Line 130:
 </code> </code>
  
-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.+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.
  
 <code XML> <code XML>
Line 175: Line 175:
 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: 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 | +^ Szelektor típusa   ^ HTML példa                    ^ CSS szelektor | 
-| Elemszelektor     | <p>Test</p>                   | p             | +| Elem szelektor     | <p>Test</p>                   | p             | 
-| Osztályszelektor  | <p class="highlight">Test</p> | .highlight    | +| Class szelektor    | <p class="highlight">Test</p> | .highlight    | 
-| Azonosítószelektor| <p id="main-text">Test</p>    | #main-text    |+| ID szelektor       | <p id="main-text">Test</p>    | #main-text    |
  
 ==== Kaszkádolás ==== ==== Kaszkádolás ====
-Az egymás után, azonos selector-ral megadott szabályok felülírják egymást.+ 
 +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:
  
 <code xml> <code xml>
Line 199: Line 200:
 </body> </body>
 </code> </code>
 +
 +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 ==== ==== 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> <code xml>
 <head> <head>
     <style>     <style>
 +        /* id szintű selector */
 +        #green-text {
 +            color: green;
 +        }
 +    
         /* elem szintű selector */         /* elem szintű selector */
         p {         p {
             font-weight: bold;             font-weight: bold;
             color: red;             color: red;
-        } 
- 
-        /* id szintű selector */ 
-        #green-text { 
-            color: green; 
         }         }
     </style>     </style>
Line 224: Line 230:
 </code> </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> </div>
 </code> </code>
Line 240: Line 253:
 ==== Háttér formázása ==== ==== 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 { body {
     background-color: #f0f0f0;     background-color: #f0f0f0;
Line 254: Line 267:
 ==== Margin, padding és border ==== ==== 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 ==== ==== Szélesség és magasság beállítása ====
  
Line 293: Line 323:
     text-align: justify;     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> </code>
tanszek/oktatas/web_technologia_alapjai/css.1739976094.txt.gz · Last modified: 2025/02/19 14:41 by kissa