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

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



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

ترفندهای حرفه ای CSS ProTips (جلسه 2) : استفاده از کلاس کاذب not و کار با line-height

0 153 ۳۰ آبان ۹۵

در این مطلب با ادامه ترفندهای حرفه ای CSS ProTips در خدمتتون هستیم.css protips

به ارث بردن box-sizing

همونطور که میدونید در بیشتر مواقع و همچنین در CSS Reset ها، ویژگی box-sizing رو برای همه المنتها برابر با border-box قرار میدیم تا بتونیم به راحتی از CSS Box Model استفاده کنیم و همه مقادیر نسبت به border حساب بشه. بیشتر جاها این کار رو بصورت زیر انجام میدن:

بهتر این کار رو بصورت دیگه ای انجام بدیم. اول این ویژگی رو برای html قرار میدیم و بعد از اون کد بالا رو مینویسیم و کاری میکنیم که اونو inherit کنه یا به ارث ببره.

با اینکار باعث میشیم که اگر پلاگینها یا اجزای دیگه بخوان رفتار دیگه ای داشته باشن، بتونن به راحتی این مقدار رو تغییر بدن.

استفاده از :not() برای گذاشتن و برداشتن border ها در منو

همونطور که میدونید و به احتمال زیاد به اون برخوردید، ما میایم و یک استایل رو برای همه اعضای منو قرار میدیم. مثلا میایم برای همه اعضای منو یک border قرار میدیم و قصد نداریم که این border برای مورد آخر اعمال بشه. برای اینکه اون border رو برای مورد آخر برداریم، یک کد دیگه مینوشتیم و اونو کنسل میکردیم. مثلا کد زیر رو در نظر بگیرید:

خب با اینکار به همه li های درون nav یک border راست اضافه خواهد شد. حالا برای اینکه این استایل رو برای li آخر حذف کنیم، بصورت زیر عمل میکنیم:

دیدید که با استفاده از کلاس کاذب last-child، مقدار border-right رو برابر با none قرار دادیم. اما شما میتونین به راحتی و تنها با قرار دادن یک کد اینکار رو انجام بدین. کد زیر رو در نظر بگیرید:

همونطور که دیدید با استفاده از کلاس کاذب not مشخص کردیم که این استایل برای همه li ها بجز last-child اعمال بشه. اینکار علاوه بر اینکه آسون و راحته، قابل توصیف توسط انسان هست. در اینجا میتونین مثالی از این مورد رو مشاهده کنید.

اضافه کردن line-height به body

لازم نیس که شما برای همه المنتهای p و h1 و ... بصورت جداگانه، ویژگی line-height رو مشخص کنید و کافیه که فقط یکبار و اونم برای المنت body، این ویژگی رو تعریف کنید و مقدار مورد نظرتون رو برای اون قرار بدین. با اینکار المنتهایی که متن درونشون قرار میگیره این ویژگی رو از body به ارث خواهند برد. کد زیر رو در نظر بگیرید:

میتونین در اینجا مثالی در این رابطه رو مشاهده کنید.

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

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

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

یا علی

Source

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram