HTML/CSS/Style Basics/media
Содержание
- 1 insert a page break before an element by using page-break-before:always
- 2 insert a page break in the document for printing purposes.
- 3 Language ISO subcode
- 4 Link two style files, one for screen, one for print
- 5 media="all"
- 6 media="Screen"
- 7 The media attribute lets you control what styles are applied to whichmedia.
- 8 these rules will only apply when printing
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>