לפני שמתחילים שלב 1 - רקע שלב 2 - גופן שלב 3 - פסקה שלב 4 - תיבה שלב 5 - רשימות עיצוב קישורים שונות CSS ב-JS

לפני שמתחילים

מהם גליונות סגנון

גליונות סגנון הינם כלי עיצוב שמתאים במיוחד ל-HTML דינמית. גליונות סגנון מאפשרים לך להפריד בין התוכן של המסמכים לבין העיצוב.
מי שיודע JavaScript או VBScript, יוכל להנות מהאפשרות לשנות את עיצוב הדף תוך כדי הצגתו (לחצנים, ו-DHTML).

לפני שנלמד מהם גליונות סגנון ומה תועלתם ב-DHTML, וב-HTML, נלמד מהם חסרונותיה של השפה:
1. דפדפנים ישנים (Internet Explorer 2.0 & Netscape 3.0 ומטה, כולל דפדפני טקסט ענטיקות) לא תומכים בה. הצרה היא שהם יציגו את הגליון בחלק מהמקרים, כחלק מתוכן הדף. כיצד לפתור את הבעיה - נלמד בהמשך
2. במידה שאתה משתמש בעברית חזותית (שמהווה בעיה לא פשוטה עם Netscape 6.0 שתומך בלוגית בלבד), עיצוב גופנים (כמו Font-Face) תעשה צרות.

יתרונותיה של השפה הם:
1. הפרדת העיצוב מהתוכן (לדוגמא, כל הדפים באתר משתמשים בתגיות פשוטות כאשר מעצבים אותם פעם אחת ודי)
2. עיצובים יותר משוכללים וקבועים (לדוגמא בדף זה - שינוי גודל הגופן לא משפיע על אף חלק מהדף).
3. ניתן לעצב גם פריטים שעד עכשיו לא היה ניתן לעצב בכלל (לדוגמא: שורת החיפוש של יש! - האתר שלי(שנמצאת גם מעלה) שעוצבה בגופנים, בגדלים, בצבעים לא שגרתיים באמצעות המאפיין Style).

תחילה, נלמד כיצד כותבים CSS.

דבר ראשון, יש להגדיר את שפת הגליון:
את זה כותבים בראש הדף, לאחר title

<META http-equiv="Content-Style-Type" contenet="text/css">

כעת, עליך ללמוד את כללי הדקדוק של CSS, לדעתי הכללים הם פשוטים וקלים להבנה:
גליונות סגנון מאפשרים לךלהגדיר סגנונות עבור תגית HTML בודדת או קבוצה של תגים בודדים. כל הגדרת סגנון נקראת חוק (rule). חוק מורכב מבורר, שהוא תג (או תגים שמופרדים בפסיקים) של HTML, לאחר התגית ישנו התו הזה { ולאחריו הצהרה - הגדרת הסגנון ונקודותיים.אם רוצים להוסיף עוד חוק יש להוסיף בין החוקים נקודה-פסיק (;)
בורר החוק קושר את הגדרת הסגנון אל התגיות הרגילות של מסמך ה-HTML. הדוגמא הבאה מראה חוק המגדיר סגנון של התגיות H1 ו-H2 לצבע כחול ואת גודל האות של P ל-10 נקודות:

<Style>
h1, h2 {color: blue}
p {font-size: 10pt}
</Style>

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

תחילה, נלמד כיצד משלבים את CSS בדף ה-HTML.

<Style>
את התגית הזו יש לכתוב בחלק ה-HEAD של הדף. יש לה אחד ושמו Media. המאפין MEDIA מאפשר לך לעצב את המסמך בצורה שונה, לכל מדיה רצויה (מסך, מדפסת, וכו) הטבלה הבאה מראה את המאפינים ותאורם.

סוג הגליון	תיאור הגליון
Screen	גליון סגנונות למסך המחשב
Print	גליון סגנונות למדפסת
Projection	גליון סגנונות לשקף
Braille	גליון סגנונות לכתב ברייל (לעוורים)
Speech	גליון סגנונות לסינתרסיזר דיבור (לעוורים)
All	גליון סגנונות לכל ההתקנים

לאחר שבחרתם את ההתקן הרצוי (אני מהמר על מסך) וסגרתם את התגית בעזרת </Style> צריך לבחור אחת משתי השיטות:
1. להשתמש בתגית Style, במאפין Style ובתגית Span - בתוך מסמך ה-HTML (גיליונות מוטבעים.גילונות חלק משורה - פירוט יבוא בהמשך)
2. ליצור את גיליון הסגנונות כקובץ נפרד בסיומת CSS (מומלץ - מקשרים את אותו גיליון לכל האתר וכל האתר מעוצב באותו גיליון).

אני באופן אישי בחרתי באסטרטגיה של שילוב CSS בקובץ נפרד (csssite.css) וגם עיצובים בתוך קוד ה-HTML.

נתחיל בראשונה:

<html>
<head>
<title>דף לדוגמא של CSS</title>
<style media="screen" type="text/css">
(גליון סגנונות מוטבע)
<!--
h1 {color: blue; font-family:FrankRuehl; font-size=40pt; text-decoration:underline}
(קביעה שצבע הכותרות יהיה כחול, בגופן פרנק ובגודל 40 נקודות)
p { font-size: 12pt}
-->
</style>
</head>
<body>
<h1 align=center>כותרת כחולה <span style="color: red">וגדולה</span></h>
(Span של Style סגנונות שהם חלק משורה במאפין)
<p style="font-size:14pt">סתם טקסט עלוב בגודל 14 נקודות</p>
</body>
</html>

והנה התוצאה:

כותרת כחולה וגדולה

סתם טקסט עלוב בגודל 14 נקודות

כדאי לשים לב להערות באדום ולסימנים האלה (הערות HTML) --!> ו- <--.
להערות האלה יש סיבה: הסתרת הגליון מדפדפנים ישנים. על פי כללי HTML, דפדפן שנתקל בתגית לא מוכרת מתעלם ממנה. אין בזה רע בדרך כלל אולם פה נעוצה הבעיה: הדפדפן יציג את קוד ה-Style. כדי להסתיר מהדפדפנים שלא תומכים ב-CSS את הקוד, משתמשים בהערות HTML.

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


<link rel=StyleSheet href="filename.css" type="text/css" title="CSS Name or title">

הנה חלק מהקובץ csssite.css שמשמש את האתר:


h1 {color: navy; font-family:FrankRuehl; font-size:40pt; text-decoration:underline}
h2 {color: navy; font-family:FrankRuehl; font-size:36pt; text-decoration:underline}
p {font-size: 12pt; color:navy}
a:link {color: navy}
a:visited {color: teal}
a:active {color: red ! important} מודיע לדפדפן על חשיבותו של חוק important 
pre {text-align:left}

הבנת הדירוג

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

לכל חוק מוקצית חשיבות מסוימת על ידי הדפדפן. כאשר הדפדפן עובד עם אזכור של תג מסוים, הוא מוצא את כל החוקים המוחלים עליו. אחר כך יכול הדפדפן למין חוקים אלה לפי חשיבותם, ולהחיל את הסגנון שחשיבותו היא הרבה ביותר. באופן כללי קיים מספר קטן של חוקים שעליך לשים לב אליהם בעת הטיפול בגליונות מתנגשים
1. גליון הסגנון של העורך גובר על זה של המשתמש, בעוד גליונו של המשתמש גובר על ברירת המחדל של הדפדפן
2. סגנונות שהם חלק משורה (<Tag Style="color: red">) גוברים על גליונות מוטבעים (<Style >)בעוד מוטבעים גוברים על מקושרים (קבצי CSS).
תוכל לגבור על מערכת הקדימות על ידי שימוש במילת המפתח important. כמו בדוגמא הבאה. אם יש 2 important, חוקי הרשימה הקודמת מוחלים.

H1 {color: red !important font-weight: bold font-family:sans-serif ! important}

יחידות ב-CSS

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

סוג
שם
דוגמא
תיאור

יחסי
em
0.5em
הגובה של גופן הרכיב, יחסית להתקן הפלט

יחסי
ex
0.76ex
הגובה של האות X יחסית להתקן הפלט
יחסי
px
15px
פיסיקלים, יחסית להתקן הפלט
קבוע
in
5in

אינצ'ים
קבוע
cm
1cm

סנטימטרים
קבוע
mm
20mm

מילימטרים
קבוע
pt
12pt

נקודות (1/72 אינצ')
קבוע
pc
1pc

פיקות (12 נקודות)

תמונות

כדי להוסיף תמונות השתמש בכתובת יחסיות או בכתובות מוחלטות כך:

Tag {Hatzhara:URL(http://imageurl/images/img.jpg)}

או

Tag {Hatzhara:URL(hath.gif)}

Class

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


<html>
<head>
<style>
.csssite {font-size:20pt}
או
p.csssite {font-size:20pt}
</style>
</head>
<body>
<p class="csssite">כתוב פה</p>
או
<p class="csssite">כתוב פה</p>
לא יעשה שום דבר <div class="csssite">כתוב פה</p> במקרה הזה
</body>
</html>

והרי התוצאה:

כתוב פה

בכל מקום שלא כתוב <Tag class=csssite> לא יקרה כלום. אם המחלקה מוגדרת לתגית מסוימת - בשאר היא לא תעשה כלום

בשיעור הבא נלמד את המאפינים של רקעים