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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۳۰ آبان ۱۳۹۵

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

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

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

*, *:before, *:after {
  box-sizing: border-box;
}

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

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

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

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

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

.nav li {
  border-right: 1px solid #666;
}

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

.nav li:last-child {
  border-right: none;
}

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

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

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

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

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

body {
  line-height: 1.5;
}

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

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

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

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

یا علی

Source

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !