Shulou(Shulou.com)06/01 Report--

This article is about how CSS uses media types. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Depending on the Web site, page errors can occur in unexpected forms, such as layout folding when printing, but in the media type, you can set it to avoid it, which means you can create pages for printing, pages output to the projector, and so on.

How do I use CSS media types?

Media types can be written in two ways.

The first way

The second way

@ mediascreen {

/ * content of screen * /

}

The first one uses the CSS that changes the application based on the media type.

The second is the settings written for each media type in CSS

Because it is sometimes difficult to change when there is a lot of CSS code, it is recommended to use the first approach, but this time we will take the second way as an example to introduce the CSS media type.

Let's first take a brief look at several media types commonly used in CSS

Screen (screen)

Print (print)

Tv (TV)

Projection (projector)

All (all)

When using two media types, you can separate them with commas. Let's take a look at a specific example.

The code is as follows

HTML code

Media Typ

Sample

The background color will change depending on the media.

Screen: normal display: # d9534f (red)

Print: display when printing: # 5bc0de (blue)

CSS code

Sample.css

@ mediaall {

P {

Color:#000000

}

}

@ mediaprint {

Body {

Color:#5bc0de

}

}

@ mediascreen {

Body {

Color:#d9534f

}

}

Thank you for reading! This is the end of this article on "how to use Media types in CSS". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.