Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 10. Előadás Css Tananyag:Web-programozás.

Az előadások a következő témára: "Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 10. Előadás Css Tananyag:Web-programozás."— Előadás másolata:

1 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 10. Előadás Css Tananyag:Web-programozás

2 Cascading Style Sheets (CSS) HTML oldalak stíluslapjai A HTML oldalak szerzői a weboldalaikhoz egyedi stílust rendelhetnek A fejlesztők a stílust egyszer rögzítik, és hozzákapcsolhatják minden általuk készített HTML laphoz Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

3 <META …. cím … Külső.css fájl meghívása a.html fájlba

4 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Külső.css fájlban deklarált stílusosztály behívása a.html fájlba Példa: … A külső.css fájlban lévő B_stilusa stílusosztály elemeit örökölte. …

5 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék A.css fájl Egy css utasítás két részből áll: 1.a szelektor tartalmazza a formázandó HTML tag megnevezését (B); 2.a deklaráció végzi el a szelektorban meghatározott tag formázását.

6 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 1. Példa: B { color: #FF0000 } A deklaráció is két részre bontható: egy tulajdonságra (color) és a hozzá tartozó értékre (red). A.css fájl

7 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék A.css fájl 2. Példa:.B_stilusa { font-size:24px; color: #FF0000; } A.B_stilusa egy globális stílusosztály. Deklarációjában 2 tulajdonság és 2 érték szerepel.

8 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Alapértelmezett stílustulajdonság beállítása Példa: BODY { color: black; background: url(hatter.gif) white; } A BODY szövegszínét feketére állítja be, háttérként képet rendel hozzá. Ha a kép nem érhető el, a háttérszín fehér lesz. A.css fájl

9 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék CSS referencia: http://www.freeweb.hu/htmlinfo/css_ref/cssmain.htm Cascading Style Sheets (CSS)

10 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda1.css: tag stílusformázása: pelda1.html: A különböző html tag-ekhez hozzárendelhetőek stílusok, melyek öröklődnek.

11 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda1.css: b { font-size:24px;color: #FF0000; } pelda1.html: Példa 1 Öröklődünk Öröklődünk2

12 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda2.css: Globális stílusosztály definiálása. pelda2.html: A globális stílusosztály meghívása CLASS opcióval. STYLE opcióval való formázás.

13 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda2.css:.b_stilusa { font-size:40px; color:#0000CC; } pelda2.html: Öröklődünk2 class- szal

14 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda3.css: Globális stílusosztályok definiálása. pelda3.html: A globális stílusosztályok meghívása CLASS opcióval. lsd. a mintafájlokat!

15 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék CSS: DIV-ek CSS: DIV-ek A DIV-ek úgynevezett befoglaló dobozok, melyek segítségével a weboldalt részekre bonthatjuk és elemenként kezelhetjük. A DIV-ek egymásba ágyazhatóak és stílusok rendelhetőek hozzájuk. A stílusokat öröklik a DIV-ben lévő html elemek is. Alkalmazása: tag-ek Alap tulajdonságai: width, height, border, margin, padding, és ezek altulajdonságai pl.: margin-left.

16 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda4.css:.elso_div { width:300px; height:100px; border:1px red solid; } pelda4.html : Ez egy div a pelda4.css fájl-ból

17 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda5.css: DIV-ek használata. A DIV-ek alapesetben egymás alatt jelennek meg. Tulajdonságok: http://www.freeweb.hu/htmlinfo/css_ref/cssmain.htm http://www.freeweb.hu/htmlinfo/css_ref/cssmain.htm pelda5.html : DIV-ek meghívása.

18 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda6.css : A float tulajdonsággal pozícionálni tudjuk a div-eket. A clear tulajdonság visszaállítja az alapállapotot. pelda6.html: DIV-ek meghívása.

19 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda6.css:.bal { width:150px; height:500px; background-color:#FF0000; float:left; } pelda6.html:

20 Folytatás a GYAKORLATOKON! Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék