כיצד להוסיף קובץ CSS ל- HTML?
ניתן להוסיף קובץ CSS ל- HTML כגיליון סגנון חיצוני, CSS הכלול בקובץ נפרד מ- HTML, או גיליון סגנונות פנימי, CSS הכלול בקובץ ה- HTML.
שפת הסימון של HyperText (HTML) מגדירה מה החלקים השונים של דף אינטרנט. גיליונות סגנון מדורגים (CSS) קידוד שפת מתאר מה חתיכות אלה אמור להיראות. ניתן להוסיף קובץ CSS ל- HTML כגיליון סגנון חיצוני, CSS הכלול בקובץ נפרד מ- HTML, או גיליון סגנונות פנימי, CSS הכלול בקובץ ה- HTML. למד כיצד להוסיף קובץ CSS ל- HTML על מנת להתאים אישית את עיצוב האתר שלך.
שיטה 1 מתוך 2: הוסף גיליון סגנונות חיצוני ל- HTML
- 1צור את קובץ ה- CSS. הכן ושמור את קובץ ה- CSS שלך עם סוג הקובץ ".css".
- 2העלה את קובץ ה- CSS שלך לאתר שלך.
- 3העתק את כתובת האתר של קובץ ה- CSS שלך. כתובת האתר עשויה להיראות כמו www.yoursite.com/styleheet.css.
- זה צורה טובה להסיר את שם הדומיין הראשי מהקישור (URL). לכן כתובת URL של "http://mysite.com/css/default.css" תתקצר ל- "/css/default.css". עליך לכלול את קו הטיה המוביל ("/"). זה נקרא דרך יחסית.
- 4הוסף קישור לקובץ. מצא את התג </ head> בקובץ ה- HTML שלך וצור שורה ריקה ממש מעל התג. הוסף <LINK rel = stylesheet type = "text / css" href = "LnlvdXJzaXRlLmNvbS9zdHlsZXNoZWV0LmNzcw =="> לשורה הריקה ההיא, ושנה את "www.your..." לקישור לקובץ CSS שלך.
- 5שמור את קובץ ה- HTML שלך והעלה אותו לאתר שלך.
- 6ודא שהכל באתר שלך נראה איך זה אמור להראות. אם לא, יתכן שתצטרך לחזור ולחפש תיקונים או התאמות שאתה צריך לבצע.
הכן ושמור את קובץ ה- CSS שלך עם סוג הקובץ ".css".
שיטה 2 מתוך 2: הוסף גיליון סגנונות פנימי ל- HTML
- 1צור את התג <style>. בקובץ ה- HTML שלך, מצא את התג </ head>. הוסף כמה שורות נוספות מעליו והקלד את הדברים הבאים:
<STYLE type = "text / css"> </STYLE> - 1הוסף את כל ה- CSS שלך בין שני התגים שהוספת זה עתה.
- 2שמור את קובץ ה- HTML שלך (כ- HTML).
- 3ודא שדף האינטרנט שלך נראה כמו שהוא אמור להראות. בצע שינויים לפי הצורך אם זה לא קורה.
- בדוק תמיד את מראה האתר שלך בדפדפני אינטרנט שונים ובמערכות מחשב שונות. יש דפדפנים שמציעים CSS קצת אחרת, אפילו בין מהדורות המק של אותו הדפדפן לבין מהדורות Windows. אם האתר שלך נראה שונה בדפדפנים שונים, במיוחד באופן שבו מרווחים אובייקטים מסוימים כמו רשימות, הבעיה היא ברירות המחדל של הדפדפן. מצא גיליון סגנון ראשי להוסיף לתחילת ה- CSS שלך כדי לעקוף את כל ברירות המחדל של הדפדפן, כך שההגדרות שלך אינן מוסיפות לשום דבר שהדפדפן כבר מגדיר.
- אם יש לך אפשרות, השתמש בגיליון סגנונות חיצוני. פעולה זו תאפשר לך להתאים את מראה האתר על ידי שינוי הקוד בקובץ בשם זה, במקום שתצטרך לשנות את ה- CSS בכל עמוד באתר שלך.
- אם האתר שלך לא מגיב ל- CSS שלך כצפוי, בדוק שוב את כל הקוד שלך כדי לוודא שלא שכחת את הפרטים. שימו לב במיוחד לסימני הנקודה-פסיק (";") ולסוגרי החצים הסגורים ("}"). זה לא יוצא דופן לפספס אחד ב- CSS שלך.
- אם אתה שומר את קובץ ה- HTML במחשב שלך, אתה יכול לפתוח את הקובץ בדפדפני האינטרנט שלך כדי לבדוק את המראה במחשב שלך לפני העלאתו, אך כנראה שתצטרך להחזיק את ה- CSS שלך כגיליון סגנון פנימי בקובץ ה- HTML עבור מראה לטעון.
- כאשר גיליון סגנונות סותר את עצמו - למשל, אם הוא אומר תחילה הטקסט יהיה כחול ומאוחר יותר אומר שהוא יהיה אדום - התנאי המאוחר יותר תמיד יחול. אם פקודה אחת נמצאת בגיליון סגנונות חיצוני, והשנייה בגליון סגנון פנימי, הפניה הפנימית תחול.
- אל תשתמש ב- CSS "מוטבע", CSS הכלול בתג HTML. (לדוגמא: "align = 'center'" הוא CSS מוטבע.) תחבירו מיושן וקשה להתאמה כשאתה צריך לעדכן את האתר מאוחר יותר.
שאלות ותשובות
- כיצד אוכל לקשר CSS עם HTML במובייל?אתה מקשר את CSS באותה דרך עבור כל מערכות ההפעלה (נייד, שולחן עבודה וכו ').
