topic

We print rationally or one more way of protection of the information

Today we shall talk how to make so that to display one web-page, and at a seal of this page on the printer the result was a little bit others. And it is done{made} with help CSS.

In CSS there is one very useful function: you can specify for the same HTML-element different ways of display at a seal and at show in a browser. For the best understanding we shall consider the following example:

CSS-file (style.css):

@media screen {

p {solor: *000000;}

}

@media print {

p {color: *ff0000;}

}

HTML-file (index.html):

<html>

<body>

<p> hello </p>

</body>

</html>

Now at viewing HTML-page in a browser you will see word Hello of black color. However try to unpack{print out} this page on the color printer, and word Hello will be painted in red color.

We benefit

Now we shall a little change a CSS-file:

CSS-file (style.css):

@media screen {

p {display: block;}

}

@media print {

p {display: none;}

}

What will be, if we again shall open in a browser, and then we shall unpack{we shall print out} a HTML-file? In a browser the text will be easy displayed, and at a seal the user will receive a pure{clean} sheet of a paper. It also is one more way of protection of the information.

However sometimes such protection is not necessary. We shall see a real example: it is necessary to make on a site page, for convenient listing materials (without excessive registration). Thus somewhere on web-page there will be button " Seal ". And so, I think, that it is necessary to clean{remove} her from the printed version. That we do{make} in CSS:

CSS-file (style.css):

@media screen {

input {display: block;}

}

@media print {

input {display: none;}

}

And still it is possible to add the text that « Clause{Article} is downloaded from site Site. Ru ». Here it is better to make all on the contrary-v a browser of her no, and at a seal - is.

Final CSS-file (style.css):

@media screen {

input {display: block;}

p.advert {display: none;}

}

@media print {

input {display: none;}

p.advert {display: block;}

}

HTML-file (index.html):

<html>

<body>

<p class=advert> the Page is downloaded from site Site. Ru </p>

… here there is a text which should be unpacked{be printed out} …

</body>

</html>

Actually, you can see an example of such realization at me on a site: http: // web-build.info/print.php? type=html*id=1102500209. On page below it is visible a line « the Seal:: To close » which is not printed, but above pages it is not visible lines « Clause{Article} it is downloaded from web-portal Web-Build. Info » which will appear at a seal.

Sometimes, it is not necessary to use given function CSS only for protection of the information. At times it is necessary to present some data at a seal in a little bit other kind. However, how to use - decide.