Đơn vị đo lường trong CSS 04 WDI Blog

Tìm hiểu về các đơn vị đo lường trong CSS7 phút đọc

Xin chào các bạn.Đây tiếp tục là một bài viết nữa trong series “Học CSS cơ bản” trên WDI Blog.Bài viết lần này sẽ giải thích kĩ về các đơn vị đo lường trong CSS để các bạn phân biệt và sử dụng chúng một cách hợp lý nhất.

Khi chỉ định kích thước chữ cho website bạn thường sử dụng loại đơn vị đo lường nào trong CSS ?

Như ví dụ trên đây mình đã chị định đơn vị px cho kích thước chữ viết.Ngoài đơn vị px ra thì bạn cũng có thể chỉ định những đơn vị khác như %, em hay rem.

Những bạn nào mới làm quen với CSS hay những bạn chỉ quen sử dụng đơn vị px thì nhất định phải đọc bài viết này.Vì qua bài viết này bạn sẽ hiểu rõ cách sử dụng một số đơn vị đo lường trong CSS.

Một số loại đơn vị đo lường trong CSS

Danh sách một số loại đơn vị đo lường trong CSS bao gồm :

  • px : chỉ định kích thước tuyệt đối
  • % : chỉ định kích thước tương đối (dựa trên yếu tố cha mẹ)
  • em : chỉ định kích thước tương đối (cũng dựa trên yếu tố cha mẹ)
  • rem : chỉ định kích thước tương đối (dựa theo yếu tố gốc)

Như bạn thấy có khá nhiều loại đơn vị đo lường trong CSS.Tuy nhiên nếu phân loại kĩ thì sẽ có hai loại chính đó là : đơn vị tuyệt đốiđơn vị tương đối.

Đơn vị tuyệt đối và đơn vị tương đối

Sự khác nhau giữa đơn vị tuyệt đốiđơn vị tương đối chắc nhiều bạn newbie vẫn chưa rõ nên mình sẽ giải thích qua nhé.

Đơn vị tuyệt đối

Đơn vị tuyệt đối là nói những đơn vị mà giá trị của nó không bị chi phối bởi những yếu tố khác.Ví dụ như trong đoạn mã CSS dưới đây, kích thước chữ luôn là 20px và không đổi trên mọi thiết bị.

Đơn vị tương đối

Đơn vị tương đối là nói những đơn vị mà giá trị của nó thay đổi do tham chiếu tới những yếu tố khác.Như đoạn mã CSS dưới đây, kích thước chữ luôn là 150%.Nghĩa là sẽ gấp 1.5 lần so với kích thước chữ của yếu tố cha mẹ chứa nó.

Tổng kết

  • px : sử dụng khi muốn hiển thị nguyên giá trị đã chỉ định trên mọi thiết bị khác nhau.
  • %, em, rem : sử dụng khi chỉ định giá trị mà giá trị đó sẽ tham chiếu đến giá trị của một yếu tố nào khác.Giá trị này sẽ thay đổi linh hoạt theo giá trị của yếu tố tham chiếu tới.

Ở phần kết quả trong mỗi ví dụ mình chỉ đưa ra hình ảnh chụp màn hình.Để hiểu rõ hơn bạn nên copy code về thực hành và xem sự khác nhau giữa các đơn vị đo lường trong CSS được giới thiệu trong bài này.

Giải thích kĩ về đơn vị px trong CSS

Đây có lẽ là đơn vị quá quen thuộc với nhiều bạn.Như mình có nói ở trên, đây là đơn vị sẽ làm cho kích thước được chỉ định giữ nguyên trên mọi thiết bị khác nhau.Như ví dụ dưới đây, dù mình có chỉ định giá trị font-size10px cho yếu tố cha mẹ là div.container thì yếu tố con bên trong nó là div.box cũng sẽ không bị ảnh hưởng gì cả.

HTML

CSS

Kết quả

