HTML/CSS/CSS Attributes and Javascript Style Properties/media

Материал из Web эксперт
Перейти к: навигация, поиск

"media" Example

   <source lang="html4strict">
   

<html> <head> <style type="text/css"> @media print {

  body { 
     font-family: Verdana; 
     font-size: 14pt; 
  }

} </style> </head> <body>

(body content)

</body> </html>


     </source>
   
  


@media print

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

   <head>
       <title>print</title>
       <style rel="stylesheet" type="text/css">

@media print {

   p {
       width: 2in;
       padding: 0.25in;
       border: 1pt solid black;
       text-align: justify;
   }

}

       </style>
   </head>
   <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu massa. Phasellus est eros, malesuada vel, tempus quis, pharetra at, lacus. Ut sit amet libero. Aliquam erat volutpat. Morbi erat. Nunc et purus vitae tortor sodales auctor. Nulla molestie. Pellentesque ante mauris, tristique ac, placerat sit amet, placerat nec, ante. Vestibulum interdum. Donec vitae tellus. Aliquam erat volutpat. Aenean dictum dolor ut sem.

   </body>

</html>

</source>
   
  


@media screen

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

   <head>
       <title>print</title>
       <style rel="stylesheet" type="text/css">

@media screen {

   p {
       width: 200px;
       height: 200px;
       padding: 10px;
       margin: 10px;
       border: 1px solid gold;
       background: yellow;
       overflow: auto;
       text-align: justify
   }

} @media print {

   p {
       width: 2in;
       padding: 0.25in;
       border: 1pt solid black;
       text-align: justify;
   }

}

       </style>
   </head>
   <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu massa. Phasellus est eros, malesuada vel, tempus quis, pharetra at, lacus. Ut sit amet libero. Aliquam erat volutpat. Morbi erat. Nunc et purus vitae tortor sodales auctor. Nulla molestie. Pellentesque ante mauris, tristique ac, placerat sit amet, placerat nec, ante. Vestibulum interdum. Donec vitae tellus. Aliquam erat volutpat. Aenean dictum dolor ut sem.

   </body>

</html>

</source>
   
  


media="screen" in style tag

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

   <head>
       <title>print</title>
       <style rel="stylesheet"
             type="text/css"
             media="screen"
             >

p {

   width: 200px;
   height: 200px;
   padding: 10px;
   margin: 10px;
   border: 1px solid gold;
   background: yellow;
   font: 12px sans-serif

}

       </style>      
   </head>
   <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu massa. Phasellus est eros, malesuada vel, tempus quis, pharetra at, lacus. Ut sit amet libero. Aliquam erat volutpat. Morbi erat. Nunc et purus vitae tortor sodales auctor. Nulla molestie. Pellentesque ante mauris, tristique ac, placerat sit amet, placerat nec, ante. Vestibulum interdum. Donec vitae tellus. Aliquam erat volutpat. Aenean dictum dolor ut sem.

   </body>

</html>

</source>