כאשר אתה בנה אתר מאפס, זה חכם להתחיל עם הסגנונות הבסיסיים שהוגדרו. זה כמו להתחיל עם בד נקי ומברשות רעננות. אחת הבעיות הראשונות שעומדות בפני מעצבי אתרים היא דפדפני אינטרנט כולם שונים. גודל הגופן המוגדר כברירת מחדל שונה מפלטפורמה לפלטפורמה, משפחת הגופנים המוגדרת כברירת מחדל שונה, חלק מהדפדפנים מגדירים שוליים וריפודים על תג הגוף בעוד שאחרים לא, וכן הלאה. עקוף אחר חוסר העקביות על ידי הגדרת סגנונות ברירת המחדל של דפי האינטרנט שלך.
CSS וערכת התווים
ראשית הדברים הראשונים, הגדר את ערכת התווים של מסמכי CSS שלך ל utf-8. אמנם סביר להניח שרוב הדפים שאתה מעצב כתובים באנגלית, אך חלקם עשויים להיות מקומיים - מותאמים להקשר לשוני ותרבותי שונה. כשהם, utf-8 מפשט את התהליך. הגדרת ערכת התווים ב- דף סגנון חיצוני לא יקבל עדיפות על פני HTTP כותרת, אבל בכל המצבים האחרים, זה יהיה.
קל להגדיר את ערכת התווים. בשורה הראשונה של מסמך CSS כתוב:
@charset "utf-8";
בדרך זו, אם אתה משתמש בתווים בינלאומיים במאפיין התוכן או בתור שמות כיתות ותעודות, גיליון הסגנונות עדיין יעבוד כראוי.
עיצוב גוף העמוד
הדבר הבא שדף סגנון ברירת מחדל זקוק לו הם סגנונות
אפס החוצה שוליים, ריפוד וגבולות. זה מוודא שכל הדפדפנים ממקמים את התוכן באותו מקום, ואין רווחים מוסתרים בין הדפדפן לתוכן. עבור רוב דפי האינטרנט זה קרוב מדי לקצה עבור טקסט, אך חשוב להתחיל שם כך שתמונות רקע וחלוקות הפריסה יהיו מסודרות כראוי.html, body {
שוליים: 0 פיקסלים;
ריפוד: 0px;
גבול: 0px;
}
הגדר את צבע החזית או הגופן המוגדר כברירת מחדל לשחור ואת צבע הרקע המוגדר כברירת מחדל לבן. אמנם זה ישתנה ככל הנראה ברוב העיצובים של דפי האינטרנט, אך הצבעים הסטנדרטיים הללו מוגדרים על הגוף ו תג HTML בהתחלה מקל על הדף לקריאה ולעבודה.
html, body {
צבע: # 000;
רקע: #fff;
}
סגנונות גופן המוגדרים כברירת מחדל
גודל הגופן ומשפחת הגופנים הם משהו שישתנה בהכרח ברגע שהעיצוב יתפוס אבל התחל בגודל ברירת המחדל של גופן 1 em וברירת מחדל משפחת גופן של אריאל, ז'נבה, או אחרת גופן sans-serif. השימוש ב- ems שומר על הדף נגיש ככל האפשר, וגופן sans-serif קריא יותר על המסך.
html, body, p, th, td, li, dd, dt {
גופן: 1em Arial, Helvetica, sans-serif;
}
יתכן שיש מקומות אחרים שבהם אתה עשוי למצוא טקסט, אך עמ ', ה, td, li, dd, ו dt הם התחלה טובה להגדרת הגופן הבסיסי. לִכלוֹל HTML ו גוּף לכל מקרה, אך דפדפנים רבים עוקפים את אפשרויות גופן אם אתה מגדיר רק את הגופנים שלך ל- HTML או לגוף.
כותרות
כותרות HTML חשוב להשתמש בהם כדי לעזור למתאר את האתר שלך ולתת למנועי החיפוש להעמיק יותר באתר שלך. ללא סגנונות, כולם מכוערים למדי, לכן הגדר סגנונות ברירת מחדל בכולם והגדר את משפחת הגופנים ואת גודל הגופנים עבור כל אחד מהם.
h1, h2, h3, h4, h5, h6 {
משפחת גופנים: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {font-size: 0.9em; }
h6 {font-size: 0.8em; }
אל תשכח את הקישורים
עיצוב צבעי הקישור הוא כמעט תמיד חלק קריטי בעיצוב, אך אם לא תגדיר אותם בסגנונות ברירת המחדל, רוב הסיכויים שתשכח לפחות את אחת משיעורי הפסאודו. הגדר אותם עם וריאציה קטנה בכחול ואז שנה אותם ברגע שמגדירים את לוח הצבעים לאתר.
כדי להגדיר את קישורים בגווני כחול, סט:
- קישורים כמו כחול
- קישורים ביקרו כחול כהה
- קישורי רחף כמו תכלת
- קישורים פעילים כמו כחול בהיר יותר
כפי שמוצג בדוגמה זו:
a: קישור {color: # 00f; }
a: ביקר {color: # 009; }
a: רחף {color: # 06f; }
a: פעיל {color: # 0cf; }
על ידי עיצוב הקישורים במתכונת צבעים מזיקה למדי, זה מבטיח שלא תשכח אף אחד מהשיעורים וגם גורם להם להיות קצת פחות רועשים מברירת המחדל של כחול, אדום וסגול.
גיליון סגנון מלא
הנה דף הסגנון המלא:
@charset "utf-8";
html, body {
שוליים: 0 פיקסלים;
ריפוד: 0px;
גבול: 0px;
צבע: # 000;
רקע: #fff;
}
html, body, p, th, td, li, dd, dt {
גופן: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
משפחת גופנים: Arial, Helvetica, sans-serif;
}
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }
h5 {font-size: 0.9em; }
h6 {font-size: 0.8em; }
a: קישור {color: # 00f; }
a: ביקר {color: # 009; }
a: רחף {color: # 06f; }
a: פעיל {color: # 0cf; }