1 / 20

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

Web-programozás. 10. Előadás. Tananyag:. Css. Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék. Cascading Style Sheets (CSS). HTML oldalak stíluslapjai A HTML oldalak szerzői a weboldalaikhoz egyedi stílust rendelhetnek

ingrid
Download Presentation

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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ílustegyszer 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. Külső .css fájl meghívása a .html fájlba <HTML> <HEAD> <META …. <TITLE> cím </TITLE> <LINK REL="stylesheet" HREF="css_neve.css" TYPE="text/css"/> </HEAD> <BODY> … </BODY> </HTML> Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

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

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

  6. A .css fájl • 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). Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

  7. 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. Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

  8. A .css fájl • 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. Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

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

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

  11. Mintafájlok • pelda1.css: b { font-size:24px;color: #FF0000; } • pelda1.html: <html> <meta name="Description" content="Az oldal leírása"> <meta name="Keywords" content="oldal, weboldal, példa"> <meta name="Author" content="Lénárt Anett, Nobik Gergő"> <meta name="language" content="HU"/> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Példa 1</title> <link rel="stylesheet" href="pelda1.css" type="text/css"/> <body> <center> <br><br> <b>Öröklődünk</b> <br><br> <b>Öröklődünk2</b> </center> </body> </html> Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

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

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

  14. 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! Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

  15. 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: <DIV> </DIV> tag-ek Alap tulajdonságai: width, height, border, margin, padding, és ezek altulajdonságai pl.: margin-left. Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

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

  17. 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 • pelda5.html: DIV-ek meghívása. Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

  18. 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. Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

  19. Mintafájlok • pelda6.css: .bal { width:150px; height:500px; background-color:#FF0000; float:left; } • pelda6.html: <body> <div class="fejlec"></div> <div class="bal"></div> <div class="kozep"></div> <div class="jobb"></div> <div class="lablec"></div> </body> Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

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

More Related