CSS/שילוב עם HTML
מתוך ויקיספר, אוסף ספרי הלימוד והמדריכים החופשי.
פרק זה מסביר כיצד לקשר בין דף HTML וגליון CSS. אם ברצונכם להתחיל ישירות בתחביר, עברו לדף: תחביר כללי.
ישנן 4 דרכים להפעיל גליון CSS בדף HTML:
|
תוכן עניינים |
[עריכה] קישור
הדרך הראשונה לגרום לגליון CSS להשפיע על דף כלשהו היא להוסיף בחלק ה־<head> שלו תג <link>:
<link rel="stylesheet" type="text/css" href="style.css">
או לכותבי ה־XHTML שביניכם:
<link rel="stylesheet" type="text/css" href="style.css" />
את "style.css" יש להחליף בשם הקובץ שבו תחזיקו את גליון ה־CSS. ניתן להשתמש בקישור ישיר או בקישור יחסי, כמו בהיפר־קישורים ב־HTML. תוכלו להשתמש במספר תגי <link> אם תרצו - אחד לגליון המטפל בתצוגת קישורים, אחד המטפל בתצוגת טבלאות וכד'.
על ידי יצירת קובץ CSS מרכזי וקישור אליו באמצעות קישור או ייבוא (ראו בהמשך), תוכלו לחסוך מאמץ כתיבה רב: לאחר שתקשרו את הקובץ לכל דפי האתר שלכם, שינוי בגליון ישתקף בכל הדפים המשתמשים בו, ולא תצטרכו לעבור על כל הדפים אחד אחרי השני ולשנות אותם.
[עריכה] ייבוא
דפדפנים ישנים, כמו Netscape למשל, אינם יודעים לפענח גליונות CSS. עם זאת, הם מכירים את התג <link>, ועל כן עשויים לנסות להשתמש בתוכנו - ובכך להתבלבל לחלוטין ולהרוס את הדף. כדי "להחביא" את גליונות העיצוב שלכם מדפדפנים ישנים, יש להשתמש בייבוא. הכניסו את הטקסט הבא בין תגי ה־<style> (עליהם יוסבר בסעיף הבא):
@import "style.css";
גם כאן ניתן להשתמש בקישור ישיר או יחסי, ולייבא יותר מקובץ אחד.
[עריכה] <style>
תג ה־<style> יבוא תמיד בתוך ה־<head>. התחביר שלו הוא:
<style type="text/css"> . . . . </style>
בין שני התגים הללו יש לכתוב את הגדרות ה־CSS (עליהן נלמד בהמשך) כאילו היו כתובות בקובץ נפרד.
[עריכה] פרמטר style
כל מי שמשתמש ב־HTML או ב־XML יודע שלכל תג ניתן להצמיד פרמטרים. לדוגמה, בקטעי ה־HTML הבאים:
<table width="100%"> <div align="right">
table ו־div הם שמות תגים ו־width ו־align הם פרמטרים הנקשרים לתג. 100% ו־right הם ערכי הפרמטרים.
באופן דומה, ניתן להשתמש גם בפרמטר style:
<table style="..."> <div style="...">
הערכים שמקבל style הם הגדרות CSS לתג אליו נקשר הפרמטר.
[עריכה] דירוג
התכונה החשובה ביותר של CSS היא דירוג. מאפיין הנכתב בין תגי <style>, למשל, עשוי להיות מבוטל אם פרמטר ה־style הרלוונטי יצור סתירה. לדוגמה: אם בין תגי ה־<style> קבענו שלטבלה מסוימת יהיה רקע שחור, אך בתג הטבלה עצמה קבענו רקע כחול, הרקע שהדפדפן יתן לטבלה יהיה כחול ולא שחור. כלומר, ישנו סדר מסוים בו מסודרות ההגדרות:
- פרמטר
style, הגובר על - הגדרות בין תגי
<style>, הגוברות על - הגדרות שהוזנו באמצעות
<link>, הגוברות על - הגדרות שהוזנו באמצעות ייבוא
כלומר, מאפיינים בפרמטר style הם ה"חזקים ביותר", בעוד שהגדרות ייבוא הן ה"חלשות ביותר".
גם בתוך הקבוצות הנ"ל ישנו סדר מסוים. לדוגמה:
<link rel="stylesheet" type="text/css" href="general.css"> <link rel="stylesheet" type="text/css" href="main.css">
במידה ותתרחש סתירה בין גליונות העיצוב, הגליון האחרון ברשימה הוא זה שיקבע. לכן אם ב־general.css קבענו שלטבלה יהיה רקע אדום, אך ב־main.css נקבע צבע ירוק, הטבלה תוצג עם צבע רקע ירוק ולא אדום. אותו הדין גם בדוגמה הבאה:
@import "general.css"; @import "main.css";
[עריכה] תרגול
| - | שילוב עם HTML תרגילים |
הפרק הבא: תחביר כללי |
