Media type is a very useful attribute in CSS2. Media types allow you to specify different styles for different devices.
W3C lists ten media types in total, as shown in the table:
| Value | Device Type |
|---|---|
| all | All devices |
| Braille | Braille tactile feedback device for the blind |
| Embossed | Braille typewriter |
| Handheld | Portable device |
| Printing paper Or print preview view | |
| Projection | Various projection equipment |
| Screen | Computer monitor |
| Speech | Voice or Audio Synthesizer |
| TV | Television Type Device |
| Tty | Media that use a fixed density letter grid, such as teletypewriters and terminals |
Where screen, all, print are the three most common media types.
link method: Introduce the media type when the tag references the style, and specify it through the media attribute Different media types.
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
xml method: Similar to the media type introduced by link, it is also specified through the media attribute.
<?xml-stylesheet type="text/css" media="screen" href="style.css">
@import method: @import is one of the methods used to reference style files, and can also be used to reference types. @importThere are two main ways to introduce media types.
One is to call another file through @import in the style file;
@import url(style.css) screen;
The other is to introduce it in the tag
