כיצד להכניס קובץ CSS ל- HTML

מְחַבֵּר: Eric Farmer
תאריך הבריאה: 3 מרץ 2021
תאריך עדכון: 1 יולי 2024
Anonim
How to link CSS to HTML
וִידֵאוֹ: How to link CSS to HTML

תוֹכֶן

שפת Hypertext Markup Language (HTML) קובעת אילו אלמנטים קיימים בדף אינטרנט. שפת התכנות Cascading Style Sheets (CSS) מתארת ​​כיצד אלמנטים אלה צריכים להיראות.ניתן להוסיף את קובץ ה- CSS ל- HTML כחיצוני (CSS נוסף כקובץ נפרד) או גיליון סגנון פנימי (CSS כלול בקובץ ה- HTML). למד כיצד להטמיע CSS בקובץ HTML לעיצוב מחדש של האתר שלך.

צעדים

שיטה 1 מתוך 2: כיצד להגדיר גיליון סגנונות חיצוני

  1. 1 צור קובץ CSS. הכן ושמור קובץ CSS עם סיומת ".css".
  2. 2 העלה את קובץ ה- CSS לאתר שלך.
  3. 3 העתק את הכתובת (URL) של קובץ ה- CSS. כתובת האתר תיראה בערך כך: www.yoursite.com/stylesheet.css.
    • נהוג להסיר את שם הדומיין הראשי מכתובת האתר. על סמך זה, הכתובת http: //myisite.com/css/default.css תתקצר ל- "/css/default.css". זכור לכלול את קו הרוחב המוביל ("/"). קוראים לזה נתיב יחסי.
  4. 4 הכנס את הקישור לקובץ. מצא את התג / head> בקובץ ה- HTML שלך וצור שורה ריקה ממש מעליו. הדבק בשורה LINK rel = styleheet type = "text / css" href = "www.your_site.com / stylesheet.css">, והחלף את "www.your ..." בקישור בקובץ ה- CSS.
  5. 5 שמור את קובץ ה- HTML והעלה אותו לאתר.
  6. 6 וודא שהכל באתר נראה כמו שצריך. אחרת, פתח מחדש את קובץ ה- HTML, חפש שגיאות ובצע שינויים.

שיטה 2 מתוך 2: כיצד להכניס דף סגנון פנימי

  1. 1 צור סגנון תווית>. פתח את קובץ ה- HTML ומצא את תג / head>. הוסף כמה שורות ריקות מעליו והזן את הדברים הבאים:

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

  1. 1 הדבק את כל ה- CSS שלך בין שתי התוויות האלה.
  2. 2 שמור את קובץ ה- HTML (עם סיומת .html).
  3. 3 וודא שהכל באתר נראה כמו שצריך. אחרת, בצע את השינויים הרצויים.

טיפים

  • בדוק תמיד את מראה האתר בדפדפנים שונים ובמערכות הפעלה שונות. חלק מהדפדפנים מתחברים ל- CSS בדרכים מעט שונות. זה יכול לקרות אפילו באותו הדפדפן, אבל בגרסאות שונות של Mac ו- Windows. אם האתר שלך נראה שונה בדפדפן אחר (לדוגמה, המרווח בין אובייקטים מסוימים, כגון רשימות, הוא בגודל אחר), אז הבעיה היא בהגדרות הדפדפן הזה. מצא את גיליון הסגנונות הראשי והדבק אותו בחלק העליון של קובץ ה- CSS כדי לשנות את הגדרות ברירת המחדל של הדפדפן. זה נעשה כך שההגדרות שלך לא ישנו דבר בדפדפן עצמו.
  • הכנס גיליון סגנונות חיצוני אם אתה יכול. זה יאפשר לך לשנות את מראה האתר על ידי שינוי הקוד בקובץ המקור. בדרך זו אינך צריך לשנות את ה- CSS בכל עמוד באתר שלך.
  • אם האתר שלך אינו מגיב ל- CSS כפי שאתה מצפה, בדוק שוב את כל הקידוד כדי לוודא שהוא מאוית כראוי. במיוחד הקדישו תשומת לב מיוחדת לפסיק (";") וסוגריים סגורים ("}"). די קל להשמיט אחת מהתווים האלה בקובץ CSS.
  • שמור את קובץ ה- HTML במחשב שלך כך שתוכל לפתוח אותו מאוחר יותר בדפדפני אינטרנט שונים ולבדוק שוב את מראהו לפני הורדתו הלאה. אך על מנת לטעון אותו, יש להכניס את קובץ ה- CSS ל- HTML כגיליון סגנונות חיצוני.
  • אם גיליון הסגנונות סותר את עצמו - למשל, כתוב קודם שהטקסט יהיה כחול ולאחר מכן שהוא יהיה אדום - התנאי האחרון תמיד יתקיים. אם פקודה אחת היא גיליון סגנונות חיצוני והשנייה היא גיליון סגנונות פנימי, גיליון הסגנון הפנימי יהיה פעיל.

אזהרות

  • אין להשתמש ב- CSS שלב "פתוח", כלומר CSS הכלול בתג HTML. (דוגמה: "align = 'center'" היא הגדרת CSS פתוחה). זוהי אופציה מיושנת עם תחביר גרוע. אם לאחר זמן מה יהיה עליך לעדכן את האתר, קשה יהיה לשנות הגדרה זו.