HTML/CSS/Style Basics/media
Содержание
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>
</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>
</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">
- 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>