تبلیغات

آموزش ایجاد فایل CSS Reset و کاربرد آن در طراحی وب

آموزش ایجاد فایل CSS Reset و کاربرد آن در طراحی وب

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


 

CSS Reset چیست و چه کاربردی دارد؟
تا حالا پیش آمده که یک فایل HTML ایجاد کرده و بدون اضافه کردن هیچ نوع استایل، آن را در یک مرورگر باز کنید؟ اگر این کار را انجام داده باشید حتما متوجه شده اید که مرورگر ها، هر یک دارای استایل های پیشفرضی برای عناصر مختلف موجود در یک صفحه HTML هستند و هرگاه که استایلی توسط طراح برای یک عنصر خاص در نظر نگرفته شده باشد، مرورگر از استایل های پیشفرض خود جهت نمایش آن عنصر خاص استفاده میکند. مثلا اکثر مرورگر ها، لینک ها را به رنگ آبی و لینک های مشاهده شده را به رنگ بنفش نشان میدهند و یا اندازه های پیشفرض خاصی را برای تگ های h1, h2 و … در نظر میگیرند. دقیقا به همین دلیل است که مثلا دکمه های ارسال در هر مرورگر، شکل و رنگ خاص خود را دارند. به عنوان یک طراح، احتمالا یکی از اهداف مهم شما این است که سایتی که طراحی میکنید، در همه ی مرورگر ها، شکل و شمایل و نمایی یکسان داشته باشد. دقیقا همینجاست که فایل CSS Reset کاربرد پیدا میکند. هدف از ایجاد این فایل این است که تمامی استایل های پیشفرض مرورگر را به یک حالت صفر یا نال برگردانیم تا مطمئن شویم اگر عنصری در سایت بدون استایل بماند، در تمامی مرورگر ها، نمایی کاملا یکسان خواهد داشت. بدیهی است که آنچه در این فایل تعریف میکنیم، فقط یک استایل پایه ای است و بعدا در فایل های استایل اصلی، نمای عناصر را به دلخواه بازنویسی خواهیم کرد.


 

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


ایجاد فایل reset.css مخصوص HTML5
فایل ریست بالا هیچ ایرادی ندارد ولی این کد در رابطه با صفحاتی که قرار است به طور کامل با HTML5 طراحی شوند، بهینه سازی شده و 100 درصد کاربردی نیست. بنابراین بهتر است برخی از تگ ها مانند acronym, center یا big را از آن حذف کنیم و یا برای برخی تگ ها مانند abbr, dfn یا mark استایل های اختصاصی تر و بهتری تعریف کنیم. بنابراین برای استفاده در HTML5 بهتر است کد زیر را در فایل CSS Reset خود به کار ببرید :

در پایان به این نکته توجه ویژه داشته باشید که در زمان اجرای استایل ها، استایلی که در آخر تعریف شده، اولویت بالاتری نسبت به استایل های اولیه دارد. بنابراین فایلی که در آخر قرار بگیرد، کلیه ی استایل های قبلی خود را بازنویسی خواهد کرد. با در نظر داشتن این تعریف، بدیهی است که فایل ریست میبایست در ابتدای استایل ها فراخوانی شده و استایل های اصلی، پس از این فایل فراخوانی شوند. در غیر این صورت حتی استایل های اصلی شما نیز با فایل ریست بازنویسی خواهند شد …

تبلیغات
0
کانال تلگرام فول کده
تبلیغات

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

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس و دانشجوی ارشد رشته شبیه‌ساز هوشمند - در حال نوشتن یه رمان (اگه خدا بخواد و تموم شه ?)

پاسخ دهید

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

نظرات ثبت شده بدون دیدگاه