[Học CSS] Bài 06: Các đơn vị đo kích thước trong CSS

Trong bài này chúng ta sẽ cùng tìm hiểu về đơn vị đo kích thước trong CSS và thực hiện một số ví dụ liên quan đến sử dụng các đơn vị đo này.

Các đơn vị đo kích thước trong CSS

Trong CSS có hai loại đơn vị đo kích thước là: đơn vị đo tuyệt đối và đơn vị đo tương đối. Cụ thể như sau:

  • Đơn vị đo tuyệt đối: Là đơn vị đo với giá trị không đổi khi thay đổi kích thước màn hình hay độ phân giải màn hình chẳng hạn. Chúng ta có 02 đơn vị thường dùng đó là: px (pixel) và pt (1.0 icnh = 72pt = 2,54 centimet)
  • Đơn vị đo tương đối: Là đơn vị đo có giá trị thay đổi khi kích thước màn hình thay đỏi chẳng hạn. Chúng ta có các đơn vị thường dùng là: % , em,.. Ví dụ ta đặt kích thước mặc định của tất cả văn bản trong HTML là 14px, tiếp theo ta chọn kích thước thẻ H1 là 140% thì chữ trong thẻ H1 sẽ to hơn cỡ chữ bình thường (1.4 *14)px. Còn 1em ngang bằng với kích cỡ font hiện hành, ví dụ font hiện hành là 14px thì cái font của thẻ nào đó mình đặt là 2em thì nó sẽ có kích thước là (2*14)px .

Ví dụ: Sử dụng đơn vị tương đối % để thiết lập kích thước font chữ to hơn gấp đôi (200%) so với cỡ chữ đã định 16px.

Các bạn thử thay giá trị 200% thành các giá trị khác xem sao nhé ! Ví dụ 100% thì nó sẽ có kích thước ban đầu là 16px, nếu 500% thì nó sẽ nhân lên gấp 5 lần.

Tương tự ta thực hiện ví dụ làm tăng kích thước ban đầu lên gấp đôi như sau:

Rất đơn giản chúng ta chỉ cần thay đoạn 200% thành 2em thì nó sẽ tự hiểu là phải nhân đôi kích thước đã định lên rồi.

Bài này chỉ bao nhiêu đây thôi, sau này chúng ta sẽ sử dụng các đơn vị đo kích thước rất nhiều trong bố trí và trình bày layout của website. Công việc này đòi hỏi sự tính toán tỉ mỉ rất cao, do đó các bạn lưu ý nội dung này nhé, tuy đơn giản nhưng rất quan trọng.

Bài học trước đó và tiếp theo

[Học CSS] Bài 06: Các đơn vị đo kích thước trong CSS
5 (100%) 1 vote
- TÁC GIẢ BÀI VIẾT -

Hocban.vn

Tác giả tại Tịnh Nguyễn Blog
Bài viết bạn vừa xem được thực hiện bởi Tịnh Nguyễn, một thanh niên đẹp zai chuẩn sói ca, có sở thích vọc vạch về máy tính và Internet, hiện tại là ác min của Hocban.vn. Đây là các bài viết của anh ấy !
Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )