Media Type trong CSS - Tự học CSS3

CSS Media Typescho phép bạn định dạng nội dung trang web của mình để được trình bày chính xác trên nhiều loại thiết bị khác nhau như màn hình, bản in, … v.v.

Tóm Tắt

CSS Media Type là gì?

Media Types trong CSS

CSS Media Types là một trong số các tính năng quan trọng nhất của CSS là bạn có thể chỉ định các quy tắc CSS riêng biệt cho các kiểu thiết bị kết xuất / kiểu kết xuất khác nhau.

Ví dụ, kết xuất để trình diễn trên di động sẽ khác trên máy tính .

Kết xuất để in sẽ còn khác nữa.

Bạn đang đọc: Media Type trong CSS – Tự học CSS3

Sử dụng media type là một trong những cách tốt nhất để xây dựng các trang Web thân thiện với máy in – Chỉ cần gán một quy tắc CSS khác cho loại ‘print‘.

Một số thuộc tính CSS chỉ được phong cách thiết kế cho một số ít phương tiện đi lại nhất định. Ví dụ : page-break-after chỉ vận dụng cho phương tiện đi lại được phân trang .
Tuy nhiên, có 1 số ít thuộc tính hoàn toàn có thể được san sẻ bởi những loại phương tiện đi lại khác nhau, nhưng hoàn toàn có thể nhu yếu những giá trị khác nhau cho thuộc tính đó .
Ví dụ : Thuộc tính font-size hoàn toàn có thể được sử dụng cho cả màn hình hiển thị ( màn hình hiển thị ) và phương tiện đi lại in ( print ), nhưng hoàn toàn có thể với những giá trị khác nhau .
Một tài liệu thường cần một phông chữ lớn hơn trên màn hình hiển thị máy tính so với giấy để dễ đọc hơn, những phông chữ sans-serif ( không chân ) cũng được coi là dễ đọc hơn trên màn hình hiển thị, trong khi phông chữ serif ( có chân ) phổ cập để in .
Do đó, cần phải xác lập tập hợp những quy tắc CSS để vận dụng cho một số ít loại kiểu kết xuất nhất định .
Dưới đây là ba giải pháp thường được sử dụng để chỉ định những media type

Phương pháp 1: Sử dụng quy tắc @media

Quy tắc @media được sử dụng để xác định các quy tắc CSS khác nhau cho các loại Media khác nhau trong một biểu định kiểu.

Theo sau @media thường là các danh sách các loại media được phân tách bằng dấu phẩy và khối khai báo CSS chứa các quy tắc bạn mong muốn.

Khai báo kiểu trong ví dụ dưới đây nhu yếu trình duyệt hiển thị nội dung body toàn thân bằng phông chữ Arial 14 px trên màn hình hiển thị ( màn hình hiển thị ), nhưng trong trường hợp in, nó sẽ ở phông chữ Times 12 pt .

Tuy nhiên, giá trị của thuộc tính line-height được đặt thành 1.2 cho cả hai loại media:

Xem thêm: Hướng dẫn responsive web design – responsive trong css bằng scss

@media screen{
    body {
        color: #32cd32;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }
}
@media print {
    body {
        color: #ff6347;
        font-family: Times, serif;
        font-size: 12pt;
    }
}
@media screen, print {
    body {
        line-height: 1.2;
    }
}

Ghi chú : Các quy tắc CSS ngoài @ media sẽ vận dụng chung. @ media thì không hợp lệ trong CSS2. 1 .

Phương pháp 2: Sử dụng quy tắc @import

Quy tắc @import là một cách khác để thiết lập thông tin kiểu cho một phương tiện đích cụ thể.

Chỉ cần chỉ định những loại media được phân tách bằng dấu phẩy sau url ( ) của những file CSS được import .

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
    background: #f5f5f5;
    line-height: 1.2;
}

Kiểu media print trong câu lệnh @ import trên sẽ hướng dẫn trình duyệt tải một file CSS bên ngoài ( print.css ) và chỉ sử dụng những kiểu của nó khi in .
Lưu ý : Tất cả những câu lệnh @ import phải Open ở đầu, trước bất kể khai báo CSS nào. Nếu có quy tắc CSS xung đột, quy tắc ở file CSS hiện tại luôn được ưu tiên hơn quy tắc CSS được import .

Phương pháp 3: Sử dụng phần tử

Thuộc tính media trên phần tử được sử dụng để chỉ định loại media đích. Và áp dụng các quy tắc CSS được liên kết.

Trong ví dụ này, thuộc tính media chỉ thị cho trình duyệt tải một file CSS bên ngoài ‘screen.css‘ và chỉ sử dụng các quy tắc CSS của nó khi hiển thị trên màn hình.

Trong khi ‘ print.css ’ sẽ được sử dụng cho mục tiêu in ấn .
Mẹo : Bạn cũng hoàn toàn có thể chỉ định nhiều loại media ( mỗi loại được phân tách bằng dấu phẩy, ví dụ : media = “ màn hình hiển thị, print ” )

Các loại media khác

Bảng sau liệt kê các loại media khác nhau có thể được sử dụng để nhắm mục tiêu các loại thiết bị khác nhau như máy in, thiết bị cầm tay, màn hình máy tính, v.v.

Xem thêm: Tải xuống và cài đặt Bản cập nhật Java 8 291 – Guidesy

Loại Media	Mô tả
`all`	Sử dụng cho tất cả các loại media
`aural`	Sử dụng cho loại thiết bị tương tác giọng nói và âm thanh
`braille`	Sử dụng cho các thiết bị phản hồi xúc giác (chữ nổi)
`embossed`	Được sử dụng cho máy in chữ nổi phân trang
`handheld`	Được sử dụng cho các thiết bị nhỏ hoặc cầm tay – thường là các thiết bị màn hình nhỏ như điện thoại di động hoặc PDA.
`print`	Sử dụng cho máy in
`projection`	Được sử dụng cho các bài thuyết trình được chiếu, ví dụ máy chiếu.
`screen`	Được sử dụng chủ yếu cho màn hình máy tính màu
`tty`	Được sử dụng cho trong viễn thông, thiết bị đầu cuối hoặc thiết bị di động có khả năng hiển thị hạn chế.
`tv`	Được sử dụng cho các thiết bị loại tivi – màn hình có độ phân giải thấp, màu sắc, khả năng cuộn hạn chế, có sẵn âm thanh

Như vậy, qua bài này bạn đã biết cách tùy chỉnh CSS trên những loại thiết bị khác nhau, mục tiêu khác nhau .

Học tiếp: Thuộc tính Opacity trong CSS

Đọc thêm: Pesudo Element trong CSS

Source: https://final-blade.com
Category: Kiến thức Internet

admin

final-blade.com