*** 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="//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="//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


 

 

too young and innocent | an aegyo queen | twice | neo culture technology    *****    LÉGY A MAGAD ASZTROLÓGUSA! Regisztrálj oldalamra és én segítelek elsajátítani az asztrológia tudományát!    *****    Tanuld nálam az asztrológiát teljesen ingyen, vagy kérj részletes asztrológiai elemzést &#8222;BECSÜLET KASSZÁS&#8221; alapon!    *****    Új lovas szerepjáték! * Új lovas szerepjáték! * Lépj be a lovak csodálatos világába! Nevelj te is nálunk!    *****    Születési horoszkóp,3 év elõrejelzés,párkapcsolati elemzés ingyenes konzultáció,tájékoztatás az oldalon! kattints ide!!!    *****    Bûbájos Boszorkák - Charmed - Hírek - Extrák - Érdekességek - Charmed - Bûbájos boszorkák - Sok - sok infó - Charmed -    *****    Pénzkeresés az Interneten! Csak is kipróbáld, tesztelt módszerekkel, melyek tényleg fizetnek!    *****    Légy te is Farmasi tanácsadó! Kötetlen munka, befektetés nékül, minõségi termékek, jó kereseti lehetõség!    *****    Sztárok/Bulvár: Tudj meg friss pletykákat, híreket. Katt!    *****    Outsider - Gay - Creative - Rebel - Tolerant - Furry - Brony - Hipster - Gamer - Otherkin - Geek - Autistic    *****    Xtina Hungary - Minden, ami Christina Aguilera!    *****    Légy Te is AVON tanácsadó *** Nyereményjátékok *** Kereseti lehetõség *** Vásárolj kedvezményesen AVON termékeket!    *****    Nyerj ajándékszettet! Töltsd ki a kérdõívet és nyerj! *** Nyerj ajándékszettet! Töltsd ki a kérdõívet és nyerj!    *****    Jófogás Játékvásár - Jófogás Játékvásár - Jófogás Játékvásár - Jófogás Játékvásár     *****    FRPG &#9679; FANTASY SZEREPJÁTÉK &#9679;&#12300;&#914;&#923;SM&#923;IW&#12301; &#9679; FANTASY SZEREPJÁTÉK &#9679; EGY SZIGET + 24 MÁGUS &#9679; FANTASY SZEREPJÁT&Eacut    *****    Itt megtalálhatod a legfrissebb híreket, cikkeket, képeket a Golden Globe- és Oscar-díjas színésznõrõl! Katt!    *****    Furry Fandom - Antropomorf Állatok - Furry Fandom - Antropomorf Állatok - Furry Fandom - Antropomorf Állatok    *****    Légy Te is AVON tanácsadó *** AVON termékek *** Kereseti lehetõség *** Értékesítõ kollégákat keresek *** sminkek    *****    Esküvõi meghívók! Mindegyik kézzel készült, egyedi. Gyere, nézd meg az oldalamat.    *****    A legfrissebb Anime hírek , mindennap anime ajánló , mondocon képek , és hírek. Csatlakozz közösségünkhöz!