מה זה CSS? ובכן.. בתרגון חופשי :גליונות סגנונות מדורגים , ומה זה אומר? - שימוש בתגיות כמעין "שפה" להגדרת עיצוב פריטים בדף.
בעזרת "תגיות: אילו ניתן להגדיר איך יראה הדף.. הטקסט, הפסקה או כל חלק אחר. השימוש הוא או בתוספת הניתנת לתגיות HTML שאנו כבר מכירים , או בנתינת שם משלנו להגדרת כל חלק בדף.
למשל.. אני יכולה להחליט שההגדרה תהיה "ליאורה" ובכל פעם שאחל את הגדרת "ליאורה" על חלק בדף ,הוא יקבל את הנתונים שהכתבתי לו.
נשמע מסובך?? ממש לא.. בואו נתחיל בהסברים ממש ואז הכל יראה מובן יותר..

קצת תעלול לתאבון
עוד דוגמה שלימוש ב CSS,
לעורר סקרנות ועניין
ב CSS קיימים שני אוביקטים להגדרת העיצוב: 1 .אלמנט CUSTOM כלאמר "מנהג" בו נבחר אנו כיצד לכנות את הפקודה וכיצד תראה בדף.
2 . הוא אלמנט תגי ה HTML - כאן נחל על התגים הקימים את התצורה בהם יופיעו.
וקיימים שלוש צורות של הכנסת CSS לדף:
INLINE = כאשר ניתן הגדרת עיצוב מקומית בתוך הדף לאחת הפקודות הקימות,
שימוש בתגי <STYLE> </STYLE> בראש הדף , שם נגדיר את כל הגדרות העיצוב לדף זה.
3 . שימוש בדף סיגנון חיצוני אותו נקשר בפקודה לכל הדפים שנרצה שיושפעו.. היתרון הוא שכאשר נבצע שינוי הוא יתבצע מידית בכל אותם דפים.


אבל לפני הכל כללי התחביר...

1 - שיטת הסטייל בראש הדף
SINTAX-כללי תחביר

המבנה התחברי שנוי משלושה חלקים..:) : הבורר, המאפינים , והערך העיצובי. להמחשה הנה דוגמה:

<style type="text/css">
<!--
body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #003399}
-->
</style>


כאן , בין תגי ה STYLE אמרתי לחלק הבודי שאני רוצה שיופיע בפונט אריאל , בצבע כחול ובגודל 14.
שימו לב לכתיבה, נעבור שלב שלב..
ראשית תגי ה STYLE - תג פותח ותג סוגר.
אחריו סימני ה !-- ההערה , המחביאים את התג מדפדפנים ישנים שאינם יכולים לקרוא אותו.. יש גם כאלה....
לאחר ה BODY נפתחת שורת הגדרות העיצוב, היא חייבת להיות כלואה בין סמני הסוגריים המסולסלים {} כשלאחר כל פקודה יבוא סימן נקודה פסיק ; להגדרת סיומה. מלבד הפקודה האחרונה.
שימו לב : הבורר הוא ה BODY
המאפינים הוא הצבע או הגודל,
והערך הוא המספר 14 לגודל ו #003399 לצבע... ברור יותר??
סוגים אחרים של בוררים מסוג HTML הם לדוגמה:

body {color: black}
p {font-family: "sans serif"}
p{text-align: center;color: black;font-family: arial}
h1, h2, h3, h4, h5, h6 {color: green}

וכו...



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

<style type="text/css">
<!--
body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #003399}
.name1 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; background-color: #FFFFCC; border: #FF6600; border-style: solid; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin}
-->
</style>

וכאן מה קרה??
הגדרתי את שם הבורר ואמרתי לו שיציג פונט אריאל בגודל 10 הפעם, ועם רקע בצבע נוסף. כמו כם נתתי לו הגדרות למסגרת סביבו בקו דק ובצבע אחר. החשוב מכל הוא: בבורר שאנו בוחרים את שמו חשוב לשים נקודה לפניו. נקודה זו משמשת ציון לדפדפן ואומרת לו לאן להביט..מה לחפש.. זה כמו ID של הבורר... רואים את הנקודה לפני המילה NAME???

דוגמה נוספת של ניצול תגי HTML קיימים אך במצב אחר אני לא רוצה שכל בעלי התג הזה יקבלו את האפיון שאתן , אלא רק חלק מהם.. אז אתן לאחר התג המוער - נקודה - ואחריה שם שאבחר, כך אוכל לשייך את העיצוב רק על חלק מהתגים.... למשל:

<style type="text/css">
<!-- p.right {text-align: right}
p.center {text-align: center}

-->
</style>

השיוך יהיה בפקודה הבאה:

<p class="right">
This paragraph will be right-aligned.
</p>

<p class="center">
This paragraph will be center-aligned.
</p>

לסיכום החלק הזה בואו נבין ןנעשה סדר בדברים:
1.את פקודת הסטייל הזו יש לשים בחלק ההד בין תגי STYLE פותח וסוגר.
2. את הסטייל שקבענו נוכל להחל על חלקים שונים בדף.
אם בחרנו אחת מפקודות ה HTML המוכרות - הרי שכל החלקים המופיעים בין הפקודות שבחרנו יקבלו את העיצוב שקבענו.
3 . אם נתנו שם כל שהוא לבורר נוכל להחל אותו על חלקים שונים בדף בעזרת הפקודה CLASS="הבורר". למשל:
<p class="center">



2 . שיטת ה INLINE
INLINE STYLE בשיטה זו נוכל לתת עיצוב מקומי בלבד.. נכון , לעיתים מוגבל יותר ויש בו הרבה כתיבה, מה גם שהוא עובד אך ורק על החלק בו אנו מטפלים ברגע זה.. אך לעיתים זה כל מה שנחוץ..
בואו נראה כיצד זה עובד...
המבנה הבסיסי יהיה:
<TAG STYLE="PROPERTY: VALUE"> ... </TAG>

התג = כמעט כל תג HTML שאנו מכירים
ה PROPERTY = מה אנו רוצים שישתנה.. הפונט?=FONT הצבע? = COLOR וכו
ה- VELUE = הערך למה ישתנה = Arial... red... bold.. וכו..
מובן?
בואו נגיד שאני רוצה רק את השורה הזו הכתב בולט... פשוט.. אכניס את תגי ה B.. נכון? ובכן כך זה עובד גם הלאה..
אם ארצה
נגיד שאני רוצה שכתב בגודל H1 יקבל צבע מסוים,רקע מסוים מסגרת וכו.. אתן את הפקודה בצורה הבאה:

<h1 ALIGN="center" STYLE="background: #000080; font: 36pt/40pt courier; font-variant: small-caps; border: thick dashed blue">Welcome to my home page!</h1>

והתוצאה:

Welcome to my home page!

כך נוכל לתת סטייל פנימי לכל שורה ופסקה בדף. פשוט ניתן את תוספת ה STYLE בתוך התג ואת הערך העצובי בו אני רוצים.
ברור??
או בואו נלך שלב שלב בקטנות...
בואו נגיד שאנחנו רוצים שורה בפונט אריאל , צבע אדום וכתב בולט..
כך תראה הפקודה:<b><font face="Arial, Helvetica, sans-serif" color="#FF0000">שורה</font></b>
במקום כל אילו נוכל לקצר ולרשום:

<P style="color:#FF0000;font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000>Red,bold, arial.</P>

זה מה שנקבל:
טקסט אריאל , אדום ובולט
או אם נרצה כתב כתום על רקע ירוק:

<P style="background-color:#DDF4DD;color:#FFCC00;text-align: center;">
Red, center aligned text with a grey background
</P>


Red, center aligned text with a grey background




סטייל חיצוני הסטייל החיצוני כשמו כן הוא.. קובץ בסיומת CSS היושב באותה תיקיה (רצוי) ומקושר מתוך הדף עצמו.
היתרון - ע נ ק ... החלטנו לעשות שינוי, בכתיבה אחת שינינו אתר שלם.. פחות עבודה ,פחות זמן , קל....
את הקישור אל הקובץ האמור נרשום בחלק ההד. הפקודה נראת כך:

