cascading style sheets reference

שילוב סגנון ואתרי אינטרנט

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

קיימות 2 דרכים שה-css יכול להיות מקושר למסמך HTML :

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

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

באמת הפרדנו את המראה מן התוכן. הדרך השנייה, וכפי שבוודאי תוכלו להגיד, הדרך העדיפה, של קישור דפי האתר עם ה-css-ים, היא לקשור מקובץ ה-HTML ל-css

. עם הקישור הזה, כאשר הדפדפן מתחיל לקרוא את הדף, הוא מזהה את קישור ה-css, ומוריד (download) את ה-css. ואז, הוא משתמש בו כדי לתאר את הדף.

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

שיבוץ של css

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

<STYLE type="text/css"> </STYLE>

קישור ל- css-ים

שימו לב כאן, שדף האתר מקושר ל-css. ל-css אין ידע אודות הדפים המקושרים אליו. בכדי לקשר דף אתר
(מסמך HTML) ל-css, אתם ממקמים קישור ל-css בראש המסמך, בשימוש בתחביר הבא:

<LINK rel="stylesheet" TYPE="text/css" HREF="http://www.cnn.com/style.css">

ה-HREF הוא url יחסי או מוחלט.תזכרו, ה-url היחסי הוא יחסי למסמך, שלא כמו url-ים ב-css-ים שהם יחסיים ל-css. הבה נבחן בקצרה כל אפיון בנפרד.

REL="STYLESHEET"

זה אומר שזהו קישור מקדים ואומר לדפדפן למה לצפות בקצה השני - css.

TYPE="text/css"

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

HREF="core-styles.css"

אומר לדפדפן היכן למצוא את ה-css.היעד מוגדר באותה דרך של קישור hypertext .

HREF="link destination"

יעדים הם עם url יחסי או מוחלט.

בחלק זה

בחלק זה ראינו כיצד למעשה להפעיל את ה-css שלכם בדפי האתר.

החלק הבא

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