1. Régi mószer szerint:
Be kell cimkébe írni a:
<.... style="background:yellow;color:#ff0000;">
karaktersorozatot. Ez adja meg a
háttér,
a szöveg színét.
A szöveg színét három bájt (RGB) adja meg, hexadecimálisan.
2. CSS használatával
Hogyan lehet több oldal stílusát (címsor, szöveg betű- és háttérszín, betűméret)
egyszerre megadni?
Az oldal fejrészébe el kell helyezni a
<link rel="stylesheet" href="7_05.css">
linket, ez hívja be a külön, a html mellé elhelyezett
7_05.css nevű fájlt.
Ez állítja
a hátteret enyhén szürkére (background: #dddddd),
a betűszíneket enyhén pirosra (color:#990000), a
linket zöldre és aláhúzás nélkülire, a látogatottakat pirosra. (Alapértelmezésben a link kék,a látogatott piros; mind a kettő aláhúzott).
- Hogyan lehet megoldani, hogy minden 1. szintű cím kék és dőlt betűs legyen?
Az aktuális css-be bekerül a
h1,h2
{
font-style: italic;
color: blue;
}
Ettől az első (és második) szintű címsor dőlt lesz és kék. A többi címsor (meg ami nem szerepel a definiáló css-ben) változatlanul a böngésző alapértelmezése szerint jelenik meg.
Fontokról
itt lehet többet megtudni;
- Azt, hogy ha rámegyünk az egérrel egy linkre, akkor kék háttér előtt sárga legyen,
egyébként pedig kék, és egyik esetben sem aláhúzott?
Az aktuális css-be bekerül a
a:link { text-decoration: none; color: blue; }
a:visited { text-decoration: none; color:red; background:gray; }
a:hover { color: yellow; text-decoration: none; background:navy; }
karaktersorozat;
- Hogyan lehet osztályokat definiálni?
Be kell írni az aktuális xy.css-be a
.figyelem {color: red; background-color: aaa; font-weight: bold;}
.figy2 {
color: blue;
background-color: eee;
font-size: 200%;
}
karaktersorozatot. Ezekel a "figyelem" és a "figy2" osztályokat definiáltuk;
hivatkozni rá, (használni) a
<p class="figyelem">
tag-el lehet.
- Hogyan lehet egy oldal hátterének képet használni?
Be kell írni a xy.css-be a "body"-t definiáló
body {
background-image: url("ez_legyen_a_hatter.jpg");
}
karaktersorozatot. A képnek persze elérhetőnek kell lennie.
3. Menüvezérelt oldal
Készítsen (a saját tárhelyén, 110412 nevű almappába) három különböző (tartalmú) menüvezérelt oldalt az alábbi
példa alapján! (6 pont)
4. Ellenőrzés
- Hogyan lehet ellenőrizni az oldalunk
html (4 pont)
és
CSS stíluslapunk szintaxisának helyességét? (4 pont)
- Érdemes először csak egy egyszerű oldalt ellenőrizni,
fölrakni a két önellenőrző linket:
utána ezt feltölteni a tartalmakkal, ismételt ellenőrzés mellett!
5. Feladat
Készítsen a fentiek felhasználásával menüvezérelt (három aloldalas) weboldalt és
küldje el a webcímét a pgyula.feladat@gmail.com címre az óra végéig! (css elemenként ~ 1, max. 6 pont; menüvezérlés 6 pont)
Linkek:
http://hu.wikipedia.org/wiki/CSS
http://www.goer.org/HTML/intermediate/margins_and_padding
http://www.w3schools.com/css/css_examples.asp
http://www.w3.org/Style/Examples/007/menus.html
http://validator.w3.org
http://jigsaw.w3.org/css-validator/