Get Adobe Flash player
דף הבית עקרונות ותחביר חיבור למסמך

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

1. קובץ חיצוני

כאשר הוראות הה-CSS נמצאות בקובץ חיצוני לדף, יש צורך "ליידע" את הדף על קיום הקובץ, ועל מיקומו.

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

אם תשנה את הגדרת הגופן שבַּבורר body למשל, או בבורר p, הרי שבבת אחת כל דפי האתר ישתנו בהתאם!

קובץ CSS

יש לכתוב את כל הוראות ה-CSS במרוכז בדף אחד.

  • הכתיבה תתבצע על עורך טקסט פשוט (פנקס הרשימות למשל).
  • אין להכניס למסמך כל טקסט אחר (למעט הערות המוכנסות ב /* ..... */)
  • אסור להכניס למסמך שום תג HTML
  • הקובץ יישמר עם הסיומת .css - למשל, 'styles.css'
  • את הקובץ נהוג לשמור בתיקייה הראשית של האתר, או בתיקייה ייחודית לקובצי CSS הנקראת גם: css
חיבור הקובץ אל דף HTML

חיבור בין הדף אל הקובץ נעשה ע"י תג <link> אותו יש להכניס אל ה-<head> של דף ה-HTML.

<head>
<title>לימוד CSS</title>
<link rel="stylesheet" href="css/systes.css" type="text/css">
</head>

 הערך של תכונת href הוא שם הקובץ והמסלול אליו

2. CSS בדף HTML

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

במצב זה, הוראות ה-CSS נכתבות במקטע ה Head של המסמך.

מכיוון שההוראות נכתבות במלל, הדפדפן עלול לא להבין שמדובר בהנחיות CSS, לא להתייחס אליהן ואפילו להציגן על המסך!!

מכיוון שכך, אזור ההוראות צריך להיפתח בהצהרה המסבירה זאת, וללוותה בהצהרה לסגירת המתחם. את זה נעשה באמצעות תג <style>

הדוגמא הבאה מדגימה את הפעולה:

<head>
<title>לימוד CSS</title>

<style type="text/css">
   body {
       font-size : 14px;
       font-family : Arial;
       background-color : lightyellow;
       }
    h1 {
      text-align : center;
      color : blue;
      }
</style>

</head>

שימוש כפול - בקובץ חיצוני וגם בהוראות פנימיות

 אין מניעה לשלב את שתי השיטות. להכין קובץ חיצוני המכיל את רוב ה CSS ולהוסיף אליו CSS מקומי. אין זה מקובל כל כך, אך בכל זאת אין זו שגיאה.

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

כפי שכבר למדת בפרקים הקודמים, ההוראות הקרובות יותר לעיצוב הן הקובעות - ז"א שלכאורה, התג יקבל צבע אדום (ההוראה הפנימית), אבל הגדרה זו היא "טריקית" ומכשילה.

אם תג ה <link> (הקישור אל קובץ ה-CSS), ייכתב מתחת לתג <style>, הוא יהיה הקובע!!! ולמה? כי ההפנייה אליו נעשתה כבר אחרי ההוראה הפנימית, וזו על כן, "נדרסה".

3. הוראת CSS נקודתית

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

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

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

הדרך הפשוטה היתה לכתוב <p align="justify">. אבל זה לא יעבוד. למה? כי ה-CSS גובר על פקודת HTML!!

מכאן, שאני צריך לשנות את הוראת ה-CSS. את זה נעשה באמצעות CSS מקומי.

גם כאן, נחלצת לעזרתנו המלה style. הפעם לא כתג, אלא כתכונה. style בתוך תג פותחת אזור CSS שלתוכו ניתן להוסיף כמה הוראות CSS שצריך, והן יחולו על התג בתוכו הן נמצאות.

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

<p style="text-align:justify; color: blue;">

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

אל השיעור הקודם אל השיעור הבא