Bevezetés a Stíluslapok használatába - gyakorlati feladatsor Abonyi-Tóth Andor, ELTE IK v.20130310
Emlékeztető az előadásról
CSS utasítás h1 {color: blue} A CSS utasítás két részből áll: A szelektor(lánc) tartalmazza a formázandó HTML elem(ek)et A deklaráció végzi el a szelektorban meghatározott elemek formázását. blokk Szelektor(lánc) h1 {color: blue} tulajdonság érték deklaráció
Stíluslap csatolása Stíluslap importálás Hivatkozás külső stíluslapra <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="hu"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Stíluslapok</title> <link rel=stylesheet type="text/css" href="kepek/pelda/stilus1.css" title="sajat"> <style type="text/css"> @import url("kepek/pelda/stilus2.css"); <!-- h1 {color: blue} --> </style> </head> <body> <h1>A címsor1 kék</h1> <h2>A címsor2 piros</h2> <p style="color:green">Az egész bekezdés zöld</p> </body> </html> Hivatkozás külső stíluslapra Stíluslap importálás Lapon belüli definíció Beágyazott (in-line) megadás
Tulajdonságok csoportosítása h1 {font-family: verdana} h2 {font-family: verdana} h3 {font-family: verdana} h1, h2, h3 {font-family: verdana} A szelektorokat vesszővel választjuk el. h1 { font-family: helvetica; font-size: 12pt; font-style: normal; } h1 {font-family: helvetica} h1 {font-size: 12pt} h1 {font-style: normal} A tulajdonság:érték párok után pontosvessző áll. h1 {font-weight: bold} h1 {font-size: 12pt} h1 {font-family: helvetica} h1 {font: bold 12pt helvetica} Itt az egyes értékek között szóköz van.
Mértékegységek Abszolút Relatív in (2.54 cm) cm mm pt (1/72in) A számokat egybeírjuk a mértékegységekkel! Vagyis 12px és nem 12 px. Abszolút Relatív in (2.54 cm) cm mm pt (1/72in) pc (12pt) em (adott környezet betűméretéhez képest történő megadás. pl. 1.2em) ex (x-magasság - többnyire az adott font x betűjének magassága. pl. 2ex) % (pl. 150%) px (képpont) pl. 16px [csak bizonyos értelemben tekinthető relatívnak, körültekintéssel használjuk!]
Osztályok (class) használata CSS .osztálynév {definíció} Ez egy általános osztály, amelyet több elemnél is felhasználhatunk. szelektor.osztálynév {definíció} Ekkor egy adott szelektorhoz lesz kötve az osztály HTML class attribútum használata Egy elem több osztályba is tartozhat .fontos {color:red;} p.szegely {border:1px solid black;} <p class="fontos"> <p class="szegely"> <p class="szegely fontos">
Egyedi azonosítók (ID) használata CSS #azonosító, vagy szelektor#azonosító HTML id attribútum használata Egyedinek kell lennie az oldalon belül! Fontos a kis- és nagybetű közti különbség. HTML 4.01 szerint: Betűvel kezdődik, amelyet számok, betűk és a következő jelek követhetnek: - _ : . HTML 5: legalább 1 karakter, nem tartalmaz szóközt. div#fejlec {margin:10px} <div id="fejlec"></div>
Pozícionálás Position: static | relative | absolute | fixed | inherit Nem pozícionált, a kódban elfoglalt helye határozza meg a vásznon való elhelyezkedését Relative A statikushoz hasonló helyre kerül az elem, de a bal és felső pozíció megadásával eltolhatjuk. (pl. kerüljön lejjebb és jobbra) Absolute Ez az elem kikerül a megjelenítési folyamatból. Az abszolút pozícionálású elemek a (dokumentumfában) legközelebb eső olyan szülő elemhez képest lesznek pozícionálva, amelyikre szintén meg van adva a position tulajdonság MÁS értékkel, mint a static. Fixed A fix pozicionálással a görgetés ellenére is adott pozíción marad az elem. (képernyő-koordinátához rögzül) http://www.brainjar.com/css/positioning/default.asp http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute http://www.intensivstation.ch/en/templates/
További tudnivalók… A további tudnivalókat az előadás emlékeztetőjében találjátok. A következő gyakorlófeladatok megoldása során megismerkedünk néhány fontos CSS formázással.
Gyakorló feladatok A következő feladatokban a CSS1,2,3 szintjét egyaránt felhasználjuk. A tesztelést érdemes a Google Chrome legfrisebb változatában elvégezni. A hozzávalók letölthetők innen: http://webfejlesztes.inf.elte.hu/docs/cssgyakorlas20130310.zip http://bit.ly/Y3SbpD
Nyírfa Tulajdonságok Háttérkép: nyirfa.jpg Háttérkép függőlegesen ismétlődik Oldal bal margó: 210 képpont Oldal jobb margó: 30 képpont Betűtípus: Arial, Helvetica, sans-serif Szöveg igazítása: sorkizárt Címsorok színe: #2c641b CSS: body { background-image: url(nyirfa.jpg); background-repeat: repeat-y; margin-left: 210px; margin-right: 30px; font-family:Arial, Helvetica, sans-serif; text-align:justify; } h1,h2 {color: #2c641b}
Nyírfa (2. változat) div#menu tulajdonságai Fix pozícionálás Fentről és balról is 10 képponttal legyen eltolva Háttérszín: fehér Szélesség 140 képpont Belső kitöltés 10 képpont, kivéve bal oldalon, mert ott 0. Szegély 2 képpont vastag, sötétzöld Szegély lekerekítettsége: 10 képpont Felsoroláslista képe: level.jpg CSS: div#menu { position:fixed; left:10px; top:10px; background-color:white; width:140px; padding:10px 10px 10px 0; border:2px solid darkgreen; border-radius:10px; } div#menu li {list-style-image:url(‘level.jpg’)} Hozz létre egy menu azonosítójú divet, a képen látható tartalommal! Az egyes menüpontok felsoroláslistában legyenek elhelyezve! A menü a lap gördítésekor ugyanazon a pozíción maradjon (fix pozícionálás)!
Sötét Tulajdonságok A linkek színe:sárga Látogatott linkek színe: :#ff9900 Link színe, ha fölé visszük az egeret: fehér Bekezdés első betűje kétszerese az alap méretnek Bekezdés első sora dőlt. A kijelölt szöveg háttere sárga, színe fekete. A fontos osztályba sorolt bekezdés előtt jelenjen meg a Fontos szó, pirossal! CSS: a:link {color:yellow } a:visited {color:#ff9900 } a:hover {color:white} p:first-letter {font-size:200%} p:first-line {font-style:italic} ::selection {background-color:yellow; color: black;} p.fontos:before {content: "Fontos:"; display:block; color:red;}
Szelektorok (gyakorlás) Feladat Az itt látható minta alapján végezzük el a formázásokat úgy, hogy a HTML részben semmit sem módosíthatunk, nem vezethetünk be új osztályokat, azonosítókat, stb! Vagyis az alapján kell formáznunk, ahogy az elemek a struktúrában elhelyezkednek (gyerekek, leszármazottak, adott attribútummal rendelkeznek, stb.) Egy lehetséges megoldás: p+p {text-indent:0} ul li:first-child {color:red} ul li:last-child {color:blue} ul>li {font-weight:bold} ul ul li {font-style:italic; font-weight:normal} p:lang(en) {background-color:yellow}
Táblázat Tulajdonságok Cellák belső kitöltése: 10 képpont, Szegély: 1 képpont vastag, folytonos, #999999 Fejléc cellákban a háttér #003300 színkódú, a szegély és szövegszín fehér színű. Táblázat szegély összevonásra kerül. CSS td { padding: 10px; border:1px solid #999999;} th {background-color:#003300; color:white; border:1px solid #ffffff; padding:10px;} table { border-collapse:collapse }
Táblázat (továbbfejlesztés) Tulajdonságok Minden páratlan (odd) sor háttere legyen világoszöld! (a fejléc elemek kivételével) Minden páros (even) sor háttere legyen világossárga! CSS tr:nth-child(odd) { background-color: lightgreen;} tr:nth-child(even) { background-color: lightyellow;} CSS (másik megoldás) tr:nth-child(2n+1) {background-color: lightgreen;} tr:nth-child(2n) {background-color: lightyellow;} Önálló feladat: Állítsd be, hogy a táblázatok sorai felváltva világoszöld, sárga, fehér színűek legyenek!
Lebegtetés Tulajdonságok Oldal betűmérete 90%, betűtípus: Arial, Helvetica, sans-serif; A bekezdések sorkizártak. A képeket tartalmazó divek be vannak sorolva a balra, jobbra és nemlebeg osztályokba. Ezeknek meg kell adnunk a megfelelő tulajdonságokat. Szükséges paraméterek body { font-size:90%; font-family:Arial, Helvetica, sans-serif; } p { text-align:justify;} div.balra { float:left; margin-right:10px; } div.jobbra { float:right; margin-left:10px; } div.nemlebeg {clear:both;}
Lebegtetés 2. Nézzük meg a lebegtetes2 mappa tartalmát! Nagyobb felbontásban a lebegtetett elem kilóg a tartalmazó elemből. Mi lehet a megoldás? Például elhelyezhetünk egy olyan elemet a div záró tagje elé, amely megtöri a lebegést (clear:both) paraméterrel. Szebb megoldás, ha az overflow paramétert használjuk.
Overflow tulajdonság Mi történik, ha a tartalom mérete nagyobb, mint a tartalmazó elemé? overflow: visible Ez az alapbeállítás, ekkor a tartalom kilóghat a tartalmazó elemből. overflow:hidden A túlnyúlás el lesz rejtve. overflow:auto A túlnyúlás el lesz rejtve, de megjelenik egy gördítősáv, ha szükséges. overflow:scroll A túlnyúlás el lesz rejtve, és mindenképpen megjelenik a gördítősáv..
Overflow tulajdonság Ha nem szeretnénk, hogy egy lebegtetett elem kilógjon a dobozból, akkor is sikerrel használhatjuk az overflow:hidden, vagy overflow:auto; tulajdonságot. div.doboz { background-color:lightyellow; border:1px solid green; padding:5px; overflow:hidden; }
Lista menü Tulajdonságok Nincs listaelem jelölő. A listaelemek egymás után, beágyazott (in- line) módon jelennek meg. A listaelemek jobb oldalán pontozott szegély látható. Felül és alul 5, jobbra és balra 20 képpontos belső kitöltés van definiálva. Az utolsó menüpontnál nincs jobb oldali szegély CSS div#menu li { list-style-type:none; display:inline; border-right:1px dotted black; padding: 5px 20px;} div#menu li:last-child {border-right:none}
Montázs
Montázs Tulajdonságok CSS Oldal háttérszíne: #eee A képeknek legyen vékony, fekete szegélye, 10 képpontos belső kitöltése és fehér háttérszíne! A fotok azonosítójú div tulajdonságai: Legyen relatív pozícionálású, mivel ekkor a divben lévő képek abszolút pozícionálásakor a fotok div elhelyezkedéséhez képest tudjuk az eltolást beállítani. Legyen középre igazítva! A háttérkép a fa_mintazat.jpg kép legyen! A szegély vékony, fekete legyen! A szélesség 500px, magasság 260px legyen! A képeket pozícionáljuk abszolút módon. A megcímzésükhöz használjuk az nth-child látszólagos osztályt! A képekre tegyünk egy jobbra és le vetülő árnyékot! CSS background-color:#eee border: 1px solid black; padding:10px; background-color:white; position:relative; margin:0 auto; margin-top:20px; background-image: url(fa_mintazat.jpg); border:1px solid black; width: 500px; height: 260px; div#fotok a:nth-child(3n+1) img { position:absolute; left:20px; top:40px; } A többi két kép esetén hasonlóan járjunk el! box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
Montázs (továbbfejlesztés) Tulajdonságok A címsor legyen a következő blokk- szintű elem soron-belüli eleme! A szöveg legyen árnyékolt! A képek legyenek kis mértékben elforgatva! CSS display: run-in text-shadow: 3px 3px 3px #000; transform:rotate(-7deg); -ms-transform:rotate(-7deg); /* IE 9 */ -moz-transform:rotate(-7deg); /* Firefox */ -webkit-transform:rotate(-7deg); /* Safari and Chrome */ -o-transform:rotate(-7deg); /* Opera */
Komplex feladat Fiktívterv stúdió weblap megvalósítása CSS-el
Szegélyek, árnyékok, több oszlop, átlátszóság, színátmenet gyakorlása
Lekerekített szegélyek border-radius: érték ; -webkit-border-radius: érték ; -moz-border-radius: érték ; Példakód: <div style="border:1px solid black; padding:10px; width:400px; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie augue vel justo eleifend euismod fermentum velit dictum. Maecenas libero odio, fringilla at bibendum ac, sagittis nec dolor. Fusce sed diam nulla. Cras in odio nec est auctor luctus. ….. </p> </div>
Lekerekített szegélyek Feladatok border-radius: érték -webkit-border-radius: érték -moz-border-radius: érték Lekerekített szegélyek 1.feladat 2.feladat 3.feladat 4.feladat
Lekerekített szegélyek (egyéni) Feladatok Lekerekített szegélyek (egyéni) border-top-left-radius: érték ; border-top-right-radius: érték; border-bottom-left-radius: érték ; border-bottom-right-radius: érték ; -webkit-border-top-left-radius: érték ; -webkit-border-top-right-radius: érték ; -webkit-border-bottom-left-radius: érték ; -webkit-border-bottom-right-radius: érték ; -moz-border-radius-topleft: érték; -moz-border-radius-topright: érték; -moz-border-radius-bottomleft: érték; -moz-border-radius-bottomright: érték; 1.feladat 2.feladat
Doboz árnyékok box-shadow: vízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; -webkit-box-shadow: vízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; -moz-box-shadow: vízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; Példakód: <div style="-webkit-box-shadow: 5px 10px 5px black; -moz-box-shadow: 5px 10px 5px black; box-shadow:5px 10px 5px black; background-color:#FFC; width:400px; margin-bottom:40px; padding:10px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie augue vel justo eleifend euismod fermentum velit dictum. Maecenas libero odio, fringilla at bibendum ac, sagittis nec dolor. Fusce sed diam nulla. … </div>
Doboz árnyékok Feladatok box-shadow: vízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; -webkit-box-shadow: vízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; -moz-box-shadow: vízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; 1.feladat 2.feladat 4.feladat 3.feladat
Doboz árnyékok (belső) box-shadow: inset vízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; -webkit-box-shadow: inset vízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; -moz-box-shadow: inset vízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; Példakód: <div style="-webkit-box-shadow: inset 0px 0px 5px #960396; -moz-box-shadow: inset 0px 0px 5px #960396; box-shadow: inset 0px 0px 5px #960396; background-color:#FFC; width:400px; margin-bottom:40px; padding:10px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie augue vel justo eleifend euismod fermentum velit dictum. Maecenas libero odio, fringilla at bibendum ac, sagittis nec dolor. Fusce sed diam nulla. … </div>
Doboz árnyékok (belső) Feladatok Doboz árnyékok (belső) box-shadow: inset vízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; -webkit-box-shadow: inset vízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; -moz-box-shadow: inset vízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; 1.feladat 2.feladat 3.feladat
Többoszlopos elrendezés column-count: oszlopok_száma; column-gap: térköz; -moz-column-count: oszlopok_száma; -moz-column-gap: térköz; -webkit-column-count: oszlopok_száma; -webkit-column-gap: térköz; Példakód: <div style="-moz-column-count: 3; -moz-column-gap: 10px; -webkit-column-count: 3; -webkit-column-gap: 10px; column-count: 3; column-gap: 10px; "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie augue vel justo eleifend euismod …. </div>
Többoszlopos elrendezés Feladatok Többoszlopos elrendezés column-count: oszlopok_száma; column-gap: térköz; -moz-column-count: oszlopok_száma; -moz-column-gap: térköz; -webkit-column-count: oszlopok_száma; -webkit-column-gap: térköz; 2.feladat 1.feladat
Átlátszóság (rgba) rgba(vörös[0-255],zöld[0-255], kék[0-255],átlátszóság[0-1]) Példakód: body { background-image:url('bgimage.gif'); } div { background-color:rgba(255, 255, 255, 0.8); width:600px; padding:10px;
Feladatok Átlátszóság (rgba) rgba(vörös[0-255],zöld[0-255], kék[0-255],átlátszóság[0-1]) 1.feladat Helyezz el egy tetszőleges háttérképen különböző átlátszóság értékkel megadott háttérszínű dobozokat! 2.feladat Egymásra pozícionált (piros,kék és zöld színű) dobozok segítségével készítsd el az itt látható képet!
Színátmenet A http://gradients.glrzad.com/ oldalon próbáld ki a színátmenet generálást!
Feladatok Színátmenet A http://gradients.glrzad.com/ oldalon próbáld ki a színátmenet generálást! Készítsd el az alábbi gombokat!
Feladatok Gombok A bemutatott paraméterek segítségével készíts különböző stílusú gombokat! Használd ki a lekerekítettségben, árnyékolásban, átlátszóságban, színátmenetekben rejlő lehetőségeket! Ügyelj a gombon lévő felirat olvashatóságára! A gomb változzon meg, ha fölé visszük az egeret (:hover)!
Vége http://www.blooberry.com/indexdot/css/propindex/all.htm