Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

BEVEZETÉS A STÍLUSLAPOK HASZNÁLATÁBA - GYAKORLATI FELADATSOR Abonyi-Tóth Andor, ELTE IK v.20130310.

Hasonló előadás


Az előadások a következő témára: "BEVEZETÉS A STÍLUSLAPOK HASZNÁLATÁBA - GYAKORLATI FELADATSOR Abonyi-Tóth Andor, ELTE IK v.20130310."— Előadás másolata:

1 BEVEZETÉS A STÍLUSLAPOK HASZNÁLATÁBA - GYAKORLATI FELADATSOR Abonyi-Tóth Andor, ELTE IK v

2 Emlékeztető az előadásról 2

3 3 CSS utasítás 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. deklaráció Szelektor(lánc) h1 {color: blue} blokk tulajdonság érték

4 4 Stíluslap csatolása url("kepek/pelda/stilus2.css"); A címsor1 kék A címsor2 piros Az egész bekezdés zöld Hivatkozás külső stíluslapra Beágyazott (in-line) megadás Stíluslap importálás Lapon belüli definíció

5 5 Tulajdonságok csoportosítása h1 {font-family: verdana} h2 {font-family: verdana} h3 {font-family: verdana} h1, h2, h3 {font-family: verdana} h1 {font-family: helvetica} h1 {font-size: 12pt} h1 {font-style: normal} h1 { font-family: helvetica; font-size: 12pt; font-style: normal; } h1 {font: bold 12pt helvetica} h1 {font-weight: bold} h1 {font-size: 12pt} h1 {font-family: helvetica} A szelektorokat vesszővel választjuk el. A tulajdonság:érték párok után pontosvessző áll. Itt az egyes értékek között szóköz van.

6 6 Mértékegységek 6 AbszolútRelatí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!] A számokat egybeírjuk a mértékegységekkel! Vagyis 12px és nem 12 px.

7 7 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 7.fontos {color:red;} p.szegely {border:1px solid black;}.fontos {color:red;} p.szegely {border:1px solid black;}

8 8 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}

9 9 Pozícionálás 9  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  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)

10 10 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.

11 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. Gyakorló feladatok 11 A hozzávalók letölthetők innen:

12 12 Nyírfa Tulajdonságok 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: #2c641b CSS: 1. body { background-image: url(nyirfa.jpg); 2. background-repeat: repeat-y; 3. margin-left: 210px; 4. margin-right: 30px; 5. font-family:Arial, Helvetica, sans-serif; 6. text-align:justify; } 7. h1,h2 {color: #2c641b}

13 13 Nyírfa (2. változat) div#menu tulajdonságai 1. Fix pozícionálás 2. 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. Belső kitöltés 10 képpont, kivéve bal oldalon, mert ott 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: 1. div#menu { position:fixed; 2. left:10px; top:10px; 3. background-color:white; 4. width:140px; 5. padding:10px 10px 10px 0; 6. border:2px solid darkgreen; 7. border-radius:10px; } 8. 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)!

14 14 Sötét Tulajdonságok 1. A linkek színe:sárga 2. Látogatott linkek színe: :#ff Link színe, ha fölé visszük az egeret: fehér 4. Bekezdés első betűje kétszerese az alap méretnek 5. Bekezdés első sora dőlt. 6. A kijelölt szöveg háttere sárga, színe fekete. 7. 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:#ff9900 } 3. a:hover {color:white} 4. p:first-letter {font-size:200%} 5. p:first-line {font-style:italic} 6. ::selection {background-color:yellow; color: black;} 7. p.fontos:before {content: "Fontos:"; display:block; color:red;}

15 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. ul ul li {font-style:italic; font-weight:normal} 6. p:lang(en) {background-color:yellow} Szelektorok (gyakorlás)

16 16 Táblázat Tulajdonságok 1. Cellák belső kitöltése: 10 képpont, Szegély: 1 képpont vastag, folytonos, # Fejléc cellákban a háttér # színkódú, a szegély és szövegszín fehér színű. 3. Táblázat szegély összevonásra kerül. CSS 1. td { padding: 10px; border:1px solid #999999;} 2. th {background-color:#003300; color:white; border:1px solid #ffffff; padding:10px;} 3. table { border-collapse:collapse }

