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> <head> <title>html elemek</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css"> <!-- p { color : red ; /* piros a paragrafus */.zold { color : green /* zold osztály */ #elso { color : yellow ; /*az elso id-jű elem */.zold p { color : gray ; /* paragrafus amelyet egy zold osztályú másik lem tartalmaz */ p.zold { color: blue ; /* zold osztályú elm, amely egy paragrafustól származik */ p.bibor { color: purple; /* zold osztályba tartozó paragrafus */ h2 + h3 { color: maroon /* a h3 közvetlenül a h2 után jön */ p > cite { color: olive ; /* a cite közvetlen gyereke a paragrafusnak */ --> </style> </head> <body> <p>ez a pargrafus piros lesz</p> <p class="zold">ez a pargrafus zöld lesz</p> <p id="elso">ez a pargrafus sárga lesz</p> <div class="zold"><p>ez a pargrafus szürke lesz</p></div> <p>szöveg <em class="zold">ez a része kék lesz</em> </p> 1
<p class="bibor">bíbor szöveg</p> <h2>h2 szöveg </h2> <h3>ez a h3 barna lesz, mert h2 után jön. </h3> <p><cite>hivatkozás szövege: olive</cite></p> </body> </html> 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
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> <head> <title>html elemek</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css"> <!-- #elso { width: 300px; height: 300px; background-color: red; position: relative; bottom: 10px; left: 10px; #masodik { width: 100px; height: 100px; background-color: blue; position: absolute; bottom: 10px; right: 10px; #harmadik { position: absolute; bottom: 10px; right: 10px; --> </style> </head> <body > <div id="elso"> <div id="masodik"> <p id="harmadik">xyz</p> </div> <p>abc</p> </div> </body> </html> 3
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 <div> 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
-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 Webtechnológia gyakorlatok -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: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>html elemek</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css"> <!-- body { /*margin: 0px;*/ #nav { list-style-type: none; li { display: inline; width: 8em; text-decoration: none; padding:0px; margin:0px; --> </style> </head> <body > <ul id="nav"> <li><a href="#">menu1</a> <li><a href="#">menu2</a> <li><a href="#">menu3</a> <li><a href="#">menu4</a> 5
<li><a href="#">menu5</a> </ul> </body> </html> 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 <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