Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

สื่อประเภทต่างๆ ใน ​​CSS


CSS Media Types คือประเภทอุปกรณ์ที่ใช้แสดงเอกสาร และสามารถกำหนดรูปแบบเฉพาะสำหรับสื่อทุกประเภทได้

ต่อไปนี้คือประเภทสื่อใน CSS3 และ Media Queries 4 -

ซีเนียร์ คุณค่าและรายละเอียด
1 ทั้งหมด
สไตล์ชีตใช้กับอุปกรณ์ประเภทสื่อทั้งหมด
2 พิมพ์
สไตล์ชีตใช้กับเครื่องพิมพ์
3 หน้าจอ
สไตล์ชีตใช้กับหน้าจอคอมพิวเตอร์ แท็บเล็ต สมาร์ทโฟน ฯลฯ
4 คำพูด
สไตล์ชีตใช้กับโปรแกรมอ่านหน้าจอที่ "อ่าน" หน้าดังกล่าว

หมายเหตุ −สื่อหลายประเภท (เช่น aural, braille, emboss, handheld, projection, ttv และ tv) เลิกใช้แล้วใน Media Queries 4 และไม่ควรใช้ ประเภทของหูฟังถูกแทนที่ด้วยประเภทสื่อเสียงพูด

มาดูตัวอย่างการจัดรูปแบบหน้าจอและประเภทสื่อสิ่งพิมพ์กัน −

เอกสาร 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 document (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;
}

ผลลัพธ์

เมื่อเอกสารปรากฏอยู่ในประเภทสื่อหน้าจอ −

สื่อประเภทต่างๆ ใน ​​CSS

เมื่อเอกสารปรากฏอยู่ในสื่อสิ่งพิมพ์ −

สื่อประเภทต่างๆ ใน ​​CSS

มาดูตัวอย่างอื่นสำหรับการจัดแต่งหน้าจอและประเภทสื่อสิ่งพิมพ์กัน −

เอกสาร HTML

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(screen.css) screen;
@import url(print.css) print;
</style>
</head>
<body>
<p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p>
<p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p>
<p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p>
</body>
</html>

เอกสาร CSS (screen.css)

p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew;}
CSS document (print.css):
p { color: red; font-style: italic;}
.two { color: #989898; font-size: 40px; }

ผลลัพธ์

เมื่อเอกสารปรากฏอยู่ในประเภทสื่อหน้าจอ −

สื่อประเภทต่างๆ ใน ​​CSS

เมื่อเอกสารปรากฏอยู่ในสื่อสิ่งพิมพ์ −

สื่อประเภทต่างๆ ใน ​​CSS