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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 221 ۱۴ آذر ۹۵

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram