Có cách nào để sử dụng cùng một biểu định kiểu CSS cho phương tiện in và bố cục mặc định không?

Question

Tôi đang tìm cách sử dụng cùng một bản định kiểu cho phương tiện in như đối với bố cục trên màn hình mặc định. Lợi thế của tôi là tôi sẽ không phải cập nhật 2 tệp mỗi khi tôi cập nhật CSS. Tôi muốn có một bản định kiểu và chỉ định các quy tắc đặc biệt cho phương tiện in bằng cách biểu thị bằng cách nào đó ... Có thể điều đó không thể, nhưng tôi nghĩ tôi sẽ đặt câu hỏi ở đó.

Answer 1

Có cú pháp này, mặc dù tôi thật sự không biết nếu nó được hỗ trợ trên tất cả các trình duyệt (cần):

@media print { 
    body { 
     background: #fff; 
     color: #000; 
    } 
    /* etc */ 
} 

Xem media part of the CSS2 standard at W3.

Answer 2

Nếu bạn muốn kiểu giống nhau trên tất cả phương tiện, chỉ cần xác định kiểu phổ biến trong biểu định kiểu như bình thường (nghĩa là không có bất kỳ quy tắc truyền thông nào), sau đó đặt phần tử phương tiện cụ thể trong các quy tắc có liên quan.

Nếu bạn muốn có một số phong cách để áp dụng cho một tập hợp con của phương tiện truyền thông, bạn có thể làm điều đó như thế này:

@media print { 
    body { font-size: 10pt } 
} 
@media screen { 
    body { font-size: 13px } 
} 
@media screen, print { 
    body { line-height: 1.2 } 
} 

Dưới đây là một liên kết đến relevant W3C page