خانه / مقالات اموزشی / css / آموزش CSS Media چیست؟
آموزش CSS
آموزش CSS

آموزش CSS Media چیست؟

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

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 هست.
1x1.trans آموزش CSS (فصل سیزدهم   جلسه اول) : خصوصیت Media
حال ما میخواهیم برای حالت print یک استایل متفاوت بنویسم
کد زیر رو به کدهای css اضافه کنید :
نتیجه print-preview
1x1.trans آموزش CSS (فصل سیزدهم   جلسه اول) : خصوصیت Media
اگر دقت کرده باشید، بعضی مواقع در هنگام پرینت یک صفحه html لینک ها غیر فعال می شوند، و دیگر معلوم نیست که این متن، به کدام صفحه لینک شده است، پس حتما راهی برای نمایش دادن آدرس لینک ها باشد، در css خصوصیتی به نام content وجود دارد، که از ان برای اضافه کردن متنی به ابتدا یا انتهای متن موجود استفاده می شود.
مثال کد html
کد css :
کد بالا تعیین می کند که پس از تگ a در داخل پرانتر مقدار صفت href آن لینک را قرار دهد.
نتیجه در مرورگر :
1x1.trans آموزش CSS (فصل سیزدهم   جلسه اول) : خصوصیت Media
بسیار خب آموزش این جلسه نیز به پایان رسید، در جلسه بعدی با طراحی برای device های موبایل و tablet آشنا خواهیم شد.

درباره آموزشگاه نوین آی تی

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

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

دیدگاهتان را بنویسید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net