Stíluslapok használata (CSS)

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "Stíluslapok használata (CSS)"

Fanni Ráczné
7 évvel ezelőtt
Látták:

1 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">  </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

2 <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: -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

3 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">  </style> </head> <body > <div id="elso"> <div id="masodik"> <p id="harmadik">xyz</p> </div> <p>abc</p> </div> </body> </html> 3

4 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 ( 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

5 -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" " <html> <head> <title>html elemek</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css">  </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

6 <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

Hasonló dokumentumok

HTML sablon tervezése

3. Laboratóriumi gyakorlat HTML sablon tervezése A gyakorlat célja: Egy összefüggő HTML illetve CSS nyelvet használó oldal tervezése, amely később sablonként is használható. Felkészüléshez szükséges anyagok: