Bevezetés a Stíluslapok használatába - gyakorlati feladatsor

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

blokk Szelektor(lánc) tulajdonság érték CSS utasítás A CSSutasításkétrészbőláll: • Aszelektor(lánc)tartalmazza a formázandó HTML elem(ek)et • Adeklarációvégzi el a szelektorbanmeghatározottelemekformázását. h1{color: blue} deklaráció

Hivatkozás külső stíluslapra Beágyazott (in-line) megadás Stíluslap csatolása <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <htmllang="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");  </style> </head> <body> <h1>A címsor1 kék</h1> <h2>A címsor2 piros</h2> <p style="color:green">Azegészbekezdészöld</p> </body> </html> Stíluslap importálás Lapon belüli definíció

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

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 solidblack;} <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} <divid="fejlec"></div>

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 • 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)

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 GoogleChromelegfrisebb 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 10px10px 0; • border:2px soliddarkgreen; • border-radius:10px; } • div#menuli {list-style-image:url(‘level.jpg’)} Hozz létre egy menuazonosí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} • ulli:first-child {color:red} • ulli:last-child {color:blue} • ul>li {font-weight:bold} • ululli {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 solidgreen; 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#menuli{list-style-type:none; • display:inline; • border-right:1px dottedblack; • padding: 5px 20px;} • div#menuli:last-child {border-right:none}

Montázs

Montázs Tulajdonságok • 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 fotokazonosí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 fotokdiv 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 solidblack;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 3px3px #000; • transform:rotate(-7deg);-ms-transform:rotate(-7deg); /* IE 9 */-moz-transform:rotate(-7deg); /* Firefox*/-webkit-transform:rotate(-7deg); /* Safariand 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: <divstyle="border:1px solidblack; padding:10px; width:400px; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;"> <p>Loremipsumdolorsitamet, consecteturadipiscing elit. Vivamusmolestieaugueveljustoeleifendeuismod fermentum velitdictum. Maecenas liberoodio, fringillaatbibendumac, sagittisnecdolor. Fusceseddiam nulla. Crasinodionec est auctorluctus. …..</p> </div>

Feladatok border-radius: érték-webkit-border-radius: érték-moz-border-radius: érték Lekerekített szegélyek 1.feladat 2.feladat 4.feladat 3.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

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: <divstyle="-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;"> Loremipsumdolorsitamet, consecteturadipiscing elit. Vivamusmolestieaugueveljustoeleifendeuismod fermentum velitdictum. Maecenas liberoodio, fringillaatbibendumac, sagittisnecdolor. Fusceseddiam nulla. … </div>

Feladatok 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.feladat 2.feladat 4.feladat 3.feladat

Doboz árnyékok (belső) box-shadow: insetvízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; -webkit-box-shadow:insetvízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; -moz-box-shadow:insetvízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; Példakód: <divstyle="-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;"> Loremipsumdolorsitamet, consecteturadipiscing elit. Vivamusmolestieaugueveljustoeleifendeuismod fermentum velitdictum. Maecenas liberoodio, fringillaatbibendumac, sagittisnecdolor. Fusceseddiam nulla. … </div>

Feladatok Doboz árnyékok (belső) box-shadow: insetvízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; -webkit-box-shadow:insetvízszintes_eltolás függőleges_eltolás elmosódás_mértéke szín; -moz-box-shadow:insetví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: <divstyle="-moz-column-count: 3; -moz-column-gap: 10px; -webkit-column-count: 3; -webkit-column-gap: 10px; column-count: 3; column-gap: 10px; "> Loremipsumdolorsitamet, consecteturadipiscing elit. Vivamusmolestieaugueveljustoeleifendeuismod …. </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

Á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

Bevezetés a Stíluslapok használatába - gyakorlati feladatsor