*** Kezdőlap ***

 


 

Időjárás


Látogató van itt





 

Üzenőfal-hírfal-reklámfal.

Ha szeretnél ilyet,vagy

hasonlót küldj e-mailt,

és megbeszélük!

 

 A barátság kertje.

A barátságot

mondhatjuk

egy kertnek,

melybe sok-sok

kis magot

elültethetsz.

Kedvesség

és nevetés a locsolás,

s a szeretet lesz

a kinyíló virág.

Türelem, megértés,

gyengéd figyelem

napsütésnél

jobban melegítenek,

Így nem hervad a

szeretet virága,

s aki ültette,

örökké csodálja.

 

Olvasgató.


 

Click here!>>>

>>> ****


 

Oldal Bejelentkezés
Felhasználónév:

Jelszó:
SúgóSúgó
Regisztráció
Elfelejtettem a jelszót
 

CBOX- CSEVEGŐ
 

Oszd meg, mentsd el! - TurboBookmark.com

Dalszöveg, zene kereső

Menetrend kereső

Tanúld velem a CSS-kód alap szerkesztést

A CSS egy olyan leírónyelv, melynek segítségével különböző stíluslapokat hozhatunk létre és ágyazhatunk be HTML honlapjainkba. Ezek a stíluslapok befolyásolják az oldal megjelenését: meghatározhatjuk velük, hogy az egyes HTML elemek mekkora méretben, milyen színnel jelenjenek meg. Mi is az a CSS ? A CSS (Cascading Style Sheets) egy olyan leírónyelv, melynek segítségével különböző stíluslapokat hozhatunk létre és ágyazhatunk be HTML honlapjainkba. Ezek a stíluslapok befolyásolják az oldal megjelenését (design-ügyileg kiváló nyelv), meghatározhatjuk vele, hogy az egyes HTML tagek (bekezdések, táblázatok, címsorok stb.) hogyan jelenjenek meg, meghatározhatjuk a méretüket, színüket, stílusukat, típusukat stb. Hogyan szerkesszük: Fontos megemlíteni, hogy a CSS nyelv magában nem sokat ér, ha valaki arra adja a fejét, hogy megtanulja és még nem ismeri a HTML-t legalább alapszinten, az elsőként sajátitsa el a HTM-L szerkesztését, és csak azután (miután a HTML-t elsajátítottad) fogj bele a CSS-be! 

Mutatom Példában:

HTM-L alap:

<html>
<head>
<title>Példa HTML-lel</title>
</head>
<body>
<ul>
<font color="#FF0000"><li>Első felsorolás első sora</font></li>
<font color="#FF0000"><li>Első felsorolás második sora</font></li>
</ul>
<font color="#FF0000"><p><font size="6">Első bekezdés</font></p>
<ul>
<font color="#FF0000"><li>Második felsorolás első sora</font></li>
<font color="#FF0000"><li>Második felsorolás második sora</font></li>
</ul>
<p><font size="6">Második bekezdés</font></p>
</body>
</html>

CSS alap példa:

