css_media.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
  2. <link rel="stylesheet" media="screen, projection" href="css/linkdisplay.css">
  3. <link rel="stylesheet" media="print" href="css/linkprint.css">
  4. <link rel="stylesheet" media="all" href="css/linkall.css">
  5. <link rel="stylesheet" href="css/linkdefault.css">
  6. <style>
  7. @page { margin:1cm; color:#0000ff; font-family:sans-serif;}
  8. @media print {
  9. p.media {background-color:#eeeeee;}
  10. }
  11. @media screen {
  12. p.media {background-color:#c0c0ff;}
  13. }
  14. @media projection {
  15. p.media {background-color:#ffffc0;}
  16. }
  17. @import url(css/importall.css);
  18. @import url(css/importprint.css) print;
  19. @import url(css/importdisplay.css) projection, screen;
  20. @import url(css/importsub.css);
  21. @import url(/absimagetest/importabs.css);
  22. body { background-color:#eeeeee; margin:0pt; padding:1cm; border:0.5pt solid red; }
  23. </style>
  24. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
  25. </head>
  26. <body>
  27. <h1>css @media media types</h1>
  28. <p class="media">
  29. Depending on dompdf_config.inc.php setting DOMPDF_DEFAULT_MEDIA_TYPE here the
  30. background color appeares different:
  31. </p>
  32. <ul>
  33. <li>print: light gray</li>
  34. <li>screen: light blue</li>
  35. <li>projection: light yellow</li>
  36. </ul>
  37. <h1>css @import media types</h1>
  38. <p class="import">
  39. Depending on dompdf_config.inc.php setting DOMPDF_DEFAULT_MEDIA_TYPE here the
  40. background color appeares different:
  41. </p>
  42. <ul>
  43. <li>print: light gray</li>
  44. <li>screen or projection: light blue</li>
  45. <li class="import">all: this line yellow</li>
  46. </ul>
  47. <p class="importsub">yellow by import css from subfolder</p>
  48. <p class="importabs">yellow by import css from absolute local folder.
  49. Note: Only works if www\test\images/importabs.css was copied to /absimagetest/importabs.css
  50. </p>
  51. <h1>css link media types</h1>
  52. <p class="link">
  53. Depending on dompdf_config.inc.php setting DOMPDF_DEFAULT_MEDIA_TYPE here the
  54. background color appeares different:
  55. </p>
  56. <ul>
  57. <li>print: light gray</li>
  58. <li>screen or projection: light blue</li>
  59. <li class="link">all: this line yellow background with red color</li>
  60. </ul>
  61. <p>x</p>
  62. <p>x</p>
  63. <p>x</p>
  64. <p>x</p>
  65. <p>x</p>
  66. <p>x</p>
  67. <p>x</p>
  68. <p>x</p>
  69. <p>x</p>
  70. <p>x</p>
  71. <p>x</p>
  72. <p>x</p>
  73. <p>x</p>
  74. <p>x</p>
  75. <p>x</p>
  76. <p>x</p>
  77. <p>x</p>
  78. <p>x</p>
  79. <p>x</p>
  80. <p>x</p>
  81. <p>x</p>
  82. <p>x</p>
  83. <p>x</p>
  84. <p>x</p>
  85. <p>x</p>
  86. <p>x</p>
  87. <p>x</p>
  88. <p>x</p>
  89. <p>x</p>
  90. <p>x</p>
  91. <p>x</p>
  92. <p>x</p>
  93. <p>x</p>
  94. <p>x</p>
  95. <p>x</p>
  96. <p>x</p>
  97. <p>x</p>
  98. <p>x</p>
  99. <p>x</p>
  100. <p>x</p>
  101. <p>x</p>
  102. <p>x</p>
  103. <p>x</p>
  104. <p>x</p>
  105. <p>x</p>
  106. <p>x</p>
  107. <p>x</p>
  108. <p>x</p>
  109. <p>x</p>
  110. <p>x</p>
  111. <p>x</p>
  112. <p>x</p>
  113. <p>x</p>
  114. <p>x</p>
  115. <p>x</p>
  116. <p>x</p>
  117. <p>x</p>
  118. <p>x</p>
  119. <p>x</p>
  120. <p>x</p>
  121. <p>x</p>
  122. <p>x</p>
  123. <p>x</p>
  124. <p>x</p>
  125. <p>x</p>
  126. <p>x</p>
  127. <p>x</p>
  128. <p>x</p>
  129. <p>x</p>
  130. <p>x</p>
  131. <p>x</p>
  132. <p>x</p>
  133. <p>x</p>
  134. <p>x</p>
  135. <p>x</p>
  136. <p>x</p>
  137. <p>x</p>
  138. </html>