מה זה css reset ? קודם כל נסכם במשפט או שניים מה זה סי אס אס לפני שנסביר מה זה css reset.

CSS היא שפת עיצוב שמגדירה את תבנית העיצוב (מציבה תמונות, מגדירה כתב, מגדירה מיקום של אובייקטים ודברים נוספים) של מסמכי HTML. וכאן נעצור ונתמקד על Css reset.

אחרי שהבנו מה זה css ורובכם אני בטוח יודעים את זה, נמשיך עם css reset.

פירושו של Css Reset הוא אתחול של CSS. מה זאת אומרת אתחול, החזרת כל ההגדרות ל-0

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

אז מה באמת לעשות? איך לכתוב CSS reset
זה לא טכניקה שאני המצאתי אבל כמובן שהרבה מעצבים ומתכנתי אתרים משתמשים בטכניקה זו כדי לעשות תיאום של אתרם לדפדפנים שונים ברשת. ברובם כמובן מדובר באקספלורר 6, 7, 8 פיירפוקס 3, 3.5 , וכרום של גוגל. זהו הדפדפנים הכי פופולרים בישראל.

קוד Css reset הפופולרי והמומלץ להשתמש בו.
כל שעליכם לעשות זה לצור קובץ חדש בסיומת Css ולקראו לו Css reset ולכלול אותו בכל דף האתר שלכם.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

/* remember to define focus styles! */

:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

מאמרים נוספים:

כפתורים חינמיות לפוטושופ בהורדה

רציתם כפתורים מוכנים בפוטושופ? כעת יש לכם כפתו ...

סמלים של רשתות חברתיות להורדה

אתר בשם Blog Perfume הפיץ סמלים של רשתות חברתי ...

כיצד ליצור סליידר אינסופית עם jQuery

jQueryforDesigners  הוסיפה  גלילת סליידר כפי ש ...

5 תבניות וורדפרס טיפוגרפיות

5 תבניות טיפוגרפיות של וורדפרס. התבניות הם באנ ...