bevezetés a stíluslapok használatába - gyakorlati feladatsor
DESCRIPTION
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 CSS utasítás két részből áll : A szelektor (lánc) tartalmazza a formázandó HTML elem( ek )et - PowerPoint PPT PresentationTRANSCRIPT
BEVEZETÉS A STÍLUSLAPOK HASZNÁLATÁBA - GYAKORLATI FELADATSOR
Abonyi-Tóth Andor, ELTE IKv.20130310
Emlékeztető az előadásról2
3CSS 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
4Stíluslap csatolása
<!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
Beágyazott (in-line) megadás
Stíluslap importálásLapon belüli
definíció
5Tulajdonsá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.
6Mértékegységek
6
Abszolút Relatív
in (2.54 cm)cmmmpt (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
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;}
<p class="fontos"><p class="szegely"><p class="szegely fontos">
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}
<div id="fejlec"></div>
9Pozí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)
10Tová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.
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ó feladatok11
A hozzávalók letölthetők innen:http://webfejlesztes.inf.elte.hu/docs/cssgyakorlas20130310.ziphttp://bit.ly/Y3SbpD
12NyírfaTulajdonsá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:
8. body { background-image: url(nyirfa.jpg);
9. background-repeat: repeat-y;
10. margin-left: 210px;
11. margin-right: 30px;
12. font-family:Arial, Helvetica, sans-serif;
13. text-align:justify; }
14. h1,h2 {color: #2c641b}
13Nyí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 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:
9. div#menu { position:fixed;
10. left:10px; top:10px;
11. background-color:white;
12. width:140px;
13. padding:10px 10px 10px 0;
14. border:2px solid darkgreen;
15. border-radius:10px; }
16. 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)!
14SötétTulajdonságok
1. A linkek színe:sárga
2. Látogatott linkek színe: :#ff9900
3. 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:
8. a:link {color:yellow }
9. a:visited {color:#ff9900 }
10. a:hover {color:white}
11. p:first-letter {font-size:200%}
12. p:first-line {font-style:italic}
13. ::selection {background-color:yellow; color: black;}
14. p.fontos:before {content: "Fontos:"; display:block; color:red;}
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)
16TáblázatTulajdonságok
1. Cellák belső kitöltése: 10 képpont, Szegély: 1 képpont vastag, folytonos, #999999
2. Fejléc cellákban a háttér #003300 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
4. td { padding: 10px; border:1px solid #999999;}
5. th {background-color:#003300; color:white; border:1px solid #ffffff; padding:10px;}
6. table { border-collapse:collapse }
17Tá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
3. tr:nth-child(odd) { background-color: lightgreen;}
4. 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!
18LebegtetésTulajdonsá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
4. body { font-size:90%;font-family:Arial, Helvetica,
sans-serif; }
5. p { text-align:justify;}
6. div.balra { float:left; margin-right:10px; }
div.jobbra { float:right; margin-left:10px; }
div.nemlebeg {clear:both;}
19Lebegteté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.
20Overflow 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:hiddenA túlnyúlás el lesz rejtve.
overflow:autoA túlnyúlás el lesz rejtve, de megjelenik egy gördítősáv, ha szükséges.
overflow:scrollA túlnyúlás el lesz rejtve, és mindenképpen megjelenik a gördítősáv..
21Overflow 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;
}
22Lista 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
6. div#menu li { list-style-type:none;
7. display:inline;
8. border-right:1px dotted black;
9. padding: 5px 20px;}
10. div#menu li:last-child {border-right:none}
23Montázs
24MontázsTulajdonsá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);
25Montá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 */
26Komplex 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
27
28Lekerekített szegélyek
border-radius: érték ; -webkit-border-radius: érték ; -moz-border-radius: érték ;<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>
Példakód:
29Lekerekített szegélyekborder-radius: érték-webkit-border-radius: érték-moz-border-radius: érték
1.feladat 2.feladat
3.feladat 4.feladat
Feladatok
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
31Doboz á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;
<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>
Példakód:
32Doboz á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
3.feladat 4.feladat
Feladatok
33Doboz á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;
<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>
Példakód:
34Doboz á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.feladat 2.feladat
3.feladat
35Tö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;
<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>
Példakód:
36Többoszlopos elrendezésFeladatok
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Á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Á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!
39Színátmenet
A http://gradients.glrzad.com/ oldalon próbáld ki a színátmenet generálást!
40Színátmenet
A http://gradients.glrzad.com/ oldalon próbáld ki a színátmenet generálást!
Feladatok
Készítsd el az alábbi gombokat!
41Gombok
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
42Vége