HTML/CSS/Style Basics/media — различия между версиями

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

Текущая версия на 08:17, 26 мая 2010

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

 

<!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>
  <div class="page-break-before">Page break before this element.</div> 
</body>
</html>



insert a page break in the document for printing purposes.

 
<!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>
  <div class="page-break-after">Page break after this element. </div> 
  <div class="page-break-after">Page break after this element. </div> 
  <div class="page-break-before">Page break before this element.</div> 
</body>
</html>



Language ISO subcode

 

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



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

 
<!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>
<h1>Welcome!</h1>
</body>
</html>



media="all"

 
<!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>
<h1 style="font-family: Times; font-size: .95em;">
Aftermath</h1>
<p><em>this is a test. </em></p>
<p>this is a test. ,<br />
this is a test. </p>
</body>
</html>



media="Screen"

 
<!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">
#internal {
width: 200px;
height: 100px;
background: #999999;
overflow: auto;
}
</style>
</head>
<body>
    <div id="internal">
        <p>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. </p>
    </div>
</body>
</html>



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

 
      <!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>
              <p id="screen">
              this is a test. this is a test. 
               
              </p>
           </body>
      </html>



these rules will only apply when printing

 
<!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>
<h1>Print Styles</h1>
<ul id="nav">
  <li><a href="#">Nav Item 1</a></li>
  <li><a href="#">Nav Item 2</a></li>
  <li><a href="#">Nav Item 3</a></li>
</ul>
<form id="search">
  <input type="text" />
  <input type="submit" value="Search" />
</form>
<div id="content">
  <p>This is a test. <a href="http://www.s.ru">This is a test. </a>.  </p>
  
  <p><code>This is a test. </code>.</p>
</div>
<div id="sidebar">
  <p>This is a test. .</p>
</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/media&oldid=5935»