دوره رایگان
CSS3 HTML5 طراحی وب فرانت اند (Front End)

CSS Reset چیست؟ راهنما و آموزش کامل CSS Reset

CSS Reset چیست
نوشته شده توسط مهدی خسروی

اگر تجربه‌ی طراحی صفحات وب را داشته باشید، حتما به این مورد برخورد کرده‌اید که شکل ظاهری وبسایت شما در مرورگرهای مختلف به شکل های مختلفی نمایش داده میشود. برای مثال سایتی که شما طراحی کرده‌اید، در مرورگر گوگل کروم به یک شکل نمایش داده میشود و در مرورگر فایرفاکس به شکل دیگری. راه حل این موضوع استفاده از CSS Reset ها است. در این مقاله و فایل آموزشی بصورت کامل بررسی میکنیم که CSS Reset چیست و چطور میتوان از آن‌ CSS Reset ها استفاده کرد.

 

CSS Reset چیست

برای درک کامل CSS Reset ها و رسیدن به پاسخ سوال CSS Reset چیست ، فیلم آموزشی زیر میتواند بسیار مفید باشد

 

 

انواع مرورگرها

همانطور که میدانید ما انواع مختلفی از مرورگرها داریم. ممکن است شما به عنوان یک طراح وب یا برنامه نویس وب، از مرورگرهای مختلفی مثل گوگل کروم، فایرفاکس، اینترنت اکسپلورر، سافاری و… استفاده کنید.

هرکدام از مرورگرهای موجود، یک سری استایل های پیشفرضی دارند که روی تگ های HTML اعمال میکنند. برای مثال گوگل کروم و فایرفاکس، مقادیر مختلفی از margin ها، padding ها و… را روی تگ های HTML اعمال میکنند.

این استایل های پیشفرضی که توسط مرورگرها روی تگ های مختلف HTML اعمال میشود، باعث میشود که نحوه‌ی نمایش صفحه‌ی وب طراحی شده توسط شما در مرورگرهای مختلف بصورت های متفاوتی باشد. زیرا استایل های پیشفرض مرورگرها با هم متفاوت است.

 

چرا باید از CSS Reset ها استفاده کنیم؟

برای اینکه بتوانید این استایل های پیشفرض مرورگرها را از بین ببرید و خنثی کنید، باید از CSS Reset ها استفاده کنید. در واقع اگر بخواهیم بگوییم که CSS Reset چیست ، میتوانیم این تعریف را داشته باشیم:

CSS Reset چیست : CSS Reset ها به شما کمک میکنند که استایل های پیشفرضی که مرورگرها روی تگ های مختلف اعمال میکنند را خنثی کنید و از بین ببرید. این موضوع باعث میشود که صفحه‌ی وب طراحی شده توسط شما در نهایت روی تمامی مرورگرها، به یک شکل نمایش داده میشود.

در واقع CSS Reset ها به شما کمک میکنند که طراحی یکسانی در تمام مرورگرها داشته باشید.

شاید برایتان سوال پیش بیاید که CSS Reset چیست ؟ آیا یک روش کدنویسی است؟ یا یک کتابخانه است؟

CSS Reset فقط چند خط کد ساده‌ی CSS است. شما چند خط کد ساده‌ی CSS را وارد پروژه‌ی خود میکنید. همین. بعد از آن، تمامی استایل های پیشفرض مرورگرها خنثی میشود.

 

CSS Reset چیست و دقیقا چه کاری میکند؟

قبل از اینکه بخواهیم روش استفاده از CSS Reset را یاد بگیریم، در زیر میخواهیم یک صفحه‌ی وب را در دو حالت بررسی کنیم. حالت اول، وقتی CSS Reset روی آن صفحه‌ وب تنظیم نشده است و حالت دوم وقتی که CSS Reset رو آن تنظیم شده است.

یک صفحه‌ی وب ساده بدون استفاده از CSS Reset شکلی شبیه به زیر خواهد داشت:

CSS Reset چیست

 

اما وقتی CSS Reset را وارد یک صفحه‌ی وب میکنید و از آن استفاده میکنید، صفحه‌ی وب‌تان شبیه عکس زیر میشود:

CSS Reset چیست

همانطور که در تصویر بالا میبینید، بعد از استفاده از CSS Reset ها، چند اتفاق برای سایت شما می‌افتد:

  1. همه‌ی padding ها و margin های پیشفرض مرورگر ها از بین میرود
  2. همه‌ی استایل های متون مثل سایز، رنگ، کلفتی متن و… از بین میرود
  3. و بطور خالی صفحه‌ی وب شما خالی از هرگونه استایل پیشفرض میشود.

بعد از استفاده از CSS Reset ها، شما میتوانید بدون دخالت استایل های پیشفرض مرورگرها، اقدام به طراحی صفحات وب خودتان کنید. صفحات وبی که در همه‌ی مرورگرها به یک شکل نمایش داده میشود، زیرا استایل های پیشفرض مرورگرها را با استفاده از CSS Reset ها خنثی کرده‌ایم.

 

روش استفاده از CSS Reset ها

برای اسفتاده از CSS Reset ها کافیست چند خط کد ساده‌ی CSS را که از قبل نوشته شده است را وارد فایل استایل خود کنید.

برای اینکار ابتدا کد زیر را کپی کنید (منبع):

 

سپس یک فایل مثلا با نام reset.css بسازید و این کد ها را در آن قرار دهید.

کار تمام است. الان فقط کافی است که این فایل را با استفاده از یک خط کد HTML ساده، در قسمت تگ <head> فایل HTML خود وارد کنید تا استایل های CSS Reset لود شود:

با استفاده از اینکار میتوانید کاری کنید که تمام استایل های پیشفرض مرورگرهای مختلف خنثی شود.

در این مقاله بصورت خلاصه سعی کردیم به سوال CSS Reset چیست پاسخ دهیم. برای درک عمیق این مطلب، پیشنهاد میکنیم که حتما فیلم آموزشی موجود در ابتدای این مقاله را مشاهده بفرمایید تا خیلی دقیق متوجه شوید که CSS Reset چیست و چطور میتوانید از آن استفاده کنید.

امتیاز مقاله
  • کیفیت فایل آموزشی
  • کاربردی بودن مطالب
  • اجرایی بودن مطالب
  • نحوه تدریس
۴.۸
درحال ارسال
امتیاز دهی کاربران
۰ (۰ رای)

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

مهدی خسروی

۸ سال پیش که یادگیری برنامه نویسی رو آغاز کردم، با یک مشکل بزرگ مواجه شدم: کمبود منابع آموزشی حرفه‌ای و کاربردی به زبان فارسی. به همین دلیل، بعد از چندین سال فعالیت حرفه‌ای در زمینه‌ی برنامه نویسی، تصمیم گرفتم دانسته‌ها و تجربیات خودم را با شما عزیزان به اشتراک بگذارم. پیشنهاد میکنم به آدرس yadify.com/gifts حتما سر بزنید :)

۴ دیدگاه

  • سلام سایت شما توی گوگل کروم رسپانسیوش مشکل داره.
    و البته توی IE هم همینطور فقط توی مزیلا فایرفاکس درست نمایش داده میشه.

    • سلام مسعود عزیز
      اگر بتونید از نحوه نمایش سایت در مرورگرهایی که می‌فرمایید مشکل دارن یک Screenshot بگیرید و به ایمیل info@yadify.com بفرستید بسیار ممنون میشم.
      خیلی دوست دارم این مشکل رو متوجه بشم و برای برطرف کردن اون اقدام کنم.

      • سلام
        البته من این مشکل رو ۲ بهمن خدمتتون اعلام کردم و یکی دو روز بعد درست شده بود الان هم ۱۱ بهمن توی همه مرورگرها چک کردم که مشکلی نبود.فک میکنم اون موقع مشغول بروز رسانی چیزی بودید درسته؟ بهر حال خسته نباشید و سپاس برای وقتی که برای آموزش کاربراتون میزارین.

درج دیدگاه

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.