Gyakorló - 3 feladatai
Téma 1.
pageName második div szakaszt vegyük keskenyebbre, a jelkép mérete (kutya fotója) 50x50 px.
Ezen div szakasz magasságát, ha nem adunk meg magassági height éréket, az oda beillesztett fotó magassága határozza meg, azaz ennél kisebb nem lesz.
Css, azaz stíluslapon megváltoztatjuk a második div szakasz meghatározásait.
#pageName { width: 770px; margin-bottom: 15px; background-color: #0ff; }
#pageName h2 { text-align: right; padding-right: 20px;}
Téma 2.
Ahhoz, hogy IE és MA egyformán jelenítse meg, a pageName div szakasz magasságát.
A div szakasznak adunk, 0.1px alsó padding értéket.
#pageName { width: 770px; margin-bottom: 15px; padding: 0px 0px 0.1px 0px; background-color: #0ff; }
Téma 3.
A képet hozzuk lejjebb 5px mérettel, hogy ne érjen hozzá a div szakasz tetejéhez.
#pageName img {margin-top: 5px;}
Téma 4.
Húzzuk alá címsorainkat, minden div szakaszban. (fehér, sárga és kék színű, 2px vastag vonallal)
#siteName h1 { text-align: center; padding-top: 1.5em; border-bottom: 2px solid #fff; }
#pageName h2 { text-align: right; padding-right: 20px; border-bottom: 2px solid #fc0; }
#content h2 { text-align: left; padding-top: 1.5em; padding-left: 20px; border-bottom: 2px solid blue; }
Téma 5.
Az aláhúzási vonalak nem csak a szöveg alatt láthatók, hanem a div szakasz teljes szélességében.
Ahhoz, hogy a vonal rövidebb legyen, vagy csak a szöveg alatt jelenjen meg, két megoldást tesztelünk.
Első div szakasznál:
Címsornál, a jobbos és balos margin értékkel, rövidebbre vesszük a vonal hosszát.
Css, azaz stíluslapunkra, a következt kell beírni.
#siteName h1 { margin-right: 150px; margin-left: 150px;}
Második div szakasznál:
A h2-es címsornál, a span kezdő és záró címkével határoljuk be, vonal csak a szöveg alatt.
Módosítani kell, html és css lapunkat is.
Az xhtml – lapunkon. A címszó elé és mögé kell beírni a span címkéket.
<h2> <img src="ledi_50x50.jpg" alt="Kutya" width="50" height="50"/> <span> Kedvenc szórakozásom </span> </h2>
Css, azaz stíluslapon. (Létre kell hozni, egy újabb meghatározást (span)
Törölni kell a h2-es címsorra vonatkozó vonal meghatározást, piros színnel van kiemelve. Melyet a span címke meghatározáshoz kell beírni, kék színnel van kiemelve.
#pageName h2 { text-align: right; padding-right: 20px; border-bottom: 2px solid #fc0; }
span { border-bottom: 2px solid #fc0;}
Téma 6.
A címsor betűinek határozzunk meg, más betűszínt, color
Minden címsornak tetszés szerinti szín adható.
Most, csak a h1-es címsor betűinek adunk más színt, fehér színt.
#siteName h1 { color: #fff; text-align: center; padding-top: 1.5em; border-bottom: 2px solid #fff; }
Téma 7.
Eddig a böngésző program határozta meg, hogy a címsor betűinek mérete mekkora legyen.
Mostantól mi határozzuk meg, melyet megadhatunk betűméretben (em), képpont méretben (px)
Most, a címsor betűk méretét betűméretben adjuk meg. Jele: em;
Ez nem összekeverendő az em címkével < em >, mely a dőlt betűkre vonatkozik.
Bekezdéseinek betűméretét, képpont méretben adjuk meg. Jele: px;
font-size jelentése: betű-méret
H1-es mérete: 2.5em; pageName div szakasz h2-es: 1.7em; content div szakasz h2-es: 1.4em
#siteName h1 {font-size: 2em; color: #fff; text-align: center; padding-top: 1.5em; border-bottom: 2px solid #fff; }
#pageName h2 {font-size: 1.7em; text-align: right; padding-right: 20px; }
#content h2 {font-size: 1.4em; text-align: left; padding-top: 1.5em; padding-left: 20px; border-bottom: 2px solid
blue; }
Bekezdéseink betűmérete, a következő lesz:
p { font-size: 18px; padding: 0px 20px 0px 20px;}
Téma 8.
Összegezzük eddigi munkánkat.Az xhtml lapunk, body szakaszának tartalma:
<body>
<div id="container">
<div id="siteName">
<h1> Első weblapom </h1>
</div>
<div id="pageName">
<h2><img src="ledi_50x50.jpg" alt="Kutya" width="50" height="50"/>
<span> Kedvenc szórakozásom </span></h2>
</div>
<div id="content">
<h2> Fotózás </h2>
<p> <img src="villany_250x170.jpg" alt="Kutya" width="250" height="170"/> Első bekezdés: <br />Írjunk ide legalább öt sor szöveget. <br /> Például: <br />Kedvenc fotózásom, az est fényei. <br /> Energiatakarékos izzó. Nyári időszámítás. <br /> Így takarítjuk meg, egy kisebb falu energiáját. Éjfél után, hajnalodik, tovább takarékoskodhatunk. Ha tovább takarékoskodunk, tönkre megy az áramszolgáltató. Korrekció: emelik a villany árát.</p>
<h2> Fényképezőgép kiválasztása </h2>
<p class="utolsop"> Második bekezdés: <br /> <strong> Ide is írjunk, </strong> <br /> <em> legalább kettő sor szöveget. </em> </p>
</div>
</div>
</body>
Css, azaz stíluslapunk teljes tartalma:
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0px; background-color: #3c4f38; }
#container{width: 770px; margin: 10px 0px 0px 10px; padding-bottom: 15px; background-color: #fff;}
#siteName { width: 770px; height: 150px; margin-bottom: 15px; background-color: #0f0; }
#siteName h1 {font-size: 2em; color: #fff; text-align: center; padding-top: 1.5em; border-bottom: 2px solid #fff; }
#siteName h1 {margin-left: 150px; margin-right: 150px; }
#siteName { width: 770px; height: 150px; background-image: url("hegyoldal_770x150.jpg"); }
#pageName { width: 770px; margin-bottom: 15px; padding: 0px 0px 0.1px 0px; background-color: #0ff; }
#pageName h2 {font-size: 1.7em; text-align: right; padding-right: 20px; }
#pageName img {margin-top: 5px; }
#content { width: 730px; margin: 0px 0px 15px 20px; background-color: #fc0; }
#content h2 {font-size: 1.4em; text-align: left; padding-top: 1.5em; padding-left: 20px; border-bottom: 2px solid blue; }
#content img { float: left; padding-right: 15px;}
p { font-size: 18px; padding: 0px 20px 0px 20px;}
.utolsop {font-size: 0,7em; padding: 0px 20px 20px 20px;}
strong { font-weight: bold; }
em { font-style: italic; }
span { border-bottom: 2px solid #fc0;}
-------------------------------------------------------------------------------
Teszteljük az eddigi munkánkat.
Ha mindent jól írtunk be, akkor ugyan azt kell látnunk, mint a CONTROL - 3. böngészőből történő megnyitásakor.