|
Kezőknek-haladóknak egyaránt.
Adamis 2013.01.06. 19:04
|
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-Wedesign-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:#00F
|
LÉPJ TOVÁBB >>>>> KLIKK!!!!!
|
AJÁNLOM AZ OLDALT
|HOME: 
Friss bejegyzések