Đơn vị đo lường trong CSS

Đơn vị đo lường trong CSS : px

Như bạn thấy kích thước chữ hiển thị cho yếu tố con div.box vẫn là 20px.

Giải thích kĩ về đơn vị % trong CSS

% là đơn vị tương đối.Giờ chúng ta làm ví dụ chỉ định kích thước chữ của yếu tố cha mẹ div.container10px và chỉ định kích thước chữ của yếu tố con div.box200% xem nhé.

HTML

CSS

Kết quả

Đơn vị đo lường trong CSS 02

Đơn vị đo lường trong CSS : %

Kết quả kích thước chữ của yếu tố con div.box bây giờ sẽ là 20px, tức là gấp hai lần so với kích thước chữ của yếu tố cha mẹ div.container bao bọc nó (10px).

Giải thích kĩ về đơn vị em trong CSS

Cách sử dụng đơn vị em cực kì đơn giản, giống với đơn vị % và cho kết quả tương tự với đơn vị %.

1em trong đơn vị em tương đương với 100% trong đơn vị %.

Ví dụ thay vì khai báo giá trị là 250% thì giờ chúng ta khai báo 2.5em là ok.

HTML

 

CSS

 

Kết quả 

Đơn vị đo lường trong CSS 03

Đơn vị đo lường trong CSS : EM

Kết quả thực tế kích thước chữ của yếu tố con div.box lúc này sẽ là 25px, tức là gấp 2.5 lần giá trị kích thước chữ đã chỉ định cho yếu tố cha mẹ div.container.

Giải thích kĩ về đơn vị rem trong CSS

Thực ra thì rem là viết tắt của root em.Vậy emrem có gì khác nhau.

  • em : chỉ định giá trị kích thước tương đối tham chiếu yếu tố cha mẹ
  • rem : chỉ định giá trị kích thước tương đối tham chiếu yếu tố gốc

Hai đơn vị này chỉ khác nhau một điều duy nhất ở trên mà thôi.Yếu tố gốc mà đơn vị rem tham chiếu tới đó chính là html.

Giờ chúng ta sẽ thử khai bao kích thước chữ cho các yếu tố HTML như dưới đây và xem kết quả nhé.

Yếu tố gốc (html) : [ font-size: 20px ]

Yếu tố cha mẹ (.container) : [font-size: 10px]

Yếu tố áp dụng (.box) : [font-size: 1rem]

HTML

CSS

Kết quả 

Đơn vị đo lường trong CSS 04

Đơn vị đo lường trong CSS : REM

Qua kết quả trên đây bạn thấy kích thước chữ thực của yếu tố con div.box giờ là 20px bằng đúng với yếu tố gốc html (20px).

Việc sử dụng đơn vị em hoàn toàn được nhưng nếu website của bạn phân cấp lớn, khó quản lý thì tốt nhất là nên sử dụng đơn vị rem cho an toàn.Sau này nếu muốn thay đổi kích thước toàn bộ các yếu tố trên website thì chỉ việc thay đổi kích thước đã được khai báo trong yếu tố gốc là html.

Kết luận

Bạn lưu ý là ở những ví dụ trong bài này mình chỉ đề cập đến kích thước chữ viết để bạn dễ hiểu vì font-size là thuộc tính gần gũi nhất với bạn.

Ngoài thay đổi kích thước chữ ra bạn có thể áp dụng kiến thức về đơn vị đo lường trong CSS để thay đổi giá trị kích thước của rất nhiều thuộc tính khác như : margin, padding, width, height…vv.

Trong CSS còn một số đơn vị đo lường khác nữa nhưng đó đều là những kiến thức nâng cao và mình sẽ giới thiệu đến các bạn trong thời gian tới.Hi vọng qua bài viết này bạn sẽ nắm rõ những đơn vị đo lường cơ bản nhất trong CSS và sử dụng linh hoạt thành thạo chúng.

Bài viết trước

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x