A kiválasztott változat és az aktuális verzió közötti különbségek a következők.
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 \\ tartalmaz, szabá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> |