جلسه 25 ام آموزش CSS : انواع media در CSS چیست؟

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

یکی از مهمترین ویژگی های صفحات استایل دهی ، این است که مشخص می کنند یک صفحه html ، در نمایشگرهای مختلف چگونه نمایش داده شود .

ما در حال حاضر برای اینکه مشخص کنیم ، فایل css را برای چه نمایشگری می نویسیم ، از روش های زیر استفاده می کنیم .

تعیین رسانه هدف با استفاده از دستورات @import یا @media .
تعیین رسانه های هدف با استفاده از اتریبیوت های html

روش استفاده از دستور @media

مثال زیر به شما نشان می دهد که چطور با استفاده از دستور @media ، رسانه های هدف را مشخص می کنند . در صورتی که بخواهیم چند رسانه را با استفاده از یک دستور @media ، هدف قرار دهیم ، آن ها را با استفاده از کاما از هم جدا می کنیم .

<style tyle="text/css">
   <!--
   @media print {
      body { font-size: 10pt }
   }
	
   @media screen {
      body { font-size: 12pt }
   }
   @media screen, print {
      body { line-height: 1.2 }
   }
   -->
</style>

روش استفاده از اتریبیوت media

در صفحه html ، شما می توانید فایل های css را با استفاده از تگ link ، بارگذاری کنید . تگ link دارای یک اتریبیوت مهم به نام media می باشد . شما با استفاده از این اتریبیوت می توانید رسانه هدف را برای فایل css ، مشخص کنید . حالا به مثال زیر توجه کنید .

<style tyle="text/css">
   <!--
   <!doctype html public "-//w3c//dtd html 4.0//en">
	
   <html>
	
      <head>
         <title>link to a target medium</title>
         <link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">
      </head>
		
      <body>
         <p>the body...
      </body>
		
   </html>
   -->
</style>

انواع رسانه های شناخته شده

نام هایی که برای رسانه های مختلف css انتخاب شده اند ، نام هایی هستند که رسانه های هدف را مشخص می سازند . در ادامه لیستی از انواع رسانه های مختلف را برای شما تهیه کرده ایم :

all : این مقدار به این معنی می باشد که کدهای css ، برای همه دستگاه ها نوشته شده اند .
aural : این مقدار به این معنی می باشد که کدهای css ، برای دستگاه های ترکیب کننده صدا مورد استفاده قرار می گیرید .
braille : این مقدار به این معنی می باشد که کدهای css ، برای دستگاه های بازخورد لمسی خط بریل ، نوشته شده اند .
embossed : این مقدار به این معنی می باشد که کدهای css ، برای دستگاه هایی که صفحات با خط بریل را چاپ می کنند ، نوشته شده اند .
handheld : این مقدار به این معنی می باشد که کدهای css ، برای دستگاه های کوچک قابل حمل ، نوشته شده اند .
print : این مقدار به این معنی می باشد که کدهای css ، برای پرینت گرفتن روی کاغذ ، تنظیم شده اند .
projection : این مقدار به این معنی مباشد که کدهای css ، برای وقتی که قرار است صفحه وب را از طریق پروژکتور نمایش بدهیم ، تنظیم شده اند .
screen : این مقدار به این معنی می باشد که کدهای css ، برای صفحه نمایش کامپیوترها نوشته شده اند .
tty : این مقدار به این معنی می باشد که کدهای css ، برای رسانه هایی مانند تله تایپ ، تنظیم شده اند .
tv : این مقدار به این معنی می باشد که کدهای css ، برای دستگاه هایی مانند تلویزیون نوشته شده اند .

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

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

جلسه 25 ام آموزش CSS : انواع media در CSS چیست؟

روش استفاده از دستور @media

روش استفاده از اتریبیوت media

انواع رسانه های شناخته شده

آیا نیاز به مدرک هم دارید؟