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

- visibility ٣۵ mode_comment

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 آشنا خواهیم شد.

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

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

سجاد دریس

ارسال شد

......

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

سجاد دریس

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

......

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


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

سجاد دریس

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

امیر

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

mina

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

سجاد دریس

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

mahdi tajik

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

کیوان علی محمدی

رسیدگی شد.

mn25999

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

لقمان آوند

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

mn25999

با سلام
بله مشکل حل شد
ممنون

نیاز به لاگین

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