- חוקי CSS

דף ראשי «

מפת האתר «

אודות האתר «

עזרה «

study.eitan.ac.il «

» נושאי לימוד

יום שבת 20 באפריל 2024

חוקי CSS

דף ראשי

בניית אתרים

גיליונות סגנון

חוקי CSS

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

1. הוסף את חוקי ה CSS בתג בודד בדף ספציפי ואז ההגדרות החדשות תקפות רק לאותו התג.

2. הוסף את חוקי ה CSS בחלק ה <head> של הדף ואז הם ישפיעו על כל הדף.

3. שים את חוקי ה CSS בקובץ חיצוני ואז ההגדרות ישפיעו על דפים רבים (אפילו על אתר אינטרנט שלם).

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

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

שיטה 1 – שינוי הגדרה באופן מקומי עבור שימוש בודד

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

לדוגמא, נניח שהשתמשנו בשיטה 2 או 3 (בהמשך נראה כיצד נשתמש בהם) ע"מ ליצור ברירת מחדל חדשה של התג <h3> לעומת ברירת המחדל שיצרנו בעמוד הקודם (ז"א – יצרנו ברירת מחדל חדשה לתג ספציפי ואז מסיבה כלשהי אנו רוצים לשנות את אחד המאפיינים של ברירת המחדל באופן מקומי בלבד.). אחד המאפיינים החדשים שהגדרנו היה צבע אדום כהה ופונט ניטרלי. אבל עכשיו, מאיזושהי סיבה, החלטנו שהסגנון יהיה ירוק וכהה והפונט יהיה של כתב משופע (italic).

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

<h3 style="font-style: italic; color: #00cc00;">
כותרת 3 ירוקה ונטויה
</h3>

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

שיטה 2 – הגדרת CSS לדף מסוים

עכשיו נראה איך לשנות דף HTML בודד כך שיוגדרו עבורו חוקי CSS חדשים עבור ששת התגים h1, h2 .... כל שעלינו לעשות הוא להוסיף את הקוד הבא בחלק ה <head> של הדף שלנו:

שים לב שזו בדיוק אותה סדרת הגדרות שהגדרנו מוקדם יותר בין התגים <style> ו </style> גם לתג <style> הוגדרה כאן תכונה:

type="text/css"

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

שים לב שכללנו גם את הגדרת כל ששת התגים בתוך התג style וזאת רק על מנת לשמור על הסדר.

לפניך מבט נוסף בחוקים אלו בדוגמא 1. אחרי שתקיש על קישור זה, השתמש בדפדפן שלך כדי לראות בקובץ המקור. שים לב כיצד הכותרות מוצגות בדף זה: אין תגי <font> , רק תגי <h1>,..,<h6>. שים לב גם שששת חוקי CSS החדשים מופיעים בחלק ה <head> של הדף.

שים לב שמרגע שכללנו את חוקי ה CSS ש"מגדירים מחדש" את תגי <h1>, ., <h6> , בכל פעם שנשתמש בגרסת ברירת המחדל של אחד התגים האלה בדף זה הכותרות יופיעו לפי החוקים החדשים שהגדרנו. (ניתן עדיין לדרוס את ההגדרות החדשות באופן מקומי על פי רצוננו).

שיטה 3 – הגדרת חוקי CSS בקובץ חיצוני

במקום להגדיר את חוקי CSS בכל קובץ בתחילתו כמו בשיטה הקודמת נגדיר את החוקים בקובץ נפרד ואז נכלול את החוקים שבקובץ חיצוני זה בכל דף רשת שנרצה.

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

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

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

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

קישור בין קובץ חוקים חיצוני לדף HTML

באופן תיאורטי, ישנם שתי דרכים על מנת לקשר בין דף HTML לבין קובץ CSS חיצוני שמכיל את חוקי CSS:

1) קישור לקובץ החיצוני.

2) יבוא (הכללה) של הקובץ החיצוני לתוף דף ה HTML.

באופן מעשי, השיטה השניה של "יבוא" עוד לא נתמכת על ידי דפדפנים רבים ולכן לא נתייחס אליה.

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

· rel=stylesheet (תמיד קבוע)

· type="text/css" (תמיד קבוע)

· href="stylefile1.css"

הקישורים בין דף HTML לקובץ CSS חיצוני יומחש ב: דוגמא 3. ולפניך קוד הקישור בקובץ ה HTML:

במקרה זה הקובץ החיצוני stylefile.css נמצא באותה ספריה בה נמצא קובץ ה HTML. אם הקבצים נמצאים בספריות שונות, הערך שימצא תחת האובייקט href צריך לכלול לא רק את שם הקובץ אלא גם הנתיב אליו (כתובתו המדויקת).

קיצור דרך: הגדרת תגים דומים בדרך קצרה יותר

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

לפניך הקוד שיגדיר את התגים הזהים בשינוי גודל הכתב כמובן:

h1, h2, h3, h4, h5, h6
{font-family: Arial, Helvetica, sans-serif;
font-weight: bold; color: #cc3300}
h1 {font-size: 24pt;}
h2 {font-size: 18pt;}
h3 {font-size: 16pt;}
h4 {font-size: 14pt;}
h5 {font-size: 12pt;}
h6 {font-size: 10pt;}

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

16-02-04 / 17:05

עודכן ,

04-10-03 / 18:37

נוצר ע"י עזרא גנוט בתאריך