סקירה כללית של גיליונות סגנון מדורגים עם גיליון סגנונות סגנון
כאשר אתה בונה אתר אינטרנט מאפס, זה חכם להתחיל עם סגנונות בסיסיים שהוגדרו. זה כמו להתחיל עם בד נקי ומברשות טריות. אחת הבעיות הראשונות של מעצבי אתרים היא שדפדפני האינטרנט שונים. גודל ברירת המחדל של הגופן שונה מפלטפורמה לפלטפורמה, משפחת הגופנים המוגדרת כברירת מחדל שונה, חלק מהדפדפנים מגדירים את השוליים ואת הריפוד על תג הגוף בעוד שאחרים אינם, וכן הלאה. לעקוף את חוסר העקביות על ידי הגדרת סגנונות ברירת המחדל עבור דפי האינטרנט שלך.
CSS וערכת התווים
ראשית הדברים הראשונים, להגדיר את התווים של מסמכי CSS שלך ל utf-8 . אמנם סביר להניח שרוב הדפים שאתם מעצבים כתובים באנגלית, חלקם עשויים להיות מותאמים באופן מקומי בהקשר לשוני ותרבותי שונה. כאשר הם, utf-8 מפשט את התהליך. הגדרת התווים בגיליון הסגנונות החיצוני לא תקבל עדיפות על פני כותרת HTTP , אבל בכל המצבים האחרים, היא תופיע.
קל להגדיר את ערכת התווים. עבור השורה הראשונה של מסמך ה- CSS כתוב:
@charset "utf-8";בדרך זו, אם אתה משתמש בתווים בינלאומיים במאפיין התוכן או בשמות כיתות ומזהים, גיליון הסגנון ימשיך לפעול כהלכה.
עיצוב גוף הגוף
הדבר הבא גיליונות גיליון סגנונות ברירת המחדל הם סגנונות לאפס את השוליים, ריפוד, ואת הגבולות. פעולה זו מוודאת שכל הדפדפנים ממקמים את התוכן באותו מקום, ואין רווחים נסתרים בין הדפדפן לתוכן. עבור רוב דפי האינטרנט, זה קרוב מדי לקצה עבור טקסט, אך חשוב להתחיל שם כך שתמונות הרקע ודיביזיות הפריסה מסודרות בצורה נכונה.
html, body {margin: 0px; ריפוד: 0px; border: 0px; }הגדר את צבע ברירת המחדל או צבע הגופן לשחור ואת צבע הרקע של ברירת המחדל ללבן. אמנם זה יהיה קרוב לוודאי לשנות את רוב העיצובים של דפי אינטרנט, לאחר אלה צבעים סטנדרטיים להגדיר על הגוף תג HTML בהתחלה עושה את הדף קל יותר לקרוא ולעבוד איתו.
html, body {color: # 000; רקע: #fff; }סגנונות גופן ברירת מחדל
גודל הגופן ומשפחת הגופנים הם משהו שישתנה באופן בלתי נמנע לאחר עיצוב לוקח אבל להתחיל עם גודל גופן ברירת המחדל של 1 em ומשפחת גופן ברירת המחדל של Arial, ג 'נבה, או איזה גופן sans-serif אחרים. השימוש ems לשמור את הדף נגיש ככל האפשר, ואת גופן sans-serif הוא קריא יותר על המסך.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }ייתכן שיהיו מקומות אחרים שבהם תוכל למצוא טקסט, אך p , th , td , li , dd ו- dt הם התחלה טובה להגדרת גופן הבסיס. כלול HTML וגוף רק במקרה, אבל דפדפנים רבים לעקוף את הגופנים הבחירות אם אתה רק להגדיר את הגופנים עבור HTML או גוף.
כותרות
כותרות HTML חשוב להשתמש כדי לעזור לאתר שלך מתאר ולתת מנועי החיפוש להגיע עמוק יותר לתוך האתר שלך. ללא סגנונות, הם כל מכוער למדי, כך להגדיר סגנונות ברירת המחדל על כולם ולהגדיר את משפחת הגופנים ואת גודלי הגופן עבור כל אחד.
h1, h2, h3, h4, h5, h6 {font-family: 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; }אל תשכח את הקישורים
סגנון הצבעים הוא כמעט תמיד חלק קריטי של העיצוב, אבל אם אתה לא מגדיר אותם סגנונות ברירת המחדל, רוב הסיכויים שאתה תשכח לפחות אחד pseudo- מחלקות. הגדר אותם עם וריאציה קטנה על כחול ולאחר מכן לשנות אותם ברגע שיש לך את לוח הצבעים עבור האתר מוגדר.
כדי להגדיר את הקישורים בגוונים של כחול, הגדר:
- קישורים כחולים
- ביקר קישורים כמו כחול כהה - -
- העבר את הקישורים כחול בהיר
- קישורים פעילים כמו כחול כחלחל יותר
כפי שמוצג בדוגמה זו:
a: link {color: # 00f; } a: Visit {color: # 009; } א: העבר את העכבר {color: # 06f; } a: פעיל {color: # 0cf; } על ידי עיצוב הקישורים עם ערכת צבעים תמימה למדי היא מבטיחה כי אני לא אשכח את כל הכיתות, וגם עושה אותם קצת פחות חזק מאשר ברירת המחדל כחול, אדום, סגול.גיליון סגנון מלא
הנה גיליון הסגנון המלא:
@charset "utf-8"; html, body {margin: 0px; ריפוד: 0px; border: 0px; צבע: # 000; רקע: #fff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: 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: link {color: # 00f; } a: Visit {color: # 009; } א: העבר את העכבר {color: # 06f; } a: פעיל {color: # 0cf; }