<link rel="stylesheet" type="text/css"href="mystyle.css" />

האלכסון האחרון הוא הכנה לדפי XML אם תרצו.. אין בו חובה..
והקובץ עצמו? כתוב בדיוק כמו שהסברתי קודם רק ללא תגי הסטייל הפותח והסוגר.. רוצים לראות כיצד? תנו מבט בקובץ הסטייל לפיו בנוי האתר... קישור לCSS
האמת היא שאין ממש צורך לדעת לכתוב את כל העסק הזה.. יש המון תוכנות חינמיות המוכנות לעשות זאת עבורכם..

פילטרים פילטרים הם עוד צורה של שימוש בסטיילשיט, דוגמה טובה לשימוש בפילטרים תוכלו לראות כאן
מדפדפן אינטרנט אקספלורר 4 ומעלה תוכלו ליצור אפקטים ויזואלים מעניניים רק בצורת פקודות סטייל.משולבות עם סקריפט בסיסי, מדפדפן 5 ומעלה תוכלו ליצור מגוון רחב יותר של אפשרויות תצוגה ויזואלית
ראו כמה דוגמאות:


The image, dark red text, and sky blue background make up the content of the filtered SPAN.
והקוד:

<SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.Alpha( style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=100,finishY=0); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
<DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN>


או:

The image, dark red text, and sky blue background make up the content of the filtered SPAN.


והקוד:

<SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=notebook.GIF, sizingmethod=crop); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
<DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN>

הטלת צל:

The image, dark red text, and sky blue background make up the content of the filtered SPAN.


<SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.dropShadow( Color=999999,offX=3,offY=5,positive=true); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
<DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN>

אמבוס... כך זה ניקרא...:

The image, dark red text, and sky blue background make up the content of the filtered SPAN.

<SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.Emboss(); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
<DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN>


זוהר:

The image, dark red text, and sky blue background make up the content of the filtered SPAN.

<SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ff00ff,strength=5); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
<DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN>


או:

The image, dark red text, and sky blue background make up the content of the filtered SPAN.

<SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ff4500,endColorStr=#00ff99); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
<DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN>

מריחה:


The image, dark red text, and sky blue background make up the content of the filtered SPAN.


<SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.MotionBlur(direction=0,strength=8); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
<DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN>


מפוקסל:

The image, dark red text, and sky blue background make up the content of the filtered SPAN.

<SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.Pixelate( maxsquare=5); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
<DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN>




The image, dark red text, and sky blue background make up the content of the filtered SPAN.

<SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=45,color=#ff4500,strength=12); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
<DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN>

גלים:

The image, dark red text, and sky blue background make up the content of the filtered SPAN.

<SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.Wave(freq=3,LightStrength=20,Phase=10,Strength=5); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
<DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN>

את מלוא הדוגמאות תוכלו לראות בכתובת הזו:http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm

ניתן לשחק עם תמונות או כתב בצורות שונות.. לדוגמה:

לפני אחרי
ocean beach ocean beach

<TABLE>
<TR>
<TD ALIGN=CENTER>לפני</TD>
<TD ALIGN=CENTER>אחרי</TD>
</TR>
<TR>
<TD><img id=image1 src="images/sample.jpg" height="165" width="256" border="0" alt="ocean beach"></TD>
<TD><img id=image2 src="images/sample.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)" height="165" width="256" border="0" alt="ocean beach"></TD>
</TR>
</TABLE>


כאשר נרצה להחל סטייל על DIV או אלמנט אחר בדף נוכל לתת את הגדרת הסטייל ישירות לתוך הגדרת האלמנט, לדוגמה:

<div style="width:100%;height:100%;
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#550000FF, endColorstr=#55FFFF00)" ></div>

G



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




אתרים מומלצים:

לדף הטיפים
לדף הבית

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


מה זה CSS?
סטייל בראש כל דף INLINE STYLE
סטייל חיצוני
פילטרים
קישורים לאתרים
תגובות ושאלות
פטנטים קטנים ושימושיים


פורום משתמשים