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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش CSS (فصل سیزدهم - جلسه اول) : خصوصیت Media

22313 ۱۳ خرداد ۹۲

Media چیست؟


در یک سند HTML برخی قسمت های صفحه مخصوص پرینت گرفتن می باشند و باید از style مربوط به print پیروی کنند و بعضی دیگر از قسمت ها از جمله navigation سایت نیازی به print ندارند و میتوناد از هر نوع style ای استفاده کند.
از این رو css چندین خصوصیت برای کنترل نحوه ی نمایش سند در رسانه های (media) مختلف فراهم می کند.
برای هدف قرار دادن رسانه های مختلف باید از صفت media در تگ <link> یا در تگ style استفاده کرد یا درون قواعد نوشته شده ی css میتوان از قاعده ی @media برای نشان کردن رسانه های مختلف استفاده کرد.
مثال :

 

انواع media

انواع مختلف media عبارت اند از

  • all : مخصوص تمامی deviceها
  • braille : استفاده برای deviceهای مخصوص نابینایان
  • embossed : استفاده برای printer های مخصوص خط braille
  • handheld : استفاده برای device های جیبی و قابل حمل مثل tabletها
  • print : این مقدار برای ارائه ی style به printer استفاده میشود. (در مروگرها می توان از قسمت print preview برای مشاهده ی یک صفحه در این حالت استفاده کرد.)
  • projection : استفاده برای ویدئو پروژکتورها
  • screen : مخصوص نمایش در صفحه نمایش کامپیوتر
  • tv : استفاده برای تلویزیون

مقدار پیشفرض : all
فقط مقادیر screen , print و all در مرورگرها به صورت گسترده پشتیبانی می شوند.

استایل print


مثال : کد html

و کد css :

حال کد رو در مرورگر اجرا کنید، و سپس دکمه ی CTRL+P رو بزنید تا به حالت print preview بروید، خواهید دید که دقیقا متون در حالت print همانند حالت screen هست.

حال ما میخواهیم برای حالت print یک استایل متفاوت بنویسم
کد زیر رو به کدهای css اضافه کنید :

نتیجه print-preview

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

کد css :

کد بالا تعیین می کند که پس از تگ a در داخل پرانتر مقدار صفت href آن لینک را قرار دهد.
نتیجه در مرورگر :

بسیار خب آموزش این جلسه نیز به پایان رسید، در جلسه بعدی با طراحی برای device های موبایل و tablet آشنا خواهیم شد.

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

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

  • ‏‏

    هرچه زودتر بهتر

  • ‏‏

    این که media=”print” رو تو link بذاریم،() دیگه نمیتونیم از استایل خارجی استفاده کنیم.باید تو همون کدcss بنویسیم media@ بعد کدو بزنیم.درست نمیگم؟

    • ‏‏
      سجاد دریس(۵ شهریور ۱۳۹۲)

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

      • ‏‏

        دقیقا کد زیر رو میزنم


        ولی css از کار میفته و فقط قالب html نشون داده میشه

        • ‏‏
          سجاد دریس(۶ شهریور ۱۳۹۲)

          وقتی صفت media رو برابر با print قرار می دین، استایل مربوطه برای حالت پرینت قالب در نظر گرفته میشه.
          مقدار print رو به screen تغییر بدین.

  • ‏‏

    بسیار جالب بود

  • ‏‏

    سلام من یک عکس دارم سایز a5 می خوام در سایز a5 چاپ بشه ولی کوچکتر از سایز میشه از تگ img استفاده کردم و با بک گراند هم امتحان کردم ولی باز هم کوچیکتر میشه چکار باید کنم؟ ممنون میشم کمکم کنید

    • ‏‏
      سجاد دریس(۶ دی ۱۳۹۲)

      خب هنگام استفاده از تگ img براش از صفت های height و width هم استفاده کنید.

  • ‏‏
    mahdi tajik(۲۹ دی ۱۳۹۲)

    سلام
    به سواله من در انجمن رسیدگی نشده خواهش میکنم پیگیری کنید .

  • ‏‏

    با سلام و تشکر از شما
    خواستم بگم وقتی این مقاله را به صورت pdf دانلود میکنم قسمت های کدداخل pdf بهم ریخته و به صورت کد هستن لطفا pdf این مقاله را اصلاح کنید

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram