מה זה css reset ? קודם כל נסכם במשפט או שניים מה זה סי אס אס לפני שנסביר מה זה css reset.
CSS היא שפת עיצוב שמגדירה את תבנית העיצוב (מציבה תמונות, מגדירה כתב, מגדירה מיקום של אובייקטים ודברים נוספים) של מסמכי HTML. וכאן נעצור ונתמקד על Css reset.
אחרי שהבנו מה זה css ורובכם אני בטוח יודעים את זה, נמשיך עם css reset.
פירושו של Css Reset הוא אתחול של CSS. מה זאת אומרת אתחול, החזרת כל ההגדרות ל-0
הנקודה החשובה לאתחול כזה שלא כל הדפדפנים תואמים לפי הגדרתם לאחד השני. כגון עורך הדיפולטיבי (הרגיל) המקובל בדפדפן אחד יכול להיות שונה לגמרי בדפדפן אחר, או גודל הטקסט והכותרות יכולים להיות שונים בכל דפדפן, זה פוגע בעיצוב הדף, בתבניות ומשנה את חווית המשתמש לגמרי מהמקור. לכן הומצא קובץ Css Reset שנותנת מענה לתופעה זו. 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;
- }</p>
- <p style="text–align: left">body {
- line-height: 1;
- }</p>
- <p style="text–align: left">ol, ul {
- list-style: none;
- }</p>
- <p style="text–align: left">blockquote, q {
- quotes: none;
- }</p>
- <p style="text–align: left">/* remember to define focus styles! */</p>
- <p style="text–align: left">:focus {
- outline: 0;
- }</p>
- <p style="text–align: left">/* 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;
- }
תודה על המעידה.
מאוד עזר לי בפרויקט
אפשר לקצר את כל זה ע"י
*{
padding:0;
margin:0;
}
* = לכל התגיות
בס"ד
יוסי שלום 🙂
אני אשמח לדעת איך מבצעים את הפעולה הנ"ל צעד אחר צעד עבור חסרי נסיון בכתיבת קוד , היכן בדיוק משלבים את הקוד באתר , איך אני יוצר את הקובץ וכו'. זו תהיה עבורי עזרה גדולה מאוד.
תודה מראש
מוטי
היי מוטי,
פתח כתבן במחשב – במידה ואתה משתמש במערכת הפעלה של חלונות יש לך את Notepad או אתה משתמש ב-Mac אז Textedit
לא לפתוח word. מדובר בכתבן פשוט.
עתק את הקוד המופיע כאן אל קובץ שפתחת ושמור אותה תחת שם הבא:
cssreset.css
סיומת css חשוב לשים לב. שסיומת של הקובץ לא תיהיה txt או כל דבר אחר. cssreset.css
עליך לעלאות כמות את הקובץ לשרת שלך. במידה ואתה עובר לוקאלי במחשב אז בתיקיית המחשב.
לאחר מכן, אתה צריך לקשר את האתר לבין עמוד למשל ב-html
בין תגיות –
עליך להכניס הקישור לקובץ הסיאסאס שיצרת בצורה כזאת
< link rel=" stylesheet " href=" cssreset.css " type=" text/css " media= " screen" />
מקווה שזה מספיק ברור. אם אינך יודע גם את ההסבר זה, אני חושב שתצטרך לחזור 2 צעדים אחורה וללמוד את בסיסי html קודם.
מקווה שעזרתי