HTML/CSS/Style Basics/media

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

insert a page break before an element by using page-break-before:always

   <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"> <head> <title></title> <style type="text/css" media="print">

  • .page-break-before {
 page-break-before: always;

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

Page break before this element.

</body> </html> 

</source>


insert a page break in the document for printing purposes.

   <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"> <head> <title></title> <style type="text/css" media="print">

  • .page-break-before {
 page-break-before: always;

}

  • .page-break-after {
 page-break-after: always;

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

Page break after this element.
Page break after this element.
Page break before this element.

</body> </html> 

</source>


Language ISO subcode

   <source lang="html4strict">

Language ISO Subcode Danish for Denmark da_DK German for Austria de_AT German for Switzerland de_CH German for Germany de_DE English for Canada en_CA English for Denmark en_DK English for Great Britain en_GB English for Ireland en_IE English for the US en_US French for Canada fr_CA Hungarian for Hungary hu_HU Italian for Italy it_IT Japanese for Japan ja_JP Greenlandic for Greenland kl_GL Lithuanian for Lithuania lt_LT Latvian for Latvia lv_LV Dutch for the Netherlands nl_NL Polish for Poland pl_PL Portuguese for Portugal pt_PT 

</source>


Link two style files, one for screen, one for print

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Linked Style Sample</title> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" /> </head> <body>

Welcome!

</body> </html> 

</source>


media="all"

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Combination Style Sheet Example</title> <style type="text/css" media="all"> h1 { 

   font: .85em Verdana;
   color: blue;

) p { 

   font: .95em Verdana;

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

Aftermath

this is a test.

this is a test. ,
this is a test.

</body> </html> 

</source>


media="Screen"

   <source lang="html4strict">

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

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

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  1. internal {

width: 200px; height: 100px; background: #999999; overflow: auto; } </style> </head> <body>

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

</body> </html> 

</source>


The media attribute lets you control what styles are applied to whichmedia.

   <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>media</title>
           <style rel="stylesheet" type="text/css" media="all">
             p {
                 font: 12px sans-serif;
                 background: yellow;
                 padding: 10px;
             }
             @media screen {
                 p#print {
                     display: none;
                 }
                 p#screen {
                     border: 10px solid gold;
                 }
             }
           
           </style>
         </head>
         <body>

this is a test. this is a test. 

          </body>
     </html>
</source>


these rules will only apply when printing

   <source lang="html4strict">

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

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

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

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Print Styles</title>
 <style type="text/css" media="print">
 body { 
   font-family: "Times New Roman", serif; 
   font-size: 12pt; 
 } 
 
 #nav, #sidebar, #search { 
   display: none; 
 } 
 
 a:link, a:visited { 
   color: blue; 
   text-decoration: underline; 
 } 
 
 #content a:link:after, #content a:visited:after { 
   content: " (" attr(href) ") "; 
 } 
 
 </style>

</head> <body>

Print Styles

<form id="search"> 

 <input type="text" />
 <input type="submit" value="Search" />

</form>

This is a test. <a href="http://www.s.ru">This is a test. </a>.

This is a test. .

</body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/media&oldid=5935»