Pixel là gì?

Pixel là đơn vị đo lường trong CSS, thường sử dụng cho các thuộc tính như width, height, font-size,... Bên dưới là cách sử dụng đơn vị pixel trong code CSS để thiết lập độ rộng (width) 150 pixel cho cho thẻ (tag) div.

div {
  width: 150px;
}

Thuật ngữ "pixel" thực sự là viết tắt của "Picture Element". Pixel chính là thứ tạo nên hình ảnh trên màn hình máy tính. Màn hình được chia thành một ma trận hàng nghìn hoặc thậm chí hàng triệu pixel. Thông thường, bạn không thể nhìn thấy các pixel riêng lẻ vì chúng quá nhỏ. Đây là một điều tốt, bởi vì hầu hết mọi người thích nhìn vào những hình ảnh mượt mà, rõ ràng hơn là những hình ảnh có khối, bị "pixel hóa". Tuy nhiên, nếu bạn đặt màn hình của mình ở độ phân giải thấp, chẳng hạn như 640x480 và nhìn kỹ vào màn hình, bạn có thể thấy từng pixel riêng lẻ. Như bạn có thể đã đoán, độ phân giải 640x480 bao gồm một ma trận 640 x 480 pixel, hay nói cách khác có tổng cộng 307.200 pixel.

Mỗi pixel chỉ có thể là một màu tại một thời điểm. Tuy nhiên, vì chúng rất nhỏ, các pixel thường pha trộn với nhau để tạo thành các sắc thái và sự pha trộn màu sắc khác nhau. Số lượng màu sắc của mỗi pixel có thể được xác định bởi số lượng bit được sử dụng để biểu diễn nó. Ví dụ: màu 8 bit cho phép hiển thị từ 2 đến 8 hoặc 256 màu. Ở độ sâu màu (color depth) này, bạn có thể nhìn thấy "hạt" hoặc màu đốm khi một màu hòa trộn với màu khác. Tuy nhiên, ở độ sâu màu 16, 24 và 32 bit, sự pha trộn màu sắc rất mượt và, trừ khi bạn có một số khả năng thị giác siêu nhạy, bạn sẽ không nhìn thấy bất kỳ hạt nào.