|
Kezknek-haladknak egyarnt.
Adamis 2013.01.06. 19:04
|
Tanld velem a CSS-kd alap szerkesztst
A CSS egy olyan lernyelv, melynek segtsgvel klnbz stluslapokat hozhatunk ltre s
gyazhatunk be HTML honlapjainkba. Ezek a stluslapok befolysoljk az oldal megjelenst:
meghatrozhatjuk velk, hogy az egyes HTML elemek mekkora mretben, milyen sznnel jelenjenek meg. Mi
is az a CSS ? A CSS (Cascading Style Sheets) egy olyan lernyelv, melynek segtsgvel klnbz
stluslapokat hozhatunk ltre s gyazhatunk be HTML honlapjainkba. Ezek a stluslapok befolysoljk
az oldal megjelenst (design-gyileg kivl nyelv), meghatrozhatjuk vele, hogy az egyes HTML tagek
(bekezdsek, tblzatok, cmsorok stb.) hogyan jelenjenek meg, meghatrozhatjuk a mretket, sznket,
stlusukat, tpusukat stb. Hogyan szerkesszk: Fontos megemlteni, hogy a CSS nyelv magban nem sokat
r, ha valaki arra adja a fejt, hogy megtanulja s mg nem ismeri a HTML-t legalbb alapszinten, az
elsknt sajtitsa el a HTM-L szerkesztst, s csak azutn (miutn a HTML-t elsajttottad) fogj bele
a CSS-be!
Mutatom Pldban:
HTM-L alap:
<html>
<head>
<title>Plda HTML-lel</title>
</head>
<body>
<ul>
<font color="#FF0000"><li>Els felsorols els sora</font></li>
<font color="#FF0000"><li>Els felsorols msodik sora</font></li>
</ul>
<font color="#FF0000"><p><font size="6">Els bekezds</font></p>
<ul>
<font color="#FF0000"><li>Msodik felsorols els sora</font></li>
<font color="#FF0000"><li>Msodik felsorols msodik sora</font></li>
</ul>
<p><font size="6">Msodik bekezds</font></p>
</body>
</html>
CSS alap plda:
<html>
<head>
<title>Plda CSS-sel</title>
<style type ="text/css">
li { color: #FF0000 }
p { font-size: 28px }
</style>
</head>
<body>
<ul>
<li>Els felsorols els sora</li>
<li>Els felsorols msodik sora</li>
</ul>
<p>Els bekezds</p>
<ul>
<li>Msodik felsorols els sora</li>
<li>Msodik felsorols msodik sora</li>
</ul>
<p>Msodik bekezds</p>
</body>
</html>
Mint lthatjuk, a dokumentum sokkal ttekinthetbb. A HTML-ben a betmretet csak 1-7 -ig
vlaszthatjuk ki, de a CSS-ben annyi Pixel-t (px) adunk meg, amennyit akarunk. Mr egy ilyen kicsi
dokumentumnl is tapasztalhatjuk a CSS elnyeit, s ez mg nem minden..........
Linkels CSS kddal:
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 kdok Gportalhoz: Lpj be a Vezrl (Root) menbe. Innen pedig a Stlus s felletbe. Stlusod
lltsd Rebel-re (ezt nagyon j lehet alaktani.) A Fejlcnl pedig a Log filehoz tltsd fel a
fejlced. rtelemszeren a Httrkp filehoz a httrkped (a szrke csk elkerlse vgett.)
Oldalhttr: Ide tlsd fel a httered.
tltsz 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 lnyeg, hogy a transparent szt rd be mindenhov, mivel ez teszi tltszv a rszeket. /De ha
meggondolod magad s mgsem tltsz oldalt akarsz, akkor rd t sznkdosan a transparentet pl.
#420000/
Pttys keret kp kr CSS kddal:
<style type="text/css">
a:link img, a:visited img { /*kp link*/
border: 2px dotted #D00000; /* keret,keret mret,keret tpus, keret szn*/
background-color: #414141; /* a kp httr szne */
padding: 0px; /* httrszn. De csak akkor ltszik, ha 0-nl nagyobb szm.*/
filter: alpha(opacity=90); /* tltszsg IE-ben */
-moz-border-radius: 0em; /* kp sarkainak velse Firefoxban */
-webkit-border-radius: 0em; /* kp sarkainak velse IE-ben */
opacity: 1.0;} /* tltszsg Firefoxban */
a:hover img { /* a linkelt kp, ha rviszed az egeret */
border: 2px dotted #414141; /* keret,keret mret,keret tpus, keret szn*/
background-color: #D00000; /* a kp httr szne */
padding: 0px; /* httrszn. De csak akkor ltszik, ha 0-nl nagyobb szm.*/
filter: alpha(opacity=60); /* tltszsg IE-ben */
-moz-border-radius: 0em; /* kp sarkainak velse Firefoxban */
-webkit-border-radius: 0em; /* kp sarkainak velse IE-ben */
opacity: 0.6;} /* tltszsg Firefoxban */
-->
</style>
pld:
Link effektek CSS kddal:
Ez egy LINK> Megjegyzs: a:hover -nek a a:link s a a:visited utn kell kvetkeznie a CSS kdokban!
Megjegyzs: a:active -nak a a:hover utn kell kvetkezie a CSS kdokban!
<html>
<head>
<style type="text/css">
a:link {color:#FF0000;} /* nem ltogatott link,vagyis norml */
a:visited {color:#00F
|
LPJ TOVBB >>>>> KLIKK!!!!!
|
AJÁNLOM AZ OLDALT
|HOME: 
Friss bejegyzsek