17 17 Táblázat (továbbfejlesztés) Tulajdonságok 1. Minden páratlan (odd) sor háttere legyen világoszöld! (a fejléc elemek kivételével) 2. Minden páros (even) sor háttere legyen világossárga! CSS 1. tr:nth-child(odd) { background-color: lightgreen;} 2. tr:nth-child(even) { background-color: lightyellow;} CSS (másik megoldás) 1.tr:nth-child(2n+1) {background-color: lightgreen;} 2.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!

18 18 Lebegtetés Tulajdonságok 1. Oldal betűmérete 90%, betűtípus: Arial, Helvetica, sans-serif; 2. A bekezdések sorkizártak. 3. 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. body { font-size:90%; font-family:Arial, Helvetica, sans-serif; } 2. p { text-align:justify;} 3. div.balra { float:left; margin-right:10px; } div.jobbra { float:right; margin-left:10px; } div.nemlebeg {clear:both;}

19 19 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.

20 20 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..

21 21 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; }

22 22 Lista menü Tulajdonságok 1. Nincs listaelem jelölő. 2. A listaelemek egymás után, beágyazott (in- line) módon jelennek meg. 3. A listaelemek jobb oldalán pontozott szegély látható. 4. Felül és alul 5, jobbra és balra 20 képpontos belső kitöltés van definiálva. 5. 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:1px dotted black; 4. padding: 5px 20px;} 5. div#menu li:last-child {border-right:none}

23 23 Montázs

24 24 Montázs Tulajdonságok 1. Oldal háttérszíne: #eee 2. A képeknek legyen vékony, fekete szegélye, 10 képpontos belső kitöltése és fehér háttérszíne! 3. A fotok azonosítójú div tulajdonságai: 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 500px, magasság 260px legyen! 4. 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! 5. A képekre tegyünk egy jobbra és le vetülő árnyékot! CSS 1. background-color:#eee 2. border: 1px solid black; padding:10px; background-color:white; 3. position:relative; margin:0 auto; margin-top:20px; background-image: url(fa_mintazat.jpg); border:1px solid black; width: 500px; height: 260px; 4. 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! 5. box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);

25 25 Montázs (továbbfejlesztés) Tulajdonságok 1. A címsor legyen a következő blokk- szintű elem soron-belüli eleme! 2. A szöveg legyen árnyékolt! 3. A képek legyenek kis mértékben elforgatva! CSS 1. display: run-in 2. text-shadow: 3px 3px 3px #000; 3. 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 */

26 26 Komplex feladat  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 27

28 28 Lekerekített szegélyek border-radius: érték ; -webkit-border-radius: érték ; -moz-border-radius: érték ; 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éldakód:

29 29 Lekerekített szegélyek border-radius: érték -webkit-border-radius: érték -moz-border-radius: érték 1.feladat 2.feladat 3.feladat 4.feladat Feladatok

30 30 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 Feladatok

31 31 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;

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. … Példakód:

32 32 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; 1.feladat2.feladat 3.feladat 4.feladat Feladatok

33 33 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;

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. … Példakód:

34 34 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; Feladatok 1.feladat2.feladat 3.feladat

35 35 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; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie augue vel justo eleifend euismod …. Példakód:

36 36 Többoszlopos elrendezés Feladatok 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; 1.feladat 2.feladat

37 37 Á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]) body { background-image:url('bgimage.gif'); } div { background-color:rgba(255, 255, 255, 0.8); width:600px; padding:10px; } Példakód:

38 38 Á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]) Feladatok 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! 1.feladat 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!

39 39 Színátmenet A oldalon próbáld ki a színátmenet generálást!http://gradients.glrzad.com/

40 40 Színátmenet A oldalon próbáld ki a színátmenet generálást!http://gradients.glrzad.com/ Feladatok Készítsd el az alábbi gombokat!

41 41 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)! Feladatok

42 42 Vége


Letölteni ppt "BEVEZETÉS A STÍLUSLAPOK HASZNÁLATÁBA - GYAKORLATI FELADATSOR Abonyi-Tóth Andor, ELTE IK v.20130310."
Google Hirdetések