وب

Css reset چیست؟ به همراه آموزش ساخت فایل css reset

چرا در طراحی سایت باید از css reset استفاده کنیم؟ تقریبا همه افرادی که در توسعه وب نقش دارند حداقل یکبار نام این فایل را شنیده اند اما ممکن است با کاربرد آن آشنا نباشند. در این مقاله ما به شما توضیح خواهیم داد که css rest چه اهمیت و کاربردی دارد. در نهایت نیز به شما کمک خواهیم کرد تا فایل css reset خود را بسازید.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

 Css reset چیست و چه اهمیتی دارد؟

زمانی که شما یک فایل html ایجاد می کنید و هیچ استایلی بر روی آن اضافه نمی کنید، مرورگر ها در هنگام نمایش آن از استایل های پیش فرض خود استفاده می کنند. انواع مختلف مرورگر ها دارای استایل های پیش فرض مختلفی هستند که هریک از عناصر html را توسط آن استایل ها نمایش می دهند. یکی از مثال های رایج در این زمینه نمایش لینک ها است، بعضی از مرورگر ها به صورت پیش فرض از رنگ آبی یا بنفش برای نمایش لینک ها استفاده می کنند. به همین دلیل ممکن است در مرورگر های مختلف عناصر به شکل های مختلفی نشان داده شوند. کاری که فایل css reset انجام می دهد این است که به شما کمک می کند تا شکل و شمایل سایت شما در همه مرورگر ها یکسان باشد.

آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3

Css reset استایل ها و مقدار های آن ها را به حالت صفر یا none بر می گرداند، به این ترتیب اگر عنصری در سایت بدون استایل هم باشد در مرورگر های مختلف به یک شکل نمایش داده خواهد شد. البته دقت کنید کنید این فایل فقط دارای استایل های پایه ای است و شما می توانید در فایل اصلی استایل خود نحوه نمایش عناصر را به شکلی که می خواهید بازنویسی کنید.

Css reset

چگونه یک فایل css reset بسازیم؟

این فایل معمولا به شکل reset.css نوشته می شود. برای این کار شما باید ابتدا تمامی عناصری که از آن ها استفاده کرده اید را مشخص کنید و با استفاده از یک کد ساده مقدار استایل های آن را ۰ کنید. کد های آماده برای ساده تر شدن این کار وجود دارد و شما می توانید از آن ها استفاده کنید:

شما با وارد کردن این کد ها در واقع فایل reset.css خود را به همین راحتی ایجاد می کنید.

Css reset

استفاده از فایل css reset برای html5

Html5 اخرین نسخه ارائه شده از html است و عناصر و استایل ها در آن کمی متفاوت اند. برای مثال کد های بالا css reset باید کمی متفاوت اعمال شود تا به خوبی برای صفحات html5 نیز بهینه شده باشد. در اینجا بهتر است از تگ ها مانند big را حذف کنیم و برای برخی تگ ها نیز استایل های اختصاصی تری تعریف کنیم. به مثال زیر دقت کنید:

 

آیا لازم است که همیشه از css reset استفاده کنیم؟

به صورت کلی می توان گفت css reset  یکی از الزامات طراحی سایت است. بسیار مهم است که شکل و شمایل سایت شما در همه مرورگر ها یکسان باشد. اما زمانی که استایل اصلی را با دقت بنویسید تا حد زیادی نیاز به css reset نخواهید داشت. بعضی از طراحان حرفه ای وب معتقد اند که تا حد امکان باید از فایل های css کمتری استفاده شود تا سرعت بارگزاری و میزان حجم دانلود صفحات کاهش یابد، به همین دلیل از css reset استفاده نمی کنند. با این حال پیشنهاد ما این است که از css reset، تا زمانی که مطمئن نشده اید همه عناصر دارای استایل مناسب هستند، استفاده کنید.

کلام آخر

نکته مهمی که در نوشتن css reset  باید به آن توجه شود این است که همیشه استایلی که در آخر نوشته می شود نسبت به استایل های اولیه اولویت دارد. مرورگر ها فایلی که در آخر قرار بگیرد را در اولویت قرار می دهند به این ترتیب اخرین استایل، استایل های قبل از خود را باز نویسی خواهد کرد.

در نتیجه شما باید فایل css reset خود را باید در ابتدای استایل های فراخوانی شده قرار دهید. اهمیت این موضوع در این است که اگر css reset در آخر استایل ها قرار بگیرد همه استایل های قبلی خود حتی استایل اصلی شما را نیز باز نویسی خواهد کرد و همه چیز به شکل none در مرورگر خوانده می شود. پس حتما به این موضوع دقت کنید.

 

منبع : طراحی سایت

نوشته های مشابه

3 دیدگاه

  1. سلام ممنون خیلی خوب بود و برام سوال بود که این reset چی هست!
    و یک موضوعی اینکه کدهایی که برای HTML5 نوشتید آپدیت هست؟ همین رو میشه توی پروژه استفاده کرد؟

    1. سلام و درود

      با تشکر از نظر شما
      بله میتونید از کدها استفاده کنید

      موفق و پیروز باشید

  2. سلام من از کد های بالا استفاده کردم ولی جواب نداد
    و یک سوالی که داشتم اینه که چجوری میتونیم
    borderیی که هنگام فکوس به طور دیفالت میاد رو حذف کنیم؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید
بستن
دکمه بازگشت به بالا