মিডিয়া নির্ভরশীল স্টাইলশীটগুলি শুধুমাত্র মৌলিক স্টাইলশীট তবে শুধুমাত্র html নথিতে প্রযোজ্য হয় যখন মিডিয়াটাইপ ডিভাইসের প্রকারের সাথে মেলে যে নথিতে দৃশ্যমান হয়৷
আমরা −
পদ্ধতি অনুসরণ করে মিডিয়া নির্ভরশীল স্টাইলশীট তৈরি করতে পারি- @media At-রুল ব্যবহার করা হচ্ছে
- @import At-রুল ব্যবহার করা হচ্ছে
- মিডিয়া অ্যাট্রিবিউট সহ HTML উপাদান ব্যবহার করা
উদাহরণ
মিডিয়া নির্ভরশীল স্টাইলশীট -
তৈরি করার জন্য একটি উদাহরণ দেখা যাকHTML নথি
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="screen.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> </head> <body> <div></div> </body> </html>
CSS নথি (screen.css)
div {
height: 50px;
width: 100px;
border-radius: 20%;
border: 2px solid blueviolet;
box-shadow: 22px 12px 3px 3px lightblue;
position: absolute;
left: 30%;
top: 20px;
} CSS নথি (print.css)
div {
height: 50px;
width: 100px;
border-radius: 20%;
border: 2px solid #dc3545;
box-shadow: 22px 12px 3px 3px #dc3545;
position: absolute;
left: 30%;
top: 20px;
} আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবেযখন ডকুমেন্ট একটি স্ক্রীন মিডিয়াটাইপ −
এ দৃশ্যমান হয়
যখন নথি একটি প্রিন্ট মিডিয়াটাইপে দৃশ্যমান হয় −
উদাহরণ
মিডিয়া নির্ভরশীল স্টাইলশীট −
তৈরি করার জন্য আরেকটি উদাহরণ দেখা যাক<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
background-origin: content-box;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 3px black;
padding: 20px;
background-origin: border-box;
}
@media screen and (max-width: 900px) {
p{
background: url("https://www.tutorialspoint.com/android/images/android.jpg");
color: #c303c3;
}
}
@media screen and (max-width: 500px) {
p {
color: black;
background: url("https://www.tutorialspoint.com/react_native/images/react-native.jpg");
}
}
</style>
</head>
<body>
<p>This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবেযখন পর্দার আকার 500px-
এর উপরে হয়
যখন পর্দার আকার 500px-
এর নিচে হয়
