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