מדריך להוספת CSS לדף HTML

קובץ CSS חיצוני

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

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

להלן דוגמה לאופן שבו ניתן ליצור זיקה בין דף HTML לבין קובץ CSS חיצוני:

<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>

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

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

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

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

מיקום קוד CSS בראש דף HTML

דרך נוספת להשית את הסגנון שבמשפטי CSS על דף אינטרנט היא באמצעות מיקום משפטי ה - CSS בראש דף האינטרנט בתוך האלמנט <style>. דוגמה לדרך שבה ניתן לעשות זאת תוכלו למצוא בדוגמת הקוד הבאה:
<head>
<style type="text/css">
.h1 {
background-color: #E1E1E1;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
height: 43px;
}
</style>
</head>

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

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

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

הוספת קוד CSS לאלמנטים בתוך דף HTML

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

<h3 style=font-weight:bold; color:red;>...טקסט כלשהו</h3>

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

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

ריכוז היתרונות והחסרונות של השיטות להוספת CSS לדפי אינטרנט

לכל אחת מהשיטות להשתת ה - CSS על עמוד אינטרנט יתרונות וחסרונות. בטבלאות הבאות ריכזתי עבורכם יתרונות וחסרונות אלה:

תכונה נושא הסבר
קובץ חיצוני                        יתרונות

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

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

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

 

איזה קוד CSS ינצח כאשר יש יותר ממקור קוד אחד המתייחס לאותו אלמנט באותו דף?

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

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

1. קבצי CSS חיצוניים;

2. קוד CSS הנמצא בראש הדף;

3. קוד CSS ששולב בתוך האלמנטים השונים שבדף (Inline code).

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

1. קוד CSS ששולב בתוך האלמנטים השונים שבדף (Inline code).

2. קוד CSS הנמצא בראש הדף;

3. קבצי CSS חיצוניים;

למרות זאת, CSS מכיל תכונה הנקראת !importent ואשר מאפשרת למשפט ה - CSS המכיל אותה לגבור על כל המקורות האחרים בלא קשר למיקום של מקורות קוד ה - CSS. את התכונה !importent ניתן לשים בכל משפט CSS באופן הבא:

.h3 {text-align: center !importent}

 

כלים ומאמרים בנושא

התג link ב - HTML

החלפת קובץ CSS חיצוני בזמן ריצה

 


 

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש