Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:css:css_nyelv

Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

Összehasonlító nézet linkje

Előző változat mindkét oldalon Előző változat
Következő változat
Előző változat
oktatas:web:css:css_nyelv [2022/01/24 10:34]
admin [Média beállítások]
oktatas:web:css:css_nyelv [2024/01/23 14:12] (aktuális)
admin [Mértékegységek]
Sor 4: Sor 4:
  
   * **Szerző:​** Sallai András   * **Szerző:​** Sallai András
-  * Copyright (c) Sallai András, 2011-2020+  * Copyright (c) Sallai András, 2011-2023
   * Licenc: [[https://​creativecommons.org/​licenses/​by-sa/​4.0/​|CC Attribution-Share Alike 4.0 International]]   * Licenc: [[https://​creativecommons.org/​licenses/​by-sa/​4.0/​|CC Attribution-Share Alike 4.0 International]]
   * Web: https://​szit.hu   * Web: https://​szit.hu
Sor 36: Sor 36:
 Classic Mac OS, MS Windowsra. Classic Mac OS, MS Windowsra.
  
-1994 október 10-én, Hákon Wium Lie közzétette lépcsőzetes stíluslapok nevű nyelvet.+1994 október 10-én, ​**Hákon Wium Lie** közzétette ​**lépcsőzetes stíluslapok** nevű **nyelvet**.
 1994 október 13 Marc Andreessen bejelenti a Mosaic böngésző támogatja a lépcsőzetes 1994 október 13 Marc Andreessen bejelenti a Mosaic böngésző támogatja a lépcsőzetes
 stíluslapokat,​ amely kezdetben csak a középre igazítást támogatja. ​ stíluslapokat,​ amely kezdetben csak a középre igazítást támogatja. ​
Sor 777: Sor 777:
  
  
-^  ​Font család ​ ​^ ​ Megjelenés ​ ^  Leírás ​ ^+^  ​Fontcsalád ​ ​^ ​ Megjelenés ​ ^  Leírás ​ ^
 | serif | serif | Talpas fontok | | serif | serif | Talpas fontok |
 | sans-serif | sans-serif | Talpatlan fontok | | sans-serif | sans-serif | Talpatlan fontok |
Sor 834: Sor 834:
  
 | normal | Normál font. Alapértelmezett | | normal | Normál font. Alapértelmezett |
-| small-caps | Kiskapitális ​|+| small-caps | Kis-kapitális ​|
 | inherit | A szülőelemtől örökölt fontvariáció | | inherit | A szülőelemtől örökölt fontvariáció |
  
 +A kis-kapitális beállítás hatására minden betű nagybetűs lesz, de  
 +a normál betűmagasságtól kisebb méretű, kivéve az első betű magassága. ​
  
 <code css> ​ <code css> ​
Sor 848: Sor 849:
  
   * https://​developer.mozilla.org/​en-US/​docs/​Web/​CSS/​font-variant-caps (2021)   * https://​developer.mozilla.org/​en-US/​docs/​Web/​CSS/​font-variant-caps (2021)
 +
 +
 +Minta a **font-variant:​ small-caps;​** beállításra:​
 +
 +<​html>​
 +<​style>​
 +.kis-kapitalis_pelda02 {
 +    font-variant:​ small-caps;
 +
 +}
 +</​style>​
 +
 +<div class="​kis-kapitalis_pelda01">​
 +Lorem ipsum dolor est amet
 +<span class="​kis-kapitalis_pelda02">​Lorem ipsum dolor est amet</​span>​
 +</​div>​
 +
 +</​html>​
 +
 +
 +
 +
 +
 +Minta a **font-variant-caps:​ all-small-caps;​** beállításra:​
 +
 +<​html>​
 +<​style>​
 +.kis-kapitalis_pelda03 {
 +    font-variant-caps:​ all-small-caps;​
 +}
 +</​style>​
 +
 +<div>
 +Lorem ipsum dolor est amet
 +<span class="​kis-kapitalis_pelda03">​Lorem ipsum dolor est amet</​span>​
 +</​div>​
 +
 +</​html>​
 +
  
  
Sor 1003: Sor 1043:
 | text-indent | az első sor behúzása | pl.: 50px | | text-indent | az első sor behúzása | pl.: 50px |
 | text-shadow | árnyék | | text-shadow | árnyék |
-| text-transform | kis és nagybetűs | uppercase, lowercase, capitalize ​ +| text-transform | kis és nagybetűs | uppercase, lowercase, capitalize ​\\ //A capitalize az első betűt nagybetűssé teszi, \\ mást nem csinál.// ​
-| unicode-bidi | A direction tulajdonsággal együtt használjuk. \\ Felül kell-e írni a szöveget, \\ hogy több nyelvet támogasson. |  normal, embed, bidi-override,​ isolate, \\ isolate-override,​ plaintext, initial, inherit ​ |+| unicode-bidi | A direction tulajdonsággal együtt használjuk. \\ Ha egy weblap jobbról balra és \\ balról jobbra írt szöveget ​is \\ tartalmazszabályozhatjuk a \\ szövegbeágyazást. |  normal, embed, bidi-override,​ isolate, \\ isolate-override,​ plaintext, initial, inherit ​ |
 | vertical-align | függőleges igazítás |  baseline, hossz, %, super, top, text-top, \\ middle, bottom, text-bottom,​ initial, inherit ​ | | vertical-align | függőleges igazítás |  baseline, hossz, %, super, top, text-top, \\ middle, bottom, text-bottom,​ initial, inherit ​ |
 | white-space | a white-space karakterek viselkedése |  normal, nowrap, pre, pre-line, \\ pre-wrap, initial, inherit ​ | | white-space | a white-space karakterek viselkedése |  normal, nowrap, pre, pre-line, \\ pre-wrap, initial, inherit ​ |
Sor 1116: Sor 1156:
 |  pre-wrap ​ | Közök nem lesznek összevonva. Sortörés, ahol forrásban is van, vagy ahol a sordoboz kitöltése megköveteli. | |  pre-wrap ​ | Közök nem lesznek összevonva. Sortörés, ahol forrásban is van, vagy ahol a sordoboz kitöltése megköveteli. |
 |  pre-line ​ | Közök összevonása. Sortörés, ahol a forrásban új sor kezdődik, vagy ahol a sordoboz kitöltése megköveteli. | |  pre-line ​ | Közök összevonása. Sortörés, ahol a forrásban új sor kezdődik, vagy ahol a sordoboz kitöltése megköveteli. |
 +
 +===== Keret tulajdonságok =====
 +
 +A keret vagy szegély a border tulajdonsággal szabályozható. ​
 +==== A border csoportos beállítással ====
 +
 +<code css>
 +.doboz {
 +    border: 2px solid black;
 +}
 +</​code>​
 +
 +Az első a szegély vastagsága,​ a második a stílusa, a harmadik a színe.
 +==== A border-style ====
 +
 +<code css>
 +border-style:​ solid;
 +</​code>​
 +
 +Lehetséges értékei
 +  * none
 +  * dotted
 +  * dashed
 +  * solid
 +  * double
 +  * groove
 +  * ridge
 +  * inset
 +  * outset
 +
 +<​html>​
 +<​style>​
 +#​borderexample {
 +  border-width:​ 5px;
 +  border-color:​ navy;
 +  border-style:​ solid;
 +}
 +#​borderexample2 {
 +  border-width:​ 20px;
 +  border-color:​ navy;
 +  border-style:​ solid;
 +}
 +
 +</​style>​
 +
 +<div id="​borderexample">​Lorem ipsum</​div><​br>​
 +<div id="​borderexample2">​Lorem ipsum</​div>​
 +<select id="​borderexampleselect">​
 +  <​option>​solid</​option>​
 +  <​option>​dotted</​option>​
 +  <​option>​dashed</​option>​
 +  <​option>​double</​option>​
 +  <​option>​groove</​option>​
 +  <​option>​ridge</​option>​
 +  <​option>​inset</​option>​
 +  <​option>​outset</​option>​
 +</​select>​
 +
 +<​script>​
 +$("#​borderexampleselect"​).click(function(){
 +    var borderstyle = $("#​borderexampleselect"​).val();​
 +    $("#​borderexample"​).css("​border-style",​ borderstyle);​
 +    $("#​borderexample2"​).css("​border-style",​ borderstyle);​
 +});
 +</​script>​
 +
 +</​html>​
 +==== border-width ====
 +Lehetséges értékei
 +  * thin
 +  * medium
 +  * thick
 +  * érték
 +
 +==== border-collapse ====
 +Táblázat szegélyek esetén használható.
 +
 +  * separated
 +  * collapse
 +
 +
 +
  
  
Sor 1124: Sor 1246:
 {{:​oktatas:​web:​css:​dobozmodell.png|}} {{:​oktatas:​web:​css:​dobozmodell.png|}}
  
-Minden doboznak lehet szöveges, vagy más más tartalma+A dobozok jellemzői:​ 
-A szövegnek ​állíthatjuk a színét, nagyságát,​ fontját. + 
-Minden doboz háttérét beállíthatjuk,​ színnel, képpel.  +  * Minden doboznak lehet szöveges ​tartalma, vagy lehet benne egy másik doboz
-Minden doboznak van szegélye. Minden doboznak +  * Minden doboz szövegének ​állíthatjuk a színét, nagyságát,​ fontját. 
-állíthatunk belső margót (a tartalom és a doboz belső +  ​* ​Minden doboz háttérét beállíthatjuk,​ színnel, képpel. 
-széle közötti távolság. Minden doboznak van margója.  +  * Minden doboznak kezelhetjük a szélességét és magasságát. 
-A dobozok ​ezen tulajdonságát külön tudjuk állítani, felül, alul, jobbra +  * Minden doboznak van szegélye. 
-és balra.+  * Minden doboznak állíthatunk belső margót (a tartalom és a doboz belső széle közötti távolság). 
 +  * Minden doboznak van margója. 
 +  ​* ​A dobozok tulajdonságát külön tudjuk állítani, felül, alul, jobbra és balra.
  
 {{:​oktatas:​web:​css:​dobozfelepites.png|}} {{:​oktatas:​web:​css:​dobozfelepites.png|}}
  
  
 +A CSS2-ben a doboz kapott egy körvonalat a szegély köré.
 +
 +{{:​oktatas:​web:​css:​dobozfelepites_v2.png|}}
 +
 +==== Margó ====
 +
 +<code css>
 +.doboz {
 +    margin: 10%;
 +    background-color:​ blue;
 +    color: white;
 +}
 +</​code>​
 +
 +<​html>​
 +<​style>​
 +.doboz8343893 {
 +    margin: 10%;
 +    background-color:​ blue;
 +    color: white;
 +}
 +</​style>​
 +
 +<div class="​doboz8343893">​
 +Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis voluptas vitae in perspiciatis vel, voluptates eligendi doloribus dolores porro, velit praesentium provident, nesciunt beatae? Aliquid velit repudiandae quam maiores ad!
 +</​div>​
 +
 +</​html>​
 +==== Belső margó ====
 +
 +<code css>
 +.doboz {
 +    padding: 30px;
 +    background-color:​ blue;
 +    color: white;
 +}
 +</​code>​
 +
 +<​html>​
 +<​style>​
 +.doboz8398472 {
 +    padding: 30px;
 +    background-color:​ blue;
 +    color: white;
 +}
 +</​style>​
 +
 +<div class="​doboz8398472">​
 +Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis voluptas vitae in perspiciatis vel, voluptates eligendi doloribus dolores porro, velit praesentium provident, nesciunt beatae? Aliquid velit repudiandae quam maiores ad!
 +</​div>​
 +
 +</​html>​
 ===== Overflow ===== ===== Overflow =====
 ==== Egyszerű túlfolyás-kezelés ==== ==== Egyszerű túlfolyás-kezelés ====
Sor 1216: Sor 1392:
  
 </​html>​ </​html>​
- 
- 
-===== Keret tulajdonságok ===== 
- 
-==== border ==== 
-<code css> 
-.doboz { 
-    border: 2px solid black; 
-} 
-</​code>​ 
- 
- 
-==== style ==== 
- 
-<code css> 
-border-style:​ solid; 
-</​code>​ 
- 
-Lehetséges értékei 
-  * none 
-  * dotted 
-  * dashed 
-  * solid 
-  * double 
-  * groove 
-  * ridge 
-  * inset 
-  * outset 
- 
-<​html>​ 
-<​style>​ 
-#​borderexample { 
-  border-width:​ 5px; 
-  border-color:​ navy; 
-  border-style:​ solid; 
-} 
-#​borderexample2 { 
-  border-width:​ 20px; 
-  border-color:​ navy; 
-  border-style:​ solid; 
-} 
- 
-</​style>​ 
- 
-<div id="​borderexample">​Lorem ipsum</​div><​br>​ 
-<div id="​borderexample2">​Lorem ipsum</​div>​ 
-<select id="​borderexampleselect">​ 
-  <​option>​solid</​option>​ 
-  <​option>​dotted</​option>​ 
-  <​option>​dashed</​option>​ 
-  <​option>​double</​option>​ 
-  <​option>​groove</​option>​ 
-  <​option>​ridge</​option>​ 
-  <​option>​inset</​option>​ 
-  <​option>​outset</​option>​ 
-</​select>​ 
- 
-<​script>​ 
-$("#​borderexampleselect"​).click(function(){ 
-    var borderstyle = $("#​borderexampleselect"​).val();​ 
-    $("#​borderexample"​).css("​border-style",​ borderstyle);​ 
-    $("#​borderexample2"​).css("​border-style",​ borderstyle);​ 
-}); 
-</​script>​ 
- 
-</​html>​ 
-==== border-width ==== 
-Lehetséges értékei 
-  * thin 
-  * medium 
-  * thick 
-  * érték 
- 
-==== border-collapse ==== 
-Táblázat szegélyek esetén használható. 
- 
-  * separated 
-  * collapse 
  
  
Sor 1462: Sor 1560:
 Egy **inline** elem csak a számára szükséges helyet foglalja el, a következő ​ Egy **inline** elem csak a számára szükséges helyet foglalja el, a következő ​
 elem azonos sorban jelenik meg, ha elfér. Az inline elemek **nem elem azonos sorban jelenik meg, ha elfér. Az inline elemek **nem
-reagálnak** a **width**, **height**, **margin**, **padding** tulajdonságok beállításaira.+reagálnak** a **width**, **height** tulajdonságok beállításaira.
  
  
Sor 1488: Sor 1586:
 A **display** tulajdonsággal megcserélhetjük az elem láthatóságának tulajdonságát. A **display** tulajdonsággal megcserélhetjük az elem láthatóságának tulajdonságát.
  
 +==== inline-block ====
  
 Köztes állapot az inline-block elem: Köztes állapot az inline-block elem:
Sor 1493: Sor 1592:
  
 Az **inline-block** elemek sem töltik ki a rendelkezésre álló helyet, mint az inline Az **inline-block** elemek sem töltik ki a rendelkezésre álló helyet, mint az inline
-elemek, viszont **használhatók** vele a **width**, **height**, **margin** és **padding** tulajdonságok.+elemek, viszont **használhatók** vele a **width**, **height** tulajdonságok ​is.
  
  
Sor 1518: Sor 1617:
  
  
-Interaktív példa:+==== Interaktív példa ​==== 
 <​html>​ <​html>​
 <​style>​ <​style>​
Sor 2130: Sor 2230:
 </​code>​ </​code>​
  
 +Elavult beállítás IE-ben:
 <code css> <code css>
 .doboz { .doboz {
Sor 2383: Sor 2484:
 </​code>​ </​code>​
  
 +==== Oszlop stílusok ====
  
 +col vagy colgroup esetén használható tulajdonságok:​
 +
 +  * background
 +  * border
 +  * visibility
 +  * width
 +
 +
 +Kerülő megoldás:
 +
 +<​code>​
 +th:​first-child,​ td:​first-child {
 +    color: white;
 +    background: blue;
 +}
 +th:​nth-child(2),​ td:​nth-child(2) {
 +    color: yellow;
 +    background: braun;
 +}
 +th:​last-child,​ td:​last-child {
 +    font-weight:​ bold;
 +    background: orange;
 +}
 +</​code>​
 +
 +<​code>​
 +<​table>​
 +    <tr>
 +        <​th>#</​th>​
 +        <​th>​Név</​th>​
 +        <​th>​Fizetés</​th>​
 +    </tr>
 +    <tr>
 +        <​td>​1</​td>​
 +        <​td>​Erős István</​td>​
 +        <​td>​342</​td>​
 +    </tr>
 +    <tr>
 +        <​td>​2</​td>​
 +        <​td>​Rege Zoltán</​td>​
 +        <​td>​394</​td>​
 +    </tr>
 +</​table>​
 +</​code>​
 +
 +==== Sorok csíkozása ====
 +
 +<code css>
 +tr:​nth-child(odd) {
 +    background: orange;
 +}
 +
 +tr:​nth-child(even) {
 +    background: gold;
 +}
 +</​code>​
 +
 +
 +{{:​oktatas:​web:​css:​tablazat_07_csikozas.png?​400|}}
 ===== Z-index ===== ===== Z-index =====
  
Sor 2482: Sor 2643:
  
 ^  Relatív hosszmérték ​ ^^ ^  Relatív hosszmérték ​ ^^
-|  em  | A releváns karakter mérete ​+|  em  | A releváns karakter mérete. (szülőelemtől örökölt) ​|
-|  px  | képpont; eszközfüggő |+
 |  ex  | A releváns karakter x-magassága | |  ex  | A releváns karakter x-magassága |
 |  %  |  | |  %  |  |
 |  ch  | A "​0"​ (zero) szélességhez relatívan ​ | |  ch  | A "​0"​ (zero) szélességhez relatívan ​ |
-|  rem  | A root elem fontszélességéhez ​relatívan | +|  rem  | A root elem fontméretéhez ​relatívan | 
-|  vw  |  A viewport szélességének 1%-hoz relatívan | +^  A Viewporthoz kapcsolódó mértékegységek ​ ^^ 
-|  vh  |  A viewport magasságának 1%-hoz relatívan |+|  vw  | A viewport szélességének 1%-hoz relatívan | 
 +|  vh  | A viewport magasságának 1%-hoz relatívan |
 |  vmin  | A viewport kisebb dimenziójához képest 1%-al | |  vmin  | A viewport kisebb dimenziójához képest 1%-al |
 |  vmax  | A viewport nagyobb dimenziójához képest 1%-al | |  vmax  | A viewport nagyobb dimenziójához képest 1%-al |
Sor 2495: Sor 2656:
 A vmax értéket az Inernet Exploler a nem általános vm névvel támogatja, A vmax értéket az Inernet Exploler a nem általános vm névvel támogatja,
 a Safari nem támogatja. a Safari nem támogatja.
 +
 +
 +^  Abszolút és mégis relatív hosszmérték ​ ^^
 +|  px  | képpont; eszközfüggő |
 +
 +A pixel is relatív hosszmérték,​ hiszen nagyobb felbontású ​
 +kijelzőkön,​ nyomtatókon az eszköz pixelmérete kisebb lesz, mint 1 pixel.
 +Reszponzív weboldalak esetén a relatív mértékegységek használata
 +ajánlott, kivéve a pixel. Ezért sokan az abszolút hosszértékhez sorolják,
 +hiszen ha valamit beállítok 100 pixeles méretre, abból nem lesz rugalmas doboz. ​
 +
 +{{:​oktatas:​web:​css:​egy_pixel.png|}} ((A rajzot a W3C oldala ihlette: https://​www.w3.org/​TR/​css-values-3/​))
  
  
Sor 2531: Sor 2704:
 |  1vmin  | 1%-a a viewport rövidebbik oldalának | |  1vmin  | 1%-a a viewport rövidebbik oldalának |
 |  1vmax  | 1%-a a viewport hosszabbik oldalának | |  1vmax  | 1%-a a viewport hosszabbik oldalának |
 +
 +==== em ====
 +
 +
 +A szülőelem betűméretéhez képest.
 +
 +Ha például a body elemet beállítjuk 16px-re, a benne található "​p"​ elem betűmérete 1em beállítás esetén 16 pixel lesz. 
 +
 +<code css>
 +body {
 +  font-size: 16px; /* Az alapértelmezett betűméret beállítása */
 +}
 +p {
 +  font-size: 2em;
 +}
 +</​code>​
 +
 +
 +  * 1em   16px
 +  * 2em   32px
 +  * 0.5em 8px
 +
 +
 +==== rem ====
 +
 +A rem "​r"​ betűje a root szóból van. A root elem betűnagyságára utal.
 +
 +Ha az alapértelmezett betűnagyság 16px vagy erre állítjuk be HTML gyökér elemét,
 +akkor 1rem az egyenlő 16px-el.
 +
 +<code css>
 +html {
 +  font-size: 16px; /* Alapértelmezett betűméret beállítása */
 +}
 +</​code>​
 +
 +2rem ebben az esetben 32px. 0.5rem 8px.
  
  
Sor 2549: Sor 2759:
  
 <code css> <code css>
-/* Mobil esetén */ +/* A szöveg alapértelmezett színe */ 
-@media screen and (max-device-width: ​480px){ +body { 
- .aru +  background-color:​ blue; 
- display: block; +
- background-color: ​white+ 
- width: 98%; +/* 900px vagy kisebb kijelző ​esetén */ 
- height: 350px; +@media screen and (max-width: ​900px) { 
- margin: 5px; +  ​body ​
-+    background-color: ​green
-  +  } 
- #aruk { +
- max-width: ​100%; + 
- margin: 0; +/* Képernyőn és 700px vagy annál kisebb kijelzőn */ 
- background-color: ​gold+@media screen and (max-width: ​700px) { 
- display: block; +  body { 
- } +    background-color: ​yellow
- +  } 
 +}
  
 </​code>​ </​code>​
oktatas/web/css/css_nyelv.1643016891.txt.gz · Utolsó módosítás: 2022/01/24 10:34 szerkesztette: admin