טעינת קובץ CSS חיצוני לעמוד/אתר
נכתב ע"י יוחאי ירמיהו
לאחר שהצלחנו להבין מה זה CSS כעת מה שנותר לעשות זה להתחיל להשתמש ב-CSS באופן מעשי באתר על ידי טעינת קובץ או קבצים שיעזרו לשנות את העיצוב של העמוד או של האתר כולו.
איך לבנות אתר בחינם בשעה וחצי?
יש לי הצעה מעניינת עבורך, יצרתי הדרכה מלאה של למעלה משעה וחצי שתלמד אותך איך לבנות אתר מ-0 בחינם כולל רכישת אחסון ודומיין. נשמע מעניין? אשמח לשלוח לך אותה למייל.
למה רצוי לטעון קוד CSS באמצעות קובץ חיצוני
למרות שזה אפשרי לטעון קוד CSS בתוך עמוד באתר מדובר על שיטה שלא רצוי להשתמש בה אלא אם כן אנחנו רוצים לשנות באופן נקודתי רק אלמנט מסוים המופיע באתר. הצורה הנכונה יותר לשימוש בקוד CSS היא על ידי יצירת קובץ חיצוני שיכיל את הקוד שישפיע על כל האתר וכל העמודים בבת אחת.
ברגע שאנחנו טוענים קובץ CSS חיצוני לכל העמודים באתר אז הקובץ הזה ישפיע בבת אחת על כל העמודים באתר. אם לצורך הדוגמא נרצה לשנות את הרקע של העמוד נוכל לעשות זאת בקלות מתוך הקובץ CSS שיצרנו, וברגע שנעשה את השינוי לקובץ אז השינוי יתבצע באופן אוטומטי בכל העמודים באתר בבת אחת.
אם לצורך הדוגמא היינו מכניסים את צבע הרקע בתוך קוד CSS פנימי בעמודים השונים כאשר האתר מכיל כמה עמודים שונים אז היינו צריכים להיכנס לכל אחד מהעמודים ולשנות אותו. כאשר מדובר על אתרים של מאות עמודים זה בלתי אפשרי ולכן כמעט תמיד נרצה להשתמש בקובץ CSS חיצוני.
יצירת קובץ CSS
כעת לאחר שהבנו את החשיבות ליצירת קבצי CSS חיצוניים מה שנותר לנו לעשות זה ליצור את הקובץ CSS ולדאוג שהוא יופיע באותה תיקייה עם העמוד שממנו אנחנו טוענים את התוכן של האתר.
אם אתם חדשים בתחום ועוד לא יודעים איך ליצור אתר או קוד HTML נסו לבקר באתר הנוסף שלנו HTML ישראל וללמוד שם איך ליצור קובץ עם מבנה עמוד HTML בסיסי.
לאחר שיצרתם קובץ HTML יש ליצור באותה תיקייה קובץ נוסף עם סיומת CSS. זה לא חשוב במיוחד מה יהיה שם הקובץ אבל חשוב שהסיומת תהיה css.
אם אתם מסתבכים עם בחירת שם לקובץ אז פשוט תקראו לו style.css. על מנת שנוכל לבחון האם השינוי שאנחנו רוצים לעשות מתבצע בעמוד במידה והקובץ נטען בהצלחה יש להוסיף את הקוד הבא לקובץ CSS והקוד אמור לשנות את הרקע של העמוד לשחור.
body {
background: #000;
}
טעינת קובץ CSS חיצוני באתר
לאחר שיצרנו קובץ CSS חיצוני והכנסנו אליו את הקוד שמשנה את צבע הרקע כעת מה שנותר לעשות זה לטעון את הקובץ לתוך העמוד על מנת לוודא שהוא עובד כמו שצריך.
מה שאנחנו רוצים לעשות זה להיכנס אל קובץ ה-HTML שיצרנו ולתוכו לטעון את הקובץ CSS שיצרנו בין תגיות ה-<head> של העמוד.
את הקישור לקובץ ה-CSS אפשר לטעון ב-2 דרכים. הדרך הראשונה היא באמצעות קישור ישיר אל הקובץ לפי הקרבה שלו אל העמוד שבתוכו אנחנו טוענים את הקובץ (הקרבה של הקבצים בתיקייה שמכילה את קבצי האתר), וכמובן שאת שם הקובץ style.css תצטרכו לשנות לשם שבחרתם (במידה ובחרתם שם אחר).
<link href="style.css" rel="stylesheet" />אם הקובץ CSS לא נמצא באותה תיקייה כמו הקובץ HTML שטוען אותה אז אנחנו נכניס את שם התיקייה ואת הנתיב הנכון אל קובץ ה-CSS כדי שהוא ייטען בצורה תקינה בעמוד.
<link href="css-folder/style.css" rel="stylesheet" />במידה ומדובר על אתר שקיים באוויר עם דומיין + שרת אחסון אז הדרך הנוספת לטעון את הקובץ היא על ידי שימוש בדומיין המלא של האתר עם הכתובת המדויקת של הקובץ CSS.
<link href="https://css.org.il/style.css" rel="stylesheet" />השיטה הזאת היא כנראה היעילה ביותר מאחר וכל עוד אנחנו טוענים את הנתיב המלא של האתר לא נצטרך להתעסק עם מיקומים של הקבצים והתאמה לתיקייה הנוכחית. במידה ואנחנו יוצרים אתר HTML עם כמה תיקיות וכל תיקייה טוענת קובץ HTML אחר נצטרך להתאים את נתיב טעינת הקובץ CSS למיקום של קובץ ה-HTML שטוען אותו.
כאשר מדובר בנתיב מוחלט של כתובת אתר אז אנחנו פותרים את הבעיה ואין לנו צורך לשנות מיקומים מתיקייה אחת לאחרת אבל החיסרון שבשביל שזה יעבוד זה מצריך שרת וזה מקשה גם על עריכת הקבצים מתוך המחשב.
לאחר שבחרתם את שיטת הטעינה שמתאימה לכם בצורה הטובה ביותר בדקו אם הצלחתם לטעון את הקובץ בהצלחה לתוך העמוד HTML. במידה וזה עבר בהצלחה הרקע של העמוד שאתם פותחים יהיה רקע שחור.
טעינת מספר קבצי CSS במקביל
בהמשך למה שציינו כאן בפסקה הקודמת חשוב לדעת שלא חייבים לטעון את כל קוד ה-CSS של האתר באמצעות קובץ יחיד. אפשר ולפעמים אפילו מומלץ לפרק את הטעינה לקבצים שונים.
אם וכאשר הקובץ CSS מאוד גדול אפשר לפרק אותו לחלקים לפי הקוד שהוא מייצר (לדוגמא: קובץ עיצוב של כל האתר, קובץ עיצוב לבלוג וכו'…). את הטעינה אנחנו עושים באותה צורה כמו שהוצג מעל רק שהפעם אנחנו נוסיף שורה נוספת עם השם של הקובץ הנוסף שיצרנו ואנחנו רוצים לטעון.
<link href="style.css" rel="stylesheet"/>
<link href="another-css.css" rel="stylesheet" />עוד לא צפיתם בהדרכה? זה בחינם!
אני רוצה ללמד אתכם לבנות אתר אחד בחינם. מדובר על הדרכה של למעלה משעה וחצי שבה אני אלמד אותך מ-0 לבנות אתר כולל רכישת אחסון ודומיין. לקבלת ההדרכה למייל באופן מיידי יש להשאיר פרטים מתחת.
אם אהבתם את המדריך ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת: