دليل مرجعي HTML

كامل قائمة العلامات HTML

خصائص media في style HTML

تحدد خاصية media كيفية تحسين أسلوب CSS للوسائط / الأجهزة المختلفة، وتستخدم هذه الخاصية لتعيين الأسلوب لوسائط أو أجهزة معينة (مثل iPhone)، صوت أو طباعة.

　HTML <style> علامة

مثال عبر الإنترنت

تحديد الأسلوب المستخدم للطباعة:

مثال

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>استخدام خاصية source media في HTML - درس أساسي (oldtoolbag.com)</title>
<style　media="print">
h1　{color:#000000;}
p　{color:#000000;}
body　{background-color:#FFFFFF;}
</style>
</head>
<body>
<h1>oldtoolbag.com　مثال</h1>
<p>إذا قمت بطباعة هذه الصفحة أو فتحها في عرض الطباعة، فستشاهد أن لها أسلوبًا يتم تعيينه باستخدام media = "print". يحتوي أسلوب "الطباعة" على نص أسود على خلفية بيضاء.</p>
</body>
</html>

النقر للاختبار

توافق المتصفحات

IEFirefoxOperaChromeSafari

جميع المتصفحات الرئيسية تدعم خاصية media.

التعريف والاستخدام

يحدد خاصية media ما هي الأجهزة/الوسائط التي تم تحسين نمط CSS لها
يستخدم هذا الخصائص لتعريف النمط المستخدم لأجهزة معينة (مثل iPhone)، أو وسائط صوتية أو كتابية
نصيحة: يمكن لهذا الخصائص قبول عدة قيم

الفرق بين HTML 4.01 و HTML5

لا يوجد.

النحو

<style media="value>

العمليات الممكنة

القيمة	الوصف
and	تحديد عملاق AND
not	تحديد عملاق NOT
,	تحديد عملاق OR

الجهاز

القيمة	الوصف
all	الافتراضي. يتكيف مع جميع الأجهزة
aural	المحول الصوتي
braille	أجهزة تقديم النصوص النقاطية للعميان
handheld	أجهزة محمولة (شاشة صغيرة، نطاق تردد محدود)
projection	المشروعور
print	عرض الطباعة المسبق / صفحة الطباعة
screen	شاشة الحاسوب (القيمة الافتراضية)
tty	الطابعات المبرمجة الكهربائية وأجهزة مشابهة تستخدم شبكة من الأحرف المتساوية
tv	أجهزة نوع التلفاز (دوليومية منخفضة، قدرات تحويل الشاشة محدودة)

القيمة

القيمة	الوصف
width	تحديد العرض للمنطقة المستهدفة يمكن استخدام بادئة "min-" و "max-". مثال: media="screen and (min-width:500px)"
height	تحديد الارتفاع للمنطقة المستهدفة يمكن استخدام بادئة "min-" و "max-". مثال: media="screen and (max-height:700px)"
device-width	تحديد العرض للشاشة المستهدفة/ورق يمكن استخدام بادئة "min-" و "max-". مثال: media="screen and (device-width:500px)"
device-height	تحديد الارتفاع للشاشة المستهدفة/ورق يمكن استخدام بادئة "min-" و "max-". مثال: media="screen and (device-height:500px)"
orientation	تحديد اتجاه الشاشة المستهدفة/ورق القيم الممكنة: "portrait" أو "landscape" مثال: media="all and (orientation: landscape)"
aspect-ratio	تحديد نسبة العرض/الارتفاع للمنطقة المستهدفة يمكن استخدام بادئة "min-" و "max-". مثال: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	تحديد نسبة device-width/device-height للشاشة المستهدفة/ورق يمكن استخدام بادئة "min-" و "max-". مثال: media="screen and (aspect-ratio:16/9)"
color	تحديد bits/color للشاشة المستهدفة يمكن استخدام بادئة "min-" و "max-". مثال: media="screen and (color:3)"
فهرس الألوان	تحديد عدد الألوان التي يمكن معالجتها من قبل جهاز العرض المستهدف. يمكن استخدام بادئة "min-" و "max-". مثال: media="screen and (min-color-index:256)"
ألوان سوداء وأبيض	تحديد bits/pixel في الذاكرة البصرية الواحدة. يمكن استخدام بادئة "min-" و "max-". مثال: media="screen and (monochrome:2)"
حلقة	تحديد كثافة البكسل للشاشة المستهدفة/ورق (dpi أو dpcm). يمكن استخدام بادئة "min-" و "max-". مثال: media="print and (resolution:300dpi)"
مسح	تحديد طريقة مسح جهاز العرض التلفزيوني. القيم الممكنة: "progressive" و "interlace". مثال: media="tv and (scan:interlace)"
شبكة	تحديد ما إذا كان جهاز الإخراج هو شبكة أو رسم بياني. القيم الممكنة: "1" للشبكة، وإلا فـ "0". مثال: media="handheld and (grid:1)"

　HTML <style> علامة

HTML: <template> علامة