آموزش Media Types در CSS

انواع رسانه ها در CSS

با بهره گیری از انواع media، یک صفحه می تواند یک طرح ویژه ی صفحه نمایش ، یکی برای چاپ، یکی مختص دستگاه های دستی و ... داشته باشد .
برخی از خصوصیت ها تنها ویژه ی یک نوع خاص media تعبیه شده اند . به عنوان مثال می توان به "voice-family" اشاره کرد که به عنوان user agent (به نرم‎افزاری گفته می‎شود که به نمایندگی از طرف کاربر عمل می‎کند) شنیداری عمل می کند .
برخی دیگر از خصوصیت های CSS را می توان برای دیگر media type ها مورد استفاده قرار داد . برای مثال, خاصیت "font-size" را می توان برای هر دو رسانه های مربوط به صفحه نمایش (screen) و چاپی (print) مورد استفاده قرار داد اما با مقادیری متفاوت . یک سند معمولاً بر روی صفحه نمایش در مقایسه با کاغذ به font-size بزرگ تری نیاز دارد . قلم نوشته ها (فونت) sans-serif را بهتر می توان روی صفحه نمایش خواند, این در حالی است که فونت های serif را بهتر می توان روی کاغذ خواند .

دستور @media

دستور @media امکان تعریف قوانین گوناگون سبک دهی (style rule) برای انواع مختلف media در یک صفحه ی سبک دهی واحد (style sheet) را برای طراح وب ایجاد می کند .
کد CSS که در مثال زیر بکار گرفته شده, به مرورگر دستور می دهد نوشته را با فونت Verdana در اندازه یا با مقیاس 17 پیکسل بر روی صفحه نمایش نشان دهد, ولی در صورت چاپ شدن صفحه بر روی کاغذ نوشته را با رنگ آبی و فونت Georgia به اندازه ی 14 پیکسل نمایش دهد .

        @media screen {
            p {
                font-family: verdana, sans-serif;
                font-size: 17px;
            }

جدول زیر دیگر انواع media که در CSS کاربرد دارند را فهرست کرده :