<html>
<head>
<title>Példa CSS-sel</title>
<style type ="text/css">
li { color: #FF0000 }
p { font-size: 28px }
</style>
</head>
<body>
<ul>
<li>Első felsorolás első sora</li>
<li>Első felsorolás második sora</li>
</ul>
<p>Első bekezdés</p>
<ul>
<li>Második felsorolás első sora</li>
<li>Második felsorolás második sora</li>
</ul>
<p>Második bekezdés</p>
</body>
</html>


Mint láthatjuk, a dokumentum sokkal áttekinthetőbb. A HTML-ben a betűméretet csak 1-7 -ig választhatjuk ki, de a CSS-ben annyi Pixel-t (px) adunk meg, amennyit akarunk. Már egy ilyen kicsi dokumentumnál is tapasztalhatjuk a CSS előnyeit, és ez még nem minden..........

Linkelés CSS kóddal: 

Link: Aniko Webdesign World
<html>
<head>
<style type="text/css">
a {text-decoration:none;}
</style>
</head>

<body>
<p>Link: <a href="http://www.anikovilaga.gportal.hu">ANIKO WEBDESIGN WORLD</a></p>
</body>

</html>


CSS kódok Gportalhoz: Lépj be a Vezérlő (Root) menübe. Innen pedig a Stílus és felületbe. Stílusod állítsd Rebel-re (ezt nagyon jó lehet alakítani.) A Fejlécnél pedig a Logó filehoz töltsd fel a fejléced. Értelemszerűen a Háttérkép filehoz a háttérképed (a szürke csík elkerülése végett.) Oldalháttér: Ide tölsd fel a háttered.

Átlátszó modul:

<style type="text/css">
input {
backround-color: transparent;
font-family: Courier New;
font-size: px;
color: #ffffff;
border-left: 1px dotted #000000;
border-right: 1px dotted #000000;
border-top: 1px dotted #000000;
border-bottom: 1px dotted #000000;}
td.modtitle {
backround-color: transparent;
font-family: Courier New;
font-size: 12px;
color: #ffffff;
border-bottom: 1px dotted #000000;
border-top: 1px dotted #000000;}
td.modbody {
backround-color: transparent;
font-family: Courier New;
font-size: 12px;
color: #000000;}
-->
</style>

 

A lényeg, hogy a transparent szót írd be mindenhová, mivel ez teszi átlátszóvá a részeket. /De ha meggondolod magad és mégsem átlátszó oldalt akarsz, akkor írd át színkódosan a transparentet pl. #420000/


Pöttyös keret kép köré CSS kóddal:

<style type="text/css">
a:link img, a:visited img { /*kép link*/
border: 2px dotted #D00000; /* keret,keret méret,keret típus, keret szín*/
background-color: #414141; /* a kép háttér színe */
padding: 0px; /* háttérszín. De csak akkor látszik, ha 0-nál nagyobb szám.*/
filter: alpha(opacity=90); /* átlátszóság IE-ben */
-moz-border-radius: 0em; /* kép sarkainak ívelése Firefoxban */
-webkit-border-radius: 0em; /* kép sarkainak ívelése IE-ben */
opacity: 1.0;} /* átlátszóság Firefoxban */
a:hover img { /* a linkelt kép, ha ráviszed az egeret */
border: 2px dotted #414141; /* keret,keret méret,keret típus, keret szín*/
background-color: #D00000; /* a kép háttér színe */
padding: 0px; /* háttérszín. De csak akkor látszik, ha 0-nál nagyobb szám.*/
filter: alpha(opacity=60); /* átlátszóság IE-ben */
-moz-border-radius: 0em; /* kép sarkainak ívelése Firefoxban */
-webkit-border-radius: 0em; /* kép sarkainak ívelése IE-ben */
opacity: 0.6;} /* átlátszóság Firefoxban */
-->
</style>

pld:


Link effektek CSS kóddal:

Ez egy LINK



Megjegyzés: a:hover -nek a a:link és a a:visited után kell következnie a CSS kódokban!

Megjegyzés: a:active -nak a a:hover után kell következie a CSS kódokban!

<html>
<head>
<style type="text/css">
a:link {color:#FF0000;} /* nem látogatott link,vagyis normál */
a:visited {color:#00FF00;} /* látogatott link */
a:hover {color:#FF00FF;} /* ilyen a link, ha ráviszed az egeret */
a:active {color:#0000FF;} /* aktív link */
</style>
</head>

<body>
<p><b><a href="http://www.aniko451.gportal.hu" target="_blank">Ez egy LINK</a></b></p>
<p><b>Megjegyzés:</b> a:hover -nek a a:link és a a:visited után kell következnie a CSS kódokban! </p>
<p><b>Megjegyzés:</b> a:active -nak a a:hover után kell következie a CSS kódokban!</p>
</body>
</html>

 

A webcím helyett írd át a sajátod, amit linkként akarsz látni. Hasznos tanulgatást minden kedves érdeklődőnek.

Hamarosan töltöm fel a többi tananyagot is! 

 
BlogPlusz
 
Hírlevél
E-mail cím:

Feliratkozás
Leiratkozás
SúgóSúgó
 

Oldal címke [Page tags]
 


*Kedvenc oldalak* 


Dieter Aniko Web Design World Joli személyes oldala Rubin jogvédett oldala BélaMiklós a nyugdíjas http://myanni.tvn.hu/fc/567.jpg
 

Cserék
http://myanni.tvn.hu/fc/567.jpg http://myanni.tvn.hu/fc/567.jpg http://myanni.tvn.hu/fc/567.jpg http://myanni.tvn.hu/fc/567.jpg
 http://myanni.tvn.hu/fc/567.jpg http://myanni.tvn.hu/fc/567.jpg http://myanni.tvn.hu/fc/567.jpg
 http://myanni.tvn.hu/fc/567.jpg
 http://myanni.tvn.hu/fc/567.jpg http://myanni.tvn.hu/fc/567.jpg


 

 

 
ÉRKEZŐK
Indulás: 2007-01-09
 
 



Névnapkereső
Írj be egy nevet
vagy névtöredéket:

 

Powered by UsersOnlineCounter

 

Free Backlinks

Kostenlose Backlinks bei http://www.backlink-clever.de  


 


Hírmondó

Budapest Most


 

 

Portálépítés és portáldíszítés kezdõknek és haladóknak! Rengetek leírás, JavaScriptek , CSS ,HTML kódok,Naptár,Design!    *****    INGYENES HOROSZKÓP ELEMZÉS, ASZTROLÓGIA OKTATÁS! CSAK REGISZTRÁLNOD KELL!    *****    Re-Startoltunk! Egy SZEREPJÁTÉK, amelybe bármikor becsatlakozhatsz! Légy te is H&#245;s! H&#245;sregék RPG    *****    Erdõszéli tudósítónk jelenti: Marculábi cica éjszakai felfedezõútra indult! Gyertek ti is! Részletek a Mesetárban!    *****    Születési horoszkóp 1000 Ft. 3 év elõrejelzés 1000 Ft. Párkapcsolati elemzés 1000 Ft. Óriási nyári akció csak nálam!!!    *****    Lore rajzai &#9830;Lore rajzai &#9830;Lore rajzai &#9830;Lore rajzai &#9830;Lore rajzai &#9830;Lore rajzai &#9830;Lore rajzai &#9830;Lore rajzai &#9830;Lore rajzai &#9830;Lor    *****    Bûbájos boszorkák - Charmed - Extrák - Érdekességek - Cikkek - Interjúk - Bûbájos boszorkák - Charmed - Charmed -Játékok    *****    Re-Startoltunk! Egy SZEREPJÁTÉK, amelybe bármikor becsatlakozhatsz! Légy te is Hõs! Hõsregék RPG    *****    Filmek itt!    *****    Ha szeretsz filmet nézni klikk ide! Klikk klikk    *****    "Revealing the truth is like setting a match on fire. It can bring light or set your world on fire." | PROJECT D.C.    *****    Megújult külsõvel vár Magyarország egyetlen Olicity rajongói lapja! Mindennap friss hírek a sorozatról és a párosról!    *****    Készítsd el saját horoszkópod ingyen,csak kattints!Fantasztikus akciók a fõoldalon,ezt nem szabad kihagyni! Látogas meg!    *****    BLOG, STORYK, KRITIKÁK, BESZÁMOLÓK, KEDVENCEK, DIVAT, SZÉPSÉGÁPOLÁS, LAKBERENDEZÉS, MINDEN AMI EGY BLOGRA KELL!    *****    Nyári akció,minden horoszkóp megrendelés 1000 Ft. Rendelj most szeretteidnek ajándék horoszkópot.Várlak az oldalamon!    *****    Gréti. 23. ExmisszusGyakornok. Jégkorong. Ottawa Senators. Jean-GabrielPageau. ErikKarlsson. Írás. Olvasás. Blog. (:    *****    Azt mondják, hogy amikor egy fõnix meghal, a hamvaiból egy sokkal szebb, sokkal erõsebb madár születik&#8230;    *****    Fantasztikus nyári akció,minden horoszkóp megrendelés 1000 Ft. Rendelj most szeretteidnek ajándékot.Várlak az oldalamon!    *****    "Revealing the truth is like setting a match on fire. It can bring light or set your world on fire." | PROJECT D.C.    *****    #forpony#forpony #forpony #forpony #forpony #forpony #forpony #forpony #forpony #forpony