Webtechnológia gyakorlatok 2. Laboratóriumi gyakorlat
Stíluslapok használata (CSS) A gyakorlat célja: Bevezetés a CSS stíluslapok használatába. Felkészüléshez szükséges anyagok: 1. A 3-as segédlet (CSS) 2. A bibliográfia HTML illetve CSS szekcióiban megjelölt Interneten található segédletek. A gyakorlat menete: Szabályok írása - szelektorok használata.............................................................................................1 A doboz modell ...................................................................................................................................3 Menük kialakítása lista elemekkel........................................................................................................5
Szabályok írása - szelektorok használata 1. Tanulmányozzuk az alábbi példán keresztül a szelektorok használatát:
HTML elemek <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> cite { color: olive ;} /* a cite közvetlen gyereke a paragrafusnak */ -->
Ez a pargrafus piros lesz
Ez a pargrafus zöld lesz
Ez a pargrafus sárga lesz
Ez a pargrafus szürke lesz
Szöveg <em class="zold">ez a része kék lesz
1
Webtechnológia gyakorlatok
Bíbor szöveg
H2 szöveg
Ez a h3 barna lesz, mert h2 után jön.
Hivatkozás szövege: olive
Jelenítsük meg a fenti példát, és végezzük el az alábbi módosításokat: -jelenítsük meg a piros sort Tahoma és Verdana betűtípussal (példák fontok megadására itt: http://www.ms.sapientia.ro/~lszabo/webtechnologia/eloadas/css/fontstyle.html) -válasszunk ki 16 pt-os betűtípust a szürke sor számára -emeljük ki <em> HTML elemmel szövegrészeket, és formázzuk őket 18 pt-os betűméretre a stíluslapon keresztül. -igazítsuk a bíbor szöveget a lap jobb oldalára a text-align tulajdonsággal -húzzuk alá a H2 szöveget a text-decoration tulajdonság használatával -húzzuk be jobbra a barna paragrafust a text-indent tulajdonsággal, és próbáljuk ki az alábbi mértékeket: 3 em , 30 px , 40 pt , 20 mm -adjunk meg más színeket a paragrafusoknak, többféleképpen adva meg értéket a color tulajdonságnak: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white és yellow
Numerikusan háromféleképpen adhatjuk meg: a. a három szín hexadecimális kódjával, előtte egy # jellel, mint a HTML-ben, pl. a piros színt így adjuk meg: #ff0000 b. rövidítve, szintén 3 számjeggyel úgy, hogy azok kettőzése jelenti a megfelelő hexa kódot, p. #fff
2
Webtechnológia gyakorlatok
A doboz modell
Ismételjük át a CSS doboz modell tulajdonságait, és azt, hogy hogyan adunk értékeket ezeknek. Tekintsük meg az alábbi példakódot, és megjelenítését:
HTML elemek <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css">
3
Webtechnológia gyakorlatok
Megjelenítése:
Feladat: Készítsünk két dobozt első: 300x300 pixel méretű (kék), a második 100x100 pixel méretű (piros). Állítsunk be színes hátteret mindkét doboznak a background-color tulajdonsággal. -helyezzük a piros dobozt -a normál folyamban való helyétől 50 pixellel jobbra -a normál folyamban elfoglalt magasságán a kék doboz közepére -a kék doboz jobb alsó sarkába, 10 pixelnyire a kék doboz oldalaitól -töröljük ki először a kék, utána a piros doboz height tulajdonságát. Mi történik? -helyezzünk el egy hosszabb mondatot a piros dobozba, méretét növeljük 200x200-ra. Ha a szöveg túlcsordul a doboz oldalán, állítsuk ezt le az overflow tulajdonsággal. -lebegtessük a piros dobozt a kék doboz felső jobb sarkában, 20 pixelre a doboz oldalaitól -helyezz néhány hosszú paragrafust a dobozok után a body elembe. Rögzítsd a kék dobozt a böngésző ablakának jobb sarkában úgy, hogy ne mozduljon el onnan ha görgetjük a képernyőt. Az alábbiakat egy új HTML lapban végezzük, amelyben egy
elemben 2 paragrafus található: -lebegtessünk egy képet (http://www.ms.sapientia.ro/~lszabo/images/korakas1.jpg) az első paragrafus jobb oldalán a float tulajdonsággal -távolítsuk el a képet a paragrafus szélétől és a szövegtől a margin tulajdonsággal
4
Webtechnológia gyakorlatok
-rajzoltassunk keretet a képnek ridge keretstílussal -állítsd a paragrafus szélességét 600 pixelre -igazítsuk a képernyőablak közepére a paragrafust a margin-left és margin-right tulajdonságok egyidejű alkalmazásával az auto értéket használva -húzzunk alá néhány szót a span elem és text-decoration tulajdonság segítségével -rajzoljunk egy 2 pixeles zöld csíkot a szöveg bal oldalára 10 pixelre a szövegtől a border tulajdonság felhasználásával -növeljük meg a betűk közti távolságot 0.1em-el.
Menük kialakítása lista elemekkel Tekintsük az alábbi menü szerkezetet, és a hozzá tartozó HTML kódot:
HTML elemek <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css">
Tanulmányozzuk a kódot, utána végezzük el az alábbi módosításokat: -színezzük ki a menüelemeket (háttér és előtér szín megadása) -próbáljuk meg állítgatni a menüelemek egymástól való távolságát. Melyik tulajdonság határozza ezt meg? -rajzoljunk 1 pixeles színes keretet a menüpontok köré -Írjunk be a link elemekbe egy-egy webcímet, és próbájuk ki, működik-e. Adjuk meg az első címet úgy, hogy új böngésző ablakot nyisson -tanulmányozzuk a
elemnek megadható látszólagos osztályokat Oldjuk meg azt, hogy a menüpontok háttér színe megváltozzon amikor az egér mutatóját a menüpont fölé visszük.
6
