Thuộc tính <link media> của HTML được dùng để chỉ định loại thiết bị mà tài nguyên (thường là file CSS) nên được tối ưu hóa cho. Như vậy bạn có thể có các stylesheet CSS khác nhau cho các mục đích khác nhau.
Thuộc tính media nhận một số giá trị, phổ biến nhất là:
all: mặc định, áp dụng cho mọi loại thiết bị media.screen: cho màn hình máy tính, tablet, smartphone — bất kỳ màn hình nào.print: cho chế độ xem trước in và trang in.
Vì vậy thực tế, bạn có thể có các stylesheet CSS khác nhau được tối ưu cho screen và print tương ứng.
Ví dụ:
<head> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> </head>Trong ví dụ trên:
- Phần tử
<link>đầu tiên không chỉ định loại media, nghĩa là nó dùng thuộc tínhmedia="all"mặc định (áp dụng cho mọi loại media). Nó không hiển thị, nhưng nó có đó. - Phần tử
<link>thứ hai dùng thuộc tínhmedia="screen", nghĩa là stylesheet này được tối ưu cho màn hình. - Phần tử
<link>thứ ba dùng thuộc tínhmedia="print", nghĩa là stylesheet này được tối ưu cho in/xem trước in.