illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6335 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

ترفندهای حرفه ای CSS ProTips (جلسه 1) : مقدمه و CSS Reset

2 166 ۲۹ آبان ۹۵

در این مطلب و مطالب بعدی قصد داریم تعدادی ترفند و روش حرفه ای برای CSS خدمتتون عرض کنیم. با مطالعه و یادگیری این موارد سطح کدنویسی CSS شما بالاتر خواهد رفت و میتونین کدهای حرفه ای تری رو برای سایت خودتون قرار بدین. برای هر ترفند یا روش یا آموزش، نمونه هایی هم قرار داده میشه تا بتونین به خوبی اونا رو درک کنید.css protips

مواردی که در این دوره بیان خواهند شد:

  • Use a CSS Reset
  • Inherit box-sizing
  • Use :not() to Apply/Unapply Borders on Navigation
  • Add line-height to body
  • Vertically-Center Anything
  • Comma-Separated Lists
  • Select Items Using Negative nth-child
  • Use SVG for Icons
  • Use the "Lobotomized Owl" Selector
  • Use max-height for Pure CSS Sliders
  • Equal-Width Table Cells
  • Get Rid of Margin Hacks With Flexbox
  • Use Attribute Selectors with Empty Links
  • Style "Default" Links
  • Consistent Vertical Rhythm
  • Intrinsic Ratio Boxes
  • Style Broken Images
  • Use rem for Global Sizing; Use em for Local Sizing
  • Hide Autoplay Videos That Aren't Muted
  • Use :root for Flexible Type
  • Set font-size on Form Elements for a Better Mobile Experience

استفاده از CSS Reset

استفاده از CSS Reset کمک میکنه که استایل و کدهای شما در همه مرورگرها به یک صورت نمایش داده بشن و رفتار یکسانی داشته باشن. شما میتونین از کتابخانه های موجود در این زمینه شبیه به reset و Normilize استفاده کنید یا میتونین خودتون یک کد ساده برای reset کردن رو قرار بدین. کد زیر رو در نظر بگیرید:

البته کتابخانه های reset و Normilize تفاوتهایی هم با هم دارن و اهدافشون با هم فرق میکنه. بصورت ساده میشه گفت که reset همه مقادیر رو 0 میکنه و یا به حالت اولیه برمیگردونه اما Normilize کاری میکنه که یک المنت در همه مرورگرها به یک صورت نمایش داده بشه و تفاوت ظاهری نداشته باشن. همونطور که در کد بالا دیدید برای همه المنتها یا *، margin و padding رو برابر با 0 قرار دادیم و همچنین با استفاده از ویژگی box-sizing کاری کردیم که به راحتی بتونیم از CSS Box Model استفاده کنیم و محاسبات از border المنت انجام بشه. در ترفند بعدی به موردی اشاره میکنیم که در اون استفاده از box-sizing بهینه تر خواهد شد.

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

در جلسات بعدی با ادامه ترفندها در خدمتتون هستیم.

امیدوارم از این جلسه خوشتون اومده باشه.

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

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    Masoud Azimi(۱ آذر ۱۳۹۵)

    ممنون بابت این بخش…
    حتماً بخش کاربردی و مفیدی خواهد بود :smile:

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram