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


 

 

Karácsonyra szép AJÁNDÉK egy Személyre szóló asztrológiai elemzés! Kinyomtatva és bekötve örök emlék marad!    *****    ***MUNKALEHETÕSÉG!*** Új cég, új lehetõség, ingyenes regisztráció! Ugye tudod, mit jelent elsõk között lenni...?!    *****    A legfrissebb videojátékokról olvashatsz híreket! Elemezzük a Call of Duty sorozat legújabb részét World War II    *****    A RENDKÍVÜLI horoszkóp akciók Karácsonyig tartanak,most rendelj saját illetve szeretteid részére elemzéseket. Kattints    *****    Blog, Videojátékok, Szórakozás, Technika! Call of Duty: WWII és sok más!    *****    Légy te is egy Új Márka Elsõ tagjai között ahol Azonnali 28%haszonhoz juthatsz!Részletek:huncalifeandme@gmail.com    *****    Nyerj akár 1 millió forint értékû bitcoint. A játék ingyenes.    *****    Tudtátok, hogy a Csiga-biga gyerekdalban eredetileg szó sincs tûzrõl?    *****    LEGYÉL FARMASI TANÁCSADÓ VAGY VEZETÕ! OTTHONI MUNKA, MAGAS KERESETI LEHETÕSÉGGEL! HA MOST CSATLAKOZOL, MÉG NYERHETSZ IS!    *****    Mi mennyi 2018 - Árak, változások 2018 - minimálbér, családi pótlék, adókedvezmények 2018    *****    Légy te is a Farmasi csapaom tagja!!!    *****    Születési,baba,hold horoszkóp,elõrejelzés,párkapcsolati elemzés,fogamzási képlet! Ingyenes tanácsadás!Várlak!Kattints!    *****    A Dynasty és a TVD 8.évadából megismert színésznõ, Nathalie Kelley elsõ hazai rajongói lapja. KATT! KATT! KATT!    *****    WISE-VOGUE | SZISSZ ÉS KLAU BEAUTY-FASHION BLOGJA TERMÉKTESZTEKKEL, TIPPEKKEL, ÖTLETEKKEL A MINDENNAPOKRA // WISE-VOGUE    *****    Charmed - Új külsõ - Még több tartalom - Még több információ, érdekesség - CHARMED - Bûbájos boszorkák - Varázslat - Cha    *****    Karácsonyra AJÁNDÉKOZZ szeretteidnek, barátaidnak SZEMÉLYRE SZÓLÓ HOROSZKÓP ELEMZÉST 3 ÉVES ELÕREJELZÉSSEL!    *****    Szerinted melyik könyvet kellene elolvasnom? Melyik film érdemes arra, hogy megnézzem? - Mementoim.Blogspot.hu    *****    Születési horoszkóp + 3 év elõrejelzés + Felszálló holdcsomópont,Chiron, Lilith 2000 Ft. + ingyenes konzultáció. Most!    *****    Szerinted melyik könyvet kellene elolvasnom? Melyik film érdemes arra, hogy megnézzem? - Mementoim.Blogspot.hu    *****    Exkluzív Karácsonyi Ajándékok - Exkluzív Karácsonyi Ajándékok - Exkluzív Karácsonyi Ajándékok