Sử dụng đơn vị do trong CSS

Giới thiệu nội dung bài viết

Chào các bạn,hôm nay anh sẽ hướng dẫn mọi người cách sử dụng đơn vi đo là như thế nào?

1. Đơn vị do

Trong css hỗ trợ cho chúng ta các đơn vị đo như inches, centimeters, phần trăm , em hoặc point

  • Ví dụ như ta muốn border của một table có kích thướt là 1px thì ta khai báo như sau.
1
   table { border :1px solid #C00; }

2. Đơn vị do phần trăm

Ví dụ anh mong muốn các chữ trong đoạn văn bản có chiều cao là 125% thì anh khai báo như sau

1
  p {font-size: 16pt; line-height: 125%;}

3. Đơn vị do centimeters

Ví dụ như anh mong muốn khoảng cách khối lệnh div là 2 cm thì anh khai báo như sau

1
div { margin-bottom: 2cm;}

4. Đơn vị do em

Ví dụ anh mong muốn khoảng cách giữa các ký tự trong đoạn văn là 7em.

1
p {letter-spacing: 7em;}

5. Đơn vị do ex

Ví dụ anh muốn kích thước của fornt chữ cho chiều cao trong một đoạn văn bản

1
p {font-size: 24pt; line-height: 3ex;}

6. Đơn vị do in

Ví dụ anh muốn khoảng cách giữa các từ trong một văn bản cách nhau 15 inches

1
p {word-spacing: .15in;}

7. Đơn vị do milimeters

Ví dụ anh muốn khoảng cách giữa các từ trong một văn bản cách nhau 15 milimeters

1
p {word-spacing: .15mm;}

8. Đơn vị do pica

1 pica sẽ bằng 12 points do đó 6 pica sẽ tương ứng là 1 inch. Ví dụ anh muốn kích thướt font chữ trong đoạn văn bản là 20 pica.

1
p {font-size: 20pc;}

9. Đơn vị do point

Một point sẽ tương ứng với 1/72 inch. Ví dụ anh muốn font chữ có kích thướt 18pt

1
body {font-size: 18pt;}

10. Đơn vị do pixel

Ví dụ anh muốn khoảng cách của đoạn văn bản cách lề là 25 pixel.

1
      p {padding: 25px;}

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments