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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

32 ترفند کاربردی css که بهتر است آنرا بدانیم...! قسمت دوم

5 6736 ۲۶ فروردین ۹۳
1 2

با سلام خدمت تمام دوستان و اعضای خانواده سون لرن با قسمت دوم آموزش ترفنده های css در خدمت شما عزیزان هستم و امیدوارم که از قسمت اول این آموزش بهره لازم رو برده باشید.

 

17-نشانگر دست (pointer) در css:

تمام لینک ها در اسناد وب زمانی که کاربر نشانگر موس را روی آن می برند شکل یک دست را نمایش می دهند  حال اگر شما بخواهید سایر عناصر سند که قابلیت کلیک دارن هم این نشانگر با رفتن روی آنها نمایش داده شود کافیست که از الگوی زیر پیروی کنید.

 

18-نوشتن تمام حروف یک متن با حروف بزرگ:

ممکن است شما بخواهید تمام حروف تیتر سند خود را تماما با حروف بزرگ نمایش دهید برای اینکار کافیست از کد زیر برای متون مورد نظر خود استفاده نمایید (این ترفند برای سایت هایی با حروف لاتین کاربرد دارد)

 

19-نوشتن تمام حروف یک متن با حروف بزرگ با این تفاوت که سایز سایر حروف متن از حرف اول آن کوچکتر خواهد بود:

از این کد به ندرت استفاده میشه اما جز یکی از ترفند ها و قابلیت های خوب css می باشد و برای استفاده از آن کافیست از کد زیر برای متون خود استفاده کنید.

 

20-تغییر رنگ فیلد های ورودی از هر نوع در حالت انتخاب(focus):

برای متمایز ساختن فیلد های ورودی اطلاعات در سند در حالت انتخاب (focus) کافیست از الگوی زیر استفاده کنید. همچنین می توانید سایر پراپرتی هایی مثل  shadow رو نیز براش قرار دهید.(توجه داشته باشید که این حالت با عرض شرمندگی, خجالت و تاسف باز هم در IE کار نخواهد کرد).

 

21-حذف border تصاویر:

زمانی که شما از یک تصویر بعنوان لینک استفاده می کنید برای متمایز ساختن آن از سایر تصاویر سند یک border ناخوشایند بصورت خودکار به آن افزوده می شود توسط کد زیر می توانید تمام تگ های a که مخصوص لینک ها هستند و دارای تصویر نیز می باشند را از شر این border خلاص کنید.

 

22-ایجاد فرم توسط css و lable و بدون استفاده از جداول:

form

مدت زیادی از منسوخ شدن استفاده از جداول در طراحی اسناد وب می گذرد از جمله عوامل عدم استفاده از جداول می توان به سنگین کردن اسناد وب در هنگام لود و عدم index شدن محتوای آن توسط مرورگر ها و موتورهای جستجو اشاره کرد با این حال css برای جبران این قضیه راهکار های مفیدی دارد و همچنین می توانیم توسط label ها فرم های انعطاف پذیر تری ایجاد کنیم در کد زیر توسط کد های html و css نمونه ای ساده از یک فرم رو می تونید مشاهده و از آن الگو برداری کنید در ضمن تصویر بالا فرمی است که توسط کد های زیر ایجاد شده و واضح است که این روش  بسیار بهتر و انعطاف پذیر تر نسبت به ایجان آن با جداول و تگ table است.

کدهای Html:

 

کدهای css:

 

23-انتخاب یک مبنای مناسب برای کل فونت های مورد استفاده در سند:

قرار دادن اندازه مناسب 62.5% برای فونت های سند و در تگ body باعث خواهد شد که 1em برابر 10px باشه اینکار باعث میشه که شما به راحتی از em برای اندازه فونت ها استفاده کنید و بدانید که 1em برابر 10px خواهد بود.

 

24-متمایز کردن تگ های acronym و (abbr (abbreviations

از تگ acronym برای قرار دادن علامت های اختصاری در ابتدای کلمات و از تگ abbr برای نوشتن کلمات و توضیحات اختصاری در اسناد وب استفاده می شود و هدف از  استفاده از آنها دادن اطلاعاتی خاص به مرورگر ها و موتور های جستجو می باشد.متاسفانه اغلب مرورگرها بجر فایرفاکس این تگ ها رو بصورت highlight و متمایز از سایر عناصر نمایش نمی دهند با این حال جای نگرانی نیست چونکه توسط css و کدهای زیر به راحتی می توانیم اینکار را انجام دهیم.

 

 

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

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

  • ‏‏
    حسین محمدی(۲۷ فروردین ۱۳۹۳)

    تشکر از این دو آموزش عالی
    یک سوال
    cursor های غیر استاندارد که میخواهیم خودمون لودشون کنیم باید چه فرمتی داشته باشند؟؟فرمتی که همه ی مرورگرها پشتیبانی کنند…

  • ‏‏
    reza nasrollahi(۲۷ فروردین ۱۳۹۳)

    به نام خدا
    مثمر ثمر واقع شد
    ممنون

  • ‏‏

    سلام
    ممنون از مطلب مفیدتون ❓
    برای اینکه بک گراند سایت یک عکس ثابت باشه و در صورت نیاز مطالب روی بک گراند اسکرول بشند(مثل همین سایت سون لرن) چه کارکنیم؟

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram