כיצד להסיר סגנון ברירת המחדל סטייל עם יחידת גיליונות

קבל את העובדות עם הטיפים האלה

כל דפדפני האינטרנט כוללים את מה שמכונה "סגנונות defauly". אלה הם סגנונות המכתיבים את המראה והתחושה של רכיבי HTML בהעדר כל מידע אחר בסגנון. לדוגמה, כמעט בכל דפדפן את המראה ברירת המחדל של קישורים הוא צבע כחול בהיר עם קו תחתון. כך נראים הקישורים האלה, אלא אם כן אתה אומר להם להציג בצורה אחרת.

סגנונות דפדפן ברירת המחדל יכול להיות מועיל, אבל במקרים רבים מעצבי אתרים רוצים להסיר את הסגנונות האלה, כך שהם יכולים להתחיל טרי עם סגנונות שהם 100% בשליטה. זה נעשה באמצעות מה שמכונה "סגנונות הורים".

גיליון סגנונות ראשי צריך להיות גליון הסגנונות הראשון שתקרא בכל המסמכים שלך. אתה משתמש בגיליון סגנונות ראשי כדי לנקות את הגדרות הדפדפן המוגדרות כברירת מחדל העלולות לגרום לבעיות בדפדפן האינטרנט. לאחר שסיימת לנקות את הסגנונות בגיליון סגנונות ראשי, העיצוב שלך מתחיל מאותו מקום בכל הדפדפנים - כמו בד נקי לציור.

הגדרות ברירת מחדל גלובליות

גיליון הסגנונות הראשי שלך צריך להתחיל על ידי אפס את השוליים, הריפוד והגבולות בדף. חלק מדפדפני האינטרנט מגדירים את גוף המסמך ל- 1 או 2 פיקסלים הזחים מקצות חלונית הדפדפן. זה מוודא כי כולם להציג את אותו הדבר:

html, body {margin: 0px; ריפוד: 0px; border: 0px; }

אתה גם רוצה להפוך את הגופן עקבי. הקפד גם לקבוע את גודל הגופן ל -100% או 1em, כך שהדף שלך יהיה נגיש, אך הגודל עדיין עקבי. ואל תשכח לכלול את גובה השורה.

body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }

עיצוב כותרת

תגי כותרת או כותרת (H1, H2, H3 וכו ') בדרך כלל ברירת מחדל לטקסט מודגש עם שוליים גדולים או ריפוד סביבם. על ידי ניקוי המשקל, השוליים והריפוד, תבטיח שתגים אלה יישארו גדולים יותר (או קטנים יותר) מהטקסט שסביבם ללא סגנונות נוספים:

h1, h2, h3, h4, h5, h6 {margin: 0; ריפוד: 0; משקל גופני: רגיל; משפחת גופן: אריאל, הלויטיקה, סאנס-סריף; }

ייתכן שתרצה לשקול להגדיר גדלים ספציפיים, ריווח אותיות וריפודים לתגי הכותרת שלך, אבל זה באמת תלוי בסגנון של האתר שאתה מעצב צריך להיות מחוץ גיליון הסגנון הראשי. ניתן להוסיף סגנונות נוספים עבור כותרות אלה לפי הצורך עבור העיצוב הספציפי שלך.

עיצוב טקסט רגיל

מעבר לכותרות, יש תגי טקסט אחרים שאתה צריך להיות בטוח כדי לנקות. קבוצה אחת כי אנשים שוכחים לעתים קרובות הם תגי תא השולחן (TH ו TD) ותגים טופס (SELECT, TEXTAREA ו קלט). אם אתה לא להגדיר אותם לגודל זהה לגוף שלך ואת הטקסט פסקה, אתה עלול להיות מופתע unpleasantly איך הדפדפנים לעבד אותם.

p, th, td, li, dd, dt, ul, ol, blockque, q, acronym, abbr, a, input, select, textarea {margin: 0; ריפוד: 0; font: נורמלי רגיל רגיל 1em / 1.25 Arial, Helvetica, sans-serif; }

זה גם נחמד לתת את הציטוטים (BLOCKQUOTE ו- Q), ראשי תיבות, קיצורים בסגנון קצת יותר, כך שהם להתבלט קצת יותר:

blockquote {margin: 1.25em; ריפוד: 1.25em} q {font-style: italic; } ראשי תיבות, abbr {cursor: help; הגבול התחתון: 1px מקווקו; }

קישורים ותמונות

קישורים קלים לניהול ולהשתנות מהטקסט המסומן בקו תחתון. אני מעדיף תמיד את הקישורים שלי להישאר בקו תחתון, אבל אם אתה מעדיף את זה בדרך אחרת אתה יכול להגדיר את האפשרויות בנפרד. אני גם לא כוללים צבעים בגיליון הסגנון הראשי, כי זה תלוי בעיצוב.

a, a: link, a: visit, a: active, a: hover {text-decoration: underline; }

עם תמונות, חשוב לכבות את הגבולות. בעוד שרוב הדפדפנים אינם מציגים גבול סביב תמונה רגילה, כאשר התמונה מקושרת, הדפדפנים מפעילים את הגבול. כדי לתקן זאת:

עמ space }

טבלאות

כאשר הטבלאות כבר לא בשימוש למטרות פריסה, האתר עדיין עשוי להשתמש בהם עבור נתוני tabluar בפועל. זהו שימוש נאה בטבלאות HTML. כבר וידאנו שגודל ברירת המחדל לטקסט זהה לתאי הטבלה שלך, אך ישנם מספר סגנונות אחרים שעליך להגדיר, כך שהטבלאות שלך יישארו ללא שינוי:

טבלה {margin: 0; ריפוד: 0; גבול: none; }

טפסים

כמו עם אלמנטים אחרים, אתה צריך לנקות את השוליים ואת הריפודים סביב הטפסים שלך. דבר נוסף שאני אוהב לעשות הוא לשכתב את תג הטופס כמו " inline " כך שהוא לא מוסיף שטח נוסף שבו אתה שם את התג בקוד. כמו עם אלמנטים אחרים של טקסט, אני מגדיר את נתוני הגופן לבחירה, textarea ולהקלט למעלה, כך שזה זהה לשאר הטקסט שלי.

צורה {margin: 0; ריפוד: 0; הצג: inline; }

כמו כן, מומלץ לשנות את הסמן עבור התוויות שלך. זה עוזר לאנשים לראות את התווית יעשה משהו כאשר הם לוחצים עליו.

תווית [הסמן: מצביע; }

שיעורים משותפים

עבור חלק זה של גיליון הסגנון הראשי, עליך להגדיר שיעורים הגיוניים עבורך. אלה הם חלק מהשיעורים שאני משתמש בהם בתדירות הגבוהה ביותר. שים לב שהם אינם מוגדרים לכל רכיב מסוים, כך שתוכל להקצות אותם לכל מה שאתה צריך:

.ACier ברור 23 you בשתי. } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; שוליים-שמאל: אוטומטי; margin-right: auto; } / * זכור להגדיר רוחב * / .bold {font-weight: bold; } .italic {font-style: italic; }. undline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .narargin {margin: 0; }. nopadding {ריפוד: 0; } .nobullet {list-style: none; list-style-image: none; }

זכור כי בגלל שיעורים אלה נכתבו לפני כל סגנונות אחרים והם רק כיתות, הם קל לעקוף עם מאפייני סגנון ספציפי יותר להתרחש מאוחר יותר מפל . אם תגלה שהגדרת מחלקה נפוצה על אלמנט והיא לא תיכנס לתוקף, עליך לבדוק אם אין סגנון אחר באחד מגליונות הסגנונות המאוחרים המשפיעים על אותו אלמנט.

גיליון הסגנון הראשי

/ * ברירת המחדל הגלובלית * / html, body {margin: 0px; ריפוד: 0px; border: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * כותרות * / h1, h2, h3, h4, h5, h6 {margin: 0; ריפוד: 0; משקל גופני: רגיל; משפחת גופן: אריאל, הלויטיקה, סאנס-סריף; } / * סגנונות טקסט / p, th, td, li, dd, dt, ul, ol, blockque, q, acronym, abbr, a, input, select, textarea {margin: 0; ריפוד: 0; font: נורמלי רגיל רגיל 1em / 1.25 Arial, Helvetica, sans-serif; } blockcoote {margin: 1.25em; ריפוד: 1.25em} q {font-style: italic; } ראשי תיבות, abbr {cursor: help; הגבול התחתון: 1px מקווקו; } קטן {font-size: .85em; } גדול {font-size: 1.2em; } / * קישורים ותמונות * / a, a: link, a: visit, a: active, a: hover {text-decoration: underline; } img {border: none; } / * טבלאות * / table {margin: 0; ריפוד: 0; גבול: none; } / * Forms * / form {margin: 0; ריפוד: 0; הצג: inline; } תווית {סמן: מצביע; } / * שיעורים משותפים * / .clear {ברור: בשתי; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; שוליים-שמאל: אוטומטי; margin-right: auto; } / * זכור להגדיר רוחב * / .bold {font-weight: bold; } .italic {font-style: italic; }. undline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .narargin {margin: 0; }. nopadding {ריפוד: 0; } .nobullet {list-style: none; list-style-image: none; }

מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב -10 / 6/17