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!
| 
AJÁNLOM AZ OLDALT
