דף סגנון חיצוני מגדיר את מראה דף האינטרנט. אתה יכול להשתמש בגיליון סגנון כדי לציין דברים כמו גודל, צבע וגופן של הטקסט, צבע הכפתורים או מיקום התפריטים וסרגל הצדדי.
קוד המשמש בגליון סגנון חיצוני
ישנם שני סוגים של קוד המשמשים ליצירת דף אינטרנט בסיסי:
- שפת סימני עריכה לתמליל - על (HTML): מגדיר את התוכן של דף אינטרנט. הוא מכיל את הטקסט בפועל עם סימון שמזהה אם קטעי טקסט הם פסקאות, כותרות או רשימות. הוא מכיל גם קישורים לתמונות המופיעות בעמוד והיפר-קישורים לדפים חיצוניים.
- גליונות סגנון מדורגים (CSS): שפת קידוד המשמשת לקביעת אופן הצגת התוכן. זה מגדיר כיצד כל סוג של אלמנט טקסט מוצג ויכול להציג את אותו סוג של אלמנט באופן שונה אם הם שייכים למחלקות שונות או שיש להם מזהה אחר. זה מאפשר לדברים כמו תפריטים ורשימות להתנהג בצורה שונה מאוד בטקסט הראשי של דף אינטרנט.
באופן כללי, הפרדת סגנון לתוכן היא רעיון טוב, מכיוון שהיא מאפשרת לך להתמקד בדבר אחד בכל פעם. זה הופך להיות חשוב עוד יותר בצוות, ומאפשר למומחים בתוכן ובהצגה לעבוד באופן עצמאי מכל השאר. יתרה מכך, זה גם מאפשר ליישם באופן קבוע קבוצה אחת של הוראות סגנון על פני אתר שלם.
לאחר מכן ניתן לשנות את המצגת החזותית של האתר מגיליון סגנון יחיד מבלי לערוך כל דף אינטרנט בנפרד. באתרים מורכבים גדולים יותר, ניתן להשתמש במספר גיליונות סגנון לשליטה בטקסט, בתפריטים ובחלוקה בתוך העמודים. אוסף זה של גליונות סגנון יכול להיקרא "נושא".
שימוש ב- CSS חיצוני לקישור HTML ל- CSS
אפשר לכלול סגנון CSS ישירות בתוך ה- HTML של דף אינטרנט, באמצעות CSS כדי לעצב כל פסקה בכותרת באופן שונה. הסוג הזה של סטיילינג מוטבע בדרך כלל זה לא רעיון טוב, מכיוון שאתה מאבד את כל היתרונות של הפרדת סגנון לתוכן. בעיקר, אתה מאבד את היכולת לעדכן את כל האתר באופן עקבי מקובץ יחיד.
הדרך הנכונה להחיל סגנון על אתר היא ליצור קובץ גיליון סגנון חיצוני יחיד עבור כל סוג סגנון שברצונך להחיל, ואז להפנות קבצים אלה מכל קובץ HTML. לדוגמה, ייתכן שיש לך את גליונות הסגנון החיצוניים הבאים:
- text.css
- menus.css
- layout.css
באפשרותך לבצע שינויים בקוד CSS בתוך גיליונות סגנון חיצוניים אלה מבלי לשנות את קודם שמות קבצים, כלומר ההפניות לקבצים אלה, בתוך ה- HTML של כל דפי האינטרנט שלך, לא יהיו השתנה.
דוגמאות ל- HTML ו- CSS
דף HTML פשוט מאוד יכול להכיל את הקוד הבא:
הכל בנוגע עליי!
דף זה עוסק בי ומדוע אני מדהים.
אם אתה רוצה לראות איך זה נראה בדפדפן אינטרנט, העתק את הטקסט לעורך טקסט כמו פנקס רשימות. שמור את הקובץ כ- "index.html" וגרור אותו לדפדפן שלך כדי לראות את סגנון בית הספר הישן.
ניתן לקשר דף סגנון חיצוני פשוט לדף זה על ידי הוספת הקוד הבא מתחת ל-.
type = "text / css"
href = "myStyle.css" />
צור קובץ טקסט נוסף בשם myStyle.css, הנמצא באותה תיקיה כמו index.html המכיל את הקוד הבא:
h1 {
צבע: # FF7643;
גופן-פנים: Arial '
}
p {
צבע אדום;
גודל גופן: 1.5em;
}
אפשר לעשות הרבה יותר עם CSS. אם אתה רוצה ללמוד עוד, בתי ספר W3 הוא מקום נהדר להתחיל בו.