ترفندهای حرفه ای CSS ProTips (جلسه 7) : استایل پیش فرض برای لینک و استفاده از rem و em

- visibility ٠ mode_comment

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

مشخص کردن استایل یش فرض برای لینک

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

همونطور که خودتون هم متوجه شدید اومدیم و اون لینکهایی که ویژگی href براشون تعریف شده رو انتخاب کردیم و گفتیم که اگر کلاسی برای اون تعریف نشده بود، یک استایل برای اون اعمال بشه. حالا دیگه هر لینکی که قرار بگیره، اگر کلاسی رو نداشته باشه، بصورت اتوماتیک استایلهای بالا برای اون اعمال میشن.

استایل دهی به Broken Image

همونطور که میدونین زمانی که تصاویر با مشکلی مواجه میشن، یک استایل نامناسب به جای اونا نمایش داده میشه. این استایل در مرورگرهای مختلف هم با هم دیگه متفاوته. شما با استفاده از یک روش ساده و با CSS میتونین این مشکل رو تا حد زیادی حل کنید. برای اینکار کد زیر رو برای img قرار میدیم:

حالا باید استایلی رو برای کلاسهای کاذب قرار بدیم که ظاهر مورد نظر ما رو بوجود بیارن. خوبی این کلاسهای کاذب اینه که تنها زمانی که برای تصویر مشکل به وجود بیاد، نمایش داده میشن. برای اینکار کد زیر رو قرار میدیم:

بهمین راحتی میتونیم این کار رو انجام بدیم. اخیرا مطلبی در سایت قرار گرفته و این کار و ترفند رو بصورت کامل و با جزئیات بیشتر آموزش داده. شما میتونین از اون استفاده کنید و ظاهر سایتتون رو بهتر کنید.

استفاده از rem برای Global و استفاده از em برای Local

بعد از اینکه اندازه فونت پایه یا base خودتون رو درون المنت ریشه بصورت html { font-size: 100%; } مشخص کردید، برای مشخص کردن المنتهای متنی از em استفاده کنید، مثل:

برای المنتهای کلی و بزرگتر که بقیه رو درون خودشون جا میدن از rem استفاده کنید:

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

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

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

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

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

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