قانون media@ در CSS چیست؟
قانون media@ در CSS امکان تعریف قوانین Style مختلف برای انواع مختلف رسانه ها را فراهم کرد.
مباحث فصل پنجم آموزش CSS
- قانون @Media در CSS چیست؟
- انواع Media
- نحوه استفاده Media
قانون @media در CSS چیست؟
با استفاده از این قانون شما قادرید که برای هر قالبی استایل های متفاوتی تعریف نماید.
بطور مثال در یک سند HTML برخی از قسمت های صفحه به منظور پرینت گرفتن میباشد شما باید برای آن قسمت استایل که مربوط به Print میشود را تطبیق نماید و یا بعضی از قسمت ها از جمله Navigation سایت ضرورت به print ندارد و در این صورت میتوانید یک استایل دیگر را تعریف کنید.
برای هدف قرار دادن مدیا های مختلف باید از صفت Media در تگ Link یا در تگ Style و یا هم میتوانید در درون قواعد نوشته شدهء CSS از قاعده media@ برای نشان کردن مدیا های مختلف استفاده نمایید.
انواع Media
در زیر شما لیست از انواع Media ها را میبینید که شما میتوانید نظر به ضرورت از آنها استفاده نمایید.
- All : این مقدار مخصوص تمامی آله ها میباشد.
- Aural : این نوع مدیا مخصوص آله های صوتی میباشد.
- Barille : این نوع مدیا مخصوص به آله های نابیانیان میشود.
- Embossed : این نوع مدیا مخصوص برای چاپ خط های Braille استفاده میشود.
- Handheld : این نوع مدیا برای آله های قابل حمل از قبیل Tablet استفاده میشود.
- Print : این نوع مدیا برای ارایه استایل به Printer استفاده میشود. در مرورگرها میتوان از قسمت Print Preview ویا print برای مشاهده یک صفحه در حالت Print استفاده کنید.
- Projection : این نوع مدیا برای ویدیو پروژکتور ها استفاده میشود.
- Screen : این نوع مدیا مخصوص نمایش کامپیوتر میباشد.
- TV : این نوع مدیا مخصوص نمایش در تلویزیون ها میباشد.
نکته ۱ : مقدار پیشفرض Media مقدار all میباشد که در تمام آله ها یکسان نمایش میدهد.
نکته ۲ : در مرورگر های تنها مقادیر Print,Screen,All بصورت گسترده پشتیبانی میشود.
نحوه استفاده از قانون media@ در CSS
قسمی که قبلاً گفتیم برای هدف قرار دادن مدیا های مختلف باید از صفت Media در تگ Link یا در تگ Style و یا هم میتوانید در درون قواعد نوشته شدهء CSS از قاعده @media برای نشان کردن مدیا های مختلف استفاده نمایید.
حال میرویم بصورت نمونه میخواهیم به یک قسمت از صفحه را که برای پرنت استفاده میشود یک استایل مشخص تعریف نمایم.
برای درک بهتر در زیر از دستور HTML و CSS یکجا استفاده میکنیم.
<head>
<style>
@media screen {
P{
Font-family: verdana, sans-serif;
Font-size:17 px;
Color:red;
}
}
@media print {
P,div {
Font-family:Georgia, serif;
Font-size:14px;
Color: blue;
}
}
</style>
</head>
<body>
<p> Amozesh CSS3 </p>
<div> This is a test text that used to print </div>
</body>
حالا نتیجه دستور بالا در مرورگر Opera به شکل زیر است.
نتیجه زیر دیزاین متن بدون استفاده از قانون media print@ میباشد.
نتیجه زیر دیزاین متن بعد از استفاده از قانون media print@ میباشد.
البته شما میتوانید با استفاده از کلید های ctr+p صفحه چاپ صفحه را تماشا نماید.
امیدوارم از این آموزش خوشتان آمده باشد ، می توانید مقاله بعدی ما در رابطه با آموزش های CSS با عنوان ” گروه بندی و کنار هم قرار دادن عناصر صفحه با تگ های Span و Div ” را بخوانید.
دیدگاه ها