לדף הבית
ספר אורחים
FAQ
טיפים
CSS
פלש
גאווה אפלט
גאווה סקריפט
גרפיקה
HTML

סמני עכבר העבירו את העכבר על השורות וראו כיצד משתנה סמן העכבר:
ך
בחלק ההד שימו את הסטייל:
<style type=text/css>
.c01 {cursor:inherit;}
.c02 {cursor:auto ;}
.c03 {cursor:crosshair ;}
.c04 {cursor:default ;}
.c05 {cursor:pointer;}
.c06 {cursor:move ;}
.c07 {cursor:e-resize ;}
.c08 {cursor:ne-resize ;}
.c09 {cursor:nw-resize ;}
.c10 {cursor:n-resize ;}
.c11 {cursor:sw-resize ;}
.c12 {cursor:se-resize ;}
.c13 {cursor:s-resize ;}
.c14 {cursor:w-resize ;}
.c15 {cursor:text ;}
.c16 {cursor:wait ;}
.c17 {cursor:help;}
</style>
ובחלק הבודי את הפקודות הבאות:
<table>
<tr><td class=c01>Cursor 01 - inherit</td></tr>
<tr><td class=c02>Cursor 02 - auto</td></tr>
<tr><td class=c03>Cursor 03 - crosshair</td></tr>
<tr><td class=c04>Cursor 04 - default</td></tr>
<tr><td class=c05>Cursor 05 - pointer</td></tr>
<tr><td class=c06>Cursor 06 - move</td></tr>
<tr><td class=c07>Cursor 07 - e-resize</td></tr>
<tr><td class=c08>Cursor 08 - ne-resize</td></tr>
<tr><td class=c09>Cursor 09 - nw-resize</td></tr>
<tr><td class=c10>Cursor 10 - n-resize</td></tr>
<tr><td class=c11>Cursor 11 - sw-resize</td></tr>
<tr><td class=c12>Cursor 12 - se-resize</td></tr>
<tr><td class=c13>Cursor 13 - s-resize</td></tr>
<tr><td class=c14>Cursor 14 - w-resize</td></tr>
<tr><td class=c15>Cursor 15 - text</td></tr>
<tr><td class=c16>Cursor 16 - wait</td></tr>
<tr><td class=c17>Cursor 17 - help</td></tr>
</table>

Cursor 01 - inherit
Cursor 02 - auto
Cursor 03 - crosshair
Cursor 04 - default
Cursor 05 - pointer
Cursor 06 - move
Cursor 07 - e-resize
Cursor 08 - ne-resize
Cursor 09 - nw-resize
Cursor 10 - n-resize
Cursor 11 - sw-resize
Cursor 12 - se-resize
Cursor 13 - s-resize
Cursor 14 - w-resize
Cursor 15 - text
Cursor 16 - wait
Cursor 17 - help


רקע שלא זז גם בשכבה לא רק לדף ניתן ל"הקפיא את הרקע.. בפקודה פשוטה מאוד...:
<BODY background="images/bg.gif" bgproperties="fixed">
אבל אפשר גם בתוך הדף לתת אשליות שונות של רקעים לDIV למשל..
בחלק ההד שמתי את הקוד הבא:

div.test {
height: 150px;
overflow: auto;
width: 145px;
border: 1px solid #000000;
position: relative; background-image: url('pix/bg_birthday.jpg');
}


ובחלק הבודי הפקודות מתחת לכל מראה.. שימו לב חסר תג סוגר אותו יש להוסיף !!!
תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן
תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן

תוכןתוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן

תוכןתוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן
תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן תוכן

<DIV class=test style="BACKGROUND-ATTACHMENT: fixed" > <DIV class=test> <DIV class=test style="BACKGROUND-REPEAT: no-repeat">

הוסיפו סטייל לטפסים:
<form>
<input type="text" style="font-family:verdana; font-size:12px; color:blue; background-color:ffffcc;">
<br>
<select style="font-family:verdana; font-size:12px; color:blue; background-color:ffffcc;">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
<input type="submit" value=" Go! " style="font-family:verdana; font-size:12px; color:blue; background-color:ffffcc;">
<form>

<textarea style="background-color:000000; color:ffffff; font-family:verdana,arial,helvetica; font-size:10pt;">White Text!</textarea>
<input type="submit" value="This is neat!" style="font-family:verdana; color:ffffff; font-size:12pt; background:000088;">

ריווח אותיות רק בעזרת הסטייל
התוצאה: הקוד:
Output Text
<span style="word-spacing: 10px;"> Output Text </span>
Output Text
<span style="letter-spacing: 10px;"> Output Text </span>
Output Text 1
Output Text 2
<span style="line-height: 10px;"> Output Text 1
<br>Output Text 2</span>
העבירו עכבר עלי
<span onmouseover="style.color='red';" onmouseout="style.color='blue';"> Some Text </span>
Some Text
<span style="position:relative;width:190;height:10;filter:glow(Color=#009966,Strength=1)"> Some Text </span>
 Border in a Box 
<SPAN
style="BORDER-RIGHT: #990066 1px dotted; BORDER-TOP: #990066 1px dotted; BORDER-LEFT: #990066 1px dotted; BORDER-BOTTOM: #990066 1px dotted">&nbsp;Border
in a Box&nbsp;</SPAN>
דNotice the underline? This is not defined in a font or underline tag, but the table cell itself!!
<table>
<tr>
<td style="background:000000; font-family:arial;
text-decoration:underline;"><FONT FACE="Verdana, Arial, Helvetica" SIZE="1"
COLOR="#ffffff"><b>Notice the underline? This is not defined in a font or
underline tag, but the table cell itself!!</font></td>
</tr>
</table>
שימוש פשוט ונקי בטופס ליצירת תפריט:
<form name="nav">
<select name="link" onChange="location=document.nav.link.options[document.nav.link.selectedIndex].value;" value="GO">
<option selected>Choose Destination</option>
<option value="http://www.bravenet.com">Bravenet.com</option>
<option value="http://www.bravenet.com/reviews/archives/tips.php">Tips & Tricks Archive</option>
<option value="http://www.bravenet.com/members/helpcenter.php">Bravenet.com Help Center</option>
</select>
</form>
This text SHOULD glow...
<table style="filter:SHADOW(color=gray, strength=4)">
<tr><td>
<font style="font-family: Arial Black; font-size:18px; color: black;">
This text SHOULD glow...
</font>
</td></tr></table>
Is this an image? No!
<table style="filter:SHADOW(strength=4)">
<tr><td>
<font style="font-family: Arial Black; font-size:32px; color: red;">
Is this an image? No!
</font>
</td></tr></table>
   


איך נסדר את הרקעים שלנו?


איך הסגנון הצף - להתארגנות סביב תמונות.. ועוד... כאשר אנו מכניסים תמונה ולא רוצים שהיא תעמוד סתם בחלק של הדף , אלא תשתלב בתוך הטקסט והכל יראה כחלק אחד רציף.. ובכל סגנון הסטייל מאפשר גם את זה.. כך:
 <img src="images/fruit.gif" width="80" height="60" style="float:left">
כל הטקסט שיהיה סביב לתמונה יתארגן יפה מסביבה.
ניתן גם לתת מידה של אוויר סביב לתמונה כך שהכיתוב לא יצמד מידי ..
הקוד יהיה :style="float: left" או " style="float: right"






עדיין בעבודה.....
Cool Archive
<SPAN STYLE="background:red">Cool Archive</SPAN>

<INPUT TYPE="submit" STYLE="background-color:navy; color:yellow;">


<INPUT TYPE="submit" STYLE="background-image: url(images/sample.jpg);">


Welcome!

<H1 STYLE="letter-spacing:20pt;">Welcome!</H1>

TopHosts.Com

<DIV STYLE="border-top: 2 solid #00CCFF;
border-left: 2 solid #00CCFF;
border-bottom:2 solid #006699;
border-right: 2 solid #006699;
background-color:#0099CC;
width:75;">
<A HREF="http://www.tophosts.com" STYLE="color:white;">TopHosts.Com</A>
</DIV>


Once upon a time... <span style="font-size:300%; float:left">O</span>nce upon a time...

Once upon a time,.. <span style="font-size:300%; color:brown; float:left">O</span>nce upon a time,..

Once upon a time... <span style="font-size:300%; background-color:lightyellow; border:1px solid black; float:left">O</span>nce upon a time...

קישורים מהירים

סמני עכבר
רקע בשכבה
רקע בדף
סטייל לטפסים
ריווח אותיות
ומשחקים במילים
הסגנון הצף