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. @import
There 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