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

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



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

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

23 8706 ۱۹ فروردین ۹۳
1 2

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

3-ایجاد شکست در محتوا برای چاپ بهتر صفحات توسط کاربر: شاید بعضی از کاربران وب سایت شما علاقمند باشند تا علاوه بر مطالعه محتوا از اون پرینت بگیرند توسط متد زیر در css شما میتونید براحتی نقاط شکست برای چاپ بهتر صفحات وب ایجاد کنید (منظور از نقاط شکست مکان هایی هست که می خواهید ادامه عملیات چاپ در برگه دیگری اتفاق بیفته) کافیه که کد زیر رو در سند css خودتون اضافه کنید و کلاس اون رو به متون یا پاراگراف های موجود در سند وبتون که تمایل داری در برگه (کاغذ) جدید چاپ بشه اضافه کنید.

4-استفاده از پراپرتی important! طراحان حرفه ای بخوبی با قابلیت این پراپرتی آشنایی دارن و ازش استفاده می کنن ولی افراد مبتدی اغلب اطلاع چندانی از کاربرد آن ندارند.توسط این پراپرتی شما می توانید بر روی نحوه اجرای کد ها تاکید کنید بطوری که پراپرتی که دارای important! باشد اجرای آن به سایر پراپرتی ها مشابه مقدم است.

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

مثال: گاهی اوقات ممکن است بخواهید به جای متن از تصویر استفاده کنید. به عنوان مثال فرض کنید که در بالای تمامی صفحات سایتتان، عبارت "سون لرن" وجود دارد و شما می خواهید که این عبارت را با یک فونت خیلی خاص نمایش دهید که هیچ مرورگری از آن پشتیبانی نمی کند. در این صورت، احتمالا تنها گزینه ای که وجود دارد این است که به جای متن فوق، یک تصویر قرار دهید. یک روش بدیهی این خواهد بود که به صورت زیر عمل کنید:

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

برای حل این مشکل می توان از تکنیک جایگذاری تصویر با متن استفاده کرد: متن را با کد عادی html می نویسیم و سپس به کمک css تصویر را با متن جایگزین می کنیم

اطمینان حاصل کنید که مقدار ارتفاع تصویر را به درستی مشخص کنید. با روش فوق، و استفاده از پراپرتی text-indent:-2000px متن 2000 پیکسل به سمت صفحه ی نمایش خواهد رفت و از صفحه خارج خواهد شد و دیگر نمایش داده نمی شود و به جای آن تصویر نمایش داده می شود. توجه کنید که این کار سبب می شود که کاربرانی که نمایش تصویر را در مرورگر خود غیر فعال کرده اند، قادر به مشاهده ی متن نخواهند بود   6-طبق معمول مانند بسیاری از ضعف های مرورگر اینترنت اکسپلورر(ie) این مرورگر پراپرتی min-height رو درک و تفسیر نمکنه برای حل این مشکل هم می تونیم از روش زیر در css استفاده کنیم.

در کدهای بالا مقدار height برابر با min-height در ie عمل می کنه... 7-متمایز کردن لینک های خاص از سایر لینک های موجود در سند کدهای زیر لینک هایی رو که قراره در یک پنجره جدید  باز و نمایش داده بشه رو از سایر لینک های سایت متمایز میکنه بعنوان مثال رنگ اونها رو میتونید متفاوت با رنگ سایر لینک ها در نظر بگیرید

حال می پردازیم به توضیح نکات کدهای بالا: به انتخابگر a[target="_blank"] توجه کنید. در CSS می توان تگ های html را بر اساس مقادیر خواص آن ها فیلتر کرد. برای این منظور همانطور که می بینید، مقدار خواص را در درون [] قرار می دهیم. در این دستور لینک هایی که دارای خاصیت target="_blank" هستند را انتخاب کرده ایم. یعنی لینک هایی که قرارا است که در یک تب جدید باز  شوند. به کلاس کاذب :before و :after توجه کنید. این دو کلاس، تگ خاصی را هدف نمی گیرند، بلکه فقط یک نقطه ی خالی در قبل یا بعد تگ مربوطه را انتخاب می کنند. به دستور content در CSS توجه کنید. به کمک دستور content می توان یک کاراکتر یا یک متن را در قبل یا بعد از یک تگ قرار داد. توجه کنید که دستور content فقط زمانی قابل استفاده است که از کلاس کاذب :after و یا :before استفاده شده باشد. در کد فوق، ما یک علامت \279C که به صورت یک فلش نمایش داده می شود در قبل و بعد لینک ها قرار داده ایم. 8-استایل دادن به لیست های مرتب (ol):

ol

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

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

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

  • ‏‏
    آزمایشگاه(۲۱ فروردین ۱۳۹۳)

    تشکر بسیار مفید و کاربردی بود

  • ‏‏

    ممنون از مطلب خوبتون

  • ‏‏
    داوود صندوقساز(۲۱ فروردین ۱۳۹۳)

    خیلی ممنون

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

    ممنون واقعا خوب بود. یه چیزی هم بگم معمولا برای تراز عمودی متن میشه از این روش هم رفت : اول display رو به مقدار table-cell تغییر دارد و بعد از طریق خصیصه vertical-align و مقدار middle متن رو در راستای عمودی وسط چین کرد.

    .p{
    	width : 80px;
    	height: 80px;
    	display: table-cell;
    	vertical-align: middle;
    }
    
  • ‏‏
    حامد مودی(۲۳ فروردین ۱۳۹۳)

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

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram