چرا در طراحی سایت باید از css reset استفاده کنیم؟ تقریبا همه افرادی که در توسعه وب نقش دارند حداقل یکبار نام این فایل را شنیده اند اما ممکن است با کاربرد آن آشنا نباشند. در این مقاله ما به شما توضیح خواهیم داد که css rest چه اهمیت و کاربردی دارد. در نهایت نیز به شما کمک خواهیم کرد تا فایل css reset خود را بسازید.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
Css reset چیست و چه اهمیتی دارد؟
زمانی که شما یک فایل html ایجاد می کنید و هیچ استایلی بر روی آن اضافه نمی کنید، مرورگر ها در هنگام نمایش آن از استایل های پیش فرض خود استفاده می کنند. انواع مختلف مرورگر ها دارای استایل های پیش فرض مختلفی هستند که هریک از عناصر html را توسط آن استایل ها نمایش می دهند. یکی از مثال های رایج در این زمینه نمایش لینک ها است، بعضی از مرورگر ها به صورت پیش فرض از رنگ آبی یا بنفش برای نمایش لینک ها استفاده می کنند. به همین دلیل ممکن است در مرورگر های مختلف عناصر به شکل های مختلفی نشان داده شوند. کاری که فایل css reset انجام می دهد این است که به شما کمک می کند تا شکل و شمایل سایت شما در همه مرورگر ها یکسان باشد.
آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3
Css reset استایل ها و مقدار های آن ها را به حالت صفر یا none بر می گرداند، به این ترتیب اگر عنصری در سایت بدون استایل هم باشد در مرورگر های مختلف به یک شکل نمایش داده خواهد شد. البته دقت کنید کنید این فایل فقط دارای استایل های پایه ای است و شما می توانید در فایل اصلی استایل خود نحوه نمایش عناصر را به شکلی که می خواهید بازنویسی کنید.
چگونه یک فایل css reset بسازیم؟
این فایل معمولا به شکل reset.css نوشته می شود. برای این کار شما باید ابتدا تمامی عناصری که از آن ها استفاده کرده اید را مشخص کنید و با استفاده از یک کد ساده مقدار استایل های آن را ۰ کنید. کد های آماده برای ساده تر شدن این کار وجود دارد و شما می توانید از آن ها استفاده کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } |
شما با وارد کردن این کد ها در واقع فایل reset.css خود را به همین راحتی ایجاد می کنید.
استفاده از فایل css reset برای html5
Html5 اخرین نسخه ارائه شده از html است و عناصر و استایل ها در آن کمی متفاوت اند. برای مثال کد های بالا css reset باید کمی متفاوت اعمال شود تا به خوبی برای صفحات html5 نیز بهینه شده باشد. در اینجا بهتر است از تگ ها مانند big را حذف کنیم و برای برخی تگ ها نیز استایل های اختصاصی تری تعریف کنیم. به مثال زیر دقت کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 |
/* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } |
آیا لازم است که همیشه از css reset استفاده کنیم؟
به صورت کلی می توان گفت css reset یکی از الزامات طراحی سایت است. بسیار مهم است که شکل و شمایل سایت شما در همه مرورگر ها یکسان باشد. اما زمانی که استایل اصلی را با دقت بنویسید تا حد زیادی نیاز به css reset نخواهید داشت. بعضی از طراحان حرفه ای وب معتقد اند که تا حد امکان باید از فایل های css کمتری استفاده شود تا سرعت بارگزاری و میزان حجم دانلود صفحات کاهش یابد، به همین دلیل از css reset استفاده نمی کنند. با این حال پیشنهاد ما این است که از css reset، تا زمانی که مطمئن نشده اید همه عناصر دارای استایل مناسب هستند، استفاده کنید.
کلام آخر
نکته مهمی که در نوشتن css reset باید به آن توجه شود این است که همیشه استایلی که در آخر نوشته می شود نسبت به استایل های اولیه اولویت دارد. مرورگر ها فایلی که در آخر قرار بگیرد را در اولویت قرار می دهند به این ترتیب اخرین استایل، استایل های قبل از خود را باز نویسی خواهد کرد.
در نتیجه شما باید فایل css reset خود را باید در ابتدای استایل های فراخوانی شده قرار دهید. اهمیت این موضوع در این است که اگر css reset در آخر استایل ها قرار بگیرد همه استایل های قبلی خود حتی استایل اصلی شما را نیز باز نویسی خواهد کرد و همه چیز به شکل none در مرورگر خوانده می شود. پس حتما به این موضوع دقت کنید.
منبع : طراحی سایت
سلام ممنون خیلی خوب بود و برام سوال بود که این reset چی هست!
و یک موضوعی اینکه کدهایی که برای HTML5 نوشتید آپدیت هست؟ همین رو میشه توی پروژه استفاده کرد؟
سلام و درود
با تشکر از نظر شما
بله میتونید از کدها استفاده کنید
موفق و پیروز باشید
سلام من از کد های بالا استفاده کردم ولی جواب نداد
و یک سوالی که داشتم اینه که چجوری میتونیم
borderیی که هنگام فکوس به طور دیفالت میاد رو حذف کنیم؟