BEVEZETS A STLUSLAPOK HASZNLATBA GYAKORLATI FELADATSOR v 20130310
BEVEZETÉS A STÍLUSLAPOK HASZNÁLATÁBA GYAKORLATI FELADATSOR v. 20130310 Abonyi-Tóth Andor, ELTE IK
2 Emlékeztető az előadásról
CSS utasítás 3 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) h 1 {color: blue} tulajdonság érték deklaráció
Stíluslap csatolása 4 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/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/stilus 1. css" title="sajat"> <style type="text/css"> @import url("kepek/pelda/stilus 2. css"); Hivatkozás Stíluslap <!-h 1 {color: blue} külső importálás Lapon belüli --> stíluslapra definíció </style> </head> <body> <h 1>A címsor 1 kék</h 1> <h 2>A címsor 2 piros</h 2> <p style="color: green">Az egész bekezdés zöld</p> </body> </html> Beágyazott (in-line) megadás
Tulajdonságok csoportosítása h 1 {font-family: verdana} h 2 {font-family: verdana} h 3 {font-family: verdana} h 1, h 2, h 3 {font-family: verdana} A szelektorokat vesszővel választjuk el. h 1 {font-family: helvetica} h 1 {font-size: 12 pt} h 1 {font-style: normal} 5 } font-family: helvetica; font-size: 12 pt; font-style: normal; A tulajdonság: érték párok után pontosvessző áll. h 1 {font-weight: bold} h 1 {font-size: 12 pt} h 1 {font-family: helvetica} h 1 {font: bold 12 pt helvetica} Itt az egyes értékek között szóköz van.
Mértékegységek 6 A számokat egybeírjuk a mértékegységekkel! Vagyis 12 px és nem 12 px. Abszolút Relatív in (2. 54 cm) cm mm pt (1/72 in) pc (12 pt) em (adott környezet betűméretéhez képest történő megadás. pl. 1. 2 em) ex (x-magasság - többnyire az adott font x betűjének magassága. pl. 2 ex) % (pl. 150%) px (képpont) pl. 16 px [csak bizonyos értelemben tekinthető relatívnak, körültekintéssel használjuk!] 6
Osztályok (class) használata 7 CSS . osztálynév {definíció} Ez egy általános osztály, amelyet több elemnél is felhasználhatunk. szelektor. osztálynév . fontos {color: red; } p. szegely {border: 1 px solid black; } {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 <p class="fontos"> <p class="szegely fontos"> 7
Egyedi azonosítók (ID) használata CSS #azonosító, HTML div#fejlec {margin: 10 px} vagy szelektor#azonosító <div id="fejlec"></div> 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. 8
Pozícionálás Position: static | relative | absolute | fixed | inherit Static � Nem pozícionált, a kódban elfoglalt helye határozza meg a vásznon való elhelyezkedését 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 � 9 Relative � 9 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)
További tudnivalók… 10 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.
11 Gyakorló feladatok A következő feladatokban a CSS 1, 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/cssgyakorlas 20130310. zip http: //bit. ly/Y 3 Sbp. D
Nyírfa Tulajdonságok 12 1. Háttérkép: nyirfa. jpg 2. Háttérkép függőlegesen ismétlődik 3. Oldal bal margó: 210 képpont 4. Oldal jobb margó: 30 képpont 5. Betűtípus: Arial, Helvetica, sans-serif 6. Szöveg igazítása: sorkizárt 7. Címsorok színe: #2 c 641 b CSS: 1. body { background-image: url(nyirfa. jpg); 2. background-repeat: repeat-y; 3. margin-left: 210 px; 4. margin-right: 30 px; 5. font-family: Arial, Helvetica, sans-serif; 6. text-align: justify; } 7. h 1, h 2 {color: #2 c 641 b}
Nyírfa (2. változat) div#menu tulajdonságai 1. 2. Fix pozícionálás Fentről és balról is 10 képponttal legyen eltolva 3. Háttérszín: fehér 4. Szélesség 140 képpont 5. 13 Belső kitöltés 10 képpont, kivéve bal oldalon, mert ott 0. 6. Szegély 2 képpont vastag, sötétzöld 7. Szegély lekerekítettsége: 10 képpont 8. Felsoroláslista képe: level. jpg CSS: 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)! 1. div#menu { position: fixed; 2. left: 10 px; top: 10 px; 3. background-color: white; 4. width: 140 px; 5. padding: 10 px 0; 6. border: 2 px solid darkgreen; 7. border-radius: 10 px; } 8. div#menu li {list-style-image: url(‘level. jpg’)}
Sötét 14 Tulajdonságok 1. A linkek színe: sárga 2. Látogatott linkek színe: : #ff 9900 3. 4. 5. 6. 7. 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: 1. a: link {color: yellow } 2. a: visited {color: #ff 9900 } 3. a: hover {color: white} 4. p: first-letter {font-size: 200%} 5. p: first-line {font-style: italic} 6. 7. : : selection {background-color: yellow; color: black; } p. fontos: before {content: "Fontos: ";
Szelektorok (gyakorlás) 15 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: 1. p+p {text-indent: 0} 2. ul li: first-child {color: red} 3. ul li: last-child {color: blue} 4. ul>li {font-weight: bold} 5. 6. ul ul li {font-style: italic; fontweight: normal} p: lang(en) {background-color: yellow}
Táblázat 16 Tulajdonságok 1. 2. 3. 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 1. 2. 3. td { padding: 10 px; border: 1 px solid #999999; } th {background-color: #003300; color: white; border: 1 px solid #ffffff; padding: 10 px; } table { border-collapse: collapse }
Táblázat (továbbfejlesztés) 17 Tulajdonságok 1. 2. 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 1. 2. tr: nth-child(odd) { background-color: lightgreen; } tr: nth-child(even) { background-color: lightyellow; } CSS (másik megoldás) 1. tr: nth-child(2 n+1) {background-color: lightgreen; } 2. tr: nth-child(2 n) {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 18 Tulajdonságok 1. 2. 3. 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 1. 2. 3. body { font-size: 90%; font-family: Arial, Helvetica, sans-serif; } p { text-align: justify; } div. balra { float: left; margin-right: 10 px; } div. jobbra { float: right; margin-left: 10 px; } div. nemlebeg {clear: both; }
Lebegtetés 2. 19 Nézzük meg a lebegtetes 2 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 20 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 21 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: 1 px solid green; padding: 5 px; overflow: hidden; }
Lista menü 22 Tulajdonságok 1. 2. 3. 4. 5. 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 1. div#menu li { list-style-type: none; 2. display: inline; 3. border-right: 1 px dotted black; 4. padding: 5 px 20 px; } 5. div#menu li: last-child {border-right: none}
Montázs 23
Montázs Tulajdonságok 1. 2. 3. 4. 5. 24 CSS Oldal háttérszíne: #eee 1. A képeknek legyen vékony, fekete szegélye, 10 képpontos belső kitöltése és fehér háttérszíne! 2. A fotok azonosítójú div tulajdonságai: 3. 1. 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. 2. Legyen középre igazítva! 3. A háttérkép a fa_mintazat. jpg kép legyen! A szegély vékony, fekete legyen! 4. A szélesség 500 px, magasság 260 px legyen! 4. A képeket pozícionáljuk abszolút módon. A megcímzésükhöz használjuk az nthchild látszólagos osztályt! A képekre tegyünk egy jobbra és le vetülő árnyékot! 5. background-color: #eee border: 1 px solid black; padding: 10 px; background-color: white; position: relative; margin: 0 auto; margin-top: 20 px; background-image: url(fa_mintazat. jpg); border: 1 px solid black; width: 500 px; height: 260 px; div#fotok a: nth-child(3 n+1) img { position: absolute; left: 20 px; top: 40 px; } A többi két kép esetén hasonlóan járjunk el! box-shadow: 2 px 5 px 0 px rgba(0, 0, 0, 1);
Montázs (továbbfejlesztés) Tulajdonságok 1. 2. 3. A címsor legyen a következő blokkszintű elem soron-belüli eleme! A szöveg legyen árnyékolt! A képek legyenek kis mértékben elforgatva! 25 CSS 1. display: run-in 2. text-shadow: 3 px 3 px #000; 3. transform: rotate(-7 deg); -ms-transform: rotate(-7 deg); /* IE 9 */ -moz-transform: rotate(-7 deg); /* Firefox */ -webkit-transform: rotate(-7 deg); /* Safari and Chrome */ -o-transform: rotate(-7 deg); /* Opera */
Komplex feladat 26 Fiktívterv stúdió weblap megvalósítása CSS-el
27 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: 1 px solid black; padding: 10 px; width: 400 px; border-radius: 30 px; -webkit-border-radius: 30 px; -moz-border-radius: 30 px; "> <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> 28
Feladatok border-radius: érték -webkit-border-radius: érték -moz-border-radius: 2érték 9 Lekerekített szegélyek 1. feladat 3. feladat 2. feladat 4. feladat
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 30
Doboz árnyékok 31 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: 5 px 10 px 5 px black; -moz-box-shadow: 5 px 10 px 5 px black; background-color: #FFC; width: 400 px; margin-bottom: 40 px; padding: 10 px; "> 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>
Feladatok Doboz árnyékok 32 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 3. feladat 2. feladat 4. feladat
Doboz árnyékok (belső) 33 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 0 px 5 px #960396; -moz-box-shadow: inset 0 px 0 px 5 px #960396; background-color: #FFC; width: 400 px; margin-bottom: 40 px; padding: 10 px; "> 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>
Feladatok Doboz árnyékok (belső) 34 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 1. feladat 2. feladat szín; 3. feladat
Többoszlopos elrendezés 35 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: 10 px; -webkit-column-count: 3; -webkitcolumn-gap: 10 px; column-count: 3; column-gap: 10 px; "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie augue vel justo eleifend euismod …. </div>
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 36
![Átlátszóság (rgba) rgba(vörös[0 -255], zöld[0 -255], kék[0 -255], átlátszóság[01]) Példakód: body { background-image: url('bgimage.](http://slidetodoc.com/presentation_image/04e6bbc6f1508fe7d259d3a6363a63f4/image-37.jpg "Átlátszóság (rgba) rgba(vörös[0 -255], zöld[0 -255], kék[0 -255], átlátszóság[01]) Példakód: body { background-image: url('bgimage.")
Átlátszóság (rgba) rgba(vörös[0 -255], zöld[0 -255], kék[0 -255], átlátszóság[01]) Példakód: body { background-image: url('bgimage. gif'); } div { background-color: rgba(255, 0. 8); width: 600 px; padding: 10 px; } 37
![Feladatok Átlátszóság (rgba) 38 rgba(vörös[0 -255], zöld[0 -255], kék[0 -255], átlátszóság[0 -1]) 1. feladat](http://slidetodoc.com/presentation_image/04e6bbc6f1508fe7d259d3a6363a63f4/image-38.jpg "Feladatok Átlátszóság (rgba) 38 rgba(vörös[0 -255], zöld[0 -255], kék[0 -255], átlátszóság[0 -1]) 1. feladat")
Feladatok Átlátszóság (rgba) 38 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! 39
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! 40
Feladatok Gombok 41 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 42
- Slides: 42
