CSS मीडिया प्रकार वे उपकरण प्रकार हैं जिन पर दस्तावेज़ प्रस्तुत किया जाता है और प्रत्येक मीडिया प्रकार के लिए विशिष्ट शैलियों को परिभाषित किया जा सकता है।
CSS3 और मीडिया क्वेरीज़ 4 में मीडिया प्रकार निम्नलिखित हैं -
<टेबल> <थेड>स्टाइलशीट सभी मीडिया प्रकार के उपकरणों पर लागू होती है
स्टाइलशीट प्रिंटर पर लागू होती है
स्टाइलशीट कंप्यूटर स्क्रीन, टैबलेट, स्मार्ट फोन आदि पर लागू होती है।
स्टाइलशीट उन स्क्रीन पाठकों पर लागू होती है जो पृष्ठ को ज़ोर से "पढ़ते हैं"
नोट -कई मीडिया प्रकार (जैसे कि कर्ण, ब्रेल, उभरा हुआ, हैंडहेल्ड, प्रोजेक्शन, टीटीवी और टीवी) मीडिया क्वेरी 4 में बहिष्कृत हैं और उनका उपयोग नहीं किया जाना चाहिए। कर्ण प्रकार को वाक् मीडिया प्रकार से बदल दिया गया है।
आइए स्टाइलिंग स्क्रीन और प्रिंट मीडिया प्रकारों के लिए एक उदाहरण देखें -
एचटीएमएल दस्तावेज़
उदाहरण
सीएसएस दस्तावेज़ (स्क्रीन.सीएसएस)
div {ऊंचाई:50px; चौड़ाई:100 पीएक्स; सीमा-त्रिज्या:20%; सीमा:2px ठोस नीला बैंगनी; बॉक्स-छाया:22px 12px 3px 3px हल्का नीला; स्थिति:निरपेक्ष; बाएं:30%; शीर्ष:20px;}CSS दस्तावेज़ (print.css):div {ऊंचाई:50px; चौड़ाई:100 पीएक्स; सीमा-त्रिज्या:20%; सीमा:2px ठोस #dc3545; बॉक्स-छाया:22px 12px 3px 3px #dc3545; स्थिति:निरपेक्ष; बाएं:30%; शीर्ष:20px;} आउटपुट
जब दस्तावेज़ स्क्रीन मीडियाटाइप में दिखाई देता है -
जब दस्तावेज़ प्रिंट मीडियाटाइप में दिखाई देता है -
आइए स्टाइलिंग स्क्रीन और प्रिंट मीडिया प्रकारों के लिए एक और उदाहरण देखें -
एचटीएमएल दस्तावेज़
उदाहरण
<शरीर>विवामस कमोडो, डोलोर ईयू पोर्टिटर सैगिटिस, ओर्सी निस्ल कॉन्सेक्टेटूर इप्सम, वेल वॉलटपाट निभ लेक्टस एट एरेट। क्रैस स्केलेरिस्क फौसीबस टेलस एलिकम कमोडो। डोनेक सेम उरना, इप्सम आईडी पर फैसिलिसिस, विवरा सॉलिसिटुडिन एस्ट। नाम रोंकस सॉलिसिटुडिन लोरेम, एक एक्यूमसन पुरस वेरियस एगेट।
अल्ट्राइसिस लेक्टस निसी में। नुल्ला वेरियस एक्स यूटी टॉर्चर कॉन्ग्यू विवरा। सेड सोडालेस व्हीकल लियो, विटे इंटरडम एलीट व्हीकल नेक। डोनेक टर्पिस ननंक, इयाकुलिस एट निसी सिट एमेट, फ्यूगिएट लैकिनिया मेटस।
सस्पेंडिस एगेट लिगुला एट रिसस लोबोर्टिस ऑर्नायर आईडी एट एलीट। सस्पेंडिस पोटेंशियल। विवामस पेलेंटेस्क एलीफेंड पेलेंटेस्क। वेस्टिबुलम नेक एंटे, iaculis a sagittis et, fermentum at metus.
सीएसएस दस्तावेज़ (स्क्रीन.सीएसएस)
पी {रंग:नौसेना; फ़ॉन्ट-शैली:इटैलिक; }.दो {रंग:#c303c3; फ़ॉन्ट-आकार:20px; }शरीर {पृष्ठभूमि-रंग:हनीड्यू;}सीएसएस दस्तावेज़ (प्रिंट.सीएसएस):पी {रंग:लाल; फ़ॉन्ट-शैली:इटैलिक;}.दो {रंग:#989898; फ़ॉन्ट-आकार:40px; } आउटपुट
जब दस्तावेज़ स्क्रीन मीडियाटाइप में दिखाई देता है -
जब दस्तावेज़ प्रिंट मीडियाटाइप में दिखाई देता है